Comment uniformiser la hauteur des articles dans le module Blog

Oct 11, 2024 | Trucs & Astuces, Divi | 0 commentaires

TRUCS & ASTUCES

2. Comment uniformiser la hauteur des articles dans le module Blog de Divi

Introduction

Vous avez l’ambition d’améliorer et d’optimiser votre site WordPress ?

Vous êtes au bon endroit ! Dans cette catégorie « Trucs & Astuces », vous trouverez des conseils pratiques et des solutions simples pour transformer votre site en une plateforme performante et attractive. Que vous souhaitiez améliorer sa vitesse, renforcer sa sécurité, ou découvrir des plugins indispensables, chaque article vous guidera pas à pas.

L’objectif : vous offrir des astuces efficaces pour que la gestion et l’optimisation de votre site WordPress deviennent un jeu d’enfant, tout en maximisant son potentiel.

Créer un agencement uniforme et visuellement attrayant pour vos articles de blog peut grandement améliorer l’expérience utilisateur ainsi que l’esthétique générale de votre site web. Vous utilisez le thème Divi et souhaitez que tous vos articles dans le module Blog aient la même hauteur ?

Voici une astuce simple pour y parvenir en utilisant du JavaScript personnalisé.

Étape 1 : Ouvrir les paramètres du module Blog

Dans votre constructeur Divi, commencez par ouvrir les paramètres du module Blog en cliquant sur l’icône en forme d’engrenage.

Étape 2 : Choisir la mise en page en grille

Allez dans l’onglet StyleModèle puis sélectionnez Grille.

Étape 3 : Ajouter une classe CSS personnalisée

Ensuite, allez dans l’onglet AvancéID et classes CSSClasse CSS, et ajoutez une classe CSS personnalisée au module Blog. Nous vous conseillons d’utiliser dt-blog-equal-height.

divi blog colonnes

Étape 4 : Ajouter du code JavaScript dans l’en-tête du thème

Une fois la classe CSS définie, dirigez-vous vers DiviOptions du thèmeOnglet Intégration, puis collez le code JavaScript suivant dans la section Code à ajouter dans le <head> de votre blog.

Attention: ne pas oublier d’entourer votre code JavaScript des balises « <script>…</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);


        
    

Résultat :

Après avoir ajouté ce code, vos articles de blog dans le module auront des hauteurs égales, créant un agencement plus équilibré et professionnel.

Note importante : Ce code fonctionne uniquement pour les formats d’articles standards ou vidéo. Si vous utilisez d’autres formats comme Audio, Citation, Galerie ou Lien, cette méthode ne fonctionnera pas.

N’hésitez pas à tester cette astuce pour rendre vos pages de blog plus harmonieuses sur votre site web Divi !

Conclusion

Avec ces quelques lignes de code JavaScript, vous pouvez facilement uniformiser la hauteur des articles dans le module Blog de Divi pour un rendu plus équilibré et esthétique. Ce guide vous a montré comment :

  • Configurer le module Blog en mode Grille.
  • Ajouter une classe CSS personnalisée.
  • Intégrer un script JavaScript pour égaliser la hauteur des articles.

Ces petites optimisations peuvent grandement améliorer l’apparence et l’harmonie de votre site, offrant ainsi une meilleure expérience utilisateur. N’hésitez pas à explorer davantage et à ajuster le code selon vos besoins pour un blog encore plus personnalisé et visuellement attractif.

Prêt à démarrer votre projet ou besoin d’aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

Articles similaires

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Restez informé des dernières nouveautés et offres exclusives en vous abonnant à notre newsletter

Suivez-Nous

Rejoignez notre communauté en nous suivant sur les réseaux sociaux pour ne rien manquer de nos actualités et mises à jour

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Inscrivez-vous à notre Newsletter

Rejoignez notre liste de diffusion et profitez de 10 % de réduction sur nos tarifs !

You have Successfully Subscribed!