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

par Agathe Brusset | 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 :

&amp;amp;lt;script&amp;amp;gt;
/* Blog Module equal height grid &amp;quot;boxes&amp;quot; */
	(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);
&amp;amp;lt;/script&amp;amp;gt;

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

← Comment connaître la stratégie SEO de ses concurrents ? Comment démarrer sa stratégie de contenu sur LinkedIn ? →

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 🙂

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 !

Me contacter