Égalisez automatiquement la hauteur de vos sections - Divi Community

Égalisez automatiquement la hauteur de vos sections

par | 27 novembre 2017 | Snippets Divi | 7 commentaires

Égalisez automatiquement la hauteur de vos sections

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 ! 🙂

Voir la démo

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.

Partager la publication "Égalisez automatiquement la hauteur de vos sections"

  • Facebook
  • X

Comment ?! 
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie
20% sur la licence annuelle

7 Commentaires

  1. Bob
    Bob sur 28 novembre 2017 à 10h29 am

    Je ne vois vraiment pas l’interet puisque les contenu n’ont pas du tout la meme taille

  2. Julien
    Julien sur 28 novembre 2017 à 10h35 am

    Bonjour, c’est justement pour unifier les tailles et avoir un design plus joli

  3. Pierre
    Pierre sur 28 novembre 2017 à 10h39 am

    Si les sections avaient le même contenu, elles auraient la même hauteur, donc pas besoin de se casser la tête à les homogénéiser.
    Là, c ‘est vraiment pour un équilibre purement graphique.
    J’ai eu le cas d’un client qui m’a demandé, pour une question d’esthétique, d’égaliser la hauteur de 3 sections sur sa page d’accueil (une avec du texte, une avec des actus et une avec des blurbs).
    Je voulais partager ma méthode car bien que ce ne soit pas à utiliser tous les jours, ça va certainement en intéresser certains. 😉

  4. Daguin
    Daguin sur 5 décembre 2017 à 12h22 pm

    Super, Et pour égaliser la hauteur des posts !

  5. Jack
    Jack sur 5 décembre 2017 à 17h07 pm

    Rentrez le code ci-dessous pour égaliser vos articles de blog en hauteur.
    A mettre dans DIVI/option du theme en bas dans personnalisé css

    .et_pb_post {
    min-height: 485px !important;
    }
    choisissez votre hauteur en px

    Moi ça fonctionne !!

  6. Patricia
    Patricia sur 28 février 2018 à 13h14 pm

    Bonjour Julien,

    J’ai deux questions :
    Quand vous dites “Insérez maintenant un module code où vous voulez sur votre page, avec le contenu ci-dessous” on doit l’ajouter où exactement dans “Avancé” ? (capture d’écran ? 🙂 )
    2e. Question : je suis en train de construire le nouveau site (pas en ligne encore), si je décide maintenant de créer un thème enfant (apparemment c’est mieux) je devrais réimporter une à une mes pages déjà créées ?

    Merci d’avance pour votre réponse – Bonne journée

  7. Julien
    Julien sur 28 février 2018 à 13h17 pm

    Bonjour,
    – il s’agit du module code présent dans la liste de tous les modules ( textes, images…)
    – tu peux créer un thème enfant sans rien craindre. Les seules modifications que tu perds sont celles faites dans les fichiers PHP du thème si tu en as fait.

Poster le commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.