Nous devrions donc tous savoir maintenant à quel point il est important d’avoir un appel à l’action sur la page d’accueil de votre site Web. Et il y a beaucoup d’articles qui expliquent pourquoi. En fait, il y a beaucoup de débats pour savoir où il devrait être, quelle couleur fonctionne le mieux, où il devrait conduire et ainsi de suite.

Un endroit populaire pour mettre un bouton d’appel à l’action est dans votre menu principal et pourquoi pas ? C’est sur chaque page, il est toujours accessible et c’est un bien de grande valeur.

Dans ce didacticiel, je vais donc vous expliquer pas à pas comment transformer l’un de vos éléments de menu Divi en un bouton Call To Action très visible, similaire à celui de l’image présentée ci-dessus.

Commençons

La première chose à faire est de créer un menu personnalisé.

1. Allez à Apparence > Menu

001

 2. Sélectionnez les pages souhaitées dans votre menu, puis sélectionnez Ajouter au menu.

002

 

3. Ajustez les paramètres du menu afin qu’il soit défini comme menu principal et que toutes les nouvelles pages soient automatiquement mises à jour dans ce menu.

003

 

4. Ajustez les options de votre écran pour inclure les classes CSS dans vos éléments de menu.

004

 

5. Attribuez une classe à l’élément de menu que vous souhaitez transformer en bouton CTA. Dans ce cas, je veux que les gens me contactent. Je vais donc renommer le bouton Contactez-moi en Commençant et lui donner un cours appelé “get-started”.

005

 

6. Sélectionnez maintenant le menu Enregistrer.

006

 

 

La magie du CSS

Commençons maintenant à éblouir un peu les choses avec du CSS.

Si vous travaillez avec un thème enfant, vous pouvez aller à Apparence > Editeur et ouvrir votre feuille de style. Sinon, allez à Apparence > Options du thème Divi > CSS personnalisé (situé au bas de l’ePanel).

Ajoutez ce CSS.

(Ce code inclut la requête mobile pour rester responsive sur vos plus petits appareils)

01
02
03
04
05
06
07
08
09
dix
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*------------------------------------------------*/
/*-----------------[CTA Menu Item]----------------*/
/*-----------------[by GenoQuiroz]----------------*/
/*------------------------------------------------*/
 
/* Style  get started CTA Boutton */
            .get-started {border-radius: 0px;}
            .get-started a {color: #fff!important;}
            li.get-started {
                background-color:#ed7818;
                font-weight: 700;
                text-transform: uppercase;
                text-align: center;
                padding: 12px 13px 10px 10px!important;
            border-radius: 3px;
                -moz-transition: all 0.5s;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;}
            li.get-started:hover {background-color:#c96310;}
 
/* fixed header button text color */
                 .et-fixed-header #top-menu .get-started a {
                        color: #fff!important;}
        .get-started li.current-menu-ancestor > a, .get-started li.current-menu-item > a {
                    color: #fff !important;}
 
    @media only screen and (min-width : 981px) {
            li.get-started {height: 33px;}}

ATTENTION : Pensez à renommer les ID “get-started” par le nom que vous avez créer précédemment dans votre menu pour que les correctifs prennent effets.

Et avec cette astuce, même votre menu mobile dispose d’un appel à l’action

008

 

 

Modification de la couleur du texte lorsque je fais défiler vers le bas?

Dans certains cas, si vous avez ajouté une couleur personnalisée au lien actif dans les paramètres du Customizer (paramètres de navigation fixes uniquement), la couleur du texte peut encore changer lorsque vous faites défiler vers le bas. Il est préférable de laisser cette option en blanc. Toutefois, vous pouvez toujours modifier le lien de menu actif dans les paramètres de la barre de menus principale, qui fonctionne toujours avec une en-tête fixe.

Mais si vous devez modifier la couleur du lien actif dans les paramètres du Customizer – Paramètres de navigation fixes, voici une autre astuce css qui fonctionne. Crédit à Kathy Kroll Romana qui a contribué à ce correctif.

Là où il y a xxx, il s’agit de l’identifiant numérique spécifique pour l’élément de votre menu. Vous trouverez ce numéro en cliquant avec le bouton droit de la souris sur l’option de menu de votre navigateur et en sélectionnant «inspecter l’élément».

 

01
02
.et-fixed-header #top-menu li.menu-item-xxxx > a {
    color: #ffffff !important;}

 

 

MODIFICATION FACULTATIVE

Le code ci-dessus fonctionne mieux si votre CTA n’utilise pas de menu déroulant. Si votre bouton CTA à un menu déroulant, vous devrez ajouter un peu plus de CSS qui supprimera votre CTA dans le menu mobile.

 

01
02
03
04
05
06
07
08
09
dix
11
12
13
14
15
16
17
18
19
20
21
/* ADD THIS ONLY IF YOUR CTA BUTTON HAS A DROP DOWN MENU */
 
/* style the get started cta button drop down menu */
    li.get-started li a {
        color: #666!important;
        width: 160px;
        text-transform: none;
        font-weight: normal;
        background-color:#fff;}
 
 
/* mobile menu adjustments */
    .et_mobile_menu li a {padding: 10px 5%; line-height: normal;}
 
    .et_mobile_menu li.get-started {
        background-color: #fff;
        padding-left: 0px;
        text-align: left;}
 
    .et_mobile_menu li.get-started a{
        color: #f00!important; font-weight: 900;}

 

Maintenant, vous devrez probablement ajuster les couleurs pour qu’elles correspondent aux couleurs de votre police et de votre arrière-plan. Recherchez simplement les codes hexadécimaux à 6 chiffres des couleurs que vous souhaitez utiliser et remplacez-les dans ce code en conséquence.

Et maintenant votre menu mobile ressemblera à quelque chose comme ça…

 009

Traduit depuis Quiroz à l’adresse : http://bit.ly/2QTiqpB

 

Profitez de la puissance du meilleur plugin jamais conçu pour mettre en forme son site web

Découvrir Divi