Vai al contenuto principale

Come aggiungere una chiamata scorrevole richiudibile all'azione su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Avere un invito all'azione sul tuo sito è uno dei modi meno invadenti per attirare l'attenzione dei tuoi visitatori. Il più delle volte, ignoreranno semplicemente il CTA o lo chiuderanno per continuare a eseguire la scansione della pagina, ma a volte li guadagnerai. Un invito all'azione a scorrimento funzionerà perfettamente per promuovere 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 terminato, sarai in grado di promuovere i tuoi prodotti e le offerte speciali in qualsiasi punto della 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.

Crea un modello di pagina

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

Assegna un modello di pagina alle pagine

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

Aggiungi corpo personalizzato

Quindi selezionare l'opzione "Build From Scratch".

Creazione della sezione del contenuto della pubblicazione

La sezione del contenuto del post è una parte necessaria di qualsiasi modello di pagina per visualizzare il contenuto effettivo della pagina o del 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.

Sezione a linea singola

Aggiungi un modulo di contenuto di pubblicazione

Quindi aggiungere un modulo di contenuto di pubblicazione alla riga.

Contenuto dell'articolo

Impostazioni linea

Dopo di che aggiorna i parametri di linea come segue:

  • Larghezza: 100%
  • Larghezza massima: 100%
  • Imbottitura: 0px alta, 0px bassa
Configurazione della linea Divi

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Aggiungi una nuova sezione regolare al layout del modello.

Selezione di una nuova sezione divi

Aggiungi una riga a una colonna

Quindi assegna alla sezione una riga di una colonna.

Scegli una colonna divi

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
Parametro della linea Divi

Aggiungi un modulo di invito all'azione

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

Aggiungi il modulo di invito all'azione

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 #]
Personalizza l'offerta del modulo divi

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

Rimuovi il colore di sfondo
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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Modulo informativo Divi Bubble

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)
Aggiungi un'icona divi
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
Personalizza un'icona divi
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;

Personalizza il modulo css divi di stile

Risultato

Ecco il risultato finora.

Risultato raggiunto ora

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;

Modifica l'allineamento della sezione Div

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;

Aggiungi un codice divi

Risultato

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

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Slider in alto a destra

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.

Risultato finale divi

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.

Aggiungi un codice divi js

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>

Aggiungi il codice jquery

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. 

Questo articolo contiene 1 commento

  1. Ottimo, questo articolo! Questo è esattamente quello che sto cercando!
    Grazie mille.

    Piccola domanda sussidiaria, è possibile che questo CTA si apra automaticamente solo in un certo punto durante lo scorrimento della pagina?

    Bonne journée!

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
4 azioni
quota4
Tweet
Enregistrer