+ 33 6 28 36 29 41 agathe.brusset@gmail.com

Comment faire pour que les extraits d’articles aient la même longueur sur Divi ?

par | 17 Juil 2020

Si vous avez un blog sur WordPress et que vous utilisez le thème Divi, alors vous avez probablement des extraits d’articles de longueurs inégales. Ce n’est pas très esthétique, voici donc une solution pour les mettre à la même hauteur !

En utilisant le module « Blog » du thème builder, vous avez probablement ce résultat là :

Heureusement, avec un peu de Javascript, nous pouvons faire en sorte d’égaliser les hauteurs des cartes de blog pour avoir ce résultat là :

Comment faire ?

Tout d’abord, insérez la classe CSS   » et_blog_grid_equal_height  » dans le module Blog de votre page. Cela peut-être dans votre page d’accueil, votre page de blog ou vos pages d’articles via le thème builder.

Puis insérez tout simplement ce bout de code dans la balise <body > de votre thème. Allez dans Divi > Options du thème > Intégration :

<script>
/* Blog Module equal height grid boxes */
	(function($) {
    $(document).ready(function() {
        $(window).resize(function() {
            $('.et_blog_grid_equal_height').each(function() {
                equalise_articles($(this));
            });
        });

        $('.et_blog_grid_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').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() {
            $('.et_blog_grid_equal_height').imagesLoaded().then(function() {
                $('.et_blog_grid_equal_height').each(function(){
                    equalise_articles($(this));
                });
            });
        });

        $.fn.imagesLoaded = function() {
            var $imgs = this.find('img[src!=&amp;quot;&amp;quot;]');
            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>

Et voilà, c’est terminé ! Vous avez maintenant une ligne d’articles qui ont la longueur du plus long. Dites-moi en commentaire si ça a fonctionné pour vous !

Source: 

https://intercom.help/elegantthemes/en/articles/3371227-blog-module-equal-height-grid-boxes-with-javascript

Agathe Brusset
UX designer avec de nombreuses compétences en web-design et communication digitale, je vous accompagne dans la refonte de votre site vitrine, de la création de votre identité de marque à la publication de votre nouveau site en passant par les tests utilisateurs, faites appel à moi pour vos prochains projets ! En attendant, bonne lecture 🙂

2 Commentaires

  1. Alix

    Bonsoir,
    Ravie de trouver un tuto clair et précis pour harmoniser la taille de mes grilles de blog. Mais bouh… ça ne fonctionne pas chez moi sur mon site en cours de travaux… j’ai pourtant tout bien vérifié…

    Réponse
    • Agathe Brusset

      Bonjour Alix, les caractères spéciaux de mon snippet n’étaient pas corrects, c’est maintenant corrigé. Essayez de nouveau et dites-moi si ça marche mieux!

      Bon dévelopement.

      Réponse

Soumettre un commentaire

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

CAPTCHA


Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Besoin d'aide pour la refonte de votre site ?

Faites-vous accompagner par une spécialiste du web design ! Je vous guide et vous conseille sur le meilleur moyen de réaliser votre projet de modernisation de votre présence en ligne, n’hésitez pas à me contacter avec les détails de votre projet !