Avere un invito all'azione sul tuo sito è uno dei modi meno invadenti per attirare l'attenzione del tuo Visitatori. La maggior parte delle volte ignoreranno semplicemente il CTA o lo chiuderanno per continuare a navigare nella pagina, ma a volte li conquisterai. Una diapositiva di invito all'azione funzionerà benissimo promuovere praticamente qualsiasi cosa su una pagina di destinazione.

In questo tutorial, progetteremo un invito all'azione chiudibile che può essere aggiunto a qualsiasi angolo di una pagina utilizzando Divi Theme Builder. Una volta fatto ciò, avrai la possibilità di farlo promuovere i tuoi prodotti e le tue offerte speciali ovunque nella pagina senza dover utilizzare un plug-in.

Cominciamo!

Panoramica

Ecco una rapida occhiata ai quattro CTA inseriti che aggiungeremo ai quattro angoli del modello di pagina. Ovviamente, non sarà necessario distribuirli tutti e quattro contemporaneamente. Nota come ognuno può essere chiuso facendo clic sull'icona "x", quindi puoi scegliere di riattivare il CTA facendo clic sull'icona "più".

Cosa ti serve per iniziare

Per iniziare, dovrai farlo per installare e attivare il tema Divi . Assicurati di avere l'ultima versione di Divi.

Avrai anche bisogno di almeno una pagina creata con Divi Builder a scopo di test per assegnare il nuovo modello a questa pagina per visualizzare il risultato.

Creazione di un invito all'azione scorrevole, con un modello di pagina in Divi

Creazione di un nuovo modello

Dalla dashboard di WordPress, vai a Divi> Generatore di temi. Quindi fare clic sulla casella "Aggiungi un nuovo modello" per creare un nuovo modello.

Assegna il modello alla pagina o alle pagine in cui desideri visualizzare la barra promozionale.

Sul nuovo modello, fare clic sull'area "Aggiungi un corpo personalizzato" quindi selezionare "Crea un corpo personalizzato".

Quindi selezionare l'opzione "Build From Scratch".

Creazione della sezione del contenuto della pubblicazione

Sezione di contenuto post è una parte necessaria di qualsiasi modello di pagina per visualizzare il file contenuto pagina reale o post incorporato in Divi o WordPress. Lo aggiungeremo al nostro modello prima di creare il nostro primo invito all'azione da inserire.

Aggiungi una riga a una colonna

Per iniziare, aggiungi una riga di una colonna alla sezione normale.

Aggiungi un modulo di contenuto di pubblicazione

Quindi aggiungi un modulo contenuto pubblicazione in linea.

Impostazioni linea

Dopo di che aggiorna i parametri di linea come segue:

• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px alta, 0px bassa

Creazione della call to action in alto a sinistra

Ora che abbiamo installato il nostro modulo di contenuto del post, siamo pronti per iniziare ad aggiungere il nostro primo invito all'azione da inserire nell'angolo in alto a sinistra del modello di pagina.

Aggiungi una sezione

Ogni nuovo invito all'azione verrà creato con una nuova sezione. Ciò ti consentirà di aggiungere qualsiasi layout o modulo necessario per progettare l'invito all'azione.

Aggiungi una nuova sezione regolare al layout del modello.

Aggiungi una riga a una colonna

Quindi assegna alla sezione una riga di una colonna.

Impostazioni della sezione

Trascina (o sposta) la sezione sopra la sezione del contenuto del post e aggiorna le impostazioni della sezione come segue:

• Gradiente di sfondo del colore sinistro:
• Gradiente di sfondo destro:
• Visualizza il gradiente sopra l'immagine: SI
• Immagine di sfondo: [inserisci immagine]
• Larghezza: 320px
• Margine: 320 px a sinistra
• Imbottitura: 0px alta, 0px bassa
• Stile animazione: diapositiva
• Direzione dell'animazione: destra
• Ritardo dell'animazione: 2000 ms

Quindi vai alla scheda avanzata e aggiungi la seguente classe CSS e l'indice Z:

• Classe CSS: slide-in-cta
• Indice Z: 999

E aggiungi lo snippet CSS personalizzato dopo l'elemento principale:

position: fixed;top: 80px;left: -320px;

La classe CSS è necessaria in modo da poter indirizzare la sezione con il codice in un secondo momento. Il CSS personalizzato posizionerà la sezione in alto a sinistra del modello di pagina in una posizione fissa (o adesiva). La posizione “sinistra: -320 pixel” dovrebbe spostare l'intera sezione (che è larga 320 pixel) fuori dalla finestra del browser (quindi fuori dalla nostra vista). Ma abbiamo il margine sinistro di 320 pixel per riportarlo alla visualizzazione. Il motivo per cui è costruito in questo modo è che possiamo attivare o disattivare il valore del margine quando fai clic sull'icona "x". Ciò farà scorrere il CTA dentro e fuori dalla vista.

Impostazioni linea

Ora aggiorna i parametri di linea come segue:

• Utilizzare una larghezza della grondaia personalizzata: SÌ
• Larghezza della grondaia: 1
• Larghezza: 100%
• Imbottitura: 0px alta, 0px bassa

