Utiliser un design avec 5, 6, 7, 8, 9 ou 10 colonnes avec Divi - Divi Community

Si vous utilisez un minimum Divi, vous vous rendrez vite compte que les mises en page proposées par défaut comportent au maximum 4 colonnes. Et bien pour outrepasser cette limite, je vous invite à télécharger l’excellent plugin gratuit de Sean Barton : Divi Extended Column Layout.

Notez que ce plugin ne fonctionne plus avec la “dernière expérience Divi Builder” en backend ou le Visual Builder en frontend.
Nous vous recommandons de ne pas désactiver la “dernière expérience Divi Builder” dans les options de Divi, car l’ancien builder en backend n’est plus optimisé et peut être la source de ralentissements ou de bugs sur votre site.
Préférez donc la solution CSS présentée un peu plus loin dans ce tuto afin de modifier le nombre de colonnes de vos rangées.

Installez et activez ensuite le plugin.
Rendez-vous maintenant sur n’importe quelle page et ouvrez le Divi Builder.
Attention car ce plugin ne fonctionne pas avec le Visual Builder.
Vous devez créez vos layouts dans l’administration mais vous pouvez cependant les éditer ensuite avec le Visual Builder.

Au moment de choisir la mise en page de vos colonnes vous remarquez maintenant toutes les nouveautés :

divi extended column layout
Le plugin propose un énorme choix de colonnages.

Voici ce que ça donne par exemple en aperçu wireframe :

admin extended column layout divi

Un plugin simple à prendre en main, gratuit, et qui peut vous permettre d’avoir des nouvelles possibilités de design !

Réaliser la même chose sans plugin avec des CSS

Ici on va utiliser la méthode d’Elegant Themes avec un layout avec une seule colonne et mettre par exemple 10 modules “Résumé” (Blurbs) dedans.
On verra ensuite comment avoir 8 ou 9 colonnes.

Commencez par créer un layout avec une seule colonne et dans les paramètres, cochez “Passer cette ligne en mode pleine largeur”.

ligne pleine largeur

Voici ensuite ce que vous devriez avoir en ajoutant 10 modules “Résumé” (Blurbs) :

10 modules résumés
10 modules résumés

Comme on veut afficher les 10 modules sur la même ligne, on va leur donner une largeur de 10% (car 100% de largeur totale divisé par 10 modules donne 10% d’espace par module).

On va donc ajouter une classe CSS à nos modules avec le code suivant :

class css 10 colonnes

Copiez-collez maintenant ce code dans le fichier style.css de votre thème enfant ou dans Apparence->Personnaliser->CSS additionnel

CSS

Nos 10 colonnes sont bien là :

exemple 10 colonnes Divi

Voici le code CSS si vous souhaitez un autre nombre de colonnes :

CSS

Et voila, vous pouvez même utiliser un design à 15 colonnes avec cette méthode. Il suffit simplement de calculer le pourcentage d’espace de chaque colonne.

Le responsive

N’oubliez par contre pas le responsive car le code plus haut sera valable pour toutes les résolutions et 10 colonnes sur mobile ça commence à faire beaucoup. Du coup vous pouvez utiliser en plus ce code CSS à ajouter à la suite :

CSS

Ici en fait, on a ajusté les tailles des colonnes suivant la taille de l’écran.

Ainsi, si l’écran fait entre 680 et 960px,il y aura deux colonnes par ligne (à cause de la valeur 50%), mais en dessous de 680px, il n’y aura plus qu’une seule colonne par ligne.

À vous maintenant d’ajuster ces valeurs pour afficher exactement ce que vous souhaitez.

Bon courage !