Evidenziazione del plug-in Divi - Sovrapposizioni Divi

Divi Overlays è un plug-in per Divi di DiviLife, una società di sviluppo Divi di terze parti del membro della comunità Tim Strifler. Ti consente di creare facilmente popup utilizzando Divi Builder. Non è solo un modale. Puoi creare sovrapposizioni a schermo intero e aggiungere qualsiasi tipo di contenuto che desideri nella sovrapposizione utilizzando Divi Builder, quindi attivarlo con qualsiasi cosa sulla pagina inclusi pulsanti, collegamenti, immagini, ecc. Puoi regolare i colori di sfondo, il carattere colori e selezionare l'animazione di apertura.

Gli overlay possono includere moduli, tabelle dei prezzi, carrelli della spesa, video, immagini, link per il download, mappe e molto altro. Puoi persino impostarlo per aprire un overlay quando la pagina viene caricata. Consentono di visualizzare contenuti aggiuntivi senza dover attendere il caricamento della pagina.

La possibilità di utilizzare Divi Builder ovviamente significa che hai accesso a ogni modulo e impostazione con cui creare la tua sovrapposizione. Ciò significa che hai accesso a quasi 40 moduli e puoi utilizzare shortcode da altri plugin. Con l'accesso a questa quantità di moduli sei limitato solo dalla tua immaginazione.

Download: download di sovrapposizioni Divi

In questa panoramica sto dando un'occhiata alla versione 1.1, che include alcune nuove funzionalità richieste dai clienti. Alla fine tratterò alcune delle funzionalità che puoi aspettarti di vedere nella versione 2.0. Per gli esempi sto usando il kit wireframe multiuso vol. 1. Approfondiamo...

Installazione

Carica, installa e attiva il plug-in come faresti con qualsiasi plug-in premium. Una volta attivato, dovrai inserire la tua chiave di licenza. Vai su Impostazioni e seleziona Attivazione Divi Overlays nella dashboard.

Inserisci la chiave API e l'e-mail (dal tuo account su DiviLife) e seleziona Salva modifiche . Ora sei pronto per iniziare a creare gli overlay.

Aggiungi nuovo Divi Overlay

Gli overlay vengono creati separatamente dai tuoi contenuti e quindi aperti dai tuoi contenuti utilizzando semplici codici.

Per creare un overlay, vai su Divi Overlay e seleziona Aggiungi nuovo nella dashboard. Da qui puoi scegliere di utilizzare Divi Builder. Funziona allo stesso modo di qualsiasi pagina o post normale utilizzando Divi Builder, inclusi plug-in e moduli Divi speciali, e puoi persino eseguire test A/B utilizzando Divi Leads. Funzionano anche in un modulo globale. Puoi anche importare ed esportare i tuoi overlay.

Scegli l'animazione e le impostazioni della sovrapposizione dalla casella a discesa nell'angolo in alto a destra. Sotto Divi Builder c'è una selezione per lo sfondo e i colori dei caratteri.

Alcune impostazioni vengono aggiunte sul lato destro. Una casella chiamata Divi Overlay Animation include una casella a discesa in cui è possibile scegliere tra 11 animazioni. Questo determina il modo in cui l'overlay appare sullo schermo.

Viene aggiunta una casella di controllo per impedire lo scorrimento della pagina principale quando sullo schermo è presente una sovrapposizione. Ciò mantiene l'utente nella stessa posizione sullo schermo in modo che quando chiude l'overlay sappia dove si trova. Ciò è particolarmente utile se hanno fatto clic su uno dei tanti pulsanti per aprire l'overlay. In questo modo sanno su quale pulsante hanno cliccato e non perdono il loro posto sullo schermo.

Ho aggiunto un modulo video e selezionato Genie per l'animazione in sovrimpressione e selezionato per impedire lo scorrimento della pagina principale.

Ora che ho creato l'overlay posso usarlo su una pagina. Per fare ciò, vai su Divi Overlays nella dashboard e seleziona Divi Overlays per visualizzare l'elenco degli overlay disponibili. Per utilizzare l'overlay, copia il codice che desideri utilizzare e incollalo nella posizione corretta. Diamo un'occhiata a come farlo in dettaglio.

