Inserire un bottone di Call to Action nel menu di Divi

Come inserire un bottone di “call to action” nel menu di Divi. Segui tutti i passaggi e ottieni il tuo bottone nel menu di Divi! Ottimo per ogni tipo di call to action nel suo sito web!

Introduzione

In questo rapido tutorial ti guidiamo nell’inserimento di un bottone di call to action nel menu del tuo sito creato con Divi.

Potrai personalizzare i colori e il font del bottone come desideri seguendo le istruzioni che trovi più sotto.

Dettagli tutorial:

  • Tempo di configurazione: 15 minuti
  • Difficoltà: media
  • Scrivi nei commenti per assistenza o domande

Bene, iniziamo!

Indice dei contenuti

  • Come inserire un bottone nel menu di Divi
  • Conclusioni e Risorse

Inserire un bottone di Call To Action nel menu di Divi

In questo tutorial, andremo a creare un bottone con funzione di “call to action” nel menù del nostro sito WordPress creato con Diviattraverso l’utilizzo di un semplice codice css. Questa funzione verrà arricchita, con l’inserimento di un codice javascript, che permetterà al bottone di cambiare colore quando si arriva al 50% di scrolling di una qualsiasi pagina del nostro sito.

Per prima cosa andiamo nella nostra dashboard o bacheca di WordPress e selezioniamo la voce Aspetto > Menu.

Se non avete ancora creato un Menu createne uno nuovo e aggiungete tutte le pagine presenti nel vostro sito. Se avete già un menu attivo apritelo e modificatelo. In entrambi i casi, per inserire il vostro bottone di call to action, dovrete creare un link personalizzato (come vedete nell’immagine qui sotto), a aggiungervi l’URL della vostra call to action.

Fatto questo, andiamo assicuriamoci di impostare il menù come Primario nella voce posizione di visualizzazione.

Ora abilitiamo nelle impostazioni di schermata le classi css esalviamo il tutto.

Adesso rechiamoci nelle impostazioni generali di Divi e andiamo a inserire questo codice css nella casella CSS personalizzato:

/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}
  
/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
    box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}
  
.et_header_style_left #et-top-navigation {
padding-top: 20px;
}
  
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}
  
/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid #f92c8b;
}
  
.jointoday_button a:hover {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #f92c8b;
}
  
.et-fixed-header #top-menu .jointoday_button a:hover {
    background-color: #de20b3;
    border: 2px solid #de20b3;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}
  
.et-fixed-header #top-menu .jointoday_button a {
    color: #fff !important;
    background-color: #f92c8b;
    box-shadow: 0px 5px 20px #d6dee4;
    -moz-box-shadow: 0px 5px 20px #d6dee4;
    -webkit-box-shadow: 0px 5px 20px #d6dee4;
    border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
    background-color: #2cc2e6;
    border: 2px solid #2cc2e6;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}
  
#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
    background-color: #f92c8b;
    border: 2px solid #f92c8b;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}
  
@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
  
/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}
  
.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;}
  
.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}

Adesso aggiungiamo al nostro link personalizzato la seguente classe: jointoday_button

Ora, per attivare il cambio colore del bottone al raggiungimento del 50% di scroll della pagina, non ci resta che inserire il seguente codice javascript nella sezione Integrazione del pannello delle opzioni di Divi, in corrispondenza del box “Aggiungi codice a“.

<script>
jQuery(document).ready(function($){
    jQuery(window).scroll(function() {    
    var   $main_header = jQuery('#main-header'),
        $body = jQuery('body'),
                scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
                scroll = $(window).scrollTop(),
            objectPosition = $body.offset().top;
 
        if (scroll < objectPosition) {
            $main_header.removeClass("et_highlight_nav");
        }
        if (scrollPercentage >= 50){
            $main_header.addClass("et_highlight_nav");
        }
    });
});
</script>

Fatto!

Conclusioni

Grazie per aver seguito questo tutorial!

Da Marco e da Imparaqui è tutto! Ci vediamo alla prossima!

Se hai bisogno di informazioni aggiuntive o chiarimenti, non esitare a scrivere nei commenti qui sotto.

E ricorda che puoi scoprire ottimi corsi per usare Divi al meglio nella Imparaqui Academy.

Guide, tutorial, news

Ricevi ottime risorse per WordPress settimanalmente!

Articoli correlati

Commenti

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

  1. Ciao Marco,
    Il tuo tutorial è stato molto utile e chiarissimo.
    Ho inserito una call to action nel menù in brevissimo tempo.

    Ho solo un piccolo problema, che non so se è grave oppure no.

    Quando ho copiato il codice CSS nella sezione “CSS personalizzato” di Divi, accanto alla riga 15 (la copio di seguito)

    .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {

    esce una X rossa, cliccando la X ci sono una serie di avvisi.
    Vorrei inviarti la schermata degli avvisi ma non riesco ad allegarla.

    A me sembra funzioni tutto: la call to action è visibile nel menù e funziona.

    Secondo te devo preoccuparmi degli avvisi?

    Grazie.

    Stefania

Ti è stato di aiuto?

Condividi questo post con i tuoi amici!

Accedi alla nostra formazione completa su Divi con il bundle Divi 360: 5 corsi online completi in offerta speciale con sconto del 70%! • Accesso lifetime • Aggiornamenti inclusi.