fbpx

Dans le Divi Builder, vous n’êtes pas sans savoir que lors de l’ajout d’une nouvelle rangée, nous avons la possibilité de choisir l’option harmoniser les hauteurs des colonnes qui permet, comme sans nom l’indique, d’obtenir des colonnes de hauteur égale.

Mais, comment faire si nous souhaitons obtenir des sections de hauteur égale ?
Et comment faire en sorte que ce soit la section avec le plus de contenu qui définisse la hauteur des autres sections ?

Une fois encore, jQuery vient à notre rescousse ! 🙂

 

Créez vos sections

Si ce n’est pas encore fait, ajoutez sur votre page les différentes sections dont vous avez besoin, avec le contenu que vous souhaitez.

Ensuite, allez dans les paramètres des sections dont vous voulez égaliser la hauteur et ajoutez la classe egaliser-hauteur (vous pouvez choisir le nom que vous voulez mais retenez-le bien) dans Avancé -> ID et classes CSS -> Classe CSS

 

Ajoutez le jQuery

Insérez maintenant un module code où vous voulez sur votre page, avec le contenu ci-dessous.
Si vous n’avez pas utilisé comme nom de classe egaliser-hauteur, pensez à le modifier à la ligne 14.

<script type="text/javascript">

jQuery(document).ready(function($){

$.fn.equalize = function() {
    var maxHeight = 0;
    this.each(function(){
        if( $(this).height() > maxHeight ) {
            maxHeight = $(this).height();
        }
    });
    this.height(maxHeight);
};
$('.egaliser-hauteur').equalize();

})

</script>

 

Vous prendrez bien un peu de CSS ?

Je vous propose maintenant quelques lignes de CSS pour centrer le contenu dans la hauteur des sections.
C’est optionnelle, mais plus esthétique. 😉
Là encore nous reprenons le nom de classe egaliser-hauteur (qu’il vous faudra modifier si vous en avez utilisé un autre).

.egaliser-hauteur {
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

Où placer le code ?

  • Si vous utilisez un thème enfant : ce code sera à placer dans le fichier style.css
  • Si vous ne possédez pas de thème enfant : ce code sera à coller dans Divi -> Options du thème -> Général -> Personnaliser CSS
    (Vous pouvez aussi télécharger gratuitement le thème enfant Divi Community)

 

C’est déjà fini !

Voici donc une méthode très simple à mettre en œuvre pour égaliser la hauteur de différentes sections dans Divi, et ce grâce à jQuery.
Sachez également que vous pouvez utiliser ce principe sur les rangées ou directement sur les modules, selon les besoins de votre design.