Come inserire un bottone nel menu del tema Divi

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

In questo tutorial, andremo a creare un bottone con funzione di “call to action” nel menù del nostro sito WordPress creato con Divi, attraverso 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 e salviamo il tutto.

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

Adesso aggiungiamo al nostro link personalizzato la seguente classe:
jointoday_button
mi raccomando, copiatela esattamente così come la vedete e andate ad inserirla come da immagine qui sotto.

Aggiungere call to action menu tema Divi

Bene, ora siamo pronti per il passaggio finale!

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“:
Qui sotto trovi le indicazioni se vuoi modificare il codice CSS per personalizzare i colori del bottone call to action che abbiamo appena aggiunto al menu di Divi.
Se modifichi il colore, ricordati di andarlo a modificare anche nell'ultima parte del codice CSS che riguarda la visualizzazione del menu di Divi da mobile.
Grazie per aver seguito questo tutorial!

Da Marco e da imparaqui.it è tutto! Ci vediamo alla prossima!

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

Marco Melis

Appassionato di Divi e di Elementor, vivo nel cuore della Sardegna e ho un simpatico cane che si chiama Lillo 🙂 Mi piace creare tutorial per imparaqui.it ogni volta che ho l'ispirazione!

È arrivato DIVIBASIC!

 

Scopri DiviBasic, il corso perfetto per creare un sito professionale con WordPress e il tema Divi, accedi ora e inizia a creare il tuo sito!

logo-imparaqui

Unisciti alla Community!

Ricevi le risorse su Divi, Bloom, Monarch, e i tutorial e i lanci per i corsi online riservati alla community di imparaqui.it - incluso accesso al gruppo Facebook!

Risorse speciali

Consenso trattamento dati

Quali argomenti ti interessano?

Benvenuto/a nella community!

Unisciti alla community

Accedi alla più grande community italiana dedicata a chi usa il tema WordPress Divi di Elegant Themes!

Risorse speciali

Usi il tema WordPress Divi?

Consenso trattamento dati

Quali argomenti ti interessano?

Perfetto, controlla la tua casella di posta!