Quindi vuoi creare un popup in Divi 5? E magari farlo bene, senza impazzire tra plugin extra, codice custom e soluzioni messe insieme con lo scotch?

Bene, sei nel posto giusto!

Domande così contano più di quanto sembri. Sapere come mostrare il messaggio giusto nel momento giusto può cambiare parecchio.

Conversioni, ordine nel progetto, ma anche il modo in cui costruisci un sito con una logica chiara.

Non è solo “far comparire un popup”. È decidere come guidare l’attenzione delle persone senza rovinare l’esperienza.

I popup fuori schermo sono un modo efficace per catturare l'attenzione degli utenti, raccogliere contatti, comunicare offerte o guidare i visitatori verso un'azione specifica, il tutto senza sovraccaricare il layout principale della pagina.

Se usati con criterio, migliorano l’esperienza utente senza risultare invasivi.

In passato, crearli in Divi richiedeva estensioni di terze parti o codice personalizzato. Ora, grazie alla combinazione dei Canvas (aree di contenuto indipendenti dalla pagina) e delle Interazioni (regole che definiscono quando e come un elemento appare), puoi costruire questi popup direttamente nel builder visuale di Divi, senza dipendenze esterne.

In questo articolo vedremo esattamente come usare queste due funzionalità per realizzare popup fuori schermo di Divi 5 funzionali e ben strutturati.

Iniziamo.

Come Creare un Popup off-canvas in Divi

Ora che hai chiaro come funzionano i Canvas e le Interazioni, possiamo passare alla pratica e creare un popup fuori schermo.

Per semplicità, useremo un layout già pronto da importare come sezione dalla libreria. Quindi non vedremo come costruire il popup da zero.

Ci concentriamo sulla creazione del Canvas, cioè l’area nascosta che contiene il popup, sull’importazione del layout e sulla configurazione delle Interazioni per attivarlo.

Cosa sono i Canvas di Divi?

Divi introduce i Canvas, cioè aree di lavoro separate dal contenuto principale della pagina. Puoi immaginarli come fogli bianchi appoggiati sopra al progetto: esistono dentro il builder visuale, ma non interferiscono con il layout che il visitatore vedrà.

Ogni canvas è uno spazio indipendente in cui costruire e organizzare elementi come popup, menu o banner, senza toccare la struttura principale della pagina.

Ogni pagina Divi parte da un Canvas Principale, cioè l’area in cui costruisci il contenuto visibile della pagina: hero, testo, sezioni e tutto il resto.

La parte più interessante, però, riguarda i Canvas Separati. Sono aree di lavoro completamente indipendenti che non compaiono nel layout principale mentre stai modificando nel Visual Builder.

Ecco perché sono perfetti per costruire elementi fuori pagina come menu a scorrimento, barre laterali, banner per i cookie e popup che restano nascosti fino al momento in cui devono apparire.

Passaggio 1: Crea un Nuovo Canvas

Crea o apri una pagina esistente nel Costruttore Visuale. Poi fai clic sul menu a tendina del Canvas Principale, che si trova a destra del titolo della pagina.

Seleziona quindi Aggiungi Canvas.

Aggiungi un Nome del Canvas. Poi clicca di nuovo su Aggiungi Canvas.

Si aprirà una nuova area di lavoro del builder. A questo punto, clicca sull’icona blu + per aggiungere una nuova sezione.

Seleziona la scheda Aggiungi dalla libreria e scegli un layout predefinito.

In questo esempio, utilizzeremo un popup email creato dal team di design di Elegant Themes.

Infine, clicca su Usa questa sezione per caricare il popup sul Canvas.

Una volta caricato il layout, assicurati di salvare il Canvas.

Canvas principale e canvas distaccati

I canvas distaccati esistono in due varianti in Divi. I Canvas Locali sono associati a una pagina, a un post o a un template specifico.

Sono ideali per popup occasionali o per elementi unici che non devono comparire su tutto il sito.

I Canvas Globali, invece, sono disponibili su tutto il sito. Nel contesto dei popup, un canvas globale ti permette di creare un modulo di iscrizione, uno slide-in promozionale o un overlay di intenzione di uscita una sola volta, per poi riutilizzarlo su ogni pagina.

