A votre avis, quel est le meilleur emplacement sur un site web pour un CTA ?
Mon endroit préféré ? Le menu ! Comme sur mon site :
Je vais vous apprendre à créer un CTA dans votre menu avec Divi, et pour cela, j’ai 2 solutions à vous proposer. A vous de voir laquelle vous conviendra le mieux. J’utilise le thème Divi dans les 2 cas, si vous voulez en savoir plus sur Divi avant de vous lancer, aller voir mes articles 5 raisons de choisir le thème Divi pour WordPress et Présentation de Divi, un thème WordPress Premium. Vous y trouverez toutes les informations sur ce thème que j’affectionne particulièrement, et vous verrez pourquoi.
Sommaire
Si vous débuter sur WordPress, cela va vous sembler un peu barbare, mais rassurez-vous, je vais vous détailler les étapes pour réussir facilement et rapidement votre bouton.
Votre menu peut contenir divers éléments comme des liens vers les pages les plus importantes de votre site ou des ancres pour arriver à différentes sections de votre page (section contact ou autre).
- Dans la partie Admin de votre site WordPress, rendez vous dans Apparence -> Menu comme indiqué dans la capture d’écran ci-dessous :
- Ajouter ensuite au menu les pages, catégories ou articles que vous souhaitez.
- Pour transformer l’un des éléments de votre menu en bouton (Appel gratuit dans mon cas, Contact, etc), ajouter un Lien personnalisé, comme ci-après :
- Une fois le lien ajouté au menu, modifier les paramètres suivants :
- Titre de la navigation : modifier par le code suivant
-
- Remplacer Appel Gratuit par le texte que vous souhaitez : Contact ou autre.
- Cela permet d’attribuer une classe (span) à cet item du menu. Nous pourrons ensuite personnaliser cette classe pour lui donner l’aspect de notre choix.
-
- Choisir l’emplacement de votre menu (Menu principal) et l’enregistrer.
Personnaliser le CTA avec Divi
- Rendez vous ensuite dans les options du thème Divi pour ajouter le CSS qui permettra d’avoir un bouton d’appel à l’action aux couleurs de votre choix.
- Tout en bas de la page, dans Personnaliser CSS, ajouter le code suivant :
/*Menu bouton contact*/
#et-top-navigation .et_pb_button {
margin-top: 0px;
padding-right: 30px ;
padding-left: 30px ;
font-size: inherit;
font-weight: inherit;
background-color: #591800;
color: white;
border-radius: 100px;
}
#et-top-navigation .et_pb_button:after {
font-size: 23px;
}
- Modifier la couleur du bouton : background-color
- Modifier la couleur du texte dans le bouton : color
- Enregistrer lorsque toutes les modifications sont terminées.
Et voilà, vous avez à présent un joli bouton dans votre menu pour attirer l’oeil des internautes sur votre site internet.
Ajouter des effets à votre bouton (optionnel)
Sachez qu’il est également possible de donner des effets à votre bouton pour encore plus de visibilité. Je vous en dis plus très vite.
La 2ème solution pour créer un CTA dans votre menu, c’est d’utiliser la fonction Theme Builder de Divi. J’avoue que cette solution me plaît beaucoup car elle permet également de créer entièrement votre header, en y ajoutant par exemple un bandeau coloré en haut avec un lien vers votre boutique ou autre (je vous en parlerai bientôt dans un nouvel article).
Cette solution présente également l’avantage de pouvoir créer des versions différentes de votre menu selon que l’internaute se trouve sur un mobile, une tablette ou un ordinateur. Je vous prépare également un article à ce sujet très vite !
Voici donc comment mettre en place un CTA dans votre header grâce à Thème builder :
Ajouter un nouveau modèle
- Dans la partie Admin de votre site web, rendez vous dans Divi -> Thème Builder. (Si vous ne voyez pas apparaître cette page, c’est que votre thème Divi n’est pas à jour. Vous pouvez effectuer la mise à jour dans Tableau de bord -> Mises à jour.)
- Créer un nouveau modèle en cliquant sur le bouton Ajouter un modèle.
- Définir les paramètres du modèle : c’est ici que vous allez pouvoir décider de l’endroit où sera visible votre modèle. Il peut s’agir de tout le site, toutes les pages ou uniquement certaines, les articles, certains articles, brefs, vous pouvez tout imaginer comme par exemple avoir un menu différent pour chaque page.
- Cliquer sur Ajouter un en-tête personnalisé pour créer le header.
- Choisir l’option Construire un en-tête personnalisé.
Mettre en page son header
- Utiliser Divi Builder pour construire votre menu avec des blocs comme d’habitude : ajouter une nouvelle rangée, puis des modules.
- Je vous conseille d’ajouter les éléments indispensables : votre logo et votre menu principal. Personnaliser ces éléments comme vous le souhaitez.
- Ajouter un module Bouton et le personnaliser (couleur du texte, couleur du bouton, taille du bouton, couleur de la bordure, lien du CTA, etc.
Et voilà, vous savez maintenant comment ajouter un CTA dans votre menu. Vous aimez le résultat ?
Si vous souhaitez plus d’astuces Divi, suivez-moi sur les réseaux sociaux 🙂
- Les bonnes pratiques pour l’optimisation des vidéos Youtube : découvrez comment booster votre chaîne comme un expert en marketing ! - juin 22, 2023
- Comment utiliser le storytelling pour améliorer votre site web : le guide ultime pour capter l’attention de vos visiteurs - juin 19, 2023
- Les secrets révélés : comment créer un blog attrayant et générer du trafic pour maximiser votre succès en ligne ! - juin 15, 2023
0 commentaires