Ajouter un bouton CTA dans le menu Divi

Snippet

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.

Ajouter un bouton CTA dans le menu de votre site - Divi pour les nuls

Création d’un lien personnalisé dans le menu de WordPress

En haut à droite de votre écran, cliquez sur Option de l’écran et sélectionnez Classe CSS
Ajouter un bouton CTA dans le menu de votre site - Divi pour les nuls

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

Si vous avez des questions, n’hésitez pas à commenter ci-dessous ou rejoindre notre groupe Facebook 😉

Accéder à des contenus exclusifs sur Divi

Inscrivez-vous à la Newsletter et profitez de contenus exclusifs sur le thème et le builder DIVI

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.