Come reindirizzare una visita alla pagina di destinazione con una barra degli annunci in Divi
Pubblicato: 2021-10-27Le opzioni di condizione integrate di Divi ci consentono di visualizzare i contenuti in base a una condizione di visita alla pagina. Ciò ti consente di visualizzare qualsiasi elemento Divi solo se l'utente ha visitato una pagina specifica del tuo sito web. In altre parole, il contenuto rimarrà nascosto fino a quando l'utente non avrà visitato la pagina. Questa funzionalità è ottima per il retargeting dei visitatori con una barra degli annunci dopo aver visitato una pagina di destinazione. Poiché i visitatori hanno dimostrato di essere interessati (sono tornati alla pagina di destinazione), possiamo sfruttarlo visualizzando annunci (sconti, offerte a tempo limitato, promozioni, ecc.) Per guidarli nella giusta direzione.
In questo tutorial, ti mostreremo come reindirizzare una visita alla pagina di destinazione con una barra degli annunci in Divi sfruttando le opzioni di condizione integrate di Divi. Bastano pochi clic.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che creeremo in questo tutorial.
Questa barra degli annunci verrà visualizzata dopo che un utente ha visitato la pagina.
Scarica il layout GRATUITAMENTE
Per mettere le mani sul layout 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 "iscritto nuovamente" né riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo pacchetto di layout pagina di destinazione Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi Divi incredibili e gratuiti. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo email qui sotto e clicca su download per accedere al layout pack.
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 della sezione nella tua Libreria Divi, vai alla Libreria Divi.
Fare clic sul pulsante Importa.
Nel popup di portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta terminato, il layout della sezione sarà disponibile in Divi Builder.
Il concetto chiave
Come visualizzare una sezione solo se un visitatore ha visitato una pagina specifica
Come accennato in precedenza, le opzioni di condizione integrate di Divi includono una condizione di visita alla pagina che ti consente di visualizzare qualsiasi elemento Divi solo se l'utente ha visitato una pagina specifica sul tuo sito web. In altre parole, il contenuto rimarrà nascosto fino a quando l'utente non avrà visitato la pagina.
In alternativa, puoi scegliere di visualizzare un elemento Divi solo se l'utente non ha visitato una pagina specifica . In altre parole, il contenuto rimarrà nascosto all'utente fino a quando non visiterà la pagina.
In questo tutorial, utilizzeremo le opzioni delle condizioni di Divi per visualizzare una barra degli annunci solo se un utente ha visitato la pagina di destinazione. La barra degli annunci può essere creata facilmente utilizzando Divi Builder per includere qualsiasi tipo di contenuto o design desiderato. Una volta creata, puoi aggiungere la condizione Visita alla pagina alla barra degli annunci (che in questo caso è una sezione Divi) seguendo questi semplici passaggi:
- Apri le impostazioni della sezione per la sezione utilizzata per creare la barra degli annunci.
- Nella scheda Avanzate, fai clic sull'icona più in Condizioni di visualizzazione per aggiungere una nuova condizione alla sezione.
- Dal menu a discesa delle condizioni, seleziona la condizione di visita della pagina dall'elenco.
- Nel popup delle impostazioni delle condizioni di visita della pagina, seleziona l'opzione da visualizzare solo se l'utente ha visitato una pagina specifica .
- Seleziona la pagina specifica dall'elenco delle pagine del tuo sito web (che in questo caso sarebbe la pagina di destinazione).
Questo è tutto! Una volta fatto, la barra (o la sezione) degli annunci non apparirà agli utenti fino a quando non avranno prima visitato la pagina di destinazione in precedenza.
Ora che hai una comprensione del concetto chiave, passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non lo hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Costruisci da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come reindirizzare una visita alla pagina di destinazione con una barra degli annunci in Divi
Parte 1: caricamento del layout della pagina di destinazione del negozio di elettronica
Prima di poter effettuare il retargeting di una pagina di destinazione, dobbiamo prima crearne una.
Per accelerare il processo, utilizzeremo il layout della pagina di destinazione del negozio di elettronica dal pacchetto di layout del negozio di elettronica di Divi, disponibile all'interno di Divi Builder.
Per caricare il layout nella pagina, fai clic sul pulsante Aggiungi dalla libreria (l'icona più) dal menu delle impostazioni. Nella scheda layout predefiniti, seleziona il layout della pagina di destinazione del negozio di elettronica e fai clic sul pulsante Usa questo layout.
Puoi, ovviamente, utilizzare una pagina di destinazione esistente sul tuo sito Web o scegliere di crearne una da solo. Ma per ora, questo funzionerà.
Parte 2: Creazione di una sezione con la condizione di visita della pagina
Per costruire la barra degli annunci, utilizzeremo una sezione Divi. Vai avanti e aggiungi una nuova sezione regolare sotto la sezione superiore esistente del layout.
Una volta aggiunta, trascina la sezione nella parte superiore del layout di pagina e aggiungi tre quarti 0ne-quarta riga alla sezione.
Apri le impostazioni della sezione e aggiungi il seguente colore di sfondo alla sezione:
- Colore di sfondo: #5e10da
Nella scheda progettazione, aggiorna la spaziatura e aggiungi un effetto di animazione alla sezione come segue:
- Padding: 0px in alto, 0px in basso
- Stile animazione: diapositiva
- Direzione dell'animazione: Giù
- Opacità iniziale dell'animazione: 100%
Ciò ridurrà l'altezza della barra degli annunci e le darà un effetto di animazione accattivante quando la pagina viene caricata.
Nella scheda Avanzate, aggiungi una nuova condizione di visualizzazione procedendo come segue:
- Fare clic sull'icona più in Condizioni di visualizzazione per aggiungere una nuova condizione alla sezione.
- Dal menu a discesa delle condizioni, seleziona la condizione di visita della pagina dall'elenco.
- Nel popup delle impostazioni delle condizioni di visita della pagina, seleziona l'opzione da visualizzare solo se l'utente ha visitato una pagina specifica .
- Seleziona la pagina specifica dall'elenco delle pagine del tuo sito web (che in questo caso sarebbe la pagina di destinazione).
- Salva le impostazioni.
Ora avrai una nuova condizione di visualizzazione di Visita alla pagina per la sezione.
Nota: se stai utilizzando un plug-in di memorizzazione nella cache, questa pagina dovrebbe essere esclusa dalla cache per consentire il corretto funzionamento della condizione di visualizzazione.
Parte 3: Creazione del contenuto della barra degli annunci
A questo punto, abbiamo la sezione e la riga per la nostra barra degli annunci in posizione. E la nostra sezione ha la condizione di visualizzazione Visualizzazione pagina attiva. Quindi, qualsiasi contenuto che aggiungiamo all'interno della sezione erediterà la condizione di visualizzazione del suo contenitore padre (la sezione). Tutto quello che dobbiamo fare ora è riempire la sezione con il contenuto per completare la creazione della barra degli annunci.
Il primo contenuto sarà il testo della barra degli annunci. Per aggiungere il testo, copia il modulo di testo sotto l'immagine della telecamera nella colonna di destra della riga nella sezione di intestazione esistente del layout. Quindi incolla il modulo di testo all'interno della colonna di sinistra della riga nella sezione della barra degli annunci.
Una volta aggiunto il nuovo modulo di testo, apri le impostazioni del testo e aggiorna quanto segue:
- Intestazione 3 Allineamento del testo (tablet e telefono): Centro
- Intestazione 3 Dimensione testo (telefono): 12px
- Imbottitura: 5px in alto
Nella colonna di destra della barra degli annunci, aggiungeremo un pulsante. Per fare ciò, copia il modulo pulsante esistente sopra il timer per il conto alla rovescia nella colonna di destra della riga nella sezione di intestazione esistente del layout.
Quindi incolla il modulo del pulsante nella colonna di destra della riga nella sezione della barra degli annunci.
Una volta aggiunto, apri le impostazioni per il modulo pulsanti e aggiorna quanto segue:
- Allineamento pulsanti (tablet e telefono): Centro
- Imbottitura (tablet e telefono): 5px in alto, 5px in basso
Parte 4: Regolazione delle impostazioni di riga
Per dare gli ultimi ritocchi al design della barra degli annunci, apri le impostazioni per la riga e aggiorna le opzioni di ridimensionamento come segue:
- Larghezza grondaia: 1
- Larghezza: 95%
- Larghezza massima: 980 px
- Imbottitura: 20px in alto, 15px in basso
Risultato finale
Questo è tutto! Per controllare il risultato sulla pagina live, ricorda che non vedrai la barra degli annunci fino a quando non visiterai la pagina di destinazione (o qualsiasi pagina tu abbia selezionato per la condizione di Visualizzazione della pagina).
Ecco come apparirà la barra degli annunci una volta visualizzata.
Ed ecco l'animazione della barra degli annunci al caricamento della pagina.
Pensieri finali
La condizione di visualizzazione Visualizzazione pagina evidenziata in questo tutorial è solo una delle molte opzioni di condizione disponibili in Divi. Sentiti libero di combinare la condizione di visualizzazione della pagina con altre condizioni che hanno senso per una barra degli annunci. Ad esempio, potresti anche includere la condizione di acquisto del prodotto per offrire uno sconto sul primo acquisto solo ai visitatori che non hanno effettuato un acquisto. Inoltre, puoi anche sperimentare la visualizzazione di altri contenuti oltre a una barra degli annunci. Divertiti!
Non vedo l'ora di sentirti nei commenti.
Saluti!