Il peut arriver lors de la création d’un site Internet que vous ayez besoin de placer deux boutons d’appel à l’action côte à côte, par exemple dans une section Hero. Malheureusement, Divi ne le propose pas dans sa version native. Il est cependant possible en quelques petites lignes de code CSS de combler cette lacune en rajoutant cette fonctionnalité.
Paradoxalement, nous n’allons pas toucher directement au module bouton en tant que tel, mais à son enveloppe: la colonne dans laquelle le module se trouve.
Créer les deux boutons à la suite
Ajouter la classe CSS à la colonne
Trouvez la ligne et la colonne où vous souhaitez placer les boutons. Dans les paramètres de la colonne, allez dans l’onglet Avancé jusqu’à la Classe CSS. Ajoutez la classe « dr-inline-buttons » et enregistrez.
Ajouter l’extrait de code CSS
Rendez-vous dans la boîte Divi>Options du thème>Personnaliser CSS et ajoutez le code suivant:
/* début module bouton côte à côte dans la même colonne */
.dr-inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
}
/* fin module bouton côte à côte dans la même colonne */L’alternative sans code: l’extension Divi Supreme
Divi Supreme est le plugin indispensable pour les utilisateurs de Divi. Il est livré avec des tonnes de modules créatifs gratuits et des extensions qui font de la construction de sites Web un jeu d’enfant. Avec une interface intuitive et un environnement de conception familier, Divi Supreme fera passer vos sites Divi au niveau supérieur. Le module Supreme Button permet de créer des boutons côte à côte et offre une multitude d’animations au survol.
