Evidenziazione del plug-in Divi: Easy Slide-Ins

Easy Slide-Ins è un plug-in di terze parti per Divi ed Extra che ti consente di creare slide-in (e popup) utilizzando Divi builder. Gli slide-in possono visualizzare tutto ciò che può essere costruito con Divi Builder. Attiva gli slide-in con una percentuale di scorrimento, intento di uscita, un pulsante con più posizioni e con una classe CSS. Include aggiornamenti a vita e demo.

In questo articolo, esamineremo Easy Slide-Ins e vedremo cosa può fare ed è facile da usare. Daremo anche un'occhiata ad alcune delle demo incluse con il plugin. Il plugin è disponibile dal sito web dello sviluppatore.

Installazione di Easy Slide-Ins

Per prima cosa, decomprimi il file. All'interno della cartella troverai demo, un file con un collegamento alla documentazione e il plug-in Easy Slide-Ins.

Carica e attiva il plugin normalmente.

Un nuovo menu viene aggiunto alla dashboard chiamato Easy Slide-Ins. Fare clic su questo menu e inserire la chiave di licenza.

L'attivazione della licenza aggiunge due voci di menu (Tutti gli elementi e Aggiungi nuovo) in cui puoi vedere le tue slide-in e creare nuove slide-in.

Creazione di una nuova slide-in

Facendo clic per aggiungere una nuova diapositiva si apre un editor in cui è possibile utilizzare Divi Builder per creare la diapositiva.

Include anche molte impostazioni. Sono posizionati sotto il Divi Builder. Scegli la posizione da sinistra, destra, in alto a sinistra, in alto a destra, in basso a sinistra, in basso a destra, barra in alto, barra in basso, barra laterale sinistra o barra laterale destra. Impostalo per l'attivazione automatica allo scorrimento e scegli la quantità di scorrimento. Puoi anche impostarlo per l'apertura all'intento di uscita. Imposta il colore di sfondo, l'ombra del riquadro e la larghezza della diapositiva.

Mostra il titolo e inserisci il testo da mostrare. Scegli lo sfondo del titolo e i colori del testo, nonché la famiglia, la dimensione e lo spessore del carattere. Impostare la rotondità dell'angolo, l'altezza dell'etichetta e la larghezza dell'etichetta. Mostra l'icona di chiusura e scegli lo sfondo, i colori dell'icona e la dimensione dell'icona.

I controlli sono intuitivi da usare e da capire. Ci sono abbastanza regolazioni per modellare l'etichetta in modo che corrisponda al tuo sito web e controllare come funzionano gli slide-in.

Altre funzionalità vengono aggiunte o rimosse a seconda delle opzioni scelte. Ho selezionato Box Shadow e ora fornisce opzioni per la posizione orizzontale e verticale, l'intensità di sfocatura e diffusione e il colore.

La scheda Avanzate ti consente di scegliere le pagine in cui può essere visualizzata la diapositiva. Puoi selezionare tutte le pagine, le singole pagine e tutti i post. Puoi nascondere lo slide-in su alcuni dispositivi.

La scheda Campi personalizzati ti consente di aggiungere campi personalizzati proprio come qualsiasi pagina o post.

Esempi di slide-in facili

Questa è la pagina dei contatti dal layout Risk Management. Lo sto usando per costruire lo slide-in in modo che il design si adatti al layout. Ho impostato per non mostrare la barra laterale o la navigazione a punti. Puoi visualizzare l'anteprima proprio come una pagina standard. Dopo aver progettato la diapositiva, pubblicala normalmente.

Ho abilitato l'etichetta nelle impostazioni e impostato lo sfondo su nero e il testo su bianco. Ho mantenuto il testo predefinito (Contattaci). L'ho impostato per visualizzare nell'angolo in alto a destra. Questo sta usando l'altezza predefinita, ma può essere cambiata facilmente.

Facendo clic sull'etichetta si apre la diapositiva, che viene visualizzata sullo schermo che mostra il modulo di contatto dal pacchetto di layout Risk Management. Facendo nuovamente clic sul pulsante Contattaci si chiude lo slide-in. Ho la larghezza della diapositiva impostata su 500 pixel, l'altezza dell'etichetta su 150 e la larghezza dell'etichetta su 60.

L'esempio mostra l'ombra del riquadro. Ho cambiato la posizione nella barra laterale destra, che mostra il pulsante di chiusura. Ho cambiato i colori dell'etichetta e del pulsante di chiusura e ho arrotondato gli angoli dell'etichetta. Ho anche impostato la larghezza delle slide-in a 600 pixel.

Per questo, ho spostato l'etichetta nella posizione della barra superiore. Ho usato i colori del layout e ho cambiato la larghezza a 122 pixel e l'altezza a 40 pixel. Come puoi vedere in questa immagine, l'etichetta rimane al suo posto sullo scroll.

Si apre a schermo intero e include il pulsante di chiusura.

