2 solutions pour ajouter un bouton d’appel à l’action dans votre menu Divi

Avoir un bouton d’appel à l’action, ou CTA sur son site, est un élément essentiel si vous souhaitez capter l’attention de vos internautes, et les amener à agir. Le CTA peut renvoyer vers un shop, une page de vente, une page de contact pour prendre un rdv, etc. Il n’y a de limite que votre imagination ! Le tout c’est qu’il soit, en un seul mot, ATTRACTIF. Il doit donner envie de cliquer dessus le plus vite possible.

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 :

bouton appel a laction

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.

Ajouter un CTA dans le menu Divi en passant par le code CSS

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.

Créer votre menu et le lien à transformer en CTA

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 :
créer un menu wordpress

1 : Apparence – 2 : Menu – 3 : Créer un nouveau menu (ou modifier le menu existant)

  • 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 :
ajouter lien personnalisé menu wordpress

4 : La page vers laquelle renvoi le CTA – 5 : Texte du CTA

  • Une fois le lien ajouté au menu, modifier les paramètres suivants :
    • Titre de la navigation : modifier par le code suivant
<span class= »et_pb_more_button et_pb_button »> Appel Gratuit</span>

    • 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.
ajouter code item menu wordpress

6 – Ajouter du code à la place du titre de la navigation

    • 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.
options du thème divi

8 – Options du thème Divi

  • Tout en bas de la page, dans Personnaliser CSS, ajouter le code suivant :


personnaliser css bouton divi

/*Menu bouton contact*/
#et-top-navigation .et_pb_button {
margin-top: 0px;
padding-right: 30px!important;
padding-left: 30px!important;
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.

Ajouter un CTA dans le menu Divi en créant un header personnalisé

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.
divi theme builder

9 : Thème Builder – 10 : 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.

paramètres modèle divi

  • Cliquer sur Ajouter un en-tête personnalisé pour créer le header.

 

ajouter en tête personnalisé divi theme builder

11 – Ajouter un en-tête personnalisé

  • 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.
construire header divi theme builder

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.
création header divi theme builder

Personnaliser le header et le CTA

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 🙂