Come progettare un cancello di benvenuto per la tua pagina in Divi

Un cancello di benvenuto è un modo efficace per aumentare le conversioni di qualsiasi invito all'azione sul tuo sito. In effetti, i gate di benvenuto sono una funzionalità popolare con plug-in come OptinMonster per la creazione di opt-in e-mail ad alta conversione. L'idea alla base di un cancello di benvenuto è nascondere il contenuto della pagina Web con un invito all'azione a schermo intero. Ciò costringe l'utente a interagire con l'invito all'azione prima di visualizzare la pagina desiderata.

In questo tutorial, ti mostreremo un modo semplice e veloce per aggiungere un portale di benvenuto personalizzato alla tua pagina web senza utilizzare un plug-in. Questo può tornare utile per aumentare le conversioni dei tuoi CTA sulle landing page.

Controlla!

Sbirciata

Ecco una rapida occhiata al cancello di benvenuto che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni 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 verrai abbonato di nuovo 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 trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Seleziona l'opzione "Scegli un layout predefinito".
   
4. Seleziona il Bistro Layout Pack e, dal popup Carica dalla libreria, seleziona il layout della pagina di destinazione del Bistro e fai clic sul pulsante "Usa questo layout" per importare il layout nella pagina.
   

Successivamente, hai una pagina di destinazione da utilizzare durante la creazione del cancello di benvenuto personalizzato.

Creare il cancello di benvenuto

Aggiungi nuova sezione

Innanzitutto , crea una nuova sezione regolare e trascinala nella parte superiore della pagina. Quindi aggiungi una riga di una colonna alla sezione.

Progetta la sezione

Prima di iniziare ad aggiungere moduli/contenuti alla sezione, aggiungiamo un design personalizzato in modo da avere una bella tela su cui lavorare per andare avanti.

Sfondo

Per iniziare, aggiungi un gradiente di sfondo e un'immagine come segue:

• Colore di sfondo sfumato a sinistra: rgba (0,17,38,0.7)
• Colore di sfondo sfumato a destra: #001126
• Posizione di partenza: 68%
• Posiziona il gradiente sopra l'immagine di sfondo: S
• Immagine di sfondo: [inserisci immagine]

Imbottitura e animazione

Quindi, passa alla scheda Design e aggiorna le seguenti impostazioni di riempimento e animazione:

• Imbottitura (desktop): 28vh in alto, 28vh in basso
• Imbottitura (tablet): 18vh in alto, 18vh in basso
• Imbottitura (telefono): 10vh in alto, 10vh in basso
• Stile di animazione: diapositiva
• Direzione animazione: Giù
• Opacità iniziale dell'animazione: 100%;

Posiziona la sezione Welcome Gate

Ora siamo pronti per dare alla nostra sezione una posizione fissa con un indice z più alto in modo che il cancello di benvenuto riempia la schermata del browser fino a quando l'utente non fa clic sul pulsante "No grazie".

Prima di aggiungere il nostro CSS di posizionamento, aggiungiamo un ID CSS personalizzato come segue:

• ID CSS: Welcome-gate

Questo verrà utilizzato per indirizzare la sezione con jQuery per spostarla verso l'alto fuori dalla vista quando l'utente fa clic sul pulsante "No, grazie".

Aggiungi il seguente CSS personalizzato all'elemento principale:

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

Quindi aggiorna l'indice Z come segue:

• Indice Z: 11

NOTA: se vuoi che il cancello di benvenuto nasconda anche l'intestazione, puoi aggiungere un indice Z più alto come "99999".

Creazione del contenuto del Welcome Gate

Ora che la nostra sezione è pronta, iniziamo ad aggiungere il contenuto del cancello di benvenuto. Puoi aggiungere qualsiasi contenuto desideri a questo portale di benvenuto. Per ora, creiamo un semplice CTA con due pulsanti. Il pulsante a sinistra sarà quello su cui vuoi che gli utenti facciano clic. Il pulsante a destra sarà il pulsante “No grazie” che chiuderà il Welcome Gate.

Modulo di testo

All'interno della riga di una colonna, aggiungi un nuovo modulo di testo con il seguente contenuto:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

Progettazione del testo

Quindi aggiorna il design del testo come segue:

• Carattere del testo: cabina
• Colore del testo del testo: #ffffff
• Testo Dimensioni testo: 24 px (desktop), 18 px (telefono)
• Allineamento del testo: Centro
• Intestazione 2: Carattere: Cabin
• Intestazione 2 Peso del carattere: grassetto
• Colore testo titolo 2: #ffffff
• Titolo 2: Dimensione testo: 66px (desktop), 26px (tablet)

Aggiungi una riga a due colonne

Per i nostri pulsanti, creiamo una riga di due colonne sotto il testo.

Aggiungi pulsante sinistro

Nella colonna di sinistra, aggiungi un modulo pulsante e aggiorna le impostazioni come segue:

• Testo del pulsante: "Yum! Prenotiamolo”

• Allineamento dei pulsanti: centro
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #bd8f52
• Larghezza bordo pulsante: 0px
• Peso del carattere del pulsante: grassetto

Quindi aggiungi il seguente CSS personalizzato per fare in modo che il pulsante occupi l'intera larghezza della colonna:

display: block !important;

Aggiungi il pulsante destro "No grazie"

Per creare il pulsante "No grazie", prima copia il pulsante sinistro e incollalo nella colonna di destra.

Quindi aggiorna il contenuto come segue:

• Testo del pulsante: no grazie
• URL collegamento pulsante: # (questo è importante in modo che il pulsante non aggiorni la pagina)

Quindi aggiorna il design del pulsante come segue:

• Colore del testo del pulsante: #333333
• Colore di sfondo del pulsante: rgba (255,255,255,0.4)

Quindi aggiungi la seguente classe CSS al pulsante no grazie:

• Classe CSS: grazie

Questo sarà il nostro selettore nel jQuery che chiude il cancello di benvenuto al clic.

Aggiungi il codice personalizzato

Ora aggiungiamo lo snippet di codice personalizzato necessario per aggiungere la funzionalità che chiude il cancello di benvenuto quando un utente fa clic sul pulsante "No, grazie". Per fare ciò, aggiungi un modulo di codice sotto il modulo del pulsante no grazie.

Quindi incollare il seguente codice nella casella del codice del modulo di codice:

Per un ultimo tocco, avviciniamo i pulsanti dando alla riga contenente i nostri pulsanti una larghezza massima. Apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza massima: 600 px

Risultato finale

Ecco come si presenta il design finale.

Ed ecco come appare il cancello di benvenuto quando si aggiorna la pagina.

Ed ecco come appare il cancello di benvenuto sul cellulare.

Pensieri finali

Speriamo che questo tappetino di benvenuto sia un'utile aggiunta alla tua pagina o modello. Divi semplifica la progettazione e il posizionamento del tappetino di benvenuto utilizzando il visual builder e richiede solo un piccolo frammento di jQuery per completare la funzionalità. Quindi, se stai cercando un tappetino di benvenuto rapido per la tua pagina senza utilizzare un plug-in, questo dovrebbe tornare utile.

Non vedo l'ora di sentirti nei commenti.

Saluti!