L’objectif de ce tutoriel est de voir comment créer un bouton d’appel à l’action dans le menu de Divi. Mettre en évidence un bouton qui incite au clic vous permettra d’augmenter le taux de conversion auprès de vos visiteurs. Ce tutoriel est simple et rapide, il se réalise en deux étapes.
Première étape : le menu
Rendez-vous dans le menu via « apparence -> menu » puis ajouter une classe CSS. Dans notre exemple, la classe est nommée btn-appel-action. Si le champ Classes CSS n’est pas affiché, n’oubliez pas de cocher la case Classes CSS dans les options de l’écran.
La première étape est terminée, ce n’est ni plus ni moins que de la manipulation du menu dans WordPress.
Nous pouvons passer à la deuxième étape.
Deuxième étape : le code CSS
Dans cette deuxième étape, nous allons ajouter le code CSS. Vous pouvez l’ajouter soit dans votre feuille de style de votre thème enfant, soit dans les options du thème Divi.
/* Bouton appel à l'action */
.btn-appel-action a {
background-color: #E51D67;
border-radius: 5px;
padding:10px 10px !important;
color: #fff;
}
Il ne reste plus qu’à changer les valeurs de background-color et color en fonction de votre charte graphique.
Si vous souhaitez un bouton avec des coins plus arrondis, il suffit d’augmenter la valeur de border-radius.
Bonjour, merci pour ce tuto, j’ai une question « idiote » comme je ne manipule pas le CSS où se trouve la feuille de style ? Sachant que je n’utilise pas de thème enfant
Merci
Bonjour,
Je vous encourage à faire un thème enfant pour éviter que vos modifications soient supprimées lors des mises à jour de Divi.
Sinon la feuille de style se trouve dans le répertoire « ../wp-content/themes/Divi/style.css ». Néanmoins, comme je l’indique dans le tuto, vous pouvez ajouter le code css dans les « options du thème » de Divi.
Bonjour,
Tuto intéressant, mais la bordure qui crée le bouton ne s’aligne pas du tout verticalement (le texte du bouton apparait en haut). Jouer avec height, vertical-align etc.. n’apporte pas de solution…
Merci si quelqu’un a un tuyau
Bonjour,
J’ai réussi à créer le bouton puis à changer la couleur d’arrière plan mais je n’arrive pas à changer la couleur du texte.
Avez-vous une solution?
Merci à vous !
Bonjour Loïc,
En reprenant le code CSS de l’étape 2, il faut ajouter « !important » à la propriété color.
Soit par exemple : « color: #fff !important; »
Cela devrait mieux fonctionner.
Merci pour cette remarque 😉
Bonjour,
Très bon tuto, facile d’accès. J’ai aussi le problème d’alignement avec le theme DIVI extra. L’entrée de menu transformée en bouton action est désaligné vers le bas par rapport au reste des entrés de menu. une idée pour savoir comment résoudre le problème. Un grand merci. Franck
Bonjour et si l’on desire ajouter un bouton qui comporte une fonction en javascript par exemple pour ouvrir un email avec notre adresse email comment faire svp 😉