Per questo, ho aggiunto un nuovo slide-in alla barra laterale sinistra. L'ho disegnato in modo che corrisponda al sito e ho lasciato gli angoli dell'etichetta squadrati. Sto usando il margine superiore dell'etichetta del 50%, che posiziona la parte superiore dell'etichetta al centro dell'altezza dello schermo.

Si apre da sinistra. Gli ho dato una larghezza di pixel di 1000, quindi copre gran parte del mio schermo. La diapositiva dei contatti viene ancora visualizzata in alto anche se il menu è coperto dalla diapositiva della newsletter.

Gli slide-in ti danno una classe di attivazione del pulsante. Puoi usarlo con i pulsanti per aprire lo slide-in.

Copia la classe e incollala nel campo Classe CSS del pulsante.

Ora, facendo clic sul pulsante si apre lo slide-in. Non è necessario che ci siano etichette da nessuna parte, ma scorrerà dalla direzione in cui hai posizionato lo slide-in. Questo è stato posizionato a sinistra, quindi viene da sinistra. Ho impostato la larghezza a 1000 pixel.

Demo di slide-in facili

Il file di download include 12 demo. Questi sono layout predefiniti (file JSON) che puoi caricare nella libreria Divi. Importali nella libreria Divi come normali layout. Includono moduli con stili ma dovrai configurare le impostazioni di progettazione. Ecco alcuni di loro.

Questa è l'e-mail di raccolta con intento di uscita. Include diversi moduli di testo, un modulo di contatto e un modulo di immagine.

Ecco come appare sullo schermo. Ho lasciato tutto di default qui, quindi il pulsante mostra ancora il testo, la posizione e lo stile originali.

Questa è l'e-mail di raccolta con intento di scorrimento. Include un'immagine di sfondo, due moduli di testo e un modulo di posta elettronica.

Ecco come appare sulla pagina utilizzando le impostazioni predefinite. Questo mostra quanto sia reattivo lo slide-in (che è esattamente quello che ci aspetteremmo, dal momento che mostra un layout Divi). Se vuoi mostrare più immagine, allarga lo slide-in.

Questo è Guida i tuoi visitatori. Include un modulo di codice (per Google Maps), diversi blurb, testo e un modulo di contatto.

Ecco come appare sulla pagina utilizzando le impostazioni predefinite.

Questa è una promozione con un'etichetta. Include un modulo di testo, diverse tabelle dei prezzi e un pulsante.

Ecco come appare sullo schermo. L'ho impostato su 800 pixel in modo che mostri l'intera larghezza se la diapositiva entra. Ho rimosso l'etichetta e l'ho impostata per la visualizzazione quando lo scorrimento della pagina raggiunge il 60%.

Ecco lo stesso layout se visualizzato con Extra. Sono contento di vedere che funziona alla grande sia con Divi che con Extra.

Facili Slide-Ins Prezzo e documentazione

Easy Slide-Ins è disponibile dal sito Web dello sviluppatore. Ha due opzioni di acquisto:

• Sito singolo – $ 27
• Siti illimitati – $ 97

Entrambe le licenze includono le demo e gli aggiornamenti a vita.

La documentazione viene fornita nella pagina di documentazione e supporto dello sviluppatore. La pagina include una procedura dettagliata di ciascuno dei punti con immagini per dimostrarli. La pagina include anche un collegamento all'assistenza via email.

Pensieri finali

Easy Slide-Ins semplifica la creazione di slide-in e popup per Divi ed Extra. L'ho trovato facile da usare. Non ho mai avuto bisogno della documentazione, ma è lì se necessario. È un modo interessante per inserire elementi nascosti della pagina. Poiché qualsiasi cosa può essere utilizzata nella slide-in, puoi mostrare moduli di contatto, iscrizioni a newsletter, inviti all'azione, video, moduli negozio, ecc. Può essere un singolo modulo o un layout di pagina intera.

Mi piace che abbia più opzioni di trigger. L'intento di uscita e il trigger automatico lo rendono una buona scelta per la creazione di popup e-mail e CTA. L'apertura facendo clic sull'etichetta è un bel modo per aggiungerli a più posizioni sulle tue pagine. Mi piace che tu possa aggiungere più slide-in su una singola pagina e che tu possa determinare su quali pagine vengono visualizzate. L'aggiunta della classe CSS ai pulsanti è un ottimo modo per rivelare informazioni quando il visitatore sceglie di vederle.

Puoi creare lo slide-in dal front-end ma non ho visto come accedere alle impostazioni. Senza le impostazioni, non potevo spostare le etichette e vedere la loro posizione in tempo reale. Ho dovuto caricare una pagina per vederli. Non era ancora difficile da usare, ma c'era da fare un po' di congetture. Questo è così piccolo che non mi impedirei di usarlo o consigliarlo.

Se stai cercando un modo semplice e intuitivo per creare slide-in utilizzando Divi Builder, vale la pena dare un'occhiata a Easy Slide-Ins.

Vogliamo sentire da voi. Hai provato Easy Slide-Ins per Divi? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite ByEmo / shutterstock.com