Comment créer un appel à l’action à partir d’un élément de menu ?
WordPress est proposé avec un menu de navigation qui rend la tâche assez facile pour les utilisateurs débutants. Cependant, si vous êtes tout nouveau sur WordPress ou si vous avez besoin d’un rafraîchissement, lisez ce guide qui couvre les bases : comment créer un menu et des éléments de menu.
Si vous avez déjà configuré votre menu, suivez ces étapes pour créer un bouton pour n’importe quel lien dans le menu !
1. Ajouter un nom de classe personnalisé à un élément de menu
Connectez-vous au tableau de bord de WordPress.
Dans le menu « Apparence » sur le côté gauche du tableau de bord, sélectionnez « Menus ».
Localisez l’élément de menu que vous voulez personnaliser.
Ajoutez le nom de la classe personnalisée à votre élément de menu : menu_cta.
Si vous ne voyez pas la case permettant d’entrer votre classe CSS personnalisée, cliquez sur « Screen Options » en haut à droite de votre tableau de bord de menu pour l’activer.
#REFAIRE LA VIDEO
2. Ajouter le CSS personnalisé
À ce stade, il est temps d’ajouter du CSS à votre site Web. Le CSS peut être ajouté de trois manières différentes :
- Console CSS personnalisée dans les options du thème Divi > onglet Général.
- plugin Custom CSS and JavaScript Developer Edition
- Fichier Style.css dans le thème enfant du site Web.
Si vous n’avez pas encore configuré de thème enfant, vous pouvez en créer un vierge à l’aide d’un générateur de thème enfant.
#IMAGE
Pour ce tutoriel, nous allons utiliser la boîte Custom CSS.
Pour y accéder :
1 – Connectez-vous à votre tableau de bord WordPress.
2 – Allez dans « Divi > Theme Options » où vous trouverez les options du thème Divi.
3 – Allez dans l’onglet « Général » (ce devrait être l’onglet actuel).
4 – Ajoutez le code CSS dans la case intitulée « Custom CSS ».
Cliquez sur Enregistrer
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 15px 15px 15px 15px !important;
}
3. Ajout d’une icône
Vous pouvez éventuellement ajouter l’icône avant le texte pour l’affichage sur tablette et sur ordinateur.
Pour ce faire, utilisez le snippet ci-dessous :
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 15px 15px 15px 15px !important;
}
@media (min-width: 980px){
.menu_cta a:before {
content: ‘\e090’;
color: #fff;
font-family: ‘ETmodules’;
font-size: 16px;
line-height: 1;
position: absolute;
left: 12px;
}
.menu_cta a {
padding: 15px 15px 15px 35px !important;
}
}
Vous pouvez changer l’icône en modifiant la valeur du contenu dans le code ci-dessus.
content : ‘\e090’ ; représente le téléphone. Si vous voulez la changer, par exemple, en icône de boutique, suivez ces étapes :
Rendez-vous dans la liste des icônes d’Elegant Themes et recherchez l’icône que vous souhaitez utiliser.
#IMAGE
2. Les quatre chiffres qui suivent &#x dans les codes html sont les quatre derniers chiffres dont vous aurez besoin pour taper les unicodes (s’il n’y a que deux chiffres après &#x, tapez 00 avant les deux chiffres).
3. Trouvez le numéro Unicode, dans l’exemple ci-dessus pour l’icône du panier, ce sera : e07a.
4. Remplacez le numéro Unicode dans le snippet ci-dessus par le nouveau, en prenant soin de laisser les guillemets et la barre oblique intacts.
4. Vérifiez l’aspect des boutons sur les appareils mobiles.
Vue mobile :
#IMAGE
Vous pouvez désactiver le style pour les appareils mobiles. Insérez l’extrait de code choisi dans la requête média.
@media (min-width: 980px) { }
Ou ne pas afficher l’élément de menu lorsque la largeur est inférieure à 980p en ajoutant le code :
@media (max-width: 980px) {
.menu_cta {
display: none;
}
}
Vous pouvez personnaliser l’appel à l’action en fonction de la conception actuelle de votre site Web. Voici d’autres valeurs CSS avec lesquelles vous pouvez jouer
- padding
- color
- background-color
- border radius
- font-size
- font-family
- font-weight
- border
- letter-spacing
- box-shadow
Si vous utilisez un en-tête fixe, vous devrez peut-être utiliser une valeur de couleur différente pour la couleur du bouton afin d’écraser les paramètres par défaut dans le Customizer du thème Divi.
Pour ce faire, utilisez le sélecteur .et-fixed-nav #top-menu. Pour en savoir plus, lisez notre guide Divi CSS et Child Theme.
.et-fixed-header #top-menu .menu_cta a, .et-fixed-header #top-menu li.current-menu-item>a {
color: #fff!important;
}
5. C’est cadeau 🙂 .
J’ai créé 5 designs avec des CTA différents. Choisissez celui qui vous convient le mieux !
#IMAGE
@media (min-width: 980px) {
.menu_cta {
padding: 0!important;
border-radius: 30px;
border: solid 2px #fff;
transition: 0.3s;
}
.menu_cta a{
color: #fff!important;
padding: 15px 30px 15px 30px!important;
}
#top-menu-nav .menu_cta a:hover {
opacity: 1;
}
.menu_cta:hover {
border: solid 2px #fe8400;
background: #fe8400;
}
}
#IMAGE
@media (min-width: 980px) {
.menu_cta {
background-color: #f2f2f2;
background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
border: 1px solid #bfbfbf;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
color: #8c8c8c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 3px;
font-family: Verdana, sans-serif;
transition: all 20ms ease-out;
}
.menu_cta:hover {
background: #f2f2f2;
border-color: #8c8c8c;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
.menu_cta a{
color: #23282d!important;
padding: 12px 30px 12px!important;
}
}
#top-menu-nav .menu_cta a:hover {
opacity: 1;
}
#IMAGE
@media (min-width: 980px) {
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 10px 15px 10px 35px !important;
}
.menu_cta a:before {
content: ‘\e090’;
color: #fff;
font-family: ‘ETmodules’;
font-size: 16px;
line-height: 1;
position: absolute;
left: 12px;
}
}
#IMAGE
.menu_cta {
background-color: #ff6900;
color: #fff;
padding: 0 !important;
}
.menu_cta a {
color: #fff !important;
padding: 15px 15px 15px 15px !important;
}
En conclusion
Nous espérons que les informations contenues dans ce tutoriel vous ont été utiles. Si vous avez des questions, posez-les dans les commentaires et, pendant que vous y êtes, faites-nous part des futurs guides pas à pas que vous aimeriez voir ici !