Come aggiungere un invito all'azione a scorrimento richiudibile a qualsiasi angolo del modello di pagina in Divi

Avere un invito all'azione scorrevole sul tuo sito è uno dei modi meno invadenti per attirare l'attenzione dei tuoi visitatori. La maggior parte delle volte ignoreranno semplicemente CTA o lo chiuderanno per continuare a navigare nella pagina, ma a volte li conquisterai. 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 a scorrimento richiudibile che può essere aggiunto a qualsiasi angolo di una pagina utilizzando Divi Theme Builder. Una volta fatto, avrai la possibilità di promuovere i tuoi prodotti e le offerte speciali in qualsiasi punto della pagina senza dover utilizzare un plug-in.

Iniziamo!

Sbirciata

Ecco una rapida occhiata ai quattro CTA slide-in che aggiungeremo a tutti e quattro gli angoli del modello di pagina. Ovviamente, non sarà necessario che tutti e quattro vengano distribuiti contemporaneamente. Nota come ognuno è richiudibile facendo clic sull'icona "x" e quindi puoi scegliere di riattivare il CTA facendo clic sull'icona "più".

Scarica GRATUITAMENTE il modello di pagina Divi di invito all'azione a scorrimento

Per mettere le mani sul modello di pagina di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e aggiungi uno dei file json nel Divi Theme Builder utilizzando l'opzione Theme Builder Portability.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai 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 quella pagina per mostrare il risultato.

Dopodiché, sei pronto per partire.

Creazione di un invito all'azione con slide-in chiudibile per ogni angolo del modello di pagina in Divi

Creazione di un nuovo modello

Dal dashboard di WordPress, vai a Divi > Generatore di temi. Quindi fare clic sulla casella "Aggiungi 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, fai clic sull'area "Aggiungi corpo personalizzato", quindi seleziona "Crea corpo personalizzato".

Quindi seleziona l'opzione "Crea da zero".

Creazione della sezione del contenuto del post

La sezione del contenuto del post è una parte necessaria di qualsiasi modello di pagina per visualizzare il contenuto effettivo della pagina o del post costruito in Divi o WordPress. Lo aggiungeremo al nostro modello prima di creare il nostro primo invito all'azione a scorrimento.

Aggiungi riga a una colonna

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

Modulo Aggiungi contenuto post

Quindi aggiungi un modulo di contenuto del post alla riga.

Impostazioni riga

Successivamente, aggiorna le impostazioni della riga come segue:

• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px in alto, 0px in basso

Creazione dell'invito all'azione a scorrimento in alto a sinistra

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

Aggiungi sezione

Ogni nuovo invito all'azione verrà creato con un'intera 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 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:

• Colore di sfondo sfumato a sinistra:
• Colore di sfondo sfumato a destra:
• Mostra il gradiente sopra l'immagine: S
• Immagine di sfondo: [inserisci immagine]
• Larghezza: 320 px
• Margine: 320 px a sinistra
• Imbottitura: 0px in alto, 0px in basso
• Stile di animazione: diapositiva
• Direzione dell'animazione: destra
• Ritardo animazione: 2000 ms

Quindi salta la scheda Avanzate e aggiungi la seguente Classe CSS e l'indice Z:

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

E aggiungi il seguente frammento CSS personalizzato all'elemento principale:

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

La classe CSS è necessaria in modo da poter indirizzare la sezione con il codice in seguito. Il CSS personalizzato posizionerà la sezione in alto a sinistra del modello di pagina in una posizione fissa (o permanente). La posizione "sinistra: -320 px" dovrebbe spostare l'intera sezione (che è larga 320 px) al di fuori della finestra del browser. Ma abbiamo il margine sinistro di 320 px per riportarlo in vista. Il motivo per cui è costruito in questo modo è che possiamo attivare e disattivare il valore del margine quando si fa clic sull'icona "x". Ciò farà sì che il CTA scivoli dentro e fuori dalla vista.

Impostazioni riga

Ora aggiorniamo le impostazioni della riga come segue:

• Usa larghezza grondaia personalizzata: S
• Larghezza grondaia: 1
• Larghezza: 100%
• Imbottitura: 0px in alto, 0px in basso

Aggiungi il modulo di invito all'azione

All'interno della riga, aggiungi un modulo di invito all'azione.

Impostazioni di invito all'azione

Quindi aggiorna le impostazioni dell'invito all'azione.

Contenuto

