Come costruire un pop-up con le interazioni di Divi 5 (download gratuito)

I pop-up sono un ottimo strumento per catturare l'attenzione e guidare il coinvolgimento sul tuo sito web. Sia che tu voglia far crescere la tua lista e-mail, promuovere un'offerta speciale o guidare i visitatori verso un'azione specifica, un pop-up ben progettato può fare la differenza. Con il rilascio di interazioni Divi 5, creare pop-up personalizzati e dinamici non è mai stato facile.

In questo post, ti accompagneremo attraverso la creazione di un pop-up usando la funzione di interazioni di Divi 5. Immergiamoci!

Quali sono le interazioni Divi 5?

Divi 5 Interactions è una nuova funzionalità integrata nel Visual Builder, progettata per rendere i siti Web più dinamici e coinvolgenti. Ti consente di creare animazioni e risposte personalizzate in base alle azioni dell'utente o agli eventi di pagina, come clic, hover o scorrimento. A differenza dei design statici, le interazioni consentono di creare pop-up, interruttori, movimenti del mouse ed effetti di scorrimento, il tutto con l'interfaccia familiare di Divi.

Iscriviti al nostro canale YouTube

Componenti chiave delle interazioni Divi

Ogni interazione in Divi 5 è costituita da tre componenti principali:

• Trigger: l'evento che avvia l'interazione, come un clic, un mouse o un elemento che entra o uscirà dal Viewport.
• Effetto: l'azione che si verifica quando il trigger viene attivato, come la visibilità a disattivazione, l'applicazione di uno stile preimpostato o la modifica di un attributo.
• Target: l'elemento specifico interessato dall'interazione, che può essere lo stesso elemento, un'altra sezione, riga, colonna o modulo nella pagina identificata dalla sua etichetta di amministrazione.

Questi componenti lavorano insieme, consentendo di creare interazioni complesse con un'interfaccia semplice e senza codice.

Perché dovresti usare le interazioni per la creazione di pop-up

Le interazioni Divi 5 offrono diversi vantaggi per la costruzione di pop-up:

• Non hai bisogno di plugin: a differenza dei tradizionali costruttori pop-up, le interazioni Divi 5 sono costruite direttamente nel Visual Builder, eliminando la necessità di plugin di terze parti.
• Situato all'interno del Visual Builder: è possibile creare pop-up utilizzando l'interfaccia familiare, i moduli e le opzioni di styling di Divi, rendendo facile per gli utenti di qualsiasi livello di abilità.
• Opzioni ed effetti versatili: combinare i pop-up con altre interazioni, come le animazioni basate su scorrimento o gli effetti del movimento del mouse, per creare esperienze uniche e coinvolgenti.
• Controllo completo: personalizza trigger, effetti e obiettivi per creare pop-up per i tuoi obiettivi specifici, il tutto senza scrivere codice.

Guida passo-passo per la costruzione di un pop-up in Divi 5

Creare un pop-up in Divi 5 è semplice, semplificare la corrispondenza del design esistente del tuo sito. In questa sezione, dimostreremo quanto sia facile creare un pop-up per abbinare uno dei nostri layout prefabbricati, mostrarti come modellarlo e impostare le interazioni per visualizzare il pop-up con un ritardo a tempo.

1. Installa un pacchetto di layout

Per questo tutorial, semplificheremo le cose iniziando con uno dei nostri progetti di layout Pack e quindi costruendo un pop-up con gli stessi stili. Per fare ciò, fai clic sull'icona + nell'angolo in alto a sinistra del Visual Builder.

Quando viene visualizzata la finestra di dialogo, scegli il layout premade dalle opzioni disponibili.

Fai clic sulla miniatura del pacchetto di layout di apprendimento online per evidenziare le pagine disponibili.

Seleziona la progettazione della pagina di destinazione e fai clic su Usa questo layout per caricarlo nel Builder Visual.

L'ultimo passo nell'importazione del pacchetto di layout è scegliere se importare preset. Dopo aver fatto una scelta, fare clic sul pulsante Importa.

2. Creare una sezione per il pop-up

Ora che il pacchetto di layout è importato, dobbiamo creare una nuova sezione per il nostro pop-up nella parte inferiore della pagina. Scorri fino alla fine della pagina e aggiungi una nuova sezione.

Fai clic sull'icona per inserire una nuova riga. Scegli la seconda opzione in colonne offset .

3. Progetta il pop-up

