Ajouter un bouton CTA dans le menu de votre site est possible et très simple grâce quelques lignes de CSS. Un bouton dans un menu permet à l’utilisateur d’avoir accès à une action très rapidement. Pour vous, il permet très souvent de guider l’utilisateur vers une action donnée et par conséquent augmenter vos chiffres d’affaires, vos prises de rendez-vous.
Nous allons vous montrer dans cet article comme réaliser, étape par étape, le même bouton que celui de Divipourlesnuls.fr. Vous n’aurez pas besoin d’utiliser le Theme Builder Divi.
Première étape : Ajouter un lien ou une page dans le menu
Dans Apparence > Menu > Lien personnalisé, créer votre lien dans le Menu afin de ajouter un bouton cta pour votre menu. Pour l’ajout d’une page, sélectionner la page souhaitée.
Création d’un lien personnalisé dans le menu de WordPress
Ajouter l’élément Classes CSS
Sélectionnez votre lien personnalisé ou page, et ajouter la class menu_cta au champ Classe CSS (optionnel). Puis enregistrer votre menu.
Deuxième étape : customiser le bouton CTA de votre menu avec du code CSS
Deuxième et dernière étape pour ajouter votre bouton CTA à votre menu dans le builder Divi.
Sur votre back-office WordPress, cliquez sur Divi > Option de thème > Général. En bas de la page vous pouvez ajouter le bout de code CSS ci-dessous dans Personnaliser votre CSS.
.menu_cta a {
background: #bd1d8b;
border: 2px solid #bd1d8b;
border-radius: 4px;
color: #ffffff !important;
text-color: #ffffff;
cursor: pointer;
line-height: 1.7em;
margin: 4px auto;
padding: 8px 15px !important;
transition: all 0.2s ease 0s;
text-transform: none;
}
.menu_cta a:hover{
background-color: #18f2b2;
}
/* text CTA en blanc apres scroll */
.et-fixed-header #top-menu .menu_cta > a {
color: #ffffff !important;
background-color: #bd1d8b;}
.et-fixed-header #top-menu .menu_cta > a:hover{
background-color: #ffffff;}
#page-container .et_pb_button_0:before{
color:#ffffff;}
#et-top-navigation {
font-weight: bold;}
Remarque : si vous souhaitez modifier les couleurs du fond et de la police, il suffit de changer sur les propriétés background-color et color
0 commentaires