Cómo agregar y alinear imágenes en el editor de bloques de WordPress (Gutenberg)

Las imágenes dan vida a sus publicaciones y páginas de WordPress haciéndolas más atractivas. Sin embargo, muchos principiantes tienen dificultades para alinear las imágenes de la manera que desean.

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 agregar y alinear imágenes fácilmente en WordPress para crear diseños de contenido hermosos.

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 del antiguo editor era la alineación de las imágenes.

Si bien 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.

[enlazatom_show_links]

WordPress 5.0 introdujo un nuevo editor de publicaciones de WordPress llamado editor de bloques Gutenberg. Se corrigieron varios problemas con el editor anterior, incluidos problemas de alineación de imágenes.

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 online
  • Túnel
  • Medios y texto
  • Cubrir

Comencemos primero con un simple bloque de imágenes.

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 vacío.

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.

Luego, haga clic en el botón «Cargar» y seleccione la imagen que desea cargar desde su computadora.

Tan pronto como seleccione la imagen, WordPress la cargará en su biblioteca multimedia y la insertará en el bloque de imágenes.

Ahora notará una barra de herramientas sobre su imagen y algunas configuraciones de bloqueo de imagen en la columna de la derecha. Para alinear su imagen, utilizará la barra de herramientas que aparece encima de la imagen.

El Bloque de imágenes ofrece las siguientes opciones de alineación de imágenes como botones en la barra de herramientas.

  • Alinear a la izquierda
  • Alinear al centro
  • Alinear a la derecha
  • Anchura amplia
  • Ancho completo

Si la imagen tiene un ancho más pequeño, alinearla hacia la izquierda o hacia la derecha mostrará texto junto a la imagen. Al alinearla en el centro, la imagen aparecerá en una línea separada sin texto en ninguno de los lados.

Si elige la opción de ancho ancho, su imagen será más ancha que el área de texto y la opción de ancho completo la moverá hacia los bordes izquierdo y derecho de la pantalla del navegador.

Cómo alinear perfectamente una imagen junto al texto

Muchas veces puede ser necesario alinear perfectamente una imagen con el texto. El editor de bloques de WordPress lo facilita al agregar el bloque de Medios y Texto.

Este bloque básicamente agrega un área de dos columnas. Una columna para imágenes (promedio) y la segunda columna para contenido de texto.

Simplemente cargue su imagen y agregue el texto que desea que aparezca 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 incluye un bloque para agregar galerías de imágenes. Esto le permite ver 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 alinear todo el bloque de la galería 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 plugin de galería de fotos como Envira Gallery.

Estos plugins 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 agregar 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 tengan el mismo tamaño.

Otras formas de agregar y alinear imágenes en WordPress

Además del bloque de imágenes, medios, texto y 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 en la imagen y elegir un color de superposición de la configuración del bloque. La mejor parte es que puede seleccionar 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 otros.

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 incrustados 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. También puede consultar nuestra guía sobre cómo optimizar imágenes para acelerar WordPress.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *