Comment ajouter un bouton CTA dans le menu WordPress ?
Vous souhaitez attirer l’œil du visiteur et l’inciter à visiter une page ou une section importante de votre site Web ? Alors, ajouter un bouton CTA dans votre menu WordPress est le meilleur moyen d’y parvenir.
En effet, avec un bouton d’appel à l’action visible sur toutes les pages du site, vous pouvez augmenter les clics vers :
- votre boutique en ligne
- votre page de réservation ou de contact
- ou tout autre élément qui vous aide à atteindre vos objectifs
De nos jours, la plupart des thèmes WordPress embarquent déjà un bouton CTA (Call To Action) dans l’en-tête (header). Néanmoins, si votre thème n’en propose pas ou si vous souhaitez en ajouter un second dans le menu. Alors, cet article est fait pour vous.
Dans cet article, vous apprendrez comment ajouter et styliser un bouton CTA dans un menu WordPress avec des exemples de codes pour les thèmes WordPress Astra, Kadence et OceanWP.
En bref, un bouton ce n’est qu’un lien hypertexte avec une couleur de fond et/ou une bordure. Alors, comme les éléments de menu sont déjà des liens, il suffit donc de lui ajouter un style particulier. 😉
Voyons tout de suite comment y parvenir en 3 étapes !
1. Ajouter une classe CSS à l’élément de menu WordPress
Premièrement, il faut attribuer une classe CSS à l’élément du menu WordPress pour pouvoir lui donner le style d’un bouton CTA.
Pour ce faire, allez dans Apparence > Menu.
Positionnez-vous à présent sur l’élément de menu que vous souhaitez transformer en bouton. Puis dans la case “Classes CSS” saisissez un mot (sans point devant). Ce mot correspondra à la classe du bouton que vous souhaitez générer.
⚠️ Attention, la classe doit être unique. C’est-à dire qu’elle ne doit pas correspondre à une classe déjà existante sur votre site.
Si la case “Classes CSS” n’apparait pas, comme indiqué dans mon article sur les options de l’écran, cliquez sur “Options de l’écran” et cochez “Classes CSS”.
Lorsque vous avez terminé, n’oubliez pas de cliquer sur le bouton “Publier”.😉
Pour les exemples de CSS qui vont suivre, j’ai ajouté la classe ctamenu à l’élément de menu Contact :
Cela étant fait, allez ensuite dans Apparence > Personnaliser > CSS additionnel.
2. Saisir le CSS pour ajouter le style au bouton CTA du menu
Maintenant, vous allez saisir le code qui donnera à l’élément de votre menu WordPress l’aspect d’un bouton CTA. Vous vous servirez de la classe que vous avez ajoutée pour styliser l’élément de menu (ici ctamenu) et a, le texte.
En premier lieu, ajoutez une couleur d’arrière-plan (background-color) et choisissez une couleur de texte (color). Et surtout, pensez à choisir une couleur assez contrastée pour rendre le texte accessible.😉
/*bouton menu contact*/
.ctamenu a {
color:#FFFFFF!important;
background-color:#cf2e87;
}Ensuite, si vous avez envie que la couleur du bouton et/ou du texte change au survol de la souris. Alors, ajoutez le code nécessaire à l’aide de la pseudo-classe :hover :
.ctamenu a:hover {
color:#FFFFFF!important;
background-color:#000000;
}💡Ce code peut être également utile si la couleur du texte des éléments de menu change au survol et que vous ne souhaitez une autre couleur.
C’est pas mal. Mais, on peut encore styliser le bouton un peu plus en lui ajoutant une bordure arrondie avec la propriété border-radius.😉
.ctamenu a {
color:#FFFFFF!important;
background-color:#cf2e87;
border-radius:40px;
}
C’est déjà mieux. Mais comme vous pouvez le constater, le bouton prend toute la place en hauteur. Alors, saisissez quelques lignes de code supplémentaires.
💡 Le code à utiliser dépend du thème WordPress que vous utilisez et des paramétrages que vous avez faits pour l’en-tête. Ici, pour l’exemple de code, j’utilise le thème WordPress Astra avec une hauteur de 80 px pour l’en-tête principale.
Quoi qu’il en soit, testez d’ajouter un espace en haut avec padding-top et un en bas avec padding-bottom. Et si besoin, ajustez la hauteur de ligne pour le texte en utilisant la propriété line-height.
Voici le code saisi pour un bouton dans le menu avec le thème Astra :
/*bouton menu contact theme Astra*/
.ctamenu a {
color:#FFFFFF!important;
background-color:#cf2e87;
border-radius:40px;
line-height:2.7;
}
.ctamenu {
padding-top: 15px;
padding-bottom: 15px;
}Et ce que ça donne visuellement :
💡 Pour la valeur de line-height, vous pouvez utiliser des px, des %, une valeur numérique… Néanmoins, je vous conseille d’utiliser une valeur numérique, ainsi la hauteur de la ligne correspondra au chiffre que vous avez indiqué multiplié par la taille de police de l’élément.
3. Ajuster l’apparence du bouton CTA du menu en mode mobile
Comme vous le savez, à partir d’une certaine taille d’écran, le menu se transforme en menu mobile. Sous cette forme, le bouton que vous avez créé s’étend par défaut sur toute la largeur du menu déroulant. Et ça ce n’est pas franchement top pour le responsive design de votre site. 😯
Alors, afin d’améliorer l’apparence de l’élément de menu transformé en bouton CTA en mode mobile, vous pouvez ajouter des media queries (règles spécifiques pour le style selon la taille de l’écran).
Trouver le breakpoint pour le passage du menu en menu mobile
En premier lieu, selon le thème WordPress que vous utilisez, trouvez le point d’arrêt à partir duquel le menu de navigation par défaut se transforme en menu mobile (avec la navigation hamburger).
Par exemple, pour :
- Twenty-Twenty-Four, le point d’arrêt pour l’affichage du menu mobile est fixé à 600 px (idem pour Twenty-Twenty-Three).
- Astra à 921 px
- Kadence à 1024 px, mais vous pouvez le changer en passant par Apparence > Personnaliser > En-tête > Apparence Taille de l’écran pour passer à l’entête mobile.
- OceanWP à 959 px, mais vous pouvez choisir la requête média où vous souhaitez afficher le menu mobile en passant par Apparence > Personnaliser > En-tête > Menu mobile > Points de rupture.
- Divi à 980 px
Ajouter le code CSS pour le style du bouton en modes mobile et tablette
Ensuite, pour la plupart des thèmes, il faut ajouter des requêtes média appropriées pour ajuster le design du bouton en mode mobile.
Avec le thème WordPress Astra, il n’y a pas besoin d’écrire requêtes médias pour la taille du bouton, car le site est en display: flex. Il suffit juste d’ajouter dès le départ la propriété magique width: fit-content qui permet d’ajuster automatiquement la largeur de l’arrière-plan en fonction de la largeur du texte.
Le code ci-dessous est compatible quel que soit le type d’en-tête que vous avez choisi : volte-face, plein ou écran déroulant.
/*bouton menu contact theme Astra*/
.ctamenu a{
color:#FFFFFF!important;
background-color:#cf2e87;
border-radius:40px;
line-height:2.7;
width:fit-content!important;
}Et si vous souhaitez centrer le bouton, utilisez la propriété align-items.
/*(optionnel) centrer le bouton du menu mobile*/
@media (max-width: 921px){
.ctamenu {
align-items:center;
}
}💡 La propriété fit-content est supportée par les navigateurs récents.
Résoudre le problème de la couleur du bouton au survol pour le thème WordPress Astra
Si vous avez défini une couleur au survol pour les éléments du menu mobile, le bouton CTA créé prendra cette couleur au survol. 😯
Pour résoudre le problème, ajoutez encore quelques lignes de code pour “forcer” Astra à afficher la couleur que vous avez choisie pour l’arrière-plan du bouton au survol.
/*Astra forcer la couleur d'arrière-plan au survol du bouton CTA menu mobile*/
.ast-builder-menu-mobile .main-navigation .ctamenu:hover > .menu-link {
background:black!important;
}Voilà, normalement, vous avez fini et votre bouton CTA ajouté dans le menu d’Astra devrait être top. Après, vous pouvez encore ajouter d’autres styles, mais je pense que l’on va s’arrêter là. 😉
Néanmoins, si vous souhaitez aussi rendre votre en-tête fixe (sticky header), consultez mon tuto !
Exemple de code pour ajouter un bouton CTA dans le menu du thème WordPress Kadence
Pour ajouter un bouton dans le menu du thème WordPress Kadence, j’ai opté pour la mise en page standard de la rangée principale avec une hauteur de 80 px.
Ici, le point d’arrêt du passage du menu en mode menu mobile est défini par défaut à 1024 px.
Dans le code ci-dessous, vous remarquerez que j’ai ajouté la propriété display: inline-flex, mais que je n’ai pas défini de largeur (width) pour le bouton. Ainsi, le bouton n’occupe que l’espace nécessaire requis par son contenu, même en mode mobile. D’autre part, j’ai ajusté la hauteur de ligne aussi (line-height) pour une meilleure apparence du bouton dans le menu mobile.
/*bouton menu theme Kadence*/
.ctamenu a {
color:#FFFFFF!important;
background-color:#cf2e87;
border-radius:40px;
line-height:1.2;
padding-left:18px!important;
padding-right:18px!important;
font-size:18px;
font-weight:400;
}
.ctamenu a:hover {
color:#FFFFFF!important;
background-color:#cf2e87!important;
}
.ctamenu {
display: inline-flex;
}
/*hauteur de ligne bouton menu mobile Kadence */
@media (max-width: 1024px){
.ctamenu a {
line-height:0.3;
}
}💡 Pour information, le code convient aussi bien pour le menu mobile pleine largeur que pour celui en panneau latéral.
Exemple de code pour ajouter un bouton CTA dans le menu du thème WordPress OceanWP
Pour ajouter un bouton dans le menu du thème WordPress OceanWP, j’ai opté pour un menu pleine largeur avec le style minimal. L’exemple de code sera bien sûr à adapter selon vos paramètres et vos goûts.
Comme pour le bouton du menu d’Astra, j’ai ajouté width:fit-content pour le responsive du bouton.
/*bouton menu OceanWP*/
.ctamenu a {
color:#FFFFFF!important;
background-color: #cf2e87;
border-radius: 24px;
line-height:3em!important;
margin-top:15px!important;
width:fit-content;
}Après, pour le menu mobile, le code dépend du style choisi. Mais, pour rappel, le passage du menu en mode mobile pour OceanWP se fait par défaut à 959 px à moins que vous ne l’ayez modifié.
Voici donc un exemple de code pour styliser le bouton du menu mobile avec le thème WordPress OceanWP si vous avez choisi le menu déroulant.
Ici, la propriété justify-content est utilisée pour centrer le bouton sur l’axe horizontal.
D’autre part, la hauteur de ligne (line-height) a été adaptée visuellement.
/*bouton OceanWP menu déroulant mobile*/
#mobile-dropdown .ctamenu a {
line-height:1.2em!important;
}
/*(optionnel)centrer bouton OceanWP menu déroulant mobile*/
#mobile-dropdown .ctamenu {
justify-content:center;
display:flex;
}
/*(optionnel) centrer tout le menu déroulant OceanWP*/
#mobile-dropdown ul li {
justify-content:center;
display:flex;
}Par contre, si vous avez opté pour la présentation colonne latérale pour le menu mobile d’OceanWP, alors, il faudra remplacer le code précédent par un autre code. En voici un exemple :
/*bouton menu OceanWP colonne latérale mobile*/
.sidr-class-ctamenu a {
color:#FFFFFF!important;
background-color: #cf2e87;
border-radius: 24px;
line-height:1.5em!important;
}
/*(optionnel)centrer bouton menu OceanWP colonne latérale mobile*/
.sidr-class-ctamenu {
justify-content:center;
display:flex;
}
/*(optionnel)centrer menu colonne latérale mobile OceanWP*/
.sidr ul li {
justify-content:center;
display:flex;
}Et enfin, si vous avez choisi le menu mobile plein écran d’OceanWP, voilà un exemple de code adapté :
/*bouton menu OceanWP plein écran mobile*/
#mobile-fullscreen .ctamenu a {
color:#FFFFFF;
background-color: #cf2e87;
border-radius: 24px;
line-height:1.2em!important;
padding-left:15px;
padding-right:15px;
}
/*forcer la couleur d'arrière-plan au survol du bouton OceanWP menu plein écran mobile*/
#mobile-fullscreen .ctamenu a:hover{
color:#FFFFFF;
background-color:#cf2e87;
}
/*(optionnel)centrer bouton menu OceanWP plein écran mobile*/
#mobile-fullscreen .ctamenu {
display:flex;
justify-content:center;
}Ajouter un bouton CTA dans le menu WordPress en résumé
Ajouter un bouton d’appel à l’action (CTA) dans le menu, ce n’est pas très compliqué. Qu’en pensez-vous ?
Pour résumer, il suffit de 3 étapes :
- Ajouter une classe CSS à l’élément de menu qui sera un bouton CTA
- Saisir le CSS pour ajouter le style au bouton CTA du menu
- Ajuster l’apparence du bouton CTA du menu en mode mobile
Vous pourriez aussi aimer...
Soumettre un commentaire 💬