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 :

Affichage par défaut de plusieurs modules "bouton" dans Divi

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

Aligner horizontalement des boutons avec une ligne de plusieurs colonnes dans le Divi Builder

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) :

Rendu de boutons alignés horizontalement avec une ligne de plusieurs colonnes dans le Divi Builder

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 :

Modifier la largeur des colonnes dans le Divi Builder pour aligner horizontalement des boutons

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.

Ajouter une classe CSS dans les paramètres d'une ligne pour aligner horizontalement des boutons dans le Divi Builder

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“.

.boutons-en-ligne .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 0 2%;
}

.boutons-en-ligne {
    text-align: center!important;
}

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 :

Aligner horizontalement des boutons dans le Divi 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. 😉

 

D'autres tutoriels pouvant vous intéresser