Igualar altura en el blog de Divi en rejilla (CSS)

El módulo de blog de Divi en formato rejilla tiene un problema que aparece casi siempre en producción: las tarjetas tienen alturas diferentes. Una tiene un título de dos líneas, la siguiente solo una, otra tiene un resumen más largo — y el resultado es una rejilla irregular que se ve descuidada, como si los posts tuvieran pesos distintos aunque todos sean igual de importantes. Es exactamente el tipo de detalle que un cliente nota sin saber por qué, pero que percibe como "algo está raro en el diseño".

La solución no es magia: es una combinación de una clase CSS y un pequeño script JavaScript que calcula las alturas en tiempo de ejecución y las iguala. En este tutorial te explico paso a paso cómo implementarlo, cuándo necesitas esta solución y qué alternativas existen si estás trabajando con Divi 5. Puedes ver el resultado en vivo en la demo de test.uxdividemos.com. También tengo un tutorial relacionado sobre cómo crear un blog profesional con Divi si quieres ver el módulo de blog completo desde cero.

¿Cuándo aparece este problema y por qué ocurre?

El problema de las alturas desiguales en el módulo de blog en rejilla ocurre porque cada tarjeta tiene contenido de longitud variable. Si todos tus posts tuvieran títulos exactamente de la misma longitud y resúmenes exactamente del mismo largo, las tarjetas serían iguales. Pero en el mundo real eso no pasa nunca.

Técnicamente, la causa es que el módulo de blog de Divi no usa CSS Grid ni Flexbox con align-items: stretch en su implementación base — las tarjetas son elementos de bloque que crecen según su contenido. Sin una regla que fuerce la altura mínima o iguale las alturas dentro de cada fila, el resultado es esa rejilla irregular.

Cuándo necesitas esta solución específicamente

No todos los blogs con el módulo en rejilla necesitan este fix. Lo necesitas cuando:

• Tienes títulos de posts de longitud muy variable (algunos de 3-4 palabras, otros de 10-12).
• Muestras el resumen o extracto del post en las tarjetas — los resúmenes varían mucho en longitud.
• Tu rejilla tiene 3 o más columnas, lo que hace la irregularidad más visible.
• No tienes imágenes destacadas en todos los posts, o algunas tienen proporciones diferentes.

Si todos tus posts tienen imagen destacada de las mismas dimensiones y usas la vista sin extracto, el problema puede ser menos pronunciado. Pero si tu blog tiene variedad de contenido, este fix es casi obligatorio para un look profesional.

Alternativas a este método

Antes de entrar en la implementación, es justo mencionar que existen otras formas de atacar este problema, con sus propias ventajas y limitaciones:

CSS puro con min-height: puedes forzar una altura mínima en las tarjetas con una regla CSS simple. Es la solución más rápida, pero es un valor fijo que puede quedar mal en móvil o cuando el contenido es especialmente corto o largo.

Cortar los resúmenes a longitud fija: si defines un límite de caracteres para el extracto (desde la configuración del módulo o con un filtro en functions.php), los resúmenes quedan más uniformes y el problema se reduce. No lo elimina del todo, pero lo minimiza.

Divi 5 con CSS Grid nativo: en Divi 5, el módulo de blog renovado tiene soporte para layouts de CSS Grid donde puedes usar align-items: stretch directamente desde el builder. Si estás en Divi 5 y construyendo desde cero, esta es la opción que recomiendo explorar primero antes de implementar el JS. En sitios legados o con Divi 4, el método de este tutorial sigue siendo la solución más efectiva.

🎓 ¿Quieres aprender a trabajar con el módulo de blog en Divi de forma profesional?
En el Curso de Menús y Blogs personalizados en Divi te enseño a construir listados de blog con diseño custom, incluyendo cómo resolver problemas visuales como este de forma estructurada.

Paso 1: haz un backup antes de tocar nada

Antes de agregar cualquier código a tu sitio, haz un backup. En este caso modificarás las opciones de integración de Divi, que es un área que afecta a todo el sitio. Si algo sale mal, quieres poder revertir. Un backup rápido de la base de datos con UpdraftPlus o desde el panel de tu hosting es suficiente para este caso — los cambios son solo de opciones y no afectan los archivos del tema.

Si usas un entorno de staging (cosa que recomiendo siempre), prueba primero ahí. Verifica que las tarjetas se ven correctamente antes de pasar a producción.

Paso 2: asigna la clase CSS al módulo del blog

El JavaScript que igualará las alturas necesita un selector CSS para identificar el módulo de blog que quieres afectar. El proceso es igual al de asignar cualquier clase en Divi:

1. Abre el módulo Blog en el Divi Builder.
2. Ve a la pestaña Avanzado → CSS ID & Clases.
3. En el campo Clase CSS, ingresa: et_blog_grid_equal_height
4. Guarda el módulo.

Consejo: si tienes más de un módulo de blog en el mismo sitio y solo quieres igualar las alturas en uno específico, asegúrate de agregar la clase solo en ese módulo. El JS buscará ese selector y solo afectará los módulos que lo tengan.

Paso 3: agrega el JavaScript en las opciones de integración de Divi

Este paso es donde ocurre la magia. El script calcula en JavaScript las alturas de todos los artículos dentro de cada fila de la rejilla y las iguala al elemento más alto de esa fila. Ve a Divi → Opciones de Tema → Integración → Agregar código al <body> y pega el siguiente código:

