Comment personnaliser la largeur des colonnes dans Divi - Divi Community

Le Divi Builder permet de choisir parmi 20 configurations de colonnage différentes.
Mais qu’en est-il si aucune de ces options ne correspond au design que vous souhaitez réaliser ?
En 2017, nous vous avions présenté 2 méthodes pour modifier le nombre de colonnes présentes dans une ligne.
Depuis, le Divi Builder a beaucoup évolué et les colonnes sont plus facilement personnalisables.
Voyons comment personnaliser leur largeur sans peine.

Exemple de personnalisation des largeurs de colonnes

Exemple de personnalisation des largeurs de colonnes dans Divi

L’image ci-dessus illustre un exemple de personnalisation de colonnes.
Cette configuration n’existe pas nativement dans le Divi Builder. Je suis parti d’un modèle sur 3 colonnes et j’ai personnalisé la largeur de chaque colonne.

  • Le gris représente la surface totale de la rangée
  • Le bleu, le vert et le violet représentent la surface de chacune des 3 colonnes présentes dans la rangée

Vous pouvez utiliser n’importe quel modèle de colonnage et attribuer la largeur que vous souhaitez à chaque colonne.
L’important est juste que la somme de la largeur de toutes les colonnes soit égale à 100%.

Méthode 1 : personnaliser la largeur des colonnes avec le Divi Builder

Insérer une ligne dans le Divi Builder

Commencez par insérer une ligne comptant le nombre de colonnes dont vous avez besoin.
Si vous suivez mon exemple, ce sera donc 3 colonnes. Évidemment leurs largeurs importent peu car nous allons les personnaliser.

Harmoniser la hauteur des colonnes d'une ligne dans le Divi Builder

Affichez les paramètres de la ligne et rendez-vous dans l’onglet “Style” pour cocher “Harmoniser les hauteurs des colonnes”.

Modifier les paramètres des colonnes dans le Divi Builder

Toujours dans les paramètres de la ligne, allez dans l’onglet “Contenu” et cliquez sur l’icone de roue dentée pour afficher les paramètres de la première colonne.

La marche à suivre décrite ci-dessous sera la même pour les autres colonnes. Seul le pourcentage changera.

Ajouter des CSS personnalisées à une colonne dans le Divi Builder

Dans les paramètres de cette première colonne, rendez-vous dans l’onglet “Avancé”.

1/ Ajoutez dans la zone de saisie “Élément principal” la règle CSS suivante :

CSS

Modifiez la valeur du pourcentage selon vos besoins.

2/ Cliquez maintenant sur l’icone de smartphone pour activer les options de responsive.
Et renseignez la dimension que vous souhaitez pour votre colonne sur tablette et mobile.

Dans mon cas, je veux que chaque colonne prenne toute la largeur de l’écran sur tablette et mobile, j’ai donc renseigné la règle CSS suivante :

CSS

Notez que cette méthode est utile si on souhaite forcer l’affichage sur plusieurs colonnes sur mobiles.

Procédez de même pour les autres colonnes qui composent votre ligne.

Le petit inconvénient de cette méthode

Mauvais rendu de largeurs de colonnes personnalisées dans le Divi Builder

Le seul petit bémol de cette méthode est un souci d’aperçu dans le Visual Builder.
En effet, bien que j’ai précisé une largeur de 100% à chaque colonne sur mobile, l’aperçu mobile du Visual Builder n’en tient pas compte et continue d’afficher les largeurs attribuées pour la version desktop.
Vous pouvez le constater sur la capture d’écran ci-dessus.

Pour éviter ça, je vous propose la méthode en CSS.

Méthode 2 : personnaliser la largeur des colonnes en CSS

Cette méthode est un peu plus chronophage car il faut saisir des lignes de CSS.
Mais elle permet d’obtenir un rendu propre de la largeur des colonnes dans le Visual Builder, quelle que soit la largeur de l’aperçu.

Avant tout, je pars du principe que vous avez inséré une ligne avec le nombre de colonnes qui vous convient.
Pensez ici aussi à cocher “Harmoniser les hauteurs des colonnes” dans les paramètres de la ligne.

Ajouter un identifiant CSS à une ligne dans le Divi Builder

Dans l’onglet “Avancé” de la ligne, ajoutez maintenant un identifiant CSS pour être en mesure de la cibler précisément.
Dans mon exemple, j’ai simplement utilisé ma_ligne.

Voici les règles CSS qui vont permettre de personnaliser les largeurs de colonnes. Je vous les détaille juste en-dessous.

Si vous avez besoin d’en savoir plus sur l’utilisation de CSS personnalisées avec Divi, je vous invite à lire notre article 7 manières d’ajouter des CSS à Divi.

CSS

Détaillons ce code

Les media queries de Divi

Lignes 3 et 19, je précise des media queries. Celles-ci permettent de cibler des largeurs d’écrans auxquelles appliquer les règles CSS qu’elles englobent.

Ligne 3, nous ciblons donc les écrans dont la largeur débute à 981 pixels. Ceci correspond à l’option responsive nommée “Bureau” dans le Divi Builder.
Ligne 19, nous ciblons les largeurs d’écrans inférieures, ce qui inclut donc les tablettes et les mobiles.

Voici ci-dessous les media queries qui correspondent aux 3 différentes options de responsive présentes dans le Divi Builder (“Bureau”, “Tablette” et “Téléphone”).

CSS

Cibler les colonnes

Divi attribue des classes pour chacune des colonnes présentes dans la page, mais celles-ci sont numérotées sur l’intégralité de la page en commençant par 0.

C’est-à-dire que si vous avez sur votre page 2 lignes de 3 colonnes :

  • la première colonne de la première ligne aura la classe .et_pb_column_0
  • la première colonne de la seconde ligne aura la classe .et_pb_column_3

Impossible donc de cibler avec précision car si on ajoute de nouvelles lignes sur la page, tout se décale…

Pour contrer ça, lignes 5, 8 et 11, j’utilise donc le pseudo-élément :nth-child(n) (où “n” est un chiffre ).
Ce sélecteur permet de cibler des éléments selon leur ordre d’apparition.
On peut ainsi sélectionnner précisément chaque colonne dans chaque ligne avec un compteur qui débutera toujours à 1.

Le mot de la fin

Ce rapide tuto nous a permis de comprendre que le Divi Builder nous autorisait une certaine souplesse pour personnaliser les colonnes.
Il permet également d’obtenir une mise en page sur plusieurs colonnes sur tablettes et mobiles.

C’était aussi l’occasion de faire une petite introduction au responsive dans Divi, en attendant un tuto plus complet…