+ 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 :

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

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

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie 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.