Créer un bouton d’appel à l’action dans votre menu Divi

Jan 2021 | Astuces, Divi, WordPress | 0 commentaires

Dans ce tutoriel en trois étapes, vous découvrirez comment créer facilement un bouton d’appel à l’action dans votre menu WordPress et Divi permettant d’accrocher le regard de l’utilisateur et de l’ajouter dans le menu de votre choix. Cet élément vous permettra d’augmenter significativement votre taux de conversion en incitant au clic 🙂

Afin de capter l’attention de votre visiteur, il est commun d’employer un élément appelé appel à l’action. Cet élément peut prendre différentes formes et notamment celle d’un bouton qu’il est nécessaire de placer à un endroit stratégique tel que le menu de votre site internet.

1. Créer votre menu sur WordPress

Dans un premier temps, il est nécessaire de créer votre menu ou de vous rendre sur celui sur lequel vous souhaitez ajouter votre bouton d’appel à l’action. Depuis votre espace d’administration, naviguez jusqu’à Apparence > Menus.

Une fois positionné sur votre menu, ajoutez un élément comme une page ou un lien personnalisé à celui-ci. Dans notre exemple, nous nous positionnons sur notre menu principal et allons y ajouter une page nommée Contact.

Ajouter un élément à son menu WordPress

L’objectif de cette page est de mettre en exergue la possibilité de mettre en relation l’utilisateur et nos services. Enfin, sauvegardez votre menu.

Pour l’instant notre menu ressemble donc à cela :

Exemple de menu simple pour WordPress

2. Définir une classe personnalisée pour votre appel à l’action et l’inclure au menu

Maintenant, il va falloir définir et appliquer ce que l’on appelle une classe CSS sur l’élément que nous venons d’ajouter à notre menu. Retournez sur “Apparence > Menu“. Dans le coin supérieur droit de votre interface, vous pouvez remarquer l’onglet Options de l’écran : cliquez dessus afin de le déplier et cochez Classe CSS si ce n’est pas déjà le cas.

Définir une classe CSS dans un élément du menu WordPress

Toujours au sein de notre menu, cliquez sur l’élément précédemment ajouté. Dans le champ Classes CSS (facultatives), attribuez un libellé de votre choix et sauvegardez le tout. Pour ce tutoriel, nous choisirons le libellé btn-appel-action.

Cette action va ajouter un champ supplémentaire à chaque élément de votre menu dans lequel vous pourrez attribuer une classe personnalisée à ce dernier. À présent, Il ne vous reste plus qu’à personnaliser cette classe avec un peu de code CSS (n’ayez pas peur 😉)

3. Personnalisez votre bouton d’appel à l’action

Passons à la dernière partie étant la personnalisation de votre classe à l’aide du CSS. C’est à cette étape que vous allez transformer le lien de votre menu en bouton et lui attribuer le style que vous souhaitez. Notez qu’il est judicieux d’utiliser un thème enfant pour Divi si vous ne voulez pas perdre vos modifications de code à l’avenir.

Ensuite, rendez-vous dans dans Apparence > Editeur de thème (pensez à sélectionner la feuille de style de votre thème enfant si vous en utilisez un) ou Divi > Options du thème puis descendez jusqu’à la zone Personnaliser CSS et ajoutez le CSS sur la classe définie dans l’étape précédente.

Ajouter du CSS personnalisé

Pour ce tutoriel, vous pouvez utiliser l’exemple suivant – qui est par ailleurs celui que nous utilisons – :

@media (min-width: 980px) { /* Affiche le bouton uniquement lorsque l'écran est au minimum de 980x de large (le désactive donc sur mobile) */
.btn-appel-action { 
border-radius: 35px; /* Arrondi les angles du bouton */
border: solid 2px #000; /* Défini la taille de la bordure du bouton et sa couleur */
}

.btn-appel-action a { 
color: #000!important; /* Défini la couleur du lien */
padding: 10px 20px 10px 20px!important; /* Gère les marges internes du bouton */
}

.btn-appel-action:hover {
border: solid 2px #ff005A; /* Change la taille et la couleur de la bordure au survol */
background: #ff005A; /* Idem pour la couleur de fond */
}

Une fois votre CSS ajouté, appliquez les modifications en mettant à jour le fichier et contempler le résultat.

Exemple de menu avec un bouton d'appel à l'action sur WordPress

4. Bonus : Ajouter une icône à votre bouton d’appel à l’action

Il peut être intéressant d’ajouter un pictogramme à votre bouton d’appel à l’action afin d’y apporter un élément visuel supplémentaire.

Exemple de menu avec un bouton d'appel à l'action avec icône

Pour ajouter une icône à votre bouton, ajoutez le CSS ci-dessous :

.btn-appel-action a:before { 
content: '\e010'; /* Modifiez l'icône en adaptant le code sur cette ligne. Plus de choix sur https://dividezigns.com/divi-icon-codes/ */
color: #000; /* Choisir la couleur de l'icône */
font-family: 'ETmodules';
font-size: 15px; /* Choisir la taille de l'icône */
padding-right : 10px; /* Gère la marge interne droite de l'icone */
}

Vous pouvez également lire notre article sur comment ajouter des icônes (avec ou sans plugin) dans votre menu WordPress 😉

Et voilà, désormais vous savez comment ajouter un bouton d’appel à l’action dans votre menu Divi. N’hésitez pas à partager via l’espace commentaire vos créations et les effets qu’elles ont apportées.

Par Samy Bentemam

Entrepreneur et rédacteur d’articles passionnants, je serais ravi d’échanger avec vous de votre futur projet. Au plaisir de partager de nouvelles connaissances tous ensemble 😸

Confiez votre projet web à des professionnels compétents

Laisser un commentaire

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Tu veux recevoir du contenu exclusif ?

Tu veux recevoir du contenu exclusif ?

Alors rejoins gratuitement la communauté Altefkat et bénéficie de nombreux avantages. Garanti sans spam, ni colorants, ni conservateurs !

Bienvenue dans la communauté Altefkat ! Nous te remercions pour ton inscription et ta confiance.

Hey, on s'occupe de votre maintenance WordPress ?

Remplissez le formulaire ci-dessous et notre équipe vous enverra une proposition gratuitement dans 48h. 

Votre message a été transmis 😺

Share This