Comment égaliser les colonnes des grilles (grid) d’articles de votre blog dans Divi

Par Laura Bellon

Webdesigner WordPress en freelance avec Elementor puis Divi depuis 2023, j'aime créer des designs esthétiques, soignés et originaux pour sublimer l'image de mes clients.

2 septembre 2024

Illustration de billets de blog disposé de manière équilibrée

Égaliser la hauteur des colonnes dans les articles de blog Divi :
une astuce simple pour un design impeccable

 

Si vous utilisez le thème Divi pour créer un site web, vous avez probablement déjà rencontré un problème qui vous a fait lever les yeux au ciel : les colonnes de votre grille d’articles de blog qui s’affichent avec des hauteurs inégales.

Oui, je sais, c’est un cauchemar pour les perfectionnistes du webdesign ! Mais rassurez-vous, il existe une solution simple pour aligner ces fichues articles et rendre votre blog plus harmonieux.

 

L’astuce miracle pour des colonnes d’articles Divi à hauteur égale

 

Voici l’astuce que vous cherchiez, trouvée sur cette vidéo YouTube (en anglais) et détaillée dans cet article de Pee-Aye Creative (en anglais lui aussi).

L’auteur de la vidéo et de l’article s’est également largement inspiré de l’astuce fournie directement par Elegant Theme, le créteur de Divi.

Pour égaliser la hauteur des cards de vos articles de blog, il vous suffira d’ajouter des bouts de code JQuery et CSS dans votre site WordPress.

Pas besoin de thème enfant, pas besoin de coder pendant des heures, ni d’être un as en langage informatique.

 

Pourquoi est-ce important, puisque mes articles de blog s’affichent déjà ?

 

Eh bien, imaginez ceci : vos visiteurs parcourent votre blog et tombent sur une grille d’articles où les cards ressemblent plus à une œuvre de Picasso qu’à un design moderne et épuré . Croyez-moi, ils ne resteront pas longtemps.

Une hauteur égale améliore non seulement l’esthétique de votre site, mais renforce également l’expérience utilisateur, en rendant la navigation plus fluide et agréable.

Et ça, c’est le genre de détail qui peut faire toute la différence entre un visiteur qui reste… et un qui part.

 

Voici les étapes à suivre pour y parvenir :

  1. Ajouter une classe CSS personnalisée au module Blog dans Divi.
  2. Ajouter du code jQuery pour égaliser la hauteur des grilles en fonction de leur contenu.
  3. Ajouter du CSS supplémentaire pour améliorer l’affichage sur différents appareils et tailles d’écran.

 

 

1. Ajouter une classe CSS personnalisée au module Blog dans Divi

 

La première étape consiste à ajouter une classe CSS personnalisée à votre module Blog.

Oui, je sais, ça a l’air technique voire effrayant pour ceux et celles allergiques au code ou profane en la matière, mais ne paniquez pas.

Ouvrez votre module Blog dans Divi, cliquer sur l’onglet « Avancé« . Là vous trouverez une petite case où vous écrirez la classe CSS personnalisée: pa-blog-equal-height .

C’est comme donner un surnom à votre module, sauf que celui-ci aidera vos grilles à avoir la même taille.

2. Ajouter du code jQuery pour égaliser la hauteur des grilles en fonction de leur contenu

 

Sauvegardez vos changements dans le module Blog, puis rendez vous dans votre tableau de bord WordPress > Divi > Options du thème > onglet Intégrations.

La deuxième étape consiste à ajouter du code jQuery pour égaliser la hauteur des grilles (grid).

C’est ici que vous devenez un magicien du code, prêt à impressionner vos amis (ou juste à améliorer votre blog).

Vous allez insérer le script jQuery ci-dessous dans la section “Ajouter du code à l’en-tête <head> de votre blog”.

 

Ce code va mesurer la hauteur de chaque article et s’assurer qu’ils sont tous de la même taille.

(Désolée pour la mise en forme des extraits de code qui n’est pas optimale. Pour des raisons de sécurité , il est difficile de pouvoir montrer facilement des scripts. Je m’employe à trouver une solution. Pardon pour la gêne !)

 

<script>
(function ($) {
var pa_equalize_button_height = « true »;
if (pa_equalize_button_height == « false ») {
function pa_equalize_blog_post_height(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);
});
}
} else {
function pa_equalize_blog_post_height(blog) {
var articles = blog.find(‘article’);
var heights = [];
var btnheights = [];
articles.each(function () {
var height = 0;
var btnheight = 0;
var basebtnmargin = 20;
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’).outerHeight(true);
height += $(this).find(‘.post-content’).outerHeight(true);
btnheight += ($(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;
btnheight += $(this).find(‘.entry-title’).outerHeight(true);
btnheight += $(this).find(‘.post-meta’).outerHeight(true);
btnheight += $(this).find(« .post-content p »).outerHeight(true);
btnheight += basebtnmargin;
heights.push(height);
btnheights.push(btnheight);
});
var max_height = Math.max.apply(Math, heights);
var max_btn_height = Math.max.apply(Math, btnheights);
articles.each(function () {
$(this).height(max_height);
var eachheight = 0;
var eachbasebtnmargin = 20;
eachheight += ($(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;
eachheight += $(this).find(‘.entry-title’).outerHeight(true);
eachheight += $(this).find(‘.post-meta’).outerHeight(true);
eachheight += $(this).find(« .post-content p »).outerHeight(true);
eachheight += eachbasebtnmargin;
var requiredbtnmargin = (max_btn_height – eachheight) + eachbasebtnmargin;
$(this).find(« .more-link »).css(« margin-top », requiredbtnmargin + « px »);
});
}
}
$(document).ready(function () {
$(window).resize(function () {
if ($(this).width() >= 768) {
$(« .pa-blog-equal-height article »).each(function () {
$(this).removeClass(« pa-auto-height »);
$(this).find(« .more-link »).removeClass(« pa-auto-margin »);
})
$(‘.pa-blog-equal-height’).each(function () {
pa_equalize_blog_post_height($(this));
});
$(‘.pa-blog-equal-height’).each(function () {
var pa_blog = $(this);
pa_equalize_blog_post_height(pa_blog);
var observer = new MutationObserver(function (mutations) {
pa_equalize_blog_post_height(pa_blog);
});
var config = {
subtree: true,
childList: true
};
observer.observe(pa_blog[0], config);
});
$(document).ajaxComplete(function () {
$(‘.pa-blog-equal-height’).imagesLoaded().then(function () {
$(‘.pa-blog-equal-height’).each(function () {
pa_equalize_blog_post_height($(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);
}
} else {
$(« .pa-blog-equal-height article »).each(function () {
$(this).addClass(« pa-auto-height »);
$(this).find(« .more-link »).addClass(« pa-auto-margin »);
})
}
});
});
})(jQuery); 
</script>

3. Ajouter du CSS supplémentaire pour améliorer l’affichage sur différents appareils et tailles d’écran

 

La dernière étape consiste à ajouter un peu de CSS supplémentaire pour garantir que vos grilles restent bien alignées sur tous les types d’écrans, des grands aux petits.

Ce CSS va ajuster les marges et les dimensions en fonction de la taille de l’écran, de sorte que vos articles conservent leur belle apparence, même sur un téléphone.

Toujours dans les options du thème Divi, rendez vous maintenant dans l’onglet Général, puis descendez tout en bas au niveau de Personnaliser CSS.

(Encore désolée pour cette présentation de code déplorable. Puriste du code, coeur sur vous <3 )

.pa-blog-equal-height .pa-auto-height {

height: auto !important; }

.pa-blog-equal-height .pa-auto-margin {

margin-top: 20px !important; }

Ces petites touches peuvent sembler anodines, mais elles contribuent à créer une expérience utilisateur plus cohérente et agréable.

Et n’oubliez pas : dans le webdesign, les détails comptent.

 

Besoin d’un coup de main ?

 

Vous avez essayé ces astuces, mais vous avez encore besoin d’aide pour faire briller votre site web ?

Que diriez-vous de confier la création ou l’amélioration de votre site WordPress à un professionnel du webdesign ?

Je suis là pour vous aider à transformer votre site en une véritable œuvre d’art numérique, où chaque détail compte.

Contactez-moi dès aujourd’hui pour discuter de votre projet et voir comment nous pouvons collaborer pour créer un site web qui non seulement attire l’attention, mais aussi convertit vos visiteurs en clients fidèles.

Vous pourriez aussi aimer …