En este tutorial te mostraremos como igualar la altura en el módulo del blog de Divi en su configuración de rejilla ¡Veamos los detalles!
Cuando realizamos un blog estilo rejilla con el módulo de blog de Divi pasa que si no tenemos los extractos del post, o los títulos del mismo tamaño, los “cuadros” de los post no tienen la misma altura inicialmente, porque cada artículo o publicación contiene una cantidad diferente de contenido, incluso si solo el título de la publicación es mostrado.
Índice
Aprende a crear un blog estilo magazzine con este tutorial prémium.
Bien, para resolver esto aplicaremos un poco de código javascript y una clase especifica a nuestro módulo de blog. Veamos los pasos:
Entra aquí para ver en acción la DEMO →
Paso 1: Haz copia de seguridad de tu WordPress
Como vamos a meter código al sitio, siempre recomendamos que antes hagas una copia de seguridad por si algo sale mal. En este post te enseñamos como hacer una copia de seguridad en WordPress y como recuperarla también.
Paso 2: Aplicamos una clase CSS al módulo del blog
En este paso debemos aplicar una clase CSS personalizada al módulo del blog para que nuestro código posterior surta efecto.
Ve al módulo del blog: Configuración del blog > Avanzado > ID y clases de CSS > Clase de CSS y coloca la siguiente clase:
et_blog_grid_equal_height
Paso 3: Aplicamos el código javascript en las opciones de integración de Divi
Luego inserta y guarda el siguiente código JavaScript en Divi > Opciones de tema > Integración > Agregar código al Head de su blog:
<script>
(function($) {
$(document).ready(function() {
$(window).resize(function() {
$('.et_blog_grid_equal_height').each(function() {
equalise_articles($(this));
});
});
$('.et_blog_grid_equal_height').each(function() {
var blog = $(this);
equalise_articles($(this));
var observer = new MutationObserver(function(mutations) {
equalise_articles(blog);
});
var config = {
subtree: true,
childList: true
};
observer.observe(blog[0], config);
});
function equalise_articles(blog) {
var articles = blog.find('article');
var heights = [];
articles.each(function() {
var height = 0;
height += $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true);
height += $(this).find('.entry-title').outerHeight(true);
height += $(this).find('.post-meta').outerHeight(true);
height += $(this).find('.post-content').outerHeight(true);
heights.push(height);
});
var max_height = Math.max.apply(Math,heights);
articles.each(function() {
$(this).height(max_height);
});
}
$(document).ajaxComplete(function() {
$('.et_blog_grid_equal_height').imagesLoaded().then(function() {
$('.et_blog_grid_equal_height').each(function(){
equalise_articles($(this));
});
});
});
$.fn.imagesLoaded = function() {
var $imgs = this.find('img[src!=""]');
var dfds = [];
if (!$imgs.length) {
return $.Deferred().resolve().promise();
}
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function() {
dfd.resolve();
};
img.onerror = function() {
dfd.resolve();
};
img.src = this.src;
});
return $.when.apply($, dfds);
}
});
})(jQuery);
</script>
¡Y listo! Si todo sale bien, podrás igualar la altura en el módulo del blog en rejilla en tu blog con Divi.
El resultado será algo como esto:
Antes:
Después:
Disclaimer: Este código funciona cuando se incluyen publicaciones de blog tipo estándar o de video en el módulo de blog, el uso del formato de publicación de audio o cualquier otro formato de publicación hará que el código no funcione.
¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo Snippet.
Hola Jefferson, felicidades porque lograr esto tan útil y básico que en principio podría parecer sencillo, ya se ve que no es nada fácil de conseguir y que te ha requerido de la ayuda de un programador.
Pero entiendo que ese código JavaScript, al meterlo en la cabecera de la web, carga en todos los post y páginas del sitio, aunque no tengan funcionando dentro el módulo de blog y eso puede provocar ralentización del sitio. Me gusta intentar que sólo se carguen las cosas que se utilizan ¿No hay manera de meterlo sólo en las publicaciones que tengan dentro el módulo de blog?
Gracias.
Que tal Miguel. No lo he probado, pero intenta meter el script en un módulo de código debajo del elemento que necesitas que se iguale, a ver si funciona. Me parece que si va a funcionar. En todo caso, si no funciona, recuerda que siempre tienes el plugin de Divi Blog Módule que te permite esta opción: https://uxdivi.com/tutorial-premium/plugin-premium/crear-blog-estilo-magazzine-con-divi-blog-module-de-divi-gear
Y también tienes un curso completo donde usamos esta misma solución para crear diferentes tipos de blog modules: https://uxdivi.com/cursos/curso-de-blog-magazine-con-divi-blog-module
Hola Jefferson, te molesto con una consulta similar a esto, si en una sección tengo una imagen y un acordeón (toggle), cómo logro que ambos módulos siempre tenga el mismo alto? Te consulto esto, porque si bien la imagen se va achicando de manera responsiva, el acordeón no lo hace en conjunto a la imagen y siempre tengo un espacio blanco debajo de la imagen, hasta que la pantalla llega a una medida de tablet o Mobile. Gracias desde Argentina.
Que tal mi estimado David. Para lograr esto, lo que te puedo recomendar es que la imagen no la coloques con el módulo de imagen, sino más bien como “fondo” de la columna número 2. Luego, en las opciones de diseño de la fila activa la casilla que dice “igualar la altura de las columnas” y con ello la imagen te quedará del tamaño de la columna número 1 sin importar su tamaño.
Gracias, funciona! Y gracias por el contante aporte que haces.
¡Excelente!
Excelente como siempre, pana. ¡Felicidades! Por cierto, el script se puede poner en un módulo de código en la página de blog y funciona perfectamente. Así se evita que el script se cargue en todas las páginas y afecte la velocidad de carga (aunque sea mínimo). Yo hice algo así para una web de un cliente de España. y se ve muy bien que la altura de los post sean iguales. Saludos hasta chilangolandia desde regiolandia.
¡Muchas gracias mi Pana! Un gran saludo a regiolandia de nuevo, extraño las campechanas y el pollo loco.
Buenas tardes. No consigo que funcione. Estoy empezando con tus tutoriales y voy un poco torpe de primeras, pero he seguido las instrucciones, que son muy sencillas, y no consigo que cambie nada.
Que tal Pilar, en el minuto 3:46 de nuestro video explicamos un disclaimer que debe verificarse para que funcione el código, quizá te falta revisar ello. 😊🖐