I collegamenti vengono creati utilizzando l'ID CSS. Copia l'ID CSS e aggiungi un tag di apertura <a id= e un tag di chiusura </a> come mostrato nell'esempio.

In questo esempio sto usando una landing page. Voglio aggiungere un trigger al testo, al logo dell'app store, all'immagine del telefono, creare un pulsante e inserire un collegamento nel menu.

Collegamento testuale

Copia il Content Shortcode e incollalo in un codice o in un modulo di testo (qualsiasi modulo che accetta shortcode) sulla tua pagina. L'ho incollato in un modulo di codice. Puoi inserire tutti gli shortcode Divi Overlay che desideri all'interno di questo modulo. Non importa dove posizioni il modulo. Ti consiglio di testare per assicurarti che il modulo non influenzi il tuo layout.

Voglio usare il testo GUARDA UNA DEMO come collegamento per aprire il video. Per fare ciò, copia l'ID CSS dall'elenco degli overlay nella schermata del dashboard.

Incolla il codice nel tuo modulo di testo e formatta il testo in questo modo:

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

In questo caso il testo è già incorporato in un codice HTML, ma va bene. Ti basta inserire il codice nella posizione corretta all'interno dell'HTML.

Il testo ora è blu per mostrare che si tratta di un collegamento.

Quando clicco sul testo mi viene presentato il video a cui ho inserito un collegamento all'interno dell'overlay. L'overlay si apre con l'animazione che ho scelto.

Link immagine

Esistono due modi per aggiungere l'ID CSS a un'immagine. Il metodo che dovresti usare dipenderà da come l'immagine è posizionata all'interno del tuo contenuto. Ecco due esempi:

Modulo di testo

Volevo rendere cliccabile l'immagine dell'app store, ma invece di portarti all'app store volevo che fornisse alcune opzioni e informazioni. Ciò richiede un nuovo overlay, che richiede anche un nuovo shortcode all'interno del modulo di codice.

Ora, quando faccio clic sul logo dell'app, ottengo un overlay con collegamenti a due diversi app store. Per una migliore UX/UI cambierei la grafica per il pulsante, ma questo mostra il potenziale di fornire più opzioni mantenendo il contenuto pulito. Per questo esempio ho impostato lo sfondo della sovrapposizione su bianco con un'opacità di 90 e il colore del carattere su grigio scuro.

Modulo immagine

Nell'esempio sopra ho aggiunto il codice all'HTML perché l'immagine è stata posizionata all'interno del modulo di testo. Un'altra opzione è posizionare l'immagine all'interno di un modulo immagine e utilizzare l'ID CSS nella scheda CSS personalizzato .

In questo layout il telefono cellulare è in un modulo immagine. Aggiungerò l'ID CSS in modo che apra l'overlay video.

Nell'URL del collegamento utilizzare #open-overlay (o testo simile con il simbolo #). Ora posso fare clic sull'immagine e aprire una sovrapposizione.

Collegamento pulsante

Aggiungere il collegamento di sovrapposizione a un pulsante equivale ad aggiungerlo a un'immagine. Ricordati di aggiungere lo shortcode al modulo del codice.

Aggiungi il testo # all'URL del pulsante. Ho usato #open-overlay come prima perché è descrittivo (e l'ho rubato a Tim Strifler, ma non dirglielo).

Aggiungi il codice ID CSS alla scheda CSS personalizzato .

E questo è tutto! Il nuovo pulsante ora apre il modulo di contatto.

Collegamento menu

Per creare un collegamento al menu, copia l' ID menu e vai su Aspetto , Menu , quindi seleziona il menu a cui desideri aggiungere il collegamento e caricalo. (Vedi questo articolo Come creare strutture di menu personalizzate in WordPress per maggiori informazioni).

Seleziona Opzioni schermo nell'angolo in alto a destra e seleziona la casella denominata Relazione di collegamento (XFN) .

Seleziona Collegamento personalizzato . Aggiungi il simbolo # come collegamento, aggiungi il testo che desideri venga visualizzato e seleziona Aggiungi al menu . Incolla l'ID menu nel campo Relazione collegamento e salva il menu. Assicurati di assegnare il menu a una posizione di visualizzazione in Impostazioni menu, se non l'hai già fatto. In questo esempio l'ho impostato su Primary Menu .

