El bloque Medios y Texto es la forma más directa de alinear una imagen al lado del contenido en WordPress. Solo agregá el bloque, insertá tu imagen, elegí si va a la izquierda o derecha, y escribí el texto. El editor se encarga del resto: el texto fluye automáticamente alrededor de la imagen, se adapta a dispositivos móviles, y vos tenés control total sobre el tamaño.
En 30 segundos
- WordPress ofrece tres métodos nativos: bloque Medios y Texto (más simple), alineación individual de imagen (left/right para texto fluido), y bloques de Columnas (más control).
- El bloque Medios y Texto es el recomendado para la mayoría de casos: agrégalo, insertá tu imagen, elegí posición y tamaño, y escribí. Funciona en desktop y mobile.
- Cada método tiene un caso de uso: Medios y Texto para lo rápido, Columnas para diseños más estructurados, alineación individual para wrapping clásico.
- El editor de bloques incluye opción «Stack on Mobile» que automáticamente apila imagen y texto verticalmente en phones, mejorando la legibilidad.
- Si no funcionan bien, probá desactivar plugins conflictivos o verificar que el tema sea compatible con Gutenberg.
El bloque Medios y Texto es la herramienta nativa de WordPress para poner una imagen al lado de texto. Disponible desde WordPress 5.0 con el lanzamiento de Gutenberg, simplifica lo que antes requería código o plugins: solo arrastrá una imagen, elegí su posición (izquierda o derecha), y el contenido se acomoda automáticamente. El texto fluye alrededor, respeta espacios, y se adapta a cualquier pantalla sin configuración extra.
Opción 1: Bloque Medios y Texto (el método más directo)
Este es el camino que recomendamos si querés simplificar. Abrís tu página o artículo, hacés clic en el «+» para agregar un bloque, buscás «Medios y Texto» y lo insertás. Se te abre un panel con opciones claras.
Del lado izquierdo ves un área para la imagen (decís «Agregar imagen» y subís lo que necesites). Del lado derecho escribís tu texto normalmente. Pero acá viene la ventaja: podés cambiar de qué lado va la imagen arrastrando un control. También tenés opciones de tamaño: chica, mediana, grande. Si la imagen es chica, el texto rodea el espacio libre. Si es grande, ocupa más ancho.
La configuración está a la derecha en el panel de opciones. Ahí elegís:
- Alineación del bloque: izquierda, centro, derecha (esto centra el bloque completo en la página).
- Posición de la imagen: media a la izquierda o media a la derecha del bloque.
- Ancho de la imagen: desde 25% a 75% del ancho disponible.
- Stack on Mobile: cuando está activado (por defecto en temas modernos), la imagen se apila encima del texto en phones. Si lo desactivás, intenta mantenerlas lado a lado incluso en mobile (no siempre se ve bien).
Según la documentación oficial de WordPress, el bloque Medios y Texto es «la forma más sencilla de combinar imágenes con contenido de texto en el editor de bloques». Resumido: insertás, configurás, listo.
Opción 2: Alineación manual de imagen (el método clásico)
Si preferís un enfoque más granular, podés agregar una imagen sola (bloque Image) y luego alinearla. Hacés clic en la imagen y en la barra de opciones superior ves tres botones de alineación: izquierda, centro, derecha.
Acá viene lo importante. Si elegís izquierda, el texto que pongas después de la imagen fluye alrededor de ella (wrapping). Lo mismo pasa con alineación derecha. Centro apila todo verticalmente. Ojo: esto depende de que el texto esté en el mismo contenedor que la imagen, cosa que en Gutenberg es más difícil de lograr que en el editor clásico.
El tamaño de la imagen importa mucho. Una imagen chica permite que el texto fluya generosamente. Una imagen grande aprieta el texto o lo empuja todo para abajo. Redimensioná la imagen en el bloque mismo arrastrando las esquinas.
Este método es útil si querés un diseño muy específico, pero requiere más atención. WPBeginner recomienda este método para casos donde necesitás control absoluto, aunque aclarar que para la mayoría de casos Medios y Texto es más práctico.
Opción 3: Bloque de Columnas (máxima flexibilidad)
Si necesitás un diseño más estructurado, el bloque de Columnas es tu aliado. Agregás el bloque, elegís cuántas columnas (usualmente dos), y luego dentro de cada columna insertás lo que quieras: imagen en una, texto en la otra.
La ventaja es que tenés control sobre el ancho de cada columna. Podés hacer 50/50, 33/67, lo que necesites. También podés meter múltiples imágenes, elementos, listas, lo que sea. El problema: es más trabajo que Medios y Texto y requiere que entiendas cómo funciona la estructura de bloques anidados. Esto se conecta con lo que analizamos en al diseñar formularios responsivos.
Para este método, creás el bloque de Columnas, aparecen dos columnas vacías. En la primera insertás una imagen (bloque Image), en la segunda escribís tu texto. Configurás el ancho de cada columna desde el panel derecho. Si sos de los que les gusta ajustar márgenes, padding, espacios, este es tu método.
Responsive en dispositivos móviles: qué funciona y qué no
Acá viene una pregunta crítica: ¿vos probaste cómo se ve tu página en un iPhone? Porque muchos diseños lado a lado que se ven perfectos en desktop son un desastre en mobile.
El bloque Medios y Texto soluciona esto con la opción «Stack on Mobile» que mencioné antes. Cuando está activa (y debería estarlo siempre), la imagen y el texto se apilan verticalmente en phones. Imagen arriba, texto abajo. Eso mejora muchísimo la legibilidad.
Si usás Columnas, depende del tema. Algunos temas modernos automáticamente hacen que las columnas se apilen en mobile. Otros no. Probá en tu teléfono después de publicar. Si las columnas siguen lado a lado en un phone y el texto queda ilegible, volvé a Medios y Texto o ajustá el CSS (pero eso ya es avanzado).
Tabla comparativa: cuándo usar cada método
| Método | Complejidad | Mejor para | Configuración |
|---|---|---|---|
| Medios y Texto | Baja | La mayoría de casos: blog post, artículo con imagen destacada al costado | Seleccionar posición (izq/der), tamaño, listo |
| Alineación manual | Media | Cuando querés wrapping clásico, imagen flotante en medio del texto | Alinear imagen, ajustar tamaño, confiar en el flujo |
| Columnas | Media-Alta | Diseños estructurados, múltiples elementos por columna, control preciso de ancho | Crear bloque, definir columnas, llenar cada una, ajustar márgenes |
Problemas comunes y cómo solucionarlos
Ponele que seguís todos los pasos y la alineación sigue sin funcionar como esperás. Acá hay algunos sospechosos.
Primero, verificá que el tema sea compatible con Gutenberg. Algunos temas viejos o muy específicos tienen estilos CSS que entran en conflicto. La solución rápida: cambiá temporalmente a un tema estándar (como Twenty Twenty-Four) y probá si ahí funciona. Si sí, el problema es el tema.
Segundo, plugins conflictivos. El plugin «Gutenberg» oficial (si lo tenés instalado además del Gutenberg integrado de WordPress), o algunos page builders viejos como Elementor cuando corren en background, pueden causar problemas. Desactivá plugins sospechosos uno a uno hasta aislar el culpable.
Tercero, el tamaño de la imagen. Si subís una imagen de 4000x3000px directamente sin redimensionarla primero, WordPress la redimensiona pero a veces genera comportamientos raros en la alineación. Pro tip: redimensioná las imágenes antes de subirlas a 1200x900px máximo.
Cuarto, caché. Si acabás de cambiar la alineación y no ves el cambio en el frontend, limpiá el caché del navegador (Ctrl+Shift+Del) o desactiva cualquier plugin de caché temporalmente mientras testeas. Ya lo cubrimos antes en para automatizar estos ajustes de layout.
Técnicas avanzadas: cuando necesitás ir más allá
Si ninguno de los métodos anteriores te da exactamente lo que necesitás, acá hay alternativas.
El método clásico de wrapping (alignleft/alignright) viene del HTML antiguo. Algunos temas todavía lo soportan. Vas a Image > Avanzado > clase personalizada y metes «alignleft» o «alignright». Funciona solo si el tema lo soporta.
El bloque Group (Grupo) te permite crear un contenedor con estilos y márgenes propios. Dentro metés imagen, texto, lo que sea. Es potente pero requiere saber qué haces.
Si necesitás control absoluto, entra en el editor de bloques como HTML (modo Code), y editá manualmente el markup. Pero eso es para gente cómoda con código.
Ejemplos concretos que funcionan
Caso 1: Blog post de seguridad WordPress con imagen al lado. Escribís tu intro, agregás un bloque Medios y Texto, metés una captura de pantalla de la configuración recomendada a la derecha, y escribís los pasos a la izquierda. Stack on Mobile activo. Resultado: se ve perfecto en desktop (imagen a derecha, pasos legibles a la izquierda), y en mobile se apila verticalmente.
Caso 2: Landing page con tres secciones alternadas. Sección 1: imagen izquierda, texto derecha. Sección 2: imagen derecha, texto izquierda. Sección 3: imagen izquierda, texto derecha. Usás bloque Medios y Texto tres veces, y en cada una cambias la posición de la imagen. Se alterna visualmente sin esfuerzo.
Caso 3: Tutorial paso a paso. Para cada paso usás Columnas (2 col), imagen en la izquierda, instrucciones en la derecha. Cada paso es un bloque de Columnas separado. En mobile se apilan (necesitás que el tema lo soporte, o ajustás CSS).
Errores comunes al alinear imagen y texto en WordPress
Error 1: No activar «Stack on Mobile»
Muchos dicen «me funciona perfecto en la computadora pero en el celular no se ve nada». Razón: no activaron Stack on Mobile. Imagen y texto quedan lado a lado en un screen de 400px, el texto se queda ilegible. Solucioná: abrís el bloque Medios y Texto, panel derecho, activas «Stack on Mobile».
Error 2: Usar Columnas sin probar en mobile
Hacés dos columnas 50/50, se ve lindísimo en desktop, lo publicas, y en mobile las columnas siguen lado a lado. Texto de 6 caracteres por línea. El problema: no testaste antes de publicar. Solución: siempre revisá en mobile antes de dar por terminado. Redimensioná la ventana del navegador a 375px de ancho (tamaño iPhone), o abrilo directamente en el teléfono. Lo explicamos a fondo en si crearás bloques personalizados.
Error 3: Meterse con CSS sin saber
Vos querés que la imagen sea 40% de ancho, así que editas el HTML del bloque y cambias width: 50% a width: 40%. Pega. Pero después actualizás el tema y el CSS se resetea. Solución: usa las opciones nativas del bloque Medios y Texto (slider de ancho, 25-75%) antes de tocar HTML.
Preguntas Frecuentes
¿Puedo alinear imagen y texto sin el bloque Medios y Texto?
Sí. Agregás una imagen sola, la alineás a izquierda o derecha, y escribís texto después. El texto fluye alrededor (siempre que el tema lo soporte y que no uses saltos de párrafo forzados). Pero es más impredecible. Medios y Texto es más confiable.
¿Qué pasa si la imagen es más alta que el texto?
En el bloque Medios y Texto, la imagen define la altura de ese bloque. El texto llena el espacio de al lado. Si el texto es corto, sobra espacio blanco. Si necesitás que el texto sea más largo para llenar, simplemente escribí más. Si necesitás espaciado preciso, usá Columnas donde tenés control de padding y margins.
¿Funciona el bloque Medios y Texto en todos los temas?
En teoría sí, porque es parte de Gutenberg desde WordPress 5.0. En la práctica, algunos temas viejos tienen estilos CSS conflictivos. Si no funciona, probá con un tema estándar (Twenty Twenty-Four) para confirmar si es problema del tema o de otra cosa.
¿Puedo cambiar el orden de imagen y texto después de publicar?
Sí. Entrás en editar el artículo, seleccionás el bloque Medios y Texto, y en el panel derecho cambiás la posición de la imagen. Se actualiza al instante. Guardás, publicás. Sin problema.
¿Necesito un plugin especial para alinear imagen y texto en WordPress?
No. Gutenberg (el editor nativo) incluye todo lo que necesitas. Si estás usando el editor clásico antiguo (Block editor desactivado), sí necesitás plugin. Pero si usás Gutenberg, nativo funciona de 10.
Conclusión
Alinear imagen y texto en WordPress es cosa de segundos con Gutenberg. El bloque Medios y Texto es lo primero que probés: insertás, elegís posición, escribís. Para 90% de casos cierra perfecto.
Si necesitás diseños más complejos, probá Columnas. Si querés wrapping clásico, usá alineación manual. Y siempre, SIEMPRE, probá en mobile antes de publicar. Stack on Mobile es tu amigo.
Lo que cambió desde el editor clásico es que ahora todo es visual. No necesitás tocar HTML. Eso simplifica las cosas pero también significa que si algo se rompe, usualmente es por un tema conflictivo o un plugin. Cuando todo está limpio, Gutenberg funciona como espera.
Fuentes
- Bloque Medios y Texto — Soporte oficial de WordPress
- Cómo agregar y alinear imágenes en el editor de bloques — WPBeginner
- Alineación de imágenes — Centro de ayuda WordPress
- Agregar y alinear imágenes en el editor de bloques — Nelio Software
- Cómo insertar y alinear imágenes en el editor de bloques — Ayuda Hosting