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.

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

 

Vous avez le choix entre énormément de mise en page.
Voici ce que ça donne par exemple dans l’administration:

 

admin extended column layout divi

 

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

Réaliser la même chose sans plugin en CSS

 

 

Ici on va utiliser la méthode d’Elegant Theme avec un layout avec une seule colonne et mettre par exemple 10 modules Résumés 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és (Blurbs):

10 modules résumés10 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

/* Design avec 10 colonnes */

.dix-colonnes {
	width: 10%;
	float: left;
}

 

Nos 10 colonnes sont bien là:

 

exemple 10 colonnes Divi

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

/* Design avec 6 colonnes */

.six-colonnes {
	width: 16.66%;
	float: left;
}

/* Design avec 7 colonnes */

.sept-colonnes {
	width: 14.28%;
	float: left;
}

/* Design avec 8 colonnes */

.huit-colonnes {
	width: 12.5%;
	float: left;
}

/* Design avec 9 colonnes */

.neuf-colonnes {
	width: 11.11%;
	float: left;
}

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:

/*Ecran de maximum 960px*/

@media (max-width: 960px){

.cinq-colonnes {
	width: 50%;
	}

.six-colonnes {
	width: 50%;
	}

.sept-colonnes {
	width: 50%;
	}

.huit-colonnes {
	width: 50%;
	}

.neuf-colonnes {
	width: 50%;
	}

.dix-colonnes {
	width: 33%;
	}
	
}

/*Ecran de maximum 680px*/

@media (max-width: 680px){

.cinq-colonnes {
	width: 100%;
	}

.six-colonnes {
	width: 100%;
	}

.sept-colonnes {
	width: 100%;
	}

.huit-colonnes {
	width: 100%;
	}

.neuf-colonnes {
	width: 100%;
	}

.dix-colonnes {
	width: 100%;
	}
	
}

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.

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

Bon courage!

D'autres tutoriels pouvant vous intéresser: