Égaliser la hauteur des colonnes d’une section avec Divi

Fév 2021 | Astuces, Divi | 0 commentaires

Si comme nous vous êtes un utilisateur du surpuissant thème Divi, il est probable qu’un jour vous ayez besoin d’égaliser la hauteur des différentes colonnes d’une même section.

Aujourd’hui, je vais vous montrer comment le faire à travers ce petit tutoriel en 3 étapes. Rassurez-vous, la manipulation est plutôt simple (pour ne pas dire comme d’habitude grâce à Divi) et rapide à appliquer.

1. Créer une section et ajouter plusieurs colonnes.

La première étape consiste évidemment à créer votre section puis à définir le nombre de colonnes souhaitées. Jusque là, procédez comme d’habitude avec l’éditeur visuel.

Éditeur visuel Divi

Pour ma part, j’ai ajouté une section composée d’une rangée de trois colonnes. Une fois la structure conçue, alimentez-là avec les informations que vous voulez. Personnellement, j’adore le chorizo 😻

Hauteur des colonnes non égalisées Divi

Vous le constatez : les colonnes ne sont pas de la même hauteur car leurs tailles sont adaptées au contenu. Et dans notre exemple, c’est plutôt… disgracieux.

Aucun problème, nous allons corriger cela dans quelques instants. Pensez quand même à sauvegarder vos modifications.

2. Appliquer l’option d’harmonisation des colonnes.

Maintenant, rendez-vous dans les réglages de la rangée (le conteneur de couleur verte). Une fois la fenêtre affichée, cliquez sur l’onglet Style puis dépliez la catégorie Dimensionnement.

Option harmoniser les hauteurs des colonnes Divi

Enfin, activez l’option Harmoniser les hauteurs des colonnes avec le bouton libellé ainsi puis appliquez vos changements.

À présent, vos colonnes possèdent une hauteur uniforme mais pour avoir un résultat visuel, il va falloir appliquer un peu de style.

3. Définir une couleur de fond.

Retournez dans les réglages de la rangée puis positionnez-vous dans l’onglet Contenu cette fois. Cliquez sur l’icône de réglage d’une colonne puis rendez-vous encore une fois dans l’onglet Contenu et descendez jusqu’à la catégorie Fond.

Dans mon exemple, je souhaite appliquer un fond de couleur blanche.

Définir une couleur pour une colonne Divi

Répétez cette opération sur chaque colonne. Ensuite, vous n’avez plus qu’à valider vos modifications.

Hauteur des colonnes égalisées Divi

Visuellement, le résultat est bien plus harmonieux 😸

Vous pouvez bien sûr harmoniser la hauteur de vos colonnes avec un fond de couleur unique, une couleur pour chaque colonne ou encore une simple bordure. C’est à vous de choisir.

Si vous avez des questions, n’hésitez pas à utiliser l’espace commentaire ou à me contacter.

Et voilà, égaliser la hauteur des colonnes d’un section avec Divi n’a plus de secrets pour vous. À bientôt pour de nouvelles astuces WordPress & Divi 👋

Par Samy Bentemam

Entrepreneur et rédacteur d’articles passionnants, je serais ravi d’échanger avec vous de votre futur projet. Au plaisir de partager de nouvelles connaissances tous ensemble 😸

Confiez votre projet web à des professionnels compétents

Laisser un commentaire

0 commentaires

Soumettre un commentaire

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

Tu veux recevoir du contenu exclusif ?

Tu veux recevoir du contenu exclusif ?

Alors rejoins gratuitement la communauté Altefkat et bénéficie de nombreux avantages. Garanti sans spam, ni colorants, ni conservateurs !

Bienvenue dans la communauté Altefkat ! Nous te remercions pour ton inscription et ta confiance.

Hey, on s'occupe de votre maintenance WordPress ?

Remplissez le formulaire ci-dessous et notre équipe vous enverra une proposition gratuitement dans 48h. 

Votre message a été transmis 😺

Share This