Creare un modulo di Call To Action espandibile nel tema Divi

Come creare un modulo di Call To Action con un’animazione espandibile durante lo scrolling della pagina! Ottieni una CTA coinvolgente e accattivante come quella di Elegant Themes.

Introduzione

In questo tutorial per il tema Divi vediamo 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

Bene, iniziamo!

Creare una CTA animata nel tema Divi

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.

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.

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

Iniziamo 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.

<div class="cta-info">
  
<h3>Imparaqui.it ti offre tutorial, corsi online, assistenza per creare siti con Divi e per gestire la tua comunicazione online, iscriviti e ottieni la tua scrivania personale!</h3>
  
<p>La migliore scuola di comunicazione online!</p>
  
<a href="INSERISCI QUI L'URL DELLA TUA CTA" id="sign">ISCRIVITI ORA!</a>
  
</div>

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:

/* Animated Call To Action */
  
/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
  
}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/
  
#sign {
    display: inline-block;
    width: 246px;  
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}
  
/*** style content within the code module ***/
  
.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

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:

<script>
jQuery(document).ready(function(){
    jQuery('#cta-section').waypoint(function() {
        jQuery('#cta-section').toggleClass('animate-cta');
    }, {offset: '80%'});
});
</script>

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!

Creare la stessa CTA usando il modulo Call To Action di Divi

Per creare la call to action usando il modulo “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“.

Infine andiamo a inserire il codice css nelle impostazioni della pagina, per dare lo stile alla call to action.

.cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}

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.

Scopri tutti i nostri corsi dedicati a Divi nella Imparaqui Academy!

Un saluto da imparaqui.it e da Raffaele.

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

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. Visti i vostri tutorial che ho seguito con molta curiosità mi avete fatto crescere la voglia di usare il tema divi per i miei siti personali dell’azienda. Grazie per la chiarezza.

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.