CTA animata e espandibile in Divi

In questi tutorial per il tema Divi vedriamo insieme come creare una CTA animata ed espandibile durante lo scroll della pagina, esattamente come quella che si trova sul sito di Elegant Themes scorrendo verso il fondo delle pagine.

Segui attentamente tutti i passaggi e crea la tua Call To Action animata!

Dettagli tutorial:

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

Unisciti alla Community

Ricevi gli aggiornamenti sulle risorse per Divi, WordPress, temi child, layout corsi online e tutto quello che ti può servire per potenziare la tua comunicazione nel web. Unisciti ora alla community!

In questo tutorial imparerai come creare una call to action animata ed espandibile con il tema WordPress Divi 3.0. Se vuoi vedere un esempio pratico clicca sul tasto qui sotto: ti connetterai al sito della Elegant Themes (l'azienda che ha creato Divi) e scorrendo in fondo alla home noterai la call to action espandibile di cui stiamo parlando.

Link affiliato che rimanda alla home page di Elegant Themes in cui è presente il modulo di CTA animato che spieghiamo come realizzare in questo tutorial.

Certamente avrete già sentito parlare di call to action o CTA, si tratta di un modulo che richiama l'attenzione dei vostri utenti in un punto particolare di una pagina o di un articolo del vostro sito web, con l'intenzione di far compiere un'azione agli utenti che visitano la pagina.

Bene, ora andiamo vedere come si crea una call to action con Divi 3.0 e, soprattutto, come si inseriscono gli effetti di animazione ed espansione che hai visto sul sito della Elegant Themes.

Inizamo attivando il builder visivo e creando una nuova sezione all'interno della pagina dove volete inserire la vostra CTA.

Inizamo attivando il builder visivo e creando una nuova sezione all'interno della pagina dove volete inserire la vostra CTA.

Ora inseriamo un modulo “Codice” all'interno della nostra riga e copiamo il seguente codice HTML che possiamo poi personalizzare come vogliamo.

Prima di andare a dare uno stile alla call to action, dobbiamo andare a inserire un “ID CSS” sia nella sezione che nella singola riga.

Andiamo nelle impostazioni della sezione e dal tab “Avanzate” sotto la voce “ID & Classi CSS” nel campo “ID CSS” inseriamo questo codice: “cta-section“.

Stessa cosa facciamo per la riga, andiamo nelle impostazioni, sempre nel tab “Avanzate” sotto la voce “ID & Classi CSS” nel campo “ID CSS” inseriamo il codice “cta-row” e salviamo i cambiamenti.

Adesso spostiamoci nella Bacheca di WordPress, nella barra laterale scorri fino alla voce “Divi” e clicca sulla voce “Opzioni Tema“.

Dal tab “General” scorri fino ad arrivare alla voce “CSS personalizzato“, all'interno della casella inserisci il codice CSS che trovi qui sotto.

Ecco il codice CSS da copiare:

Una volta inserito il codice css, torna in alto sempre nelle impostazioni di divi e entra nella casella “Integration”, scorri fino alla voce “Aggiungi codice a head del tuo blog” e nella casella inserisci il codice JQuery che trovi qui sotto all'immagine.

Ecco il codice JQuery da copiare:

Salva i cambiamenti.

A questo punto, se hai eseguito correttamente tutti i passaggi, la tua call to action è pronta e funzionante proprio come quella presente sul sito della Elegant Themes!

Modificare i colori e lo stile della CTA

Prima di passare a vedere come creare una call to action utilizzando il modulo CTA di Divi 3.0, qui sotto trovi un'immagine con il codice CSS che è esattamente quello che abbiamo utilizzato per dare lo stile alla call to action appena creata, e come nel video ti metterò in evidenza i codici da modificare per cambiare i colori del testo e del background della CTA.

Creare la CTA espandibile usando il modulo CTA di Divi

Per creare la call to action, i passaggi sono molto simili a quelli già visti sopra.

Aggiungiamo una sezione e successivamente una riga, ma al posto del modulo di codice andiamo a inserire un modulo “Call to action”.

Inseriamo il testo della CTA, il testo che apparirà sul pulsante e relativo link alla pagina o al prodotto che volete linkare.
Valuta tu se per la tua call to action è il caso di togliere il colore di sfondo di default del modulo o altrimenti se è il caso di lasciarlo.
Andiamo a inserire ora il codice “ID CSS” che come per il precedente modulo ci permettere di far funzionare correttamente la CTA.
Andiamo nelle impostazioni della sezione e dal tab “Avanzate” sotto la voce “ID & Classi CSS” nel campo “ID CSS” inseriamo questo codice “cta-section“.
Nelle impostazioni della riga sempre nel tab “Avanzate” sotto la voce “ID & Classi CSS” nel campo “ID CSS” inseriamo questo codice “cta-row“.
Sempre nelle impostazioni della riga, nel tab “Avanzate” sotto la voce “ID & Classi CSS” scendiamo fino al campo “ID CSS Colonna” e inseriamo questo codice “cta-column“.
In fine andiamo a inserire il codice css nelle impostazioni della pagina, per dare lo stile alla call to action.

Perfetto, a questo punto se hai seguito correttamente tutte le istruzioni la tua call to action espandibile, è pronta per l'utilizzo!

Puoi applicare i codici che abbiamo utilizzato in questa seconda CTA a qualsiasi modulo di Divi!

Ricordati che non possono essere attivate due CTA di questo tipo sulla stessa pagina.

Conclusioni

In questo tutorial abbiamo imparato a realizzare due call to action con Divi 3.0, una utilizzando il modulo di codice e l'altra utilizzando il modulo CTA di divi.

Per il momento è tutto, un saluto da imparaqui.it e da Raffaele.

Se hai domande, puoi tranquillamente scriverle nei commenti che trovi qui sotto.
A presto!

È ARRIVATO SCARLET!

Scarlet: il tema child che aggiunge tutte le funzioni che mancano a Divi per renderlo perfetto per la creazione e gestione di blog professionali!

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!