Comportamiento por defecto
En Divi, cuando uno añade el módulo de blog, cada artículo se mostrará en una casilla pero no tendrá la misma altura; dependerá del contenido de esta. Esto está muy bien si te gusta el estilo masonry. Aquí tienes un ejemplo:
Pero para muchos, y me incluyo, normalmente se ve mal y/o raro. En mi opinión, el estilo masonry debería dejarse para las galerías de fotos. Vamos a ver cómo solucionarlo y así poder igualar la altura de todas las columnas y/o artículos del módulo de blog de Divi.
La mala solución
En Internet vas a ver muchos artículos que te dirán que la solución es añadir una clase CSS al módulo de blog y luego añadir un par de líneas de CSS, del estilo
@media only screen and (min-width: 768px) {
.mi_blog .et_pb_post {
min-height: 500px;
max-height:500px;
}
}Pues bien, eso no es la mejor idea porque le estás dando una altura fija a cada artículo del blog, y como añadas demasiado texto en el extracto, este se va a salir de la casilla y ya la hemos liado. O si no añades suficiente texto , te va a quedar un espacio en blanco en la parte de abajo de la casilla.
La buena solución
Consiste en dos pasos. El primero es simplemente añadir una clase CSS a nuestro módulo de blog. Abrimos el editor visual y hacemos clic en nuestro blog. Luego nos vamos a la pestaña Avanzado y en la clase CSS escribimos una palabra cualquiera sin espacios. Por ejemplo: «mi_blog». Guarda los cambios y sal del editor visual.
Ahora, el segundo paso, consiste en añadir el siguiente código en Divi > Opciones del tema > Integración > Agregar código al <head> de su blog.
<script>
(function ($) {
$(document).ready(function () {
$( window ).resize(function() {
$(".mi_blog").each(function(){
equalise_articles($(this));
});
});
$(".mi_blog").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).outerHeight() - $(this).height();
height += $(this).find(".et_pb_image_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(){
$(".mi_blog").imagesLoaded().then(function(){
console.log("images loaded");
$(".mi_blog").each(function(){
equalise_articles($(this));
});
});
});
$.fn.imagesLoaded = function () {
var $imgs = this.find('img[src!=""]');
if (!$imgs.length) {return $.Deferred().resolve().promise();}
var dfds = [];
$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>Guarda los cambios, y eso debería ser todo. Ahora, si actualizas tu página de blog, las columnas ya estarán igualadas, y tu módulo de blog de Divi se verá bien bonito:
—-
Fuente: https://divi-sensei.com/blog/2018/03/07/divi-equalized-blog-grid-cards/
GRACIIAAASSSSS MAESTRO
De nada 😀
Impresionante, muchas gracias
¡No hay de qué!
Simplemente perfecto! Muchísimas gracias!!!
No hay de qué José Ramón 🙂