Ora possiamo iniziare ad aggiungere contenuti al nostro pop-up. Quando viene visualizzata la finestra di dialogo Inserisci modulo o riga , fare clic per aggiungere un modulo di intestazione .

Inserisci "Vuoi uno sconto del 15%?" Nel campo dell'intestazione nella scheda Contenuto.

Per mantenere i progetti coerenti attraverso la pagina, è possibile utilizzare la funzione Attributi di Divi 5 per copiare le impostazioni di un altro modulo di intestazione per il nostro pop-up. Nella sezione direttamente sopra, passa sopra il modulo di intestazione, fai clic con il tasto destro e fai clic su Attributi Copia .

Successivamente, passare il mouse sopra il modulo di intestazione che abbiamo appena creato, fare clic con il pulsante destro del mouse, selezionare gli attributi in pasta e quindi fare clic su Attributi di progettazione del testo incolla . Ciò incollerà gli stili dall'altro modulo di intestazione, consentendo la coerenza del design.

Sotto il modulo di intestazione, aggiungi un nuovo modulo di testo .

Come per il modulo di intestazione, individuare il modulo di testo nella sezione sopra, fare clic con il tasto destro e selezionare gli attributi di copia . Da lì, fai clic sul nuovo modulo di testo, tocca gli attributi in pasta , quindi incolla gli attributi di progettazione del testo .

Puoi aggiungere il tuo testo nel campo di testo o utilizzare Divi Ai per generarlo per te.

Successivamente, aggiungeremo un modulo di opt-in e-mail sotto il modulo di testo.

La sezione sopra ha un modulo di opt-in e-mail, quindi puoi copiare i suoi attributi e incollarli nella nuova opt-in e-mail che abbiamo aggiunto al nostro pop-up.

L'ultimo passo è aggiungere un'immagine alla colonna destra del nostro pop-up. Individua il modulo immagine e aggiungilo alla seconda colonna del nostro layout.

Carica un'immagine e aggiungila al modulo immagine. A questo punto, la tua sezione dovrebbe apparire simile a questo:

4. Crea un pulsante di chiusura

Ora che il design del nostro pop-up è in atto, dobbiamo aggiungere una nuova riga sopra di essa per aggiungere un'icona di chiusura. Ciò consentirà ai tuoi visitatori di chiudere il pop-up a loro piacimento. Fai clic sull'icona Green + per aggiungere una nuova riga.

Quando viene visualizzata la finestra di dialogo Inserisci riga , fare clic sul layout della singola colonna in colonne uguali per aggiungerlo alla sezione.

Fare clic per aggiungere un modulo icona alla riga.

Seleziona l' icona Chiudi dalle opzioni disponibili. Può essere facilmente posizionato digitando "Chiudi" nella casella di ricerca sopra l'elenco delle icone.

Passa alla scheda Design e inserisci le seguenti impostazioni di progettazione:

• Colore icona: #5344B9
• Dimensione dell'icona: 36px
• Allineamento: giusto

L'ultimo passo è spostare la riga sopra la riga a due colonne contenente il contenuto del nostro pop-up. Utilizzare la vista Livelli per riorganizzare le righe nell'ordine corretto. Mentre è lì, rinominare la sezione in pop-up .

5. Regola le impostazioni della sezione

Prima di creare le nostre interazioni, dobbiamo garantire che il pop-up sia dimensionato in modo appropriato per la larghezza del browser. Non vogliamo che sia un pop-up a tutta larghezza, quindi naviga verso il design per apportare alcune modifiche. Espandi il menu a discesa di dimensionamento per rivelare le impostazioni.

Nel campo della larghezza , immettere l'80% per la larghezza. Quindi, impostare l'opzione di allineamento della sezione su Center .

Sotto il confine , impostare un raggio di bordo 10px.

Aggiungeremo anche un'ombra box in modo che il nostro pop-up si distingua dal resto del contenuto. Individua il menu a discesa Shadow Box ed espanderlo. Sotto Shadow Box , scegli PREET 1 .

Infine, vai alla scheda Contenuto per aggiungere un colore per lo sfondo della nostra sezione pop-up.

6. Creare l'interazione per visualizzare il pop-up

Con il design in atto, possiamo impostare le nostre interazioni. Imposteremo la nostra sezione pop-up per visualizzare 5 secondi dopo che un utente atterra sulla pagina. Passare alla scheda avanzata della sezione e individuare il menu a discesa interazioni . Fare clic su + Aggiungi interazione per iniziare.

