Créer un Call To Action dans le menu

Ajouter un bouton d’appel à l’action (Call To Action ou CTA) dans le menu de votre site WordPress utilisant le thème Divi peut considérablement améliorer l’engagement des utilisateurs. Ce guide détaillé vous explique comment procéder, étape par étape, pour intégrer efficacement un CTA dans votre menu de navigation.

1. Comprendre l’importance d’un CTA dans le menu

Un CTA bien placé dans le menu de navigation attire l’attention des visiteurs et les incite à entreprendre une action spécifique, comme s’inscrire à une newsletter, acheter un produit ou contacter votre entreprise. Dans le thème Divi, personnaliser un élément de menu en bouton est une stratégie efficace pour augmenter les conversions.

2. Ajouter une classe CSS personnalisée à l’élément de menu

Pour transformer un élément de menu en bouton CTA, commencez par ajouter une classe CSS personnalisée à cet élément :

1. Accédez à votre tableau de bord WordPress.
2. Naviguez vers « Apparence » > « Menus ».
3. Sélectionnez l’élément de menu à personnaliser.
4. Ajoutez la classe CSS personnalisée :
   • Si l’option pour ajouter une classe CSS n’est pas visible, cliquez sur « Options de l’écran » en haut à droite et cochez « Classes CSS ».
   • Dans le champ « Classe CSS » de l’élément de menu, entrez menu_cta.

3. Ajouter du CSS personnalisé

Après avoir attribué la classe CSS, il est nécessaire d’ajouter du code CSS pour styliser le bouton :

1. Accédez aux options du thème Divi :
   • Allez dans « Divi » > « Options du thème ».
   • Sous l’onglet « Général », trouvez la section « CSS personnalisé ».
2. Ajoutez le code CSS suivant :cssCopier le code.menu_cta { background-color: #ff6900; color: #fff; padding: 0 !important; } .menu_cta a { color: #fff !important; padding: 15px 15px 15px 15px !important; } Ce code stylise l’élément de menu avec un fond orange et un texte blanc, créant ainsi un bouton attrayant.

4. Ajouter une icône au bouton (optionnel)

Pour enrichir visuellement votre CTA, vous pouvez ajouter une icône avant le texte du bouton :

1. Ajoutez le code CSS suivant :cssCopier le code@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; } } Ce code ajoute une icône de téléphone avant le texte du bouton sur les écrans de bureau et tablette.
2. Changer l’icône :
   • Pour utiliser une autre icône, consultez la liste des icônes d’Elegant Themes.
   • Identifiez le code Unicode de l’icône souhaitée (par exemple, e07a pour une icône de panier).
   • Remplacez \e090 par le code Unicode de l’icône choisie dans le code CSS.

5. Adapter le bouton pour les appareils mobiles

Il est essentiel de s’assurer que le bouton CTA s’affiche correctement sur tous les appareils :

• Désactiver le style sur mobile : Si vous préférez que le bouton n’apparaisse pas sur les écrans de petite taille, ajoutez le code suivant :cssCopier le code@media (max-width: 980px) { .menu_cta { display: none; } }
• Personnaliser le style pour mobile : Si vous souhaitez que le bouton apparaisse différemment sur mobile, ajustez les propriétés CSS en conséquence.

6. Personnaliser davantage le bouton

Pour harmoniser le bouton avec le design de votre site, vous pouvez modifier les propriétés CSS suivantes :

• Couleurs : background-color, color
• Typographie : font-size, font-family, font-weight
• Espacement : padding, margin
• Bordures : border, border-radius
• Effets : box-shadow, transition

Par exemple, pour ajouter un effet de survol, vous pouvez utiliser :

cssCopier le code.menu_cta:hover {
    background-color: #fe8400;
    border-color: #fe8400;
}

7. Gérer les en-têtes fixes

Si votre site utilise un en-tête fixe, il est important de s’assurer que le bouton CTA reste visible et cohérent lors du défilement :

cssCopier le code.et-fixed-header #top-menu .menu_cta a {
    color: #fff !important;
}

Ce code garantit que le bouton conserve sa couleur de texte blanche dans l’en-tête fixe.

Conclusion

En suivant ces étapes, vous pouvez transformer un élément de menu en un bouton d’appel à l’action attrayant et fonctionnel dans le thème Divi de WordPress. Cette personnalisation améliore l’expérience utilisateur et peut augmenter les taux de conversion sur votre site. N’hésitez pas à ajuster les styles CSS pour qu’ils correspondent parfaitement à l’identité visuelle de votre marque.

Pour plus de détails et des exemples supplémentaires, consultez le tutoriel complet sur le site WordPress Hébergement.