Elegant Themes

Divi – Comment harmoniser les hauteurs des colonnes ?

Si vous utilisez le thème Divi d’Elegant Themes, vous vous demandez peut-être comment harmoniser les hauteurs des colonnes pour qu’elles soient uniformes ? Si c’est le cas, je vous explique dans cet article comment faire.

Aujourd’hui, il s’agit d’un tuto WordPress particulier puisqu’il est consacré au thème Divi d’Elegant Themes.

Divi est un excellent thème avec de nombreuses options intégrées et un page builder performant. Mais voilà, comme bon nombre de thèmes premium, il faut un temps d’adaptation pour le prendre en main.

Si construire une page reste très simple avec le thème Divi, le réglage de quelques paramètres peuvent parfois vous donner du fil à retordre comme égaliser la hauteur des colonnes.

Je vais donc ici vous expliquer comment y arriver très simplement.

Harmoniser les hauteurs des colonnes Divi avec un arrière plan

Par défaut, si vous créez 3 colonnes et que vous mettez un contenu de taille différent dans chacune d’elles, voici ce que vous obtenez.

divi-ajuster-hauteur-colonne

divi-ajuster-hauteur-colonne(2)

Dans cet exemple, j’ai modifié la couleur d’arrière plan de chacun des modules textes.

Si vous allez dans les paramètres de la ligne, dans la partie “Style”, vous trouverez l’option “Harmoniser les hauteurs des colonnes“.

divi-ajuster-hauteur-colonne(3)

divi-ajuster-hauteur-colonne(4)

Vous vous dites qu’il suffit de sélectionner “Oui” pour que la hauteur des colonnes soit ajustée. Et bien non, cela serait trop simple.

Aucun changement ne s’affiche à l’écran.

Si vous allez maintenant dans l’onglet “Contenu” de ces mêmes paramètres, vous trouverez des options pour modifier l’arrière plan de chacune des colonnes. Dans mon exemple, je vais sélectionner la couleur Orange.

divi-ajuster-hauteur-colonne(5)

Voilà le résultat…

divi-ajuster-hauteur-colonne(6)

Vous pouvez constater que l’arrière plan de couleur Orange que je viens d’ajouter s’est mis derrière l’arrière plan défini dans les paramètres des modules. Il vient compléter la hauteur des colonnes pour les rendre identiques. Inutile alors de définir une couleur de fond dans les modules (ici rouge, bleu et violet).

Vous l’aurez donc compris, si vous souhaitez harmoniser la hauteur des colonnes dans le thème Divi, il faudra donc :

  1. Se rendre dans les paramètres de la ligne et non du module.
  2. Modifier la couleur de fond de chaque colonne dans l’onglet “Contenu” (colonne 1 fond, colonne 2 fond, etc… en fonction du nombre de colonnes).
  3. Cochez la case “Harmoniser les hauteurs des colonnes” dans l’onglet “Style”.

Voilà ce que cela donne en reprenant mes 3 couleurs.

divi-ajuster-hauteur-colonne(7)

J’ai également fait une petite vidéo pour reprendre chacune des étapes.

Ajuster la hauteur des colonnes mais avec une bordure

Peut-être ne souhaitez-vous pas mettre une couleur de fond à vos différentes colonnes, mais plutôt une bordure.

Là encore vous serez tenté de configurer les paramètres “Style” du module qui propose une option “Utiliser la bordure”. Mais si vous faites cela, la bordure se fera autour du contenu comme ci-dessous.

divi-ajuster-hauteur-colonne(10)

Dans Divi, pour égaliser la hauteur des colonnes avec une bordure, vous devez vous rendre encore une fois dans les paramètres de la ligne (et non dans ceux du modules) et vous rendre dans l’onglet “Avancé” (en ayant pris le soin de cocher l’option “harmoniser les hauteurs des colonnes”).

Là, pour chacune des colonnes, dans le champ de code de l’élément principal, vous devez renseigner vos variables CSS (ou propriétés personnalisées CSS) pour ajouter une bordure.

Lien utile → Les variables CSS border

divi-ajuster-hauteur-colonne(9)

Vous obtenez alors le résultat suivant.

divi-ajuster-hauteur-colonne(8)

Voilà, vous savez maintenant comment harmoniser les hauteurs de vos colonnes dans le thème Divi d’Elegant Themes.

A très bientôt pour d’autres tutoriels sur ce thème premium.

encart-ET

4 Commentaires

  1. enna

    Merci, je ne savais pas comment faire. C’est là ou je vois encore une fois, qu’un regard éclairé vaut mieux qu’une recherche infructueuse. Je commence avec divi et faute de vouloir prendre du temps à consulter les savoir-faire (les tutos), j’en perd à moudre à tâtonner parfois sans résultat satisfaisant. Leçon !

  2. Fantastique !
    Simple et efficace.
    Merci pour cet excellent tuto.

Laisser un commentaire

Défiler vers le haut