Bouton CTA

Comment insérer un bouton d’appel à l’action dans le menu Divi ?

Marlène

1 février 2019

Pour inciter vos visiteurs à faire une action sur votre site web, il peut être efficace d’insérer un item sous forme de bouton dans votre menu. Par exemple, vous pouvez mettre en avant la page contact de votre site. Vous pouvez même y insérer un lien mobile pour que les internautes puissent vous appeler directement depuis leur smartphone. Lors de la création du site en format responsive mobile, ces appels à l’action pourront d’ailleurs être insérés à d’autres endroits que sur le format desktop.

Nous allons voir comment insérer un bouton de contact dans votre menu Divi comme dans l’exemple ci-dessous.

Mettre en place votre menu

Votre menu WordPress peut contenir :

  • des liens vers les pages principales de votre site
  • des liens que l’on appelle ancres qui vont directement dans votre site one-page. Une ancre amène aux différentes sections d’une même page pour pouvoir naviguer plus rapidement.

Pour créer votre menu, rendez-vous dans Apparence > Menus. Indiquez ensuite l’emplacement de votre menu. Nous sommes ici dans le « menu principal ».

Construire menu Divi

Ajouter votre item de menu

Pour personnaliser l’item « Contact » du menu principal, choisissez l’option d’insertion « Lien personnalisé ». Ensuite, ajoutez le code suivant dans le titre de la navigation :

<span class= »et_pb_more_button et_pb_button »> Contact</span>

La class indiquée dans la partie span va permettre d’ajouter du code CSS (Cascading Style Sheets) dans les options du thème d’Elegant Themes.

 
Lien personnalisé pour bouton d'appel a l'action

Styliser le bouton avec du code CSS

Pour personnaliser le bouton, intégrez le code CSS dans Divi > Options du thème > Personnaliser CSS

/*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;
}

Le fond de couleur de ce bouton, la typographie, la couleur de police et la taille du bouton peuvent bien sûr être optimisés pour correspondre à votre charte graphique.

Vous obtenez alors le résultat suivant :

 

En conclusion, insérer un bouton dans le menu de votre site vitrine WordPress ou votre blog peut améliorer l’apparence de votre site et optimiser la conversion. Les actions recherchées peuvent être diverses. Cela peut être de vous contacter, télécharger un document, remplir un formulaire pour un devis ou encore faire une réservation. Sur un site e-commerce, un bouton « acheter » est indispensable pour optimiser le tunnel de conversion.

Afin de mesurer l’efficaciter de ce CTA (Call to Action), une balise peut y être ajoutée afin de mesurer le nombre de clics dans Google Analytics.

Si vous ne souhaitez pas mettre les mains dans le code, vous pouvez ajouter un plugin comme Divi Pixel qui embarque une multitude de modules et configurations supplémentaires (lien affilié).

bannière divi pixel
dégradé noir gris