Cómo agregar y alinear imágenes en WordPress Block Editor (Gutenberg)

Las imágenes dan vida a sus publicaciones y páginas de WordPress, haciéndolas más atractivas. Sin embargo, muchos principiantes luchan con la alineación de las imágenes como quieran. 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 fácilmente imágenes en WordPress para crear hermosos modelos de contenido.

Alineando la imagen en el editor de WordPress anterior, WordPress ha utilizado un área de texto de editor como editor predeterminado. Un problema especial en el antiguo editor fue la alineación de las imágenes.
A pesar de que había opciones para alinear las imágenes a la izquierda, a la derecha o en el centro, no siempre se veían bien. A veces las imágenes no se alinearon, no tenían el tamaño exacto o simplemente parecían extrañas. WordPress 5.0 ha introducido un nuevo editor de WordPress llamado Gutenberg Block Editor. Ha resuelto varios problemas con el antiguo editor, incluidos los problemas de alineación de imágenes. Echemos un vistazo a cómo puede agregar y alinear fácilmente las imágenes en el nuevo editor para crear hermosos modelos para sus adiciones 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 en sus publicaciones de WordPress y páginas.
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 un nuevo bloque” o escriba / imagen en el editor de mensajes 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 en la biblioteca de medios o insertar una imagen proporcionando la URL del archivo de imagen. Luego 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 e ingresará en el bloque de imágenes. Ahora, notará una barra de instrumentos sobre su imagen y algunas configuraciones de bloqueo de imagen en la columna derecha. Para alinear su imagen, usará la barra de herramientas que aparece sobre la imagen.

El bloque de imágenes le brinda las siguientes opciones de alineación de imágenes como botones en la barra de herramientas.

Se alinea a la izquierda
Alineación con el centro
Alinearse a la derecha
Anchura amplia
Ancho máximo
Si su imagen tiene un ancho más pequeño, su alineación izquierda o derecha mostrará texto junto a la imagen. Su alineación en el centro mostrará la imagen por sí sola, sin texto en ambos lados.
Al elegir la opción de ancho ancho, su imagen será más amplia 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 al lado del texto a menudo es posible que necesite alinear perfectamente una imagen junto a un texto. El editor de bloques de WordPress lo hace fácil agregando el bloque de medios y texto. Este bloque prácticamente agrega un área con dos columnas. Una columna para imágenes (medios) y una segunda columna de contenido de texto.

Simplemente cargue la imagen y luego agregue el texto que desea mostrar al lado.

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 completamente ancho, 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. Como las imágenes de la galería están alineadas en WordPress WordPress Menss Editor también viene con un bloque para agregar galerías de imágenes. Esto le permite mostrar fácilmente las imágenes en una cuadrícula de fila y columnas. El bloque de la galería viene con opciones de alineación similares en la barra de herramientas. Puede hacer todo el bloque de la galería para alinearse a la izquierda, al centro o a la derecha. También puede dejarlo o cambiarlo en una fila completa.


La función predeterminada de la galería de WordPress es bastante buena. Sin embargo, si regularmente agrega galerías de fotos a sus publicaciones y páginas de WordPress, considere usar un complemento para la galería de fotos como Envira Gallery. Estos complementos le darán más opciones para alinear las imágenes en las galerías de fotos, mostrarlas en la ventana emergente y estilizarlas de manera diferente. Cómo agregar dos imágenes una al lado de la otra en WordPress La forma más sencilla de mostrar dos imágenes una al lado de la otra en una publicación de WordPress es agregar ambas imágenes en un bloque de galería.

Simplemente seleccione una busca un bloque de 2 columnas para mostrar ambas imágenes una al lado de la otra. También puede verificar la opción “Corte en miniatura” para garantizar que ambas imágenes tengan el mismo tamaño. Varias formas de agregar y alinear imágenes en WordPress, además de la imagen, el soporte de medios y el bloque de texto, 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 aspectos de contenido extremadamente atractivos. Estas imágenes se utilizan para resaltar las diferentes secciones de una página. La portada de la portada viene con las mismas opciones de alineación que un bloque de imágenes. Puede agregar texto a través de la imagen y elegir un color superpuesto en la configuración del bloque. La mejor parte es que puede verificar la opción de “fondo fijo” que crea un efecto de fondo de paralaje.

Para obtener más información sobre el uso de las imágenes de portada, consulte nuestro artículo sobre la diferencia entre las imágenes presentadas y la imagen de portada en WordPress. Hasta ahora hemos hablado de agregar imágenes directamente a sus publicaciones y páginas, pero ¿imágenes de terceros sitios? El editor de bloques también alivia esto. Viene con bloques de incorporación para sitios populares de intercambio social, incluidos Instagram, Flickr, Imgur, Photobucket y muchos más.

Por ejemplo, si desea agregar una foto de Instagram, simplemente agregue el bloque de Instagram al editor de publicaciones e ingrese la dirección de publicación que desea compartir.
WordPress recuperará automáticamente la publicación de Instagram y la incorporará después, podrá usar las opciones de alineación de la barra de herramientas. Los puntos de incorporación también le permiten incorporar fácilmente videos en WordPress.Después de eso, puede usar las mismas opciones en la barra de herramientas para alinear los videos de WordPress.Esperamos que este artículo lo ayude a aprender cómo agregar y alinear fácilmente las imágenes en el editor de bloques de WordPress.También es posible que desee ver nuestra guía sobre cómo optimizar las imágenes para acelerar WordPress.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress.También puede encontrarnos en Twitter y Facebook.