Lo modifichi in un punto solo e l’aggiornamento si riflette ovunque.

Passaggio 2: Modifica il Design

Personalizzare il popup è semplice. Partendo da un layout predefinito, puoi modificarne il design in pochi clic.

Usa la scheda Design di ogni modulo per fare interventi rapidi come cambiare il Carattere del Titolo e il Colore.

Modificare le impostazioni di design di un modulo pulsante è altrettanto facile. Ti basta selezionare un nuovo Colore di Sfondo, cambiare il Carattere, regolare il Raggio del bordo e così via.

Anche le immagini si sostituiscono senza difficoltà.

Apri le impostazioni dell’immagine, vai nella scheda Contenuto, espandi il menu a tendina Immagine e clicca sull’icona delle impostazioni per scegliere una nuova immagine.

Prima di tornare all’area di lavoro principale, devi nascondere il popup usando le impostazioni di Visibilità di Divi.

Così il popup resterà nascosto finché non verrà attivato tramite le Interazioni.

Nella scheda Avanzate, espandi il menu a discesa Visibilità. Disabilita la sezione su Desktop, Tablet e Mobile.

Come Funziona l'Aggiunta di Contenuto sul Lato Frontale

Nel Visual Builder, le aree di lavoro separate restano nascoste e isolate. Così l’interfaccia rimane pulita e ordinata.

Quando le colleghi tramite le Interazioni, Divi inserisce automaticamente il loro contenuto sul sito. I popup restano invisibili mentre costruisci la pagina e compaiono solo quando vengono attivati dall’utente.

Il risultato è fluido, e soprattutto non richiede codice personalizzato né plugin aggiuntivi.

Perché le aree di lavoro separate sono ideali per i popup

Le aree di disegno, cioè i Canvas, eliminano i principali ostacoli nella creazione dei popup in Divi:

• Puoi progettare in isolamento: è facile costruire layout complessi senza interferire con la pagina principale.
• Sfruttano tutta la potenza di Divi: puoi usare animazioni, effetti di trasformazione, impostazioni responsive, righe annidate, preset, variabili di design e qualsiasi altra funzionalità di Divi all'interno del Canvas.
• Più opzioni di attivazione: si integrano con le Interazioni per mostrare o nascondere elementi, attivarli con un clic, all’entrata o all’uscita dall’area visibile, alternare preset o creare effetti al passaggio del mouse.
• Sono riutilizzabili e facili da gestire: usa i Canvas globali per popup a livello del sito o mantienili locali per campagne mirate.
• Offrono un flusso di lavoro ordinato: non serve nascondere sezioni con impostazioni di visibilità né duplicarle. Tutto vive in uno spazio dedicato e ben organizzato.

Quindi, in pratica, i Canvas di Divi 5 trasformano i popup da grattacapo a funzionalità nativa.

Progetti una volta sola in uno spazio di lavoro separato, poi usi le Interazioni per renderli dinamici sul lato frontale, cioè per farli reagire alle azioni dell’utente.

Per esempio, un clic su un pulsante può aprire un Canvas con un modulo di contatto, senza ricaricare la pagina e senza modificare il layout esistente.

Passaggio 3: Configura le Interazioni

Cosa Sono le Interazioni di Divi?

Le Interazioni di Divi sono un sistema che ti permette di aggiungere comportamenti dinamici a qualsiasi elemento della pagina, attivati da un’azione dell’utente.

Le trovi direttamente nella scheda Avanzate di moduli, colonne, righe e sezioni. Ogni interazione si basa su tre elementi: un evento di attivazione, cioè l’azione che fa partire tutto; un azione di effetto, cioè quello che succede visivamente; e un elemento di destinazione, cioè l’elemento della pagina su cui viene applicato l’effetto.

Se non hai capito tutto al volo, tranquillo: ora lo spacchettiamo bene.

Ogni interazione segue una struttura semplice composta da tre elementi:

