Blog en modo lista en Divi: layout horizontal de posts

El módulo de blog de Divi trae dos layouts de fábrica: cuadrícula y ancho completo. Y los dos comparten la misma limitación — la imagen siempre va arriba y el texto abajo. Pero hay un tercer diseño que ves en los blogs editoriales más cuidados: la lista horizontal, con la imagen a un lado y el título, los metadatos y el extracto al otro. Ese layout no existe como opción en Divi... y se consigue con unos cuantos cachos de CSS que te comparto completos en este tutorial.

Es uno de los trucos de personalización del blog que más uso: aporta jerarquía visual, aprovecha mejor el ancho de la página y le da al listado un aire de revista profesional. Vamos paso a paso.

El punto de partida: configurar el módulo de blog

Primero, prepara el módulo para que el CSS tenga la estructura correcta sobre la cual trabajar:

1. Agrega el módulo de blog a tu página (o ábrelo si ya existe).
2. Ve a la pestaña Diseño y establece el layout en Ancho completo (no cuadrícula).
3. Activa los elementos que quieras mostrar: imagen destacada, extracto, metadatos.

No se verá bien al principio — la imagen ocupará todo el ancho con el texto debajo. Es lo esperado: el layout de ancho completo nos da la estructura HTML que el CSS va a reorganizar.

El snippet principal: imagen a un lado, contenido al otro

Con este CSS, la imagen destacada pasa a ocupar el 30% del ancho y el bloque de título + metadatos + extracto se acomoda en el 70% restante. Si quieres otras proporciones, solo asegúrate de que la suma dé 100%:

/*Agregar media query para que aplique solo en tablet y desktop*/
@media (min-width: 767px) {

/*Cambiar el ancho de la imagen*/
.entry-featured-image-url  {
width: 30%;
float: left;
margin-bottom: 0!important;
}

/*Cambiar el ancho de los demas elementos*/
.entry-title,
.post-meta,
.post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}

¿Dónde pegarlo? Tienes dos opciones según cómo manejes tu sitio: si usas un child theme, agrégalo al archivo style.css; si no, ve a Divi → Opciones del tema → General → CSS personalizado y pégalo ahí.

Dos detalles del código que conviene entender:

• La media query (min-width: 767px) limita el efecto a tablet y desktop. En móvil, la lista horizontal no tiene espacio para respirar — el layout apilado por defecto funciona mejor en pantallas chicas.
• Para invertir la posición (imagen a la derecha), cambia float: left por float: right en el bloque de la imagen y ajusta el padding-left por padding-right en los demás elementos.

Así queda el resultado:

Un poco más de estilo: tarjetas con sombra

La lista funcional ya está. Ahora el acabado: este snippet convierte cada post en una tarjeta con sombra suave, bordes redondeados y espacio interno generoso. Ajusta los valores a tu sistema de diseño:

/*Estilo de caja y sombra a los post*/
.et_pb_post {
box-shadow: 0px 2px 80px 0px rgba(160,190,212,0.22);
border-radius: 6px;
padding: 60px;
}

Consejo: la sombra del ejemplo usa un azul grisáceo translúcido (rgba(160,190,212,0.22)) en lugar del negro típico. Las sombras con un tinte del color de tu marca se ven más integradas y menos "plugin genérico". Si tu sitio usa tonos cálidos, prueba una base beige o terracota con opacidad baja.

CSS para portadas de vídeo

Este bloque nació de la comunidad: a Rodrigo (lo puedes ver en los comentarios) le surgió la necesidad de aplicar el layout, pero sus posts usaban vídeos de YouTube como portada en lugar de imágenes — el caso del formato de entrada de vídeo de Divi. Adaptó el snippet para ese escenario y lo compartió con todos:

/*Cambiar el ancho del video*/
.et_main_video_container {
width: 30%;
float: left;
margin-bottom: 0!important;
}

Es el mismo principio del snippet principal — solo cambia el selector de la miniatura (.entry-featured-image-url) por el del contenedor de vídeo (.et_main_video_container). Si mezclas posts con imagen y posts con vídeo, usa ambos bloques juntos.

Hacer las imágenes cuadradas

Último refinamiento: si tus imágenes destacadas tienen proporciones variadas, la lista se ve dispareja. Este snippet las recorta visualmente a un formato uniforme sin que tengas que reeditarlas:

/*Hacer la imagen del blog de aspecto cuadrado*/
.entry-featured-image-url {
  padding-top: 30%;
  display: block;
}

.entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

La clave está en object-fit: cover: la imagen llena el contenedor recortando el exceso, sin deformarse. El padding-top: 30% define la altura del contenedor en proporción al ancho — si tu imagen ocupa el 30% del ancho (como en el primer snippet), un padding-top de 30% produce un cuadrado perfecto. Si cambiaste la proporción imagen/texto, iguala este valor al ancho que definiste.

🎓 ¿Quieres un blog con diseño editorial completo?
En el curso de blog magazine con Divi Blog montamos un blog estilo revista con layouts avanzados, plantillas del Theme Builder y todos los detalles de diseño que diferencian un blog amateur de uno profesional. Accede como suscriptor.

Errores comunes al aplicar este layout

El CSS no se aplica

Primero verifica que el módulo esté en layout de ancho completo — en modo cuadrícula los selectores apuntan a una estructura diferente y el float no produce la lista. Segundo, revisa que no haya otro CSS con mayor especificidad pisando las reglas (las DevTools del navegador te muestran qué regla gana).

El texto envuelve la imagen por abajo

Si el extracto es muy largo y la imagen muy baja, el texto puede "abrazar" la imagen por debajo. Es el comportamiento natural del float. Solución rápida: limita el largo del extracto en la configuración del módulo (150-200 caracteres funciona bien para listas).

En móvil se ve apretado

Si quitaste la media query del primer snippet, el layout horizontal se aplica también en pantallas chicas — y una imagen al 30% en un viewport de 390px queda inservible. Mantén la media query: lista horizontal en desktop, apilado en móvil.

Preguntas frecuentes

¿Este CSS funciona en Divi 5?

Los selectores del módulo de blog (.et_pb_post, .entry-featured-image-url) se mantienen en Divi 5. De todas formas, si tu sitio ya corre Divi 5, prueba el snippet primero en staging — y considera que el nuevo constructor trae más opciones nativas de layout que pueden reducir el CSS necesario.

¿Puedo aplicar el layout solo a un módulo de blog específico?

Sí. Agrega una clase CSS personalizada al módulo (pestaña Avanzado → Clase CSS, por ejemplo blog-lista) y antepón esa clase a todos los selectores: .blog-lista .entry-featured-image-url. Así otros módulos de blog del sitio no se ven afectados.

¿Funciona con la paginación y los filtros del módulo?

Sí. El CSS solo cambia la presentación de cada post; la paginación, las categorías filtradas y el resto de opciones del módulo siguen funcionando exactamente igual.

¿Hay alternativa sin CSS?

Con el módulo nativo, no — Divi no trae el layout de lista horizontal de fábrica. Algunos plugins agregan módulos de blog con más layouts (te cuento mis favoritos en este post de plugins para blogs en Divi), pero para una lista simple, estos snippets resuelven sin agregar dependencias.

Mis recomendaciones finales

1. Aplica los snippets en orden: primero el layout, después las tarjetas, al final las imágenes cuadradas — así detectas qué bloque causa cualquier ajuste pendiente.
2. Usa imágenes destacadas de proporciones similares aunque uses el snippet de recorte; el resultado siempre es mejor con material consistente.
3. Limita el extracto a 150-200 caracteres para que las tarjetas mantengan alturas parejas.
4. Personaliza también el enlace de "leer más" para cerrar el diseño — tenemos un tutorial para cambiar el "read more" del blog en Divi.
5. Guarda el módulo configurado en la biblioteca de Divi: el blog en modo lista es de esos diseños que vas a querer repetir en cada proyecto editorial.

Conclusión

Con tres snippets de CSS convertiste el módulo de blog de Divi en una lista horizontal de nivel editorial: imagen a un lado, contenido al otro, tarjetas con sombra y miniaturas uniformes. Es un diseño que mejora la legibilidad del listado y aprovecha mejor el espacio en desktop, manteniendo el comportamiento apilado donde corresponde — en móvil. Pruébalo en tu blog y muéstranos el resultado.

🎓 ¿Listo para llevar tu blog al siguiente nivel?
En el curso de blog magazine con Divi Blog aprendes a construir un blog tipo revista completo: grids editoriales, posts destacados, categorías con diseño propio y las técnicas de CSS que viste aquí, aplicadas con criterio profesional. Te espero adentro.