Las imágenes dan vida a sus publicaciones y páginas de WordPress haciéndolas más atractivas. Sin embargo, a muchos principiantes les cuesta alinear las imágenes como les gusta.
El nuevo editor de bloques de WordPress (Gutenberg) resuelve este problema al facilitar la adición y alineación de imágenes en WordPress.
En este artículo, le mostraremos cómo puede agregar y alinear imágenes fácilmente en WordPress para crear hermosos diseños de contenido.
Alineación de imágenes en el editor de WordPress
Anteriormente, WordPress usaba un área de texto con botones de edición como editor predeterminado. Un problema particular en el antiguo editor era la alineación de imágenes.
Aunque había opciones para alinear las imágenes a la izquierda, a la derecha o al centro, no siempre se veían bien. A veces, las imágenes no se alineaban, no tenían el tamaño exacto o simplemente se veían extrañas.
WordPress 5.0 introdujo un nuevo editor de publicaciones de WordPress llamado editor de bloques Gutenberg. Solucionó varios problemas con el editor anterior, incluidos los problemas de alineación de la imagen.
Echemos un vistazo a cómo puede agregar y alinear imágenes fácilmente en el nuevo editor para crear hermosos diseños para sus publicaciones y páginas.
Agregar y alinear imágenes en WordPress
El nuevo editor viene con los siguientes bloques que puede usar para agregar imágenes a sus publicaciones y páginas de WordPress.
- Imagen
- Imagen en línea
- Galería
- Medios y texto
- Cubrir
Comencemos primero con un bloque de imagen simple.
Haga clic en el botón ‘Agregar nuevo bloque’ o escriba /imagen en el editor de publicaciones para insertar un bloque de imagen.
Verá tres botones dentro del bloque de imagen en blanco.
Puede cargar una imagen desde su computadora, seleccionar una imagen ya cargada de la biblioteca de medios o insertar una imagen proporcionando la URL del archivo de imagen.
A continuación, haga clic en el botón ‘Cargar’ y luego seleccione la imagen que desea cargar desde su computadora.
Tan pronto como seleccione la imagen, WordPress la cargará en su biblioteca de medios y la insertará en el bloque de imágenes.
Ahora, notará una barra de herramientas en la parte superior de su imagen y algunas configuraciones de bloque de imagen en la columna de la derecha. Para alinear su imagen, utilizará la barra de herramientas que aparece en la parte superior de la imagen.
El bloque de imagen le ofrece las siguientes opciones de alineación de imagen como botones en la barra de herramientas.
- Alinear a la izquierda
- Alinear al centro
- Alinear a la derecha
- Anchura amplia
- Ancho completo
Si su imagen tiene un ancho más pequeño, alinearla a la izquierda o derecha mostrará el texto junto a la imagen. Al alinearlo con el centro, se mostrará la imagen en su propia fila sin texto en ninguno de los lados.
Si elige la opción de ancho amplio, su imagen será más ancha que el área de texto, y la opción de ancho completo la empujará hacia los bordes derecho e izquierdo de la pantalla del navegador.
Cómo alinear perfectamente una imagen junto al texto
Muchas veces es posible que deba alinear perfectamente una imagen junto a un texto. El editor de bloques de WordPress facilita esto agregando el bloque de Medios y Texto.
Este bloque básicamente agrega un área de dos columnas. Una columna para imágenes (medios) y la segunda columna para contenido de texto.
Simplemente cargue su imagen y luego agregue el texto que desea mostrar junto a ella.
Después de agregar la imagen y el texto, notará más opciones para el bloque. Puede hacer que todo el bloque sea más ancho o completo, también puede cambiar los lados de la imagen y el texto.
La alineación de la imagen se ajustará automáticamente a la altura del texto en la siguiente columna.
Cómo alinear las imágenes de la galería en WordPress
El editor de publicaciones de WordPress también viene con un bloque para agregar galerías de imágenes. Esto le permite mostrar imágenes fácilmente en una cuadrícula de filas y columnas.
El bloque Galería viene con opciones de alineación similares en la barra de herramientas.
Puede hacer que todo el bloque de la galería se alinee a la izquierda, al centro o a la derecha. También puede hacerlo ancho o cambiarlo a una fila de ancho completo.
La función de galería predeterminada en WordPress es bastante buena. Sin embargo, si agrega regularmente galerías de fotos a sus publicaciones y páginas de WordPress, considere usar un complemento de galería de fotos como Envira Gallery.
Estos complementos le brindarán más opciones para alinear imágenes en sus galerías de fotos, mostrarlas en la ventana emergente y diseñarlas de manera diferente.
Cómo agregar dos imágenes una al lado de la otra en WordPress
La forma más fácil de mostrar dos imágenes una al lado de la otra en una publicación de WordPress es agregando ambas imágenes en un bloque de Galería.
Simplemente seleccione un diseño de 2 columnas para que el bloque de la galería muestre ambas imágenes una al lado de la otra. También puede marcar la opción ‘recortar miniatura’ para asegurarse de que ambas imágenes sean del mismo tamaño.
Más formas de agregar y alinear imágenes en WordPress
Además de la imagen, los medios y el texto, y el bloque de la galería, también puede usar el bloque de portada para agregar una imagen de portada.
En el diseño web moderno, las imágenes de portada se utilizan para crear diseños de contenido muy atractivos. Estas imágenes se utilizan para resaltar diferentes secciones de una página.
El bloque de imagen de portada viene con las mismas opciones de alineación que un bloque de imagen. Puede agregar texto sobre la imagen y elegir un color de superposición de la configuración del bloque. La mejor parte es que puede marcar la opción ‘Fondo fijo’ que crea un efecto de fondo de paralaje.
Para obtener más información sobre el uso de imágenes de portada, consulte nuestro artículo sobre la diferencia entre las imágenes destacadas y la imagen de portada en WordPress.
Hasta ahora hemos hablado de agregar imágenes directamente a sus publicaciones y páginas. ¿Qué pasa con las imágenes de sitios de terceros?
El editor de bloques también lo hace fácil. Viene con bloques de inserción para sitios populares de intercambio social, incluidos Instagram, Flickr, Imgur, Photobucket y más.
Por ejemplo, si desea agregar una foto de Instagram, simplemente agregue el bloque de Instagram al editor de publicaciones e ingrese la URL de la publicación que desea compartir.
WordPress buscará automáticamente la publicación de Instagram y la insertará por usted. Después de eso, podrá utilizar las opciones de alineación en la barra de herramientas.
Los bloques de incrustación también le permiten incrustar videos fácilmente en WordPress. Después de eso, puede usar las mismas opciones en la barra de herramientas para alinear videos en WordPress.
Esperamos que este artículo le haya ayudado a aprender cómo agregar y alinear imágenes fácilmente en el editor de bloques de WordPress. Es posible que también desee ver nuestra guía sobre cómo optimizar imágenes para acelerar WordPress.