Evidenziazione del plug-in Divi: soluzione di sovrapposizione semplice

Simple Overlay Solution è un plug-in di terze parti per Divi che semplifica la creazione di overlay, popup e mega menu a schermo intero con Divi Builder. Aggiungi più overlay a qualsiasi pagina. Scegli tra un clic o un trigger di ritardo automatico temporizzato, un caricatore chiaro o scuro e uno sfondo chiaro o scuro. Modella il pulsante di chiusura o crea il tuo sfondo e i tuoi pulsanti con Divi Builder. Ogni overlay ha un cookie di 30 giorni.

Soluzione semplice per la sovrapposizione

Carica e attiva il plugin normalmente. Quindi, dovrai attivare la licenza. Nel menu della dashboard, vai su Impostazioni > Attivazione Divi SOS e inserisci la chiave API e l'e-mail.

Importa campioni SOS

Il plugin SOS viene fornito con una serie di demo come file JSON che puoi importare nella libreria SOS. Innanzitutto, decomprimi il file di download per accedere al file JSON. Questi sono ottimi per iniziare.

Nel menu della dashboard, vai su Divi > SOS . Seleziona Importa ed esporta.

Importa il file JSON come qualsiasi layout.

Ora hai 5 demo nella libreria SOS. Puoi vedere le demo sul sito dello sviluppatore.

Creazione di layout SOS

I layout SOS vengono creati anche nella libreria SOS. Vai alla libreria e fai clic su Aggiungi nuovo .

Assegna al layout un nome che abbia senso per te. Scegli layout per il tipo di layout.

Seleziona Layout SOS per la categoria.

Ho scelto un layout predefinito e poi ho selezionato la pagina dei contatti dal pacchetto di layout del Resort. A destra (o in basso se stai visualizzando con la modalità visiva) ci sono le impostazioni del layout. Questo ti dà il codice HREF per il layout in modo che tu possa attivarlo su qualsiasi pagina (ovunque che consenta un URL). Questo è il collegamento che utilizzerai per pulsanti, testo e così via per attivare l'overlay.