• Eventi di attivazione: le azioni dell'utente o le condizioni della pagina che avviano l'interazione.
• Azioni di effetto: l'azione che si verifica quando l'evento si attiva.
• Moduli destinatari: l'elemento che riceve l'effetto.

Questo rende le interazioni molto versatili in tanti contesti: dagli effetti hover alle animazioni attivate dallo scroll, fino al controllo di popup e finestre modali.

Puoi anche combinare più interazioni sullo stesso elemento. Per esempio, un pulsante può cambiare colore al passaggio del mouse e aprire una finestra modale al clic, tutto senza scrivere codice.

Impostare un'Interazione sul Canvas Principale

Una volta finite le modifiche al design, puoi tornare al Canvas principale per configurare l’interazione del popup.

Clicca sul menu a tendina Canvas e seleziona Canvas Principale. Il posizionamento del popup può essere definito manualmente tramite le impostazioni di posizione oppure gestito in automatico dalle interazioni.

Per esempio, se vuoi che il popup appaia sempre in basso a destra, indipendentemente da dove si trova l’utente nella pagina, conviene usare il controllo manuale.

Se invece vuoi che si attivi solo quando l’utente interagisce con un elemento specifico, allora le interazioni fanno tutto il lavoro.

Ora imposteremo un’interazione per far partire il popup dopo un ritardo temporale.

Dato che il popup ha già il posizionamento configurato, non importa quale sezione usi per attivarlo. Clicca per aprire le impostazioni della sezione hero sul Canvas principale.

Vai nella scheda Avanzate ed espandi il menu Interazioni. Per aggiungere una nuova interazione, clicca sul pulsante + Aggiungi interazione.

Aggiungiamo un’interazione che ritarda la comparsa del popup di 5 secondi.

Seleziona l’evento Caricamento della pagina e imposta il ritardo desiderato.

Quando configuri la comparsa del popup sullo schermo, imposta un’etichetta identificativa, scegli Mostra elemento come tipo di effetto, seleziona la sezione popup come elemento da mostrare e imposta un ritardo di 5 secondi prima che appaia.

Ad esempio, se stai costruendo una pagina con un’offerta speciale, puoi usare questa impostazione per mostrare il popup solo dopo che l’utente ha avuto il tempo di leggere il contenuto principale, invece di farlo comparire subito all’apertura della pagina.

Creare un'Interazione per chiudere il popup

Quando usi un popup predefinito, il modulo Icona di chiusura ha già un’Interazione configurata.

Se invece stai creando un popup da zero, devi aggiungerla manualmente.

Nel canvas del popup, seleziona l’icona di chiusura.

Vai nella scheda Avanzate per aggiungere una nuova interazione. Assegna Chiudi popup come etichetta amministrativa, Clic come evento di attivazione e Nascondi elemento come azione.

Come modulo di destinazione, seleziona la sezione popup.

Salva il canvas del popup, esci dal builder e verifica che funzioni correttamente.

Step 4: Testare il funzionamento su tutti i dispositivi

Quando tutte le interazioni sono impostate, assicurati di utilizzare i breakpoint responsivi personalizzabili di Divi per verificare eventuali incongruenze su schermi di dispositivi più piccoli. Divi 5 offre sette breakpoint, dalla visualizzazione desktop ultra-wide fino a quella per smartphone, permettendoti di creare popup perfetti al pixel per ogni breakpoint (divi 4 ne aveva solo 3).

Per abilitarli tutti e sette, clicca sul menu con i tre puntini (ellipsis) nella barra degli strumenti in alto al centro dello schermo.

Nella finestrella che ti appare vedrai tutti i breakpoint responsive globali. Attivali tutti e poi clicca sul pulsante Salva per abilitarli.

Una volta fatto questo, naviga sui vari breakpoint e poi modifica il layout per apportare i dovuti aggiustamenti su ogni dispositivo.

In alternativa, puoi utilizzare l’editor responsive di Divi per apportare modifiche a livello del singolo modulo. Puoi facilmente modificare le dimensioni dei font, regolare gli spazi oppure cambiare la dimensione dell’icona di chiusura con pochi clic.

Consigli e best practice