La voce di menu viene ora visualizzata all'interno della struttura del menu. Facendo clic su di esso si aprirà l'overlay. Questo ha il vantaggio di fornire un CTA (call to action) all'interno della struttura di navigazione e in tutto il sito.

Aggeggio

Il plugin include anche una nuova area widget. La differenza nell'uso del widget e di uno qualsiasi degli altri metodi è dove inserisci lo shortcode. Invece di posizionare lo shortcode all'interno dei moduli più e più volte, puoi posizionarlo una volta, rendendolo globale. Puoi quindi attivarlo da qualsiasi elemento in qualsiasi pagina, dalla barra laterale, dal menu principale o dal menu a piè di pagina.

Questa è la pagina che sto usando dal kit wireframe multiuso vol. 1. Voglio rendere il pulsante cliccabile in modo che apra il video in sovrimpressione. Ho aggiunto i miei shortcode all'area del widget (posizionandoli all'interno di un widget di testo) e ho aggiunto l'ID CSS all'immagine sulla pagina.

Gli shortcode nel widget funzionano senza che il widget sia nemmeno visibile. Non ho dovuto posizionare una barra laterale sulla pagina o alcun widget nel piè di pagina. Funziona solo perché questa nuova area widget si carica dietro le quinte. Se rilasci altri widget in questa area widget, verranno visualizzati nell'angolo in alto a sinistra della pagina. Gli shortcode non vengono visualizzati come testo per impostazione predefinita, quindi il widget può rimanere invisibile.

Chiusura della sovrapposizione

Le sovrapposizioni possono essere chiuse con la X nell'angolo, facendo clic sullo sfondo della sovrapposizione o premendo il tasto Esc.

Un'altra opzione consiste nell'aggiungere una classe simile a un collegamento all'interno dell'overlay. Usando questo metodo puoi creare un pulsante di chiusura o un testo. Ciò ti consente di aggiungere un pulsante di annullamento al tuo CTA o di rendere più visibile il pulsante di chiusura.

La classe vicina ha questo aspetto:

class = “chiudi-divi-overlay”>No grazie

In arrivo nel 2.0

Ecco alcune caratteristiche da non perdere:

Una funzione di ritardo consentirà l'apertura dell'overlay in base a un tempo prestabilito dopo che la pagina è stata caricata, consentendo al lettore di vedere il contenuto per un periodo di tempo specifico prima di aprire automaticamente l'overlay.

Una funzione pixel aprirà l'overlay in base al numero di pixel che hanno fatto scorrere o alla percentuale della pagina che hanno fatto scorrere.

Un'altra opzione aprirà l'overlay quando il lettore seleziona il pulsante Indietro o posiziona il cursore sulla barra degli indirizzi.

Documentazione

La documentazione è disponibile sul sito Web DiviLife. Include una panoramica ed esempi dei vari modi in cui puoi utilizzare il plugin. La documentazione include testo, video e codice di esempio.

Prezzi

Divi Overlays è un plugin premium. Costa $ 15 per l'utilizzo su un singolo sito, $ 29 per tre siti, $ 59 per siti illimitati e $ 129 per la licenza illimitata a vita. Ognuna delle licenze include tutte le funzionalità e la documentazione principali. I primi tre includono un anno di aggiornamenti e supporto, mentre l'ultimo include aggiornamenti e supporto a vita.

Pensieri finali

Divi Overlays è un ottimo modo per creare sovrapposizioni utilizzando Divi Builder. Divi Builder ti consente di aggiungere praticamente qualsiasi tipo di contenuto all'overlay utilizzando i moduli Divi o gli shortcode di altri plug-in. È difficile immaginare un overlay che Divi Overlays non può creare. Ci vogliono un paio di passaggi per aggiungere codice dove necessario, ma è facile da fare e la documentazione ti guida attraverso di esso. Il guadagno supera di gran lunga i pochi minuti necessari per imparare a usarlo.

Vogliamo sentire da voi! Hai provato Divi Overlay? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite brickclay / shutterstock.com