¿No sabes qué significa algún término? Consulta el glosario
Igualar la altura de cada elemento del módulo de blog en Divi
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/
En esta entrada pueden haber enlaces de afiliado a productos y servicios en los que a veces podrás obtener descuentos si compras algo, y yo, como autor de la entrada, una pequeña comisión. No te preocupes, nunca pagarás de más y nunca verás enlaces de afiliados de algo que yo mismo no utilice o recomiende.
GRACIIAAASSSSS MAESTRO
De nada 😀
Impresionante, muchas gracias
¡No hay de qué!
Simplemente perfecto! Muchísimas gracias!!!
No hay de qué José Ramón 🙂