• Titolo: [inserire il testo a scelta]
• Pulsante: [inserire il testo a scelta]
• Corpo: [inserire il testo a scelta]
• URL collegamento pulsante: [inserire l'URL effettivo o #]

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

Impostazioni di progettazione (testo, pulsante e spaziatura interna)

Nella scheda Progettazione, aggiorna quanto segue:

• Carattere del titolo: Lato
• Peso del carattere del titolo: pesante
• Altezza della riga del titolo: 1,3 em
• Carattere del corpo: Lato
• Peso del carattere del corpo: grassetto
• Usa stili personalizzati per il pulsante: S
• Dimensione del testo del pulsante: 15 px
• Larghezza bordo pulsante: 0px
• Spaziatura tra le lettere dei pulsanti: 1px
• Carattere pulsante: Lato
• Peso del carattere del pulsante: pesante
• Stile carattere pulsante: TT
• Imbottitura pulsanti: 12 pixel in alto, 12 pixel in basso, 32 pixel a sinistra, 32 pixel a destra
• padding: 40px in alto, 40px in basso, 40px a sinistra, 40px a destra

Aggiungi l'icona Apri e Chiudi con un modulo Blurb

Al termine dell'invito all'azione, è necessario creare il pulsante con l'icona utilizzato per aprire e chiudere l'invito all'azione a scorrimento. Per creare questo, aggiungi un modulo blurb sotto il modulo di invito all'azione.

Impostazioni sfocatura

Aggiorna le seguenti impostazioni di progettazione.

Contenuto

• elimina il titolo predefinito e il corpo del testo
• Usa l'icona: S
• Icona: più (vedi screenshot)

Design

• Colore icona: #000000
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 40px
• Larghezza: 40px
• Altezza: 40 px
• Angoli Arrotondati: 50%
• Trasforma Ruota 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 abbiamo ancora bisogno di 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 dell'invito all'azione a scorrimento in alto a destra

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

Sezione duplicata

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

Aggiorna le impostazioni della sezione

Quindi aggiorna le impostazioni della nuova sezione come segue:

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

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

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

Aggiorna le impostazioni del modulo Blurb

Quindi apri le impostazioni del modulo blurb e aggiorna lo snippet CSS personalizzato nell'elemento principale sostituendo "destra" con "sinistra". Ecco il frammento completo:

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

Risultato

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

Creazione dell'invito all'azione a scorrimento in basso a sinistra

Sezione duplicata

Per creare un invito all'azione a scorrimento nell'angolo in basso a sinistra del modello di pagina, duplica la sezione CTA in alto a sinistra nella parte superiore del layout di pagina. Etichetta la sezione duplicata "CTA in basso a sinistra", quindi spostala sotto la sezione del contenuto del post.

Aggiorna le impostazioni della sezione

Quindi apri le impostazioni della sezione aggiorna l'elemento principale CSS sostituendo "top: 80px" con "bottom: 0px". Ecco il frammento finale:

position: fixed;
bottom: 0px;
left: -320px;

Aggiorna le impostazioni del modulo Blurb

Quindi aggiorna il CSS dell'elemento principale del Modulo Blurb sostituendo "bottom: 0px" con "top: 0px". Ecco il frammento finale:

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

Risultato

Ora controlla l'invito all'azione a scorrimento in basso a sinistra nella pagina live.

Creazione dell'invito all'azione a scorrimento in basso a destra

Sezione duplicata

Per creare l'invito all'azione a scorrimento in basso a destra, duplica la sezione CTA in alto a destra e sposta la sezione duplicata sotto la sezione del contenuto del post.

Aggiorna le impostazioni della sezione

Apri le impostazioni della sezione e aggiorna l'elemento principale CSS sostituendo "top: 80px;" con “bottom: 0px;”. Ecco il frammento finale:

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

Aggiorna le impostazioni del modulo Blurb

Quindi apri le impostazioni del modulo blurb e aggiorna l'elemento principale CSS sostituendo "bottom: 0px;" con "in alto: 0px;". Ecco il frammento finale:

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

Risultato

Ora controlla l'invito all'azione a scorrimento in basso a destra nella pagina live.

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

Per il passaggio finale, dobbiamo aggiungere alcuni jQuery e CSS personalizzati in modo da poter ottenere la funzionalità di apertura e chiusura a ciascuno degli inviti all'azione slide-in.

Aggiungi modulo codice

Aggiungi un modulo di codice a una delle sezioni nel layout.

Incolla codice

Quindi apri le impostazioni del codice e incolla il seguente codice nella casella 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>

Pensieri finali

Con Divi, creare un invito all'azione slide-in non è affatto difficile. 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 visualizzeranno quei CTA. Sentiti libero di aumentare il ritardo dell'animazione per la sezione CTA in modo che l'utente veda l'animazione slide-in CTA un po' più tardi (o prima) dopo il caricamento della pagina. Puoi anche utilizzare i lead Divi e abilitare i test divisi per migliorare le conversioni di quei CTA e scoprire quale angolo avrà la migliore conversione.

Non vedo l'ora di sentirti nei commenti.

Saluti!