Scegli carico dalle opzioni disponibili. Questa impostazione consentirà al pop-up di apparire sul caricamento della pagina.

Quando viene visualizzata la finestra di dialogo Modifica interazione , immettere le seguenti impostazioni e fare clic su Salva :

• Etichetta di amministrazione: interazione pop-up
• Evento trigger: caricamento
• Azione dell'effetto: mostra l'elemento
• Modulo target: sezione (pop-up)
• Ritardo: 5 secondi

Successivamente, dobbiamo aggiungere un'interazione per il nostro pulsante di chiusura. Seleziona il modulo icona nella prima riga della nostra sezione pop-up. Passare alla scheda Avanzate, fare clic su + Aggiungi interazione e immettere le seguenti impostazioni e salvare:

• Etichetta di amministrazione: pop-up chiuso
• Evento trigger: clicca
• Azione effetto: attiva la visibilità
• Modulo target: sezione (pop-up)
• Ritardo: 0

7. Testa e perfeziona il tuo pop-up con i punti di interruzione personalizzabili personalizzabili di Divi 5

Prima di procedere all'ultimo passaggio, è una buona idea utilizzare i punti di interruzione reattivi personalizzabili di Divi 5 per garantire che il tuo pop-up abbia un bell'aspetto su tutte le dimensioni dello schermo. In Divi 5, ora ci sono 7 punti di interruzione tra cui scegliere.

Per impostazione predefinita, solo tre sono abilitati. Avere 7 ti consente di testare il pop-up su più punti di interruzione, garantendo un'esperienza utente senza soluzione di continuità con qualsiasi dimensione dello schermo. Per consentire tutti e 7, fare clic sul menu Ellissi nella parte superiore della barra di amministrazione. Da lì, abilita tutti i punti di interruzione attivandoli.

Il nuovo sistema di layout Flexbox di Divi 5 consente di apportare facilmente modifiche per garantire che il tuo pop-up abbia un bell'aspetto su qualsiasi dispositivo. Ad esempio, è possibile utilizzare il campo della struttura della colonna di modifica di Divi 5 per modificare il numero di colonne visualizzate su dispositivi più piccoli. Questa opzione impilerà il contenuto sul cellulare con un clic.

8. Imposta le opzioni di visualizzazione

Affinché il tuo pop-up possa visualizzare correttamente, dobbiamo regolare la visibilità, il posizionamento e l'indice Z della sezione pop-up. Ciò consentirà al tuo pop-up di visualizzare dove si desidera, tenerlo nascosto fino al momento di visualizzare e assicurarsi che appaia al di sopra del resto del contenuto della pagina.

Passare alla scheda avanzata per la sezione pop-up. Individua il menu a discesa di visibilità . Fare clic per disabilitare la sezione su tutte le viste (telefono, tablet e desktop).

Quindi, fare clic sul menu a discesa Position. Imposta la posizione su Fixe e scegli un'origine offset. Infine, aggiungi un indice z di 99999 per garantire che i visualizzazioni pop-up sopra il resto del contenuto della pagina.

Una volta che tutte le impostazioni sono in atto, salva la pagina e la visualizza in anteprima in un'altra scheda. Il pop-up dovrebbe essere visualizzato in 5 secondi dopo il caricamento della pagina. Dovresti anche essere in grado di chiudere il pop-up usando la stretta interazione che abbiamo creato.

Opzioni avanzate di personalizzazione pop-up

Le interazioni Divi 5 ti consentono di portare il pop-up al livello successivo con funzionalità avanzate come condizioni di visualizzazione, combinare effetti o persino usare Divi AI per generare pop-up. Diamo un'occhiata ad alcuni modi in cui puoi rendere i tuoi pop-up più avanzati senza bisogno di frammenti CSS o JavaScript personalizzati.

Condizioni di visualizzazione

È possibile utilizzare le opzioni delle condizioni di Divi per mostrare il pop-up in base al comportamento dell'utente, come i ruoli dell'utente. Ad esempio, puoi mostrare il pop-up solo agli utenti disconnessi per incoraggiare le iscrizioni.

È inoltre possibile abilitare le condizioni per visualizzare il pop-up in base alle visite di pagina. Ad esempio, è necessario disabilitare il pop-up se un utente specifico ha già visitato la pagina. È inoltre possibile impostato su come visualizzare solo se un utente non ha visitato la pagina. Questo può essere utile per i visitatori che trovano il tuo sito attraverso una pagina diversa e fai clic sulla home page successiva.

