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 Style → Modèle puis sélectionnez Grille.
Étape 3 : Ajouter une classe CSS personnalisée
Ensuite, allez dans l’onglet Avancé → ID et classes CSS → Classe CSS, et ajoutez une classe CSS personnalisée au module Blog. Nous vous conseillons d’utiliser dt-blog-equal-height
.
Étape 4 : Ajouter du code JavaScript dans l’en-tête du thème
Une fois la classe CSS définie, dirigez-vous vers Divi → Options du thème → Onglet 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 !
Notre méthode complète pour créer une boutique WooCommerce performante
Les étapes de création d'un site E-CommerceIntroductionLa création d'une boutique en ligne performante est essentielle pour toute entreprise...
Comment ajouter un texte déroulant avec boutons Lire plus/Lire moins dans Divi
TRUCS & ASTUCES7. Texte à afficher/masquer dans DiviIntroductionPourquoi utiliser cette fonctionnalité ? Lorsque le texte d’une section devient...
Guide pour une création de site web qui allie économie et qualité – LDdigitalwork
ALLIEZ ÉCONOMIE ET QUALITÉ POUR VOTRE SITE WEBIntroductionLa création d’un site web est une étape clé dans le développement de tout projet, qu’il...
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
Notre méthode complète pour créer une boutique WooCommerce performante
Les étapes de création d'un site E-CommerceIntroductionLa création d'une boutique en ligne performante est essentielle pour toute entreprise...
Comment ajouter un texte déroulant avec boutons Lire plus/Lire moins dans Divi
TRUCS & ASTUCES7. Texte à afficher/masquer dans DiviIntroductionPourquoi utiliser cette fonctionnalité ? Lorsque le texte d’une section devient...
Créer une pagination pour vos rangées de modules Divi
TRUCS & ASTUCES6. Créer une pagination pour afficher vos rangéesIntroductionSi vous souhaitez organiser et afficher plusieurs rangées de modules...
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