El módulo de blog de Divi en su configuración por defecto muestra la imagen destacada arriba y el texto del post (título, meta, excerpt) debajo. Es funcional, pero en términos de impacto visual no compite con lo que ves en blogs editoriales o de fotografía donde el texto flota encima de la imagen con un overlay oscuro. Ese estilo tipo magazine no solo se ve mejor — hace que cada card sea más compacta, más visual y más difícil de ignorar al hacer scroll. En este tutorial te explico cómo lograr ese efecto en el módulo de blog de Divi usando un snippet de jQuery y CSS sin tocar archivos del tema.
El resultado final lo puedes ver en la demo en vivo: layout.uxdivi.com. Lo que vamos a lograr es que el título, la meta y el excerpt del post queden superpuestos encima de la imagen destacada con un overlay semitransparente para que el texto sea legible.
¿En qué tipo de blogs funciona mejor este diseño?
Antes de implementarlo, vale la pena ser honesto sobre cuándo este layout funciona y cuándo no. El texto sobre imagen funciona muy bien cuando las imágenes destacadas son de alta calidad, tienen composición pensada y colores que permiten que el texto blanco sea legible. Un blog de fotografía, de viajes, de lifestyle, de gastronomía o un portafolio de diseño — esos son los casos ideales.
Donde no funciona tan bien es en blogs técnicos donde las imágenes son capturas de pantalla, diagramas o thumbnails generados automáticamente con fondos claros y mucho detalle visual. En esos casos, el overlay oscuro tapa el detalle de la imagen y el texto blanco compite con los detalles claros del fondo. Para ese tipo de contenido, la distribución clásica (imagen arriba, texto abajo) sigue siendo más legible.
Consejo: si tu blog mezcla tipos de contenido muy diferentes, considera usar este layout solo para una categoría específica y mantener el layout estándar para el resto. Divi te permite aplicar clases CSS a nivel de categoría con filtros de PHP.
El código que hace la magia: jQuery para reagrupar elementos
El desafío técnico de este efecto es que el módulo de blog de Divi genera el HTML con la imagen y el texto como elementos hermanos dentro de cada card, no con el texto dentro de la imagen. Por eso necesitamos jQuery para mover esos elementos dinámicamente al interior de la imagen antes de que se rendericen los estilos. No es un hack — es exactamente para lo que sirve la manipulación del DOM con jQuery en estos casos.
Paso 1: Añadir el script jQuery al head del blog
Ve a Divi → Opciones del tema → Integraciones y busca el campo de código a añadir en el <head>. Ahí pega el siguiente script:
jQuery(document).ready(function($){
$('.pa-blog .et_pb_post').each(function(){
var $title = $(this).find('.entry-title');
var $meta = $(this).find('.post-meta');
var $content = $(this).find('.post-content');
var $imgWrap = $(this).find('.entry-featured-image-url');
var $wrapper = $('<div class="pa-blog-text"></div>');
$wrapper.append($title, $meta, $content);
$imgWrap.append($wrapper);
});
});Lo que hace este script es sencillo: para cada post dentro del módulo de blog con clase pa-blog, toma el título, la meta y el contenido/excerpt, los envuelve en un div con clase pa-blog-text, y los mueve dentro del contenedor de la imagen destacada. A partir de ahí, CSS hace el resto.
Paso 2: Añadir la clase CSS al módulo de blog
En el constructor visual de Divi, abre las opciones del módulo de blog donde quieres aplicar el efecto. Ve a la pestaña Avanzado → Clase CSS y escribe pa-blog. Esta clase es lo que el script de jQuery usa para identificar qué módulo de blog debe transformar — si tienes varios módulos en la misma página, solo el que tenga esta clase recibe el tratamiento.
Paso 3: El CSS completo
El CSS es donde sucede el posicionamiento real. Puedes añadirlo en el CSS personalizado de la página (en las opciones de página de Divi) o en el CSS del tema hijo si quieres que aplique en todo el sitio. Este es el código completo:
/* Texto superpuesto en la imagen */
.pa-blog-text {
position: absolute;
top: 53%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 30px;
z-index: 1;
}
/* El artículo necesita position: relative para que el absolute funcione */
.et_pb_blog_grid article {
position: relative;
}
/* Eliminar el padding por defecto de los posts */
.et_pb_blog_grid .et_pb_post {
padding: 0px;
}
/* Eliminar el margen del contenedor de imagen */
.et_pb_image_container {
margin: 0;
}
/* Eliminar el margen de la imagen destacada */
.et_pb_post .entry-featured-image-url {
margin: 0;
}
/* El overlay oscuro sobre la imagen */
.et_pb_blog_grid .entry-featured-image-url::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}Hay cuatro cosas importantes en este CSS. Primero: position: relative en el artículo — sin esto, el position: absolute del texto no tiene un ancestro posicionado de referencia y se va a una posición inesperada. Segundo: los padding: 0 y los margin: 0 eliminar los espacios por defecto que Divi y WP añaden alrededor de la imagen, que de otro modo crearían gaps visuales indeseados. Tercero: el ::before en la imagen es el overlay — es un pseudo-elemento que cubre toda la imagen con un color semitransparente para que el texto encima sea legible. Cuarto: z-index: 1 en el wrapper de texto asegura que el texto quede encima del overlay.
Consejo: si los posts de tu blog tienen alturas de imagen muy diferentes, añade un
heightfijo (por ejemplo250px) yoverflow: hiddenal selector.entry-featured-image-url. Así todas las cards tienen la misma altura y el grid se ve uniforme independientemente del tamaño de cada imagen. También puedes complementar esto con el tutorial sobre cómo igualar la altura en el módulo del blog en rejilla.
Ajustar los detalles del texto sobre la imagen
Con el layout base funcionando, hay varios ajustes de detalle que marcan la diferencia entre un resultado correcto y uno realmente pulido.
Color del texto y la meta
El texto por defecto del módulo de blog de Divi probablemente sea oscuro, lo que contra el overlay no es legible. En las opciones de diseño del módulo de blog, cambia el color del título, de la meta (fecha, autor, categoría) y del excerpt a blanco o a un tono claro que contraste bien con el overlay oscuro.
El botón "Leer más"
Si tienes activado el botón de "Leer más" en el módulo, también necesita ajuste de color para ser visible sobre el overlay. Puedes cambiar su color de fondo y de texto en las opciones de diseño del módulo. Si quieres ir más allá y personalizar el botón con más flexibilidad, el tutorial de cómo personalizar el botón Leer más en el módulo de blog de Divi cubre todas las opciones.
El borde por defecto de las cards
El módulo de blog de Divi añade por defecto un borde gris alrededor de cada card. Con el layout de imagen completa, ese borde se ve fuera de lugar. Puedes eliminarlo desde las opciones de diseño del módulo → Borde → poniendo el ancho del borde en 0, o añadiendo border: none !important al selector .et_pb_blog_grid .et_pb_post en el CSS.
🎓 ¿Quieres dominar la personalización del módulo de blog en Divi?
El Mastery en Creación de Menús y Blogs Personalizados en Divi cubre este y muchos otros efectos de blog con el nivel de detalle que necesitas para implementarlos en proyectos reales.
Variaciones de este diseño
Una vez que tienes el layout base funcionando, hay varias variaciones que puedes explorar para darle más personalidad o adaptar el efecto al estilo de tu sitio.
Overlay con gradiente en lugar de color sólido
El overlay de color sólido al 50% de opacidad es simple pero puede tapar demasiado la imagen en fotos con mucho detalle. Un gradiente de abajo hacia arriba que solo oscurece la parte inferior (donde va el texto) y deja la parte superior de la imagen más visible suele verse más elegante:
.et_pb_blog_grid .entry-featured-image-url::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
}Con este gradiente, la parte superior de la imagen queda prácticamente sin overlay y la parte inferior (donde va el texto) tiene un gradiente oscuro que garantiza la legibilidad. Para que funcione bien con este gradiente, tienes que ajustar el posicionamiento del wrapper de texto para que quede en la parte inferior de la card — cambia top: 53% por bottom: 0 y transform: none.
Texto visible solo al hacer hover
Otra variación interesante para portafolios: la imagen se muestra completa sin overlay y el texto aparece solo cuando el usuario pasa el cursor sobre la card. Esto se logra con una transición CSS sobre el overlay y el texto:
/* Por defecto: overlay y texto invisibles */
.et_pb_blog_grid .entry-featured-image-url::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.3s ease;
}
.pa-blog-text {
opacity: 0;
transition: opacity 0.3s ease;
}
/* Al hacer hover: overlay y texto visibles */
.et_pb_blog_grid article:hover .entry-featured-image-url::before {
background-color: rgba(0, 0, 0, 0.6);
}
.et_pb_blog_grid article:hover .pa-blog-text {
opacity: 1;
}El efecto de transición hace que el overlay y el texto aparezcan suavemente al pasar el cursor. Ten en cuenta que esta variante no funciona bien en dispositivos táctiles donde no hay hover real — úsala en sitios donde la mayoría del tráfico es de escritorio.
Preguntas frecuentes
¿Qué pasa si algún post no tiene imagen destacada?
Si un post no tiene imagen destacada asignada, el módulo de blog de Divi no renderiza el contenedor .entry-featured-image-url para ese post. El script de jQuery no encontrará ese contenedor y el texto se quedará en su posición original (debajo de donde iría la imagen). Lo más práctico es asegurarte de que todos los posts tengan imagen destacada, o añadir una imagen por defecto desde los ajustes del módulo de blog.
¿Puedo usar una altura fija para todas las cards?
Sí, y es lo que recomiendo para que el grid se vea uniforme. Añade al selector de la imagen una altura fija con overflow oculto:
.pa-blog .entry-featured-image-url {
height: 280px;
overflow: hidden;
}
.pa-blog .entry-featured-image-url img {
width: 100%;
height: 100%;
object-fit: cover;
}El valor de object-fit: cover es clave — hace que la imagen llene el contenedor recortando lo que sobre, manteniendo la proporción. Sin esto, las imágenes con dimensiones muy diferentes se estirarían o mostrarían franjas blancas.
¿Qué color de overlay da mejor legibilidad?
El negro a 50% de opacidad (rgba(0,0,0,0.5)) es el punto de partida estándar y funciona bien para la mayoría de fotografías. Si tus imágenes son predominantemente oscuras, puedes bajar la opacidad al 30-40%. Si son muy claras o con mucho blanco, sube a 60-70%. Lo que yo evito es superar el 70% porque en ese punto el overlay tapa demasiado la imagen y pierde el sentido visual de tenerla.
Para saber más sobre cómo construir un blog completo con Divi desde cero, incluyendo el setup del módulo de blog y todas sus opciones de diseño, el tutorial de cómo crear un blog con Divi es un buen punto de partida.
Conclusión
El efecto de texto sobre imagen en el módulo de blog de Divi requiere un pequeño script de jQuery para mover los elementos en el DOM y CSS para el posicionamiento y el overlay. Una vez implementado, el resultado es visualmente sólido y le da al blog un estilo editorial que destaca claramente frente a la maquetación por defecto. El overlay con gradiente es mi variación favorita para fotografía y lifestyle — se ve más elegante que el color sólido y deja más visible la imagen. Prueba ambas y quédate con la que mejor encaje con tu contenido.
🎓 ¿Quieres dominar la personalización completa del blog en Divi?
El Mastery en Creación de Menús y Blogs Personalizados en Divi te da el sistema completo para diseñar blogs únicos, con layouts avanzados y personalización sin límites.
Comentarios
Para dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →