Como dice el viejo refrán, una imagen vale más que mil palabras. Sin embargo, a veces tus gráficos pueden beneficiarse de una pequeña explicación adicional en forma de texto de apoyo.

Afortunadamente, hay varias formas de posicionar imágenes junto al texto en el Editor de bloques. Con estas técnicas a tu alcance, encontrarás que alinear texto e imágenes en el editor de bloques (también conocido como Gutenberg) es mucho más fácil en comparación con el editor clásico.

En esta publicación, exploraremos por qué la alineación de imágenes necesitaba una revisión en el editor Gutenberg. Luego exploraremos tres formas de colocar imágenes junto al texto en eso editor de bloques. ¡Empecemos!

Una introducción a la alineación de imágenes en WordPress

Para aprovechar al máximo tus imágenes, querrás colocarlas cuidadosamente en la página. Esto puede incluir usarlas como banners, organizarlas en columnas, incorporarlas en tus barras laterales de WordPress y tus widgets, o incluso colocarlas junto a un texto:

Esto es particularmente útil para ilustrar el punto que estás haciendo en el texto acompañante. También puede ser una excelente manera de romper los bloques de texto o agregar interés y variedad a tu página mediante el uso de bloques alternados de contenido:

En el editor clásico, podías colocar imágenes junto al texto colocando el cursor al principio del párrafo y seleccionando el botón Añadir multimedia:

Luego tenías la opción de alinear la imagen a la izquierda o a la derecha, o envolver el texto alrededor de la imagen. Sin embargo, la alineación y el ajuste en el editor clásico no siempre funcionaban como se esperaba. A veces, te quedabas con una imagen que no estaba dimensionada o alineada correctamente.

La buena noticia es que el Editor de bloques mejora en gran medida la funcionalidad de alineación de imágenes del editor clásico. De hecho, incluso hay un bloque diseñado para asegurarse de que tu texto e imágenes estén perfectamente posicionados, cada vez.

4 formas sencillas de colocar imágenes junto al texto en el editor de bloques

Ya sea para romper el texto, ilustrar un punto o simplemente añadir interés, las imágenes desempeñan un papel crucial en el diseño web. Con eso en mente, asegurémonos de que tengas un control total sobre cómo interactúan estos gráficos con el resto de tu web de WordPress. Aquí tienes cautro formas sencillas de colocar imágenes junto al texto en el editor de bloques.

1. Utilizar las opciones de alineación de texto

El editor Gutenberg cuenta con un conjunto completo de opciones de alineación que puedes usar para posicionar tus imágenes junto al texto. Para comenzar, deberás crear un bloque de imagen y subir tu contenido multimedia.

Simplemente haz clic en el icono + y luego comienza a escribir «imagen». Puedes seleccionar el bloque cuando aparezca:

Luego, sube una imagen desde tu ordenador o elige un gráfico de tu biblioteca de medios de WordPress. Luego, inserta un nuevo bloque de párrafo y agrega todo el texto que eventualmente aparecerá junto a tu imagen:

Existen varias opciones de alineación que puedes usar. Para acceder a estas opciones, haz clic en el bloque de imagen. Luego, selecciona el icono de alineación en la barra de herramientas:

Si eliges Alinear a la izquierda, el texto aparecerá a la derecha de la imagen. Alternativamente, si optas por Alinear a la derecha, el texto se mostrará a la izquierda del bloque de imagen:

Veámoslo en acción.

It’s possible that you may select Align left or Align right, but the text doesn’t wrap around the image. If this occurs, the graphic is likely taking up the full page width. To resize the image, click to select the block and then drag the handles that appear:

Puede que hayas seleccionado Alinear a la izquierda o Alinear a la derecha, pero el texto no se ajusta alrededor de la imagen. Si esto ocurre, es probable que la imagen esté ocupando todo el ancho de la página. Para redimensionar la imagen, haz clic para seleccionar el bloque y luego arrastra las asas que aparecen.

A medida que el bloque se hace más pequeño, el texto se ajustará automáticamente alrededor de tu imagen. Si cambias de opinión en algún momento y deseas que la imagen ocupe el 100 por ciento del espacio horizontal disponible, simplemente selecciona Alinear al centro.

2. Utilizar el bloque de Filas

El bloque de Filas es un contenedor para otros bloques. Es una variante del bloque de Grupo. El bloque de Filas te permite organizar varios bloques uno al lado del otro dentro del contenedor.

Para usar el bloque de Filas, simplemente agrega el bloque de Filas usando el inserter de bloques. Luego puedes agregar tu texto e imagen usando los iconos +.

También puedes seleccionar varios bloques y convertirlos en una fila. Por ejemplo, si tienes una imagen seguida de un párrafo de texto, puedes seleccionar los bloques y crear una fila con ellos. Esto colocará la imagen junto al párrafo de texto.

Después de haber insertado tu texto e imagen, puedes redimensionar tu imagen para que se ajuste a la longitud del texto.

3. Utilizar el bloque de Galería

El bloque de Imagen no es la única forma de agregar imágenes a tu sitio web de WordPress. Si deseas mostrar varias fotos, puede tener sentido usar el bloque de Galería:

La Galería contiene bloques de Imagen individuales para cada gráfico y los organiza en columnas. Esto te permite mostrar múltiples imágenes de una manera estructurada y atractiva.

A veces, es posible que necesites mostrar texto junto a tu galería de WordPress. Por ejemplo, es posible que desees agregar un título, proporcionar una explicación de apoyo o incluso insertar una Llamada a la Acción (CTA):

La buena noticia es que puedes utilizar exactamente la misma configuración de alineación que discutimos anteriormente. Esto significa que simplemente puedes agregar un bloque de Párrafo arriba o debajo de la Galería y luego insertar el texto que deseas colocar junto a tus imágenes.

Una vez que todas las piezas estén en su lugar, haz clic en el bloque de Galería y selecciona el icono de Alineación. Allí, puedes elegir Alinear a la izquierda, lo que posicionará tu texto a la derecha de la Galería. Alternativamente, puedes seleccionar Alinear a la derecha y mostrar el texto a la izquierda del bloque de Galería.

4. Añadir el bloque de Medios y Texto

Para ayudarte a crear el diseño perfecto, el editor Gutenberg introdujo un bloque de Medios y Texto. Este bloque presenta un diseño de dos columnas. Por defecto, la imagen aparece a la izquierda y el área de texto se coloca a la derecha:

Alternativamente, puedes intercambiar estas columnas haciendo clic en el bloque de Medios y Texto. Luego, selecciona el botón Mostrar medios a la derecha:

También puedes elegir entre una visualización de ancho amplio y una visualización de ancho completo, si esas opciones son compatibles con el tema de WordPress que estás utilizando. Una vez que estés satisfecho con tu diseño, puedes escribir tu texto directamente en la columna de Texto. Luego, puedes cargar tu imagen en la zona de Multimedia:

Una vez que tengas estos elementos en su lugar, es posible que desees experimentar con diferentes alineaciones. Simplemente haz clic en Cambiar alineación vertical y elige entre las opciones disponibles:

Estos ajustes modificarán dónde aparece el texto en relación con la imagen. Por ejemplo, si optas por Alinear en medio, el texto se alineará con el centro de la imagen que lo acompaña.

Cada bloque tiene diferentes ajustes en la barra lateral del editor, y Medios y Texto no es una excepción. Asegúrate de haber seleccionado este bloque en el lienzo principal del editor y luego haz clic en la pestaña Bloque:

El primer ajuste único es Apilar en móvile. Cuando esta opción está habilitada, tu multimedia y texto pueden aparecer uno encima del otro en pantallas más pequeñas, como smartphones y tabletas. Esto puede proporcionar una mejor experiencia para los usuarios móviles, que de lo contrario tendrían que desplazarse horizontalmente para ver todo el bloque.

A continuación, puedes especificar si WordPress debe recortar automáticamente la imagen para que llene toda la columna. Esto puede asegurar que tu bloque se muestre correctamente en una amplia gama de pantallas.

Conclusión

Aunque hay muchas situaciones en las que las imágenes pueden hablar por sí solas, a veces puede que desees agregar un texto de apoyo. Al alinear cuidadosamente tus gráficos y texto, puedes crear efectos visuales interesantes o simplemente proporcionar el contexto necesario.

Vamos a resumir rápidamente tres formas de colocar imágenes junto al texto en el Editor de Bloques:

Utilizar las opciones de alineación de texto.
Utilizar el bloque de Filas.
Utilizar el bloque de Galería.
Añadir el bloque de Medios y Texto.

¿Quieres más consejos? Recibe notificaciones por correo electrónico de nuevas publicaciones.

Velocidad increíble

En la prueba independiente de 2021 de Review Signal, WordPress.com recibió la calificación de «proveedor de alojamiento más rápido de WordPress» en todo el rango de precios.

Consigue una velocidad supersónica en tu sitio web