WordPress 3 min de lectura

Texto alrededor de imágenes en WordPress: alineación y bloques

Logotipo de WordPress

Actualizado el 22 de octubre de 2026.

Para que un párrafo rodee una imagen en WordPress, la imagen debe ocupar menos ancho que el contenido y estar alineada a izquierda o derecha. Centrarla no produce ese efecto. Tampoco basta con colocar una imagen enorme junto a un párrafo: tiene que quedar espacio para leerlo.

Con el editor de bloques

  1. Inserta un bloque Imagen inmediatamente antes del párrafo.
  2. Selecciona la imagen y reduce su ancho.
  3. En la barra del bloque, elige alinear a la izquierda o a la derecha.
  4. Abre la vista previa y comprueba cómo fluye el texto.

Es el procedimiento descrito en la documentación del bloque Imagen. Conviene probarlo con una fotografía pequeña y un párrafo suficientemente largo: así resulta evidente si el tema está permitiendo que el texto la rodee.

Para dos columnas estables, usa Medios y texto

Una imagen flotante y dos columnas no se comportan igual. Con la imagen flotante, el párrafo vuelve a ocupar todo el ancho cuando rebasa su altura. Si quieres mantener una fotografía a un lado y un bloque de contenido al otro, utiliza Medios y texto.

Este bloque incluye una opción para apilar el contenido en móvil. Es especialmente útil en fichas o presentaciones breves: evita que la imagen deje al texto una columna de unas pocas letras. Comprueba también el orden de lectura cuando ambos elementos se apilan.

Si sigues usando el editor clásico

Selecciona la imagen y cambia su alineación desde sus opciones. El editor clásico ya permite elegir izquierda, derecha o centro; normalmente no hace falta editar la etiqueta img a mano.

La receta original de esta entrada añadía float mediante estilos incrustados. El principio sigue siendo válido, pero repetir estilos en cada imagen complica cualquier cambio posterior de diseño. WordPress incorpora clases de alineación que el tema puede manejar de forma coherente.

Cuando en el editor funciona y en la web no

Revisa primero el ancho real de la imagen y del área de contenido. Después, comprueba si el tema sobrescribe la alineación o fuerza a los bloques a ocupar todo el ancho. La referencia de estilos de WordPress explica las clases tradicionales alignleft, alignright y aligncenter; en bloques, inspecciona también el contenedor de la imagen.

Haz las correcciones en los estilos del sitio o del tema hijo, con una regla acotada al contenido afectado. No pegues CSS que cambie todas las imágenes de la web para arreglar una sola entrada. Revisa un párrafo corto, uno largo y una pantalla estrecha antes de darlo por resuelto.

Añade un texto alternativo que describa la información de la imagen cuando sea necesaria para entender el contenido. La alineación mejora la presentación; el texto alternativo permite entenderla también cuando la imagen no se ve.

Comentarios