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 :
Voici ce que ça donne par exemple en aperçu wireframe :
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”.
Voici ensuite ce que vous devriez avoir en ajoutant 10 modules “Résumé” (Blurbs) :
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 :
Copiez-collez maintenant ce code dans le fichier style.css de votre thème enfant ou dans Apparence->Personnaliser->CSS additionnel
Nos 10 colonnes sont bien là :
Voici le code CSS si vous souhaitez un autre nombre de colonnes :
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 :
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 !
Génial et merci, très malin la bascule de vertical à horizontal !
Je garde pour une future utilisation.
Merci, très intéressant je préfère la solution CSS avec les plugin le problème c’est le suivi et la lourdeur.
yes, pas mal.
maintenant, si on veut créer par exemple une ligne avec 5 colonnes, la première à 10%, la deuz à 20%, la 3 à 15%, la 4e à 5% et la dernière à 50%.
il y a un truc simple ?
Bonjour, je souhaiterai utiliser le portefeuille filtrable en grille mais avec seulement 3 colonnes. Merci de votre aide !!!
Je t’invite à rejoindre notre groupe d’entraide Facebook où le sujet a déjà été abordé avec la solution en CSS.
Super ! Simple et efficace. Merci beaucoup.