Combinare gli effetti

Puoi migliorare il tuo pop-up con animazioni basate su scroll o effetti di movimento del mouse. Questi possono essere aggiunti come interazioni aggiuntive selezionando ulteriori trigger ed effetti. Le interazioni possono essere combinate e non vi è alcun limite al numero che puoi creare. Ad esempio, è possibile applicare facilmente un'interazione sull'immagine nel nostro pop-up usando gli effetti del movimento del mouse.

Divi AI Integrazione

Accelerare il processo di progettazione utilizzando Divi AI per generare un layout. Puoi istruire Divi Ai di creare sezioni specifiche, tra cui una che puoi convertire in un pop-up. Nell'esempio seguente, abbiamo chiesto a Divi AI di creare un layout per un business coach, completo di una sezione CTA che possiamo trasformarci in un pop-up.

Best practice per pop-up efficaci

Per garantire che il pop-up migliorasse l'esperienza dell'utente e guida i risultati, considera queste migliori pratiche:

1. Mantienilo intuitivo

Evita pop-up invadenti usando ritardi a tempo, tra 5 e 10 secondi, anziché i trigger immediati. Ciò offre agli utenti il tempo di interagire con i tuoi contenuti prima di essere richiesto. Il lancio di un pop-up troppo presto può essere distratto, facendo sì che gli utenti chiuderà il pop-up e potenzialmente perdere una promozione, un'iscrizione alla newsletter o altre azioni importanti che si desidera intraprendere.

Imposta un ritardo a tempo sul pop-up per evitare di perdere il coinvolgimento degli utenti.

Inoltre, includere sempre un pulsante di chiusura chiaro e facilmente identificabile in modo che gli utenti possano licenziare il pop-up e mantenere un'esperienza di navigazione positiva.

2. Ottimizza per le prestazioni

L'ottimizzazione delle prestazioni è fondamentale per pop-up efficaci. Per mantenere rapidi i tempi di caricamento, minimizza le animazioni pesanti o immagini grandi e non ottimizzate. Optare per immagini compresse e limitare gli effetti complessi per garantire un'esperienza scattante e senza soluzione di continuità, in particolare per gli utenti su connessioni più lente o dispositivi mobili. Questo approccio migliora la soddisfazione degli utenti e supporta i migliori tassi di coinvolgimento e di conversione.

3. Progetta pop-up con standard di accessibilità in mente

L'accessibilità è un'altra considerazione chiave nel rendere il tuo pop-up inclusivo per tutti gli utenti. Aggiungi sempre il testo ALT descrittivo alle immagini per aiutare i lettori a schermo, assicurarsi un elevato contrasto tra testo e background per la leggibilità e utilizzare le dimensioni dei caratteri di 16px o più grandi per accogliere gli utenti con disabilità visive.

Queste pratiche aiutano a garantire che il tuo pop-up sia accessibile a un pubblico diversificato, allineandosi con gli standard di accessibilità Web.

4. Test su tutte le dimensioni dello schermo

Infine, testare a fondo il pop-up su tutte le dimensioni dello schermo per garantire un'esperienza coerente su tutti i dispositivi. Sfrutta i punti di interruzione personalizzabili personalizzabili di Divi 5 per garantire che il tuo pop-up sia bello e funzioni come previsto su desktop, tablet e smartphone.

Presta molta attenzione al pulsante di chiusura per assicurarti che funzioni come dovrebbe e che il testo sia leggibile su schermi più piccoli. Inoltre, controlla la spaziatura, il dimensionamento e il layout secondo necessità per fornire un aspetto lucido e professionale.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Crea pop-up con interazioni Divi 5

La funzione di interazioni di Divi 5 semplifica la creazione di un pop-up consentendo di creare design personalizzati e coinvolgenti direttamente all'interno del Visual Builder. La combinazione di grilletti, effetti e obiettivi ti consente di creare pop-up che catturano l'attenzione e guidare conversioni mentre abbinano perfettamente il design del tuo sito. Esplora altre funzionalità come gruppi di moduli e righe nidificate per creare layout pop-up ancora più dinamici.

Sei pronto a provare Divi 5? Scarica l'ultima alfa pubblica Divi 5, sperimenta interazioni e condividi i tuoi pensieri nella sezione commenti qui sotto. Condividi le tue creazioni con noi sui nostri canali di social media e visita il nostro blog per ulteriori tutorial utilizzando le funzionalità innovative di Divi 5. Non vediamo l'ora di vedere cosa crei!