Ora che ho creato un pop-up utilizzando i Canvases e le Interactions di Divi 5, ecco alcuni suggerimenti per portare i popup a un livello superiore, rendendoli più efficienti, facili da gestire e user-friendly.

Sfrutta i Global Canvases per popup su tutto il sito

Se vuoi che un pop-up venga visualizzato in tutto il sito, crealo in un Global Canvas invece che in uno locale. I Global Canvases sono accessibili da ogni pagina, articolo o template del Theme Builder. Progetti una sola volta e poi puoi attivare lo stesso pop-up ovunque tramite le Interactions. Qualsiasi aggiornamento verrà applicato automaticamente a tutto il sito.

Questo ti fa risparmiare tempo rispetto alla duplicazione dei popup su più pagine.

Usa le impostazioni di posizione e il modulo Canvas Portal per un posizionamento preciso

Anche se l’inserimento automatico nel front-end tramite le Interactions funziona molto bene per i popup off-canvas, le impostazioni di posizione ti danno un controllo maggiore quando hai bisogno che il pop-up compaia in un punto specifico della pagina.

Allo stesso modo, puoi utilizzare il modulo Canvas Portal per posizionare il pop-up esattamente dove vuoi. Questo modulo ti permette di inserire un Canvas “separato” direttamente all’interno di qualsiasi sezione o riga, consentendo un posizionamento relativo preciso.

Ricapitolando, con i Canvas e le Interazioni puoi creare un popup fuori schermo di Divi 5 direttamente nel builder, gestendo design, comparsa e chiusura senza plugin esterni e senza codice personalizzato.

Il vantaggio vero è questo: tieni il layout principale pulito, costruisci il popup in un’area separata e decidi con precisione quando mostrarlo.

Se stai facendo test su una pagina reale, il consiglio è semplice: prova tempi di attivazione, posizione e comportamento su desktop, tablet e mobile. Così capisci subito quale soluzione funziona meglio per il tuo caso.

Se hai dubbi su qualche passaggio o vuoi capire come adattare questo workflow a un popup diverso, puoi scriverlo nei commenti.

Eventi di attivazione ed Azioni Disponibili

• Clic: ideale per pulsanti o icone che aprono o chiudono un popup o rivelano un contenuto.
• Entrata del mouse e uscita del mouse: ottimi per anteprime al passaggio del mouse o interazioni discrete.
• Entrata nell'area visibile e uscita dall'area visibile: si attivano quando un elemento entra o esce dal campo visivo durante lo scroll, perfetti per popup attivati dallo scorrimento della pagina.
• Caricamento: si esegue automaticamente al caricamento della pagina, con un eventuale ritardo temporale. Ad esempio, è possibile usare Caricamento per mostrare un popup di benvenuto dopo 5 secondi.

È possibile combinare più animazioni interattive sullo stesso elemento o su elementi diversi, così da ottenere effetti a più livelli.

Queste animazioni si integrano con aree di contenuto separate dalla pagina principale, cioè i pannelli fuori schermo, che vengono mostrate o nascoste automaticamente quando si verifica un’interazione.

Ad esempio, cliccando su un pulsante puoi aprire un menu laterale che scorre dentro la pagina dal bordo sinistro, senza ricaricare nulla: tutto succede direttamente davanti all’utente.

Azioni Principali per i Popup

Per i popup, in particolare, ci sono alcune azioni a effetto che ti torneranno utilissime:

• Mostra Elemento: rende visibile un elemento nascosto, come una sezione popup.
• Nascondi Elemento: nasconde un elemento dalla pagina.
• Alterna Visibilità: passa dallo stato visibile a quello nascosto, e viceversa, con una singola interazione.

Selezionare elementi Canvas separati

Le Interazioni sono il complemento perfetto dei Canvas separati: puoi agire su elementi posizionati in qualsiasi area di lavoro distaccata direttamente dal Canvas principale.

Quando un’Interazione si attiva, Divi aggiunge automaticamente il contenuto al lato frontale, mantiene ordinata l’area di lavoro e rende fluide le funzionalità fuori schermo.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.