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 😉
Bonjour,
Bravo pour ce tuto, c’est celui qui m’a aidé à trouver une solution simple.
J’ai un petit souci.
J’ai changé la couleur du texte.
J’utilise la fonction de menu fixe.
Lorsqu’on navigue vers le bas le texte se met dans la couleur du bouton (une couleur de mon thème).
Merci d’avance pour l’aide.
Bonjour,
Avec l’arrivée de Divi 4.0, on peut personnaliser l’entête plus facilement. On peut ajouter un élément bouton qui sera plus simple à mettre en place via l’interface de Divi.
Je vous recommande de mettre à jour vers Divi 4 en prenant les précautions qui s’imposent pour un site en production.
Merci pour ce tutoriel qui m’a bien aidé.
Toutefois, en descendant dans la page pour menu est configuré pour être réduit… de ce fait la couleur la police change. Comment faire ?
Merci
Pour conserver la couleur de ta police :
#main-header #top-menu li:last-child>a { color: #ffffff !important; }
A plus,
Bonjour, J’ai le même soucis que vous. Avez-vous trouvé une solution depuis ? Merci de votre aide…
Bonjour,
Merci pour le tuto !
Question : comment faire pour que le lien s’ouvre dans un nouvel onglet svp ?
Super !
En revanche la modification de la couleur ne passe pas.
Vous avez une solution ?
Merci pour le tuto 😀
Bonjour et merci pour ce tuto ! Petit soucis, je n’arrive pas à régler le padding en hauteur, j’ai bien essayé en px, en em, avec !important, rien y fait! il ne bouge pas, mais la largeur fonctionne !
Merci d’avance, bonne journée !