Egaliser les hauteurs des articles dans le module blog de DIVI

Créer une mise en page uniforme et attrayante pour vos articles de blog peut améliorer l’expérience utilisateur et l’esthétique générale de votre site web.

Si vous souhaitez égaliser la hauteur des articles dans le module Blog de Divi, suivez ces étapes :

Ouvrir les paramètres du module Blog : Cliquez sur l’icône en forme d’engrenage.
Aller dans l’onglet Design : Rendez-vous dans l’onglet Design → Layout et sélectionnez Grid.
Ajouter une classe CSS personnalisée : Allez dans Advanced Tab → CSS ID & Classes → CSS Class et attribuez une classe CSS personnalisée au module Blog. Par exemple : dt-blog-equal-height
Ajouter le code JavaScript : Allez dans Divi → Options de thème → Onglet Intégration → En-tête et ajoutez ce code JS :

<script>
(function ($) {
  $(document).ready(function () {
    $(window).resize(function () {
      $('.dt-blog-equal-height').each(function () {
        equalise_articles($(this));
      });
    });

    $('.dt-blog-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').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
        height += $(this).find('.entry-title').outerHeight(true);
        height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
        height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;

        heights.push(height);
      });

      var max_height = Math.max.apply(Math, heights);

      articles.each(function () {
        $(this).height(max_height);
      });
    }

    $(document).ajaxComplete(function () {
      $('.dt-blog-equal-height').imagesLoaded().then(function () {
        $('.dt-blog-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>

Résultat attendu : Une hauteur uniforme pour tous les articles du module Blog.

Aller + loin Changer la pagination par default dans le blog module de Divi

Divi - Blog module with Equalized Heights

Note importante : Ce code fonctionne uniquement avec les formats de publications standard ou vidéo. Si vous utilisez d’autres formats, tels que audio, citation, galerie ou lien, ce code ne sera pas compatible.