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!

È 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!

Registra un nuovo account affiliato