Par défaut, quand on insère plusieurs modules Bouton dans une page créée avec le Divi Builder, ceux-ci s’empilent les uns au-dessus des autres.
Par exemple, avec 3 boutons, nous obtenons le résultat suivant :
Il est des cas où les besoins de mise en page nous amènent à devoir disposer plusieurs boutons sur une même ligne.
Je vous propose donc 2 solutions pour aligner horizontalement vos boutons, l’une avec le Divi Builder et l’autre en CSS.
Aligner horizontalement des boutons avec le Divi Builder
Si vous souhaitez aligner horizontalement vos boutons, vous pouvez utiliser une ligne contenant autant de colonnes que de boutons.
L’inconvénient est que vous serez limités par le système de colonnage du Divi Builder, c’est-à-dire pas plus de 4 colonnes à l’heure où j’écris ces lignes.
SAUF :
- Si vous attendez la mise à jour de Divi à venir courant juin 2018 (?) qui permettra d’aller jusqu’à 6 colonnes
- Si vous utilisez le plugin gratuit Divi Extended Column Layout (lire notre test) qui permet d’aller jusqu’à 10 colonnes
Mais, pas défaut les boutons seront très espacés car alignés dans chacune des colonnes (choisissez l’alignement dans les paramètres de chaque bouton, onglet Style -> Alignement) :
Il vous faudra donc modifier les réglages de la ligne, onglet Style -> Dimensionnement et jouer sur la largeur de la ligne et l’espacement des colonnes :
L’inconvénient avec cette méthode est qu’on est tributaire des possibilités parfois limitées du Divi Builder.
De plus, on surcharge la structure de notre page en ajoutant ligne sur ligne…
Aligner horizontalement des boutons en CSS
Insérez une ligne d’une seule colonne dans laquelle vous ajouterez le nombre de modules Bouton que vous souhaitez.
Dans les paramètres de la ligne, onglet Avancé -> ID et classes CSS précisez la classe boutons-en-ligne dans le champ Classe CSS.
Ensuite, ajoutez les CSS suivantes :
Vous voulez savoir où insérer ce code CSS ? Lisez notre article “7 manières d’ajouter des CSS à Divi“.
Pour modifier l’espacement entre vos boutons, changez simplement à la ligne 3, la valeur 2%.
La seule limite est la longueur des intitulés de vos boutons : s’ils sont trop longs et qu’il y a trop de boutons, certains passeront forcément sur une seconde ligne.
Et voici le rendu final avec les boutons alignés horizontalement en CSS :
En conclusion
Je vous ai donc présenté 2 méthodes différentes pour aligner horizontalement vos boutons sur votre site Divi.
Vous pouvez utiliser le Divi Builder si vous ne voulez vraiment pas mettre les mains dans le code et que la mise en page que vous souhaitez correspond aux possibilités offertes par le système de colonnage de Divi.
Mais personnellement, je vous conseille vivement la solution en CSS qui est plus légère, plus souple et vraiment pas si complexe que ça à mettre en place. 😉
Bonjour,
Je vous remercie pour ce tutoriel, qui fonctionne parfaitement pour les versions PC et tablette. Par contre, pour la version mobile, l’un des boutons (celui de droite) passe à la ligne suivante au niveau de l’affichage… Existe-il une solution pour contourner ce problème?
Meilleures salutations.
David
Salut David, il faudrait voir sur ton site, mais après deux boutons cote à cote sur mobile risquent d’être difficiles à cliquer pour les utilisateurs non?
Bonjour,
Est il possible de faire la même chose avec des images ?
Je m’explique, la version Desktop contient des images alignées horizontalement, ce que je trouve plus joli et je voudrais avoir la même chose sur mobile au lieu d’avoir des gros bloc degeu….
Dans le principe, oui.
À tester, mais je pense qu’il faut juste remplacer .et_pb_button_module_wrapper par .et_pb_image_wrap
Bonjour, comment peux-je avoir le même résultat mais sur mon menu vertical ? Merci d’avance
Tout dépend du rendu que tu souhaites… il faut que tu cibles les bons éléments avec les outils de développement de ton navigateur et ajustes peut-être les CSS.
À l’aveugle, c’est difficile à dire :). Je t’invites à échanger sur notre groupe Facebook si tu as besoin de conseils.
Bonjour, le code css ne fonctionne pas bizarrement…
J’ai bien attribuer la class à la ligne contenant mes deux boutons puis deux messages d’erreurs en copiant le css dans le css personnalisé ‘Element principal’
.boutons-en-ligne .et_pb_button_module_wrapper {
EXPECTED RBRACE.
display: inline-block;
margin: 0 2%;
}
.boutons-en-ligne {
text-align: center!important;
}
UNEXPECTED TOKEN ‘}’
auriez-vous une solution? J’ai tenté d’insérer ce code dans mon style.css de mon thème enfant mais rien ne bouge
Tu ne le places pas au bon endroit, lis notre article sur l’ajout de CSS dans Divi.
Super, ça fonctionne très bien.
Merci