Igualar la altura de cada elemento del módulo de blog en Divi

Columnas del blog de Divi igualadas

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:

Módulo de blog con artículos en estilo masonry

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.

clase css divi

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:
Columnas del blog de Divi igualadas

—-
Fuente: https://divi-sensei.com/blog/2018/03/07/divi-equalized-blog-grid-cards/