Aggiungi un modulo di invito all'azione

All'interno della riga, aggiungi un modulo Call to Action.

Impostazioni di invito all'azione

Quindi aggiorna le impostazioni dell'invito all'azione.

Contenuto

• Titolo: [inserisci il testo che preferisci]
• Pulsante: [inserisci il testo che preferisci]
• Corpo: [inserisci il testo che preferisci]
• URL del link del pulsante: [inserisci l'URL effettivo o #]

Quindi rimuovere il colore di sfondo predefinito per rivelare lo sfondo della sezione che abbiamo aggiunto in precedenza.

Parametri di progettazione (testo, pulsante e riempimento)

Nella scheda Progettazione aggiornare quanto segue:

• Carattere del titolo: Lato
• Peso carattere titolo: pesante
• Altezza della riga del titolo: 1,3 em
• Polizia del corpo: Lato
• Peso carattere corpo: grassetto
• Usa stili personalizzati per il pulsante: SÌ
• Dimensione del testo del pulsante: 15px
• Larghezza bordo pulsante: 0px
• Spaziatura lettere pulsante: 1px
• Carattere del pulsante: Lato
• Peso carattere pulsante: pesante
• Stile carattere pulsante: TT
• Riempimento pulsanti: 12 pixel in alto, 12 pixel in basso, 32 pixel a sinistra, 32 pixel a destra
• imbottitura: 40 pixel nella parte superiore, 40 pixel nella parte inferiore, 40 pixel a sinistra, 40 pixel a destra

Aggiungi un'icona di apertura e chiusura con un modulo Blurb

Una volta che la call to action è terminata, dobbiamo creare il pulsante icona utilizzato per aprire e chiudere la call to action scorrevole. Per crearlo, aggiungi un modulo blurb sotto il modulo di invito all'azione.

Impostazioni del testo di presentazione

Aggiorna i seguenti parametri di progettazione.

Contenuto

• rimuovere il titolo e il corpo del testo predefiniti
• Usa l'icona: SI
• Icona: altro (vedi screenshot)

Design

• Colore icona: # 000000
• Usa la dimensione del carattere dell'icona: SÌ
• Dimensione carattere icona: 40 pixel
• Larghezza: 40px
• Altezza: 40px
• Angoli arrotondati: 50%
• Trasforma la rotazione dell'asse Z: 135 gradi

Impostazioni avanzate

Nella scheda Avanzate, aggiungi la seguente classe CSS:

• Classe CSS: slide-in_target

Quindi aggiungi questo CSS personalizzato all'elemento principale.

position: absolute;bottom: 0px;right: -40px;

Aggiungi il seguente CSS personalizzato all'immagine Blurb.

margin-bottom: 0px;

Risultato

Ecco il risultato finora.

Tieni presente che dobbiamo ancora aggiungere del codice per aggiungere la funzionalità di chiusura e apertura quando fai clic sull'icona "x". Aggiungeremo il codice dopo aver creato un invito all'azione in ciascuno dei quattro angoli del modello.

Creazione della call to action in alto a destra

Con il primo invito all'azione integrato, possiamo accelerare il processo di creazione del resto dei CTA duplicando la sezione già creata. Successivamente, creeremo una diapositiva di invito all'azione per l'angolo in alto a destra.

Sezione duplicata

Distribuisci la modalità di visualizzazione wireframe, quindi duplica la sezione CTA in alto a sinistra.

Aggiorna le impostazioni della sezione

Quindi aggiornare i nuovi parametri della sezione come segue:

• margine: 320 px a destra
• direzione animazione: sinistra

Quindi aggiorna il CSS personalizzato nell'elemento principale sostituendo "sinistra" con "destra". Ecco l'estratto completo:

position: fixed;top: 80px;right: -320px;

Aggiorna i parametri del modulo Blurb

Successivamente, apri le impostazioni del modulo Blurb e aggiorna lo snippet CSS personalizzato nell'elemento principale sostituendo "destra" con "sinistra". Ecco l'estratto completo:

position: absolute;bottom: 0px;left: -40px;

Risultato

Ora vedrai un invito all'azione come diapositiva in alto a destra del modello di pagina.

Eseguire le stesse operazioni per il resto delle sezioni "In basso a destra", "In basso a sinistra". Sarà inoltre necessario regolare il codice CSS per ciascuno dei moduli in modo che abbia un risultato simile al seguente.

Aggiunta di frammenti jQuery e CSS personalizzati utilizzando un modulo di codice

Per l'ultimo passaggio dobbiamo aggiungere un po 'di jQuery e CSS personalizzati in modo da poter ottenere la funzionalità di apertura e chiusura di ciascuna delle diapositive CTA.

Aggiungi un modulo di codice

Aggiungi un modulo di codice a una delle sezioni della presentazione.

Incolla il codice

Quindi apri le impostazioni del codice e incolla il seguente codice nell'area del codice.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Considerazioni finali

Con Divi, non è affatto difficile creare un invito all'azione. E poiché puoi utilizzare il generatore di temi per aggiungere un invito all'azione a un modello di pagina, avrai un maggiore controllo su quali pagine visualizzano tali CTA.