Puoi anche farlo visualizzare automaticamente (questo apre un'impostazione per l'ora e per abilitare un cookie in modo che sappia che il visitatore ha visto l'overlay o il popup). Imposta la transizione su dissolvenza, scorrimento o nessuna. Scegli uno sfondo chiaro, scuro o nessuno. Seleziona un colore del caricatore chiaro o scuro. Seleziona se mostrare o meno il pulsante di chiusura. Puoi dare uno stile al pulsante e al suo sfondo.

Il caricatore può essere chiaro o scuro. Ecco il caricatore scuro su uno sfondo chiaro.

Esempio di sovrimpressioni SOS

Sto creando un overlay che mostrerà le informazioni sulla prenotazione quando il visitatore fa clic sul pulsante Prenota la tua vacanza . Aggiungi il link all'URL del tuo pulsante per attivare l'overlay.

Ho impostato lo sfondo della sezione su trasparente, ho scelto uno sfondo chiaro nelle impostazioni SOS e ho personalizzato il layout per utilizzare solo una delle sezioni. Cliccando sul pulsante Prenota la tua vacanza si apre la sezione per prenotare il soggiorno. Lo sfondo include la sovrapposizione bianca. Ho anche aggiunto il pulsante di chiusura e l'ho disegnato in modo che corrisponda al layout. Il layout è posizionato nella parte superiore dello schermo e occupa l'intera larghezza. Questo può essere personalizzato con imbottitura.

Ho aggiunto un po' di imbottitura nella parte superiore della sezione. Ho anche disabilitato lo sfondo in modo da poterlo controllare con Divi Builder.

Per questo, sto usando il modulo di contatto dallo stesso layout. Questa volta, ho aggiunto un'ombra di riquadro alla riga inferiore in modo che risalti dallo sfondo della sovrapposizione.

Ho aggiunto il collegamento a un pulsante nella stessa pagina del primo overlay (puoi aggiungerne quanti ne vuoi). Questo apre un modulo di contatto quando fanno clic sul pulsante Inviaci un messaggio .

Il risultato sembra interessante. Non ho aggiunto un pulsante di chiusura a questo. Il visitatore può fare clic in qualsiasi punto del modulo per chiudere l'overlay. Ho aggiunto uno sfondo alla riga e impostato l'opacità in modo che traspaia solo una piccola parte dello sfondo.

Questo utilizza una sezione del layout Società di investimento. Voglio creare un popup con un invito all'azione. L'ho impostato per mostrare automaticamente con un ritardo di 1000 millisecondi. Quando viene visualizzato automaticamente, non è necessario aggiungere il collegamento da nessuna parte. Viene visualizzato automaticamente in ogni pagina. Ho anche impostato il cookie per mostrare il popup solo una volta ogni 30 giorni.

Il popup mostra 1 secondo dopo il caricamento della pagina. Questo crea un CTA come popup e verrà mostrato solo una volta ogni 30 giorni. Non puoi dirlo in questa immagine, ma ho anche dato uno sfondo di parallasse, solo perché. Ciò ti consente di essere creativo con i popup come con qualsiasi design di pagina.

Sto spostando l'opzione di chiusura dal pulsante nell'angolo in alto a destra a un pulsante creato con Divi Builder. Ho clonato il pulsante dal layout, modificato il testo e aggiunto il collegamento di chiusura all'URL.

Il risultato è un design pulito che funziona alla grande come CTA.

Sono tornato al design e ho aggiunto un nuovo sfondo e un pulsante che apre un'altra pagina.

Per questo, ho creato un popup di newsletter basato sul layout di Esports. Ho impostato il popup per l'apertura automatica dopo 30 secondi. Lo sfondo è impostato su scuro e il caricatore è impostato su chiaro. Includerò anche un pulsante di chiusura utilizzando i colori del layout.

Il popup di iscrizione sembra fantastico e si adatta perfettamente al design del sito perché in realtà è dal design del sito. Mi piace che possa utilizzare i normali layout Divi per creare i popup.

Mega menu

Puoi anche creare mega menu con SOS. Crea un collegamento personalizzato come voce di menu e quindi aggiungi il collegamento dell'overlay all'URL della voce di menu.

Ho aggiunto la sovrapposizione al collegamento Informazioni nel mio menu a scorrimento. Se lo desideri, puoi avere una sovrapposizione diversa per ogni collegamento nel menu e possono essere qualsiasi cosa tu possa costruire con Divi.

Prezzo della soluzione di sovrapposizione semplice

Ci sono due licenze per SOS. Entrambi hanno una tariffa una tantum e includono aggiornamenti a vita.

• 1 sito web e 1 sito di sviluppo – $ 25
• Siti Web illimitati – $ 45

Puoi acquistare SOS dal sito web dello sviluppatore.

Pensieri finali

Simple Overlay Solution è facile da usare. I comandi semplici ed intuitivi. Costruire gli overlay è quasi come costruire una pagina con Divi. Se puoi usare Divi Builder puoi usare SOS. Le pagine Divi si caricano velocemente perché gli overlay non sono precaricati. Anche gli overlay e i popup si caricano velocemente.

Mi piace che abbia un biscotto. Questo ti dà un certo controllo sui tuoi popup in modo che lo stesso visitatore non debba vedere l'offerta ogni volta che visita il sito web. Sono sicuro che non sarebbe facile da fare, ma mi piacerebbe vedere alcune opzioni per i cookie. Ad esempio, potresti impostarlo per mostrare una volta alla settimana, una volta al giorno, due volte al mese, ecc. Anche alcune opzioni di caricamento sarebbero utili. Forse diverse scelte e personalizzazioni di colore. Mi piacerebbe anche la possibilità di escludere una pagina dalla visualizzazione degli overlay automatici.

Mi piace che un normale pulsante Divi possa essere utilizzato per il pulsante di chiusura. Questo apre molte possibilità di design e non sei limitato all'utilizzo del pulsante integrato. Se vuoi usare il pulsante, ha molte opzioni di colore.

SOS è un plugin facile da consigliare. Se sei interessato a un modo semplice per creare sovrapposizioni, popup e mega menu con Divi Builder, Simple Overlay Solution (SOS) potrebbe essere il plugin di cui hai bisogno.

Vogliamo sentire da voi. Hai provato il plug-in Simple Overlay Solution per creare sovrapposizioni e popup? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite Bakhtiar Zein / shutterstock.com