Si usás WordPress con el theme Divi, seguramente te encontraste con una limitación frecuente: el módulo Blog no permite, de forma nativa, mostrar los posts con un diseño tipo lista, donde la imagen destacada quede a la izquierda y, a la derecha, se vean el título y el resumen del post.
En este artículo te explico una solución simple y efectiva usando solo CSS, sin plugins ni modificaciones de PHP, ideal para aplicar en una página específica.
Objetivo del diseño
El resultado final será:
- Imagen destacada del post a la izquierda
- Título del post a la derecha (arriba)
- Extracto o resumen debajo del título
- Diseño responsivo (en móvil se apila verticalmente)
- Compatible con el módulo Blog de Divi en ancho completo
Problema con el módulo Blog de Divi
Divi renderiza cada post con varios elementos independientes dentro del contenedor .et_pb_post:
- Imagen destacada
- Título
- Extracto
- Meta (fecha, autor, etc.)
Cuando intentamos usar flexbox, estos elementos suelen alinearse todos en una sola fila, rompiendo el diseño esperado. La clave está en usar CSS Grid para controlar exactamente en qué columna y fila aparece cada elemento.
Solución: usar CSS Grid para reorganizar el layout
Asignar un ID al módulo Blog
En el módulo Blog de Divi:
Ir a Avanzado → CSS ID & Classes
En CSS ID escribir:
blog-lista-custom
CSS personalizado
Pegá este código en:
Divi → Opciones del tema → CSS personalizado
o Apariencia → Personalizar → CSS adicional
/* ============================
DIVI Blog List - Pro Cards
ID del módulo: blog-lista-custom
============================ */
/* Variables (opcional) */
#blog-lista-custom{
--card-radius: 16px;
--card-border: rgba(0,0,0,.08);
--card-shadow: 0 10px 25px rgba(0,0,0,.08);
--card-shadow-hover: 0 14px 32px rgba(0,0,0,.12);
--gap: 18px;
--img-w: 320px;
--img-h: 210px;
}
/* Card */
#blog-lista-custom .et_pb_post{
display: grid !important;
grid-template-columns: var(--img-w) 1fr;
column-gap: var(--gap);
row-gap: 8px;
align-items: start;
padding: 18px;
margin: 0 0 22px 0;
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
background: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Hover (sutil) */
#blog-lista-custom .et_pb_post:hover{
transform: translateY(-2px);
box-shadow: var(--card-shadow-hover);
border-color: rgba(0,0,0,.12);
}
/* Imagen destacada (izquierda) */
#blog-lista-custom .et_pb_post .entry-featured-image-url{
grid-column: 1;
grid-row: 1 / span 3;
margin: 0 !important;
border-radius: calc(var(--card-radius) - 4px);
overflow: hidden;
position: relative;
}
/* Overlay suave sobre imagen */
#blog-lista-custom .et_pb_post .entry-featured-image-url::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0));
pointer-events: none;
}
/* Imagen: recorte prolijo */
#blog-lista-custom .et_pb_post .entry-featured-image-url img{
width: 100%;
height: var(--img-h);
object-fit: cover;
display: block;
transform: scale(1.001);
transition: transform .22s ease;
}
#blog-lista-custom .et_pb_post:hover .entry-featured-image-url img{
transform: scale(1.03);
}
/* Columna derecha */
#blog-lista-custom .et_pb_post h2.entry-title{
grid-column: 2;
grid-row: 1;
margin: 0 !important;
line-height: 1.15;
font-size: 22px;
letter-spacing: -0.2px;
}
/* Link del título */
#blog-lista-custom .et_pb_post h2.entry-title a{
text-decoration: none;
}
#blog-lista-custom .et_pb_post h2.entry-title a:hover{
text-decoration: underline;
text-underline-offset: 3px;
}
/* Extracto/resumen */
#blog-lista-custom .et_pb_post .post-content,
#blog-lista-custom .et_pb_post .post-content-inner,
#blog-lista-custom .et_pb_post .entry-content,
#blog-lista-custom .et_pb_post .post-excerpt{
grid-column: 2;
grid-row: 2;
margin-top: 6px !important;
font-size: 15px;
line-height: 1.55;
opacity: .92;
}
/* Limitar a 3 líneas el resumen (modificá 3 por 4/5 si querés) */
#blog-lista-custom .et_pb_post .post-content-inner,
#blog-lista-custom .et_pb_post .entry-content,
#blog-lista-custom .et_pb_post .post-excerpt{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Quitar meta (fecha/autor) si no la querés */
#blog-lista-custom .et_pb_post .post-meta{
display: none !important;
}
/* Ajustes para que Divi no meta márgenes raros */
#blog-lista-custom .et_pb_post .post-content{
padding: 0 !important;
}
/* Responsive */
@media (max-width: 980px){
#blog-lista-custom{ --img-w: 280px; --img-h: 190px; }
#blog-lista-custom .et_pb_post h2.entry-title{ font-size: 20px; }
}
@media (max-width: 767px){
#blog-lista-custom .et_pb_post{
grid-template-columns: 1fr;
}
#blog-lista-custom .et_pb_post .entry-featured-image-url{
grid-column: 1;
grid-row: 1;
}
#blog-lista-custom .et_pb_post h2.entry-title{
grid-column: 1;
grid-row: 2;
margin-top: 6px !important;
}
#blog-lista-custom .et_pb_post .post-content{
grid-column: 1;
grid-row: 3;
}
#blog-lista-custom .et_pb_post .entry-featured-image-url img{
height: auto;
}
}
Diseño responsive
En pantallas pequeñas:
- Imagen destacada
- Título
- Resumen
Todo se apila verticalmente, manteniendo una excelente legibilidad.
Divi es muy potente, pero a veces necesita un pequeño empujón con CSS para lograr diseños más personalizados.
Con esta técnica basada en CSS Grid, podés transformar completamente el aspecto del módulo Blog y darle un diseño profesional y moderno sin complicaciones.
Si te interesa seguir personalizando Divi o WordPress, en el blog voy a seguir compartiendo soluciones prácticas, reales y listas para usar.