(function($){
    function equalise_articles() {
        if ($('.et_blog_grid_equal_height').length) {
            var items = $('.et_blog_grid_equal_height .et_pb_post');
            var columns = 0;
            var firstItem = items.first();

            if (firstItem.hasClass('et_pb_blog_grid_item_1_of_3')) {
                columns = 3;
            } else if (firstItem.hasClass('et_pb_blog_grid_item_1_of_2')) {
                columns = 2;
            } else if (firstItem.hasClass('et_pb_blog_grid_item_1_of_4')) {
                columns = 4;
            }

            if (columns > 0) {
                items.css('height', '');
                for (var i = 0; i < items.length; i += columns) {
                    var rowItems = items.slice(i, i + columns);
                    var maxHeight = 0;
                    rowItems.each(function() {
                        var h = $(this).outerHeight();
                        if (h > maxHeight) maxHeight = h;
                    });
                    rowItems.css('height', maxHeight + 'px');
                }
            }
        }
    }

    $(document).ready(function() {
        equalise_articles();
        $(window).resize(function() {
            equalise_articles();
        });
    });
})(jQuery);

El script detecta automáticamente si el módulo está configurado en 2, 3 o 4 columnas, y ajusta las alturas por fila. También recalcula cuando el usuario cambia el tamaño de la ventana, lo que lo hace responsivo.

Consejo: si tienes un plugin de caché activo (LiteSpeed Cache, WP Rocket, W3 Total Cache), vacía el caché después de guardar este código. Si el caché sirve una versión vieja de la página sin el script, el efecto no aparecerá hasta que el caché se regenere.

Una nota importante: esta solución funciona con el módulo Blog de Divi en su formato estándar y video. No funciona con el formato de audio porque ese formato tiene una estructura de DOM diferente que el script no contempla.

🎓 ¿Quieres dominar el módulo de blog personalizado en Divi?
El Curso de Menús y Blogs personalizados en Divi te enseña a crear listados de blog con diseño custom, filtros, categorías y toda la personalización visual que necesitas para proyectos reales.

Troubleshooting: si la solución no funciona

El JS no parece ejecutarse

Lo primero que hay que verificar es si el script está llegando al navegador. Abre las herramientas de desarrollo del navegador (F12), ve a la pestaña Network y busca si hay errores JavaScript en la consola. Si ves un error como "$ is not defined", el problema es que jQuery no está cargado antes que tu script. En ese caso, envuelve el código en un listener que espere a que jQuery esté disponible, o asegúrate de que tu tema carga jQuery correctamente.

Las alturas se igualan pero luego se deshacen

Esto ocurre cuando hay otro script en la página que modifica el DOM después de que el tuyo corra — por ejemplo, un plugin de lazy loading de imágenes que cambia las alturas de los elementos cuando carga las imágenes. La solución es mover la llamada a equalise_articles() para que se ejecute después de que las imágenes terminen de cargar: reemplaza $(document).ready() por $(window).on('load', function(){}).

El efecto no aplica en móvil

En móvil, el módulo de blog de Divi normalmente cambia a una columna, lo que hace innecesario igualar alturas. Pero si tienes un diseño que mantiene 2 columnas en tablet o en ciertos breakpoints, el script debería seguir funcionando porque incluye un listener de resize que recalcula las alturas cuando cambia el tamaño de la ventana.

Preguntas frecuentes

¿Funciona con paginación AJAX?

Con la paginación AJAX estándar de Divi, el script puede no recalcular las alturas cuando se carga una nueva página de resultados, porque el DOM cambia pero el evento ready ya corrió. Para hacerlo funcionar con AJAX, necesitarías enganchar la función equalise_articles() al evento que dispara Divi cuando completa la carga AJAX. Esto requiere modificar ligeramente el script para escuchar ese evento personalizado.

¿Afecta el rendimiento del sitio?

El impacto en rendimiento es mínimo. El script es pequeño y solo se ejecuta en páginas donde está presente el módulo con la clase asignada. El cálculo de alturas es una operación DOM muy liviana. Si tienes una rejilla con 30 o más posts visibles simultáneamente, es posible que notes un parpadeo muy breve mientras el script calcula y aplica las alturas — es normal y dura milisegundos.

¿Es compatible con Divi 5?

El script sigue funcionando en Divi 5 si el módulo de blog mantiene la misma estructura de clases CSS. Sin embargo, en Divi 5 tienes opciones más modernas para resolver este problema directamente desde el builder con CSS Grid. Mi recomendación para sitios nuevos en Divi 5 es explorar primero las opciones nativas del builder antes de recurrir al script JS.

¿Puedo usar este mismo método para otros módulos, no solo el blog?

El principio es el mismo, pero el selector CSS dentro del script apunta específicamente a .et_pb_post que son los elementos de las tarjetas del módulo blog. Para otros módulos necesitarías adaptar el selector al elemento correcto que representa cada ítem de la rejilla.

Conclusión

Las alturas desiguales en el módulo de blog de Divi en rejilla son un problema visual que se puede resolver de forma definitiva con este método. Un backup, una clase CSS en el módulo y el script en las opciones de integración de Divi — y tu rejilla queda perfecta sin importar qué tan variables sean los títulos o los resúmenes de tus posts. Es uno de esos fixes que una vez que lo tienes guardado, lo usas en casi todos los proyectos con un blog en rejilla.

🎓 ¿Quieres dominar los blogs y menús personalizados en Divi de punta a punta?
El Curso de Menús y Blogs personalizados en Divi te da el sistema completo paso a paso para crear listados de blog con diseño profesional, filtros por categoría y personalización visual avanzada.