Prima o poi un sito ha bisogno di qualcosa che non vive nel normale flusso della pagina: un avviso, un pannello laterale, un popup o una conferma. Il problema non è farlo comparire. Il problema è farlo comparire nel momento giusto, chiuderlo davvero e non trasformarlo in un ostacolo.

In questa parte costruiamo due elementi off-canvas in Divi 5: un promemoria locale e un popup globale. Useremo Canvas, Interactions e condizioni di visualizzazione, mantenendo separati layout, trigger e stato.

Se devi ancora procurarti Divi, trovi il collegamento nella pagina. Se il concetto di Canvas è nuovo, puoi leggere prima la guida completa ai Canvas di Divi 5.

Distinguere Canvas locali e globali

Un Canvas è uno spazio di progettazione separato dal canvas principale della pagina. Può contenere sezioni, righe, colonne, gruppi e moduli, ma non entra nel layout finché non lo appendi al frontend o lo richiami attraverso un portale.

Il Canvas locale appartiene a una pagina o a un template specifico. È adatto a un avviso che deve esistere soltanto nella homepage. Il Canvas globale può essere richiamato in più punti del sito ed è più indicato per popup, menu o notifiche riutilizzabili.

Questa distinzione è organizzativa prima ancora che tecnica. Se un elemento cambia in base alla pagina, tenerlo locale riduce effetti collaterali. Se deve essere identico ovunque, renderlo globale evita copie divergenti. Dai a ogni Canvas un nome che descriva funzione e ambito.

Costruire un promemoria locale chiudibile

Crea un Canvas locale nella homepage e inserisci una piccola sezione con titolo, testo breve, pulsante e icona di chiusura. Imposta posizione fissa in basso a sinistra, una larghezza massima controllata e un livello z-index sufficiente. Applica i preset di Divi 5 invece di ricreare stili isolati.

Sull’icona aggiungi un’interazione al clic con effetto Hide Element e come target il contenitore dell’avviso. Scegliere il target giusto è fondamentale: se nascondi soltanto l’icona, avrai creato un popup impossibile da chiudere. Un piccolo capolavoro di ostilità.

Verifica anche l’area cliccabile, il contrasto e la navigazione con tastiera. Un’icona senza testo visibile può richiedere un nome accessibile; la guida su ARIA e attributi personalizzati aiuta a intervenire senza aggiungere etichette ridondanti.

Creare un popup globale con condizioni e trigger

Crea ora un Canvas globale per il popup. Inserisci una sezione centrata, una riga con contenuto e form, quindi imposta la posizione fissa al centro dello schermo. Limita larghezza e altezza rispetto alla viewport, attiva il wrapping e controlla che il contenuto resti scorrevole su schermi bassi.

Nascondi il Canvas nello stato iniziale e definisci una condizione basata su cookie, così non ricompare a ogni pagina dopo la chiusura o l’invio. Dal punto della homepage scelto come trigger crea un’interazione allo scroll che mostra il Canvas. Per leggere meglio la catena evento-effetto-target puoi usare la guida alle interazioni di Divi 5.

Sul pulsante di chiusura crea due effetti: nascondere il popup e impostare il cookie. Applica lo stesso stato dopo l’invio riuscito del form, quando il modulo lo consente. La guida pratica ai popup off-canvas in Divi 5 raccoglie ulteriori varianti di questo schema.

Testare visibilità, responsive e accessibilità

Prova il flusso in una finestra anonima: prima visita, attivazione allo scroll, chiusura, cambio pagina e ritorno. Controlla durata e ambito del cookie. Se modifichi il popup durante i test, cancella lo stato locale; altrimenti potresti pensare che il trigger sia rotto quando sta semplicemente rispettando la regola.

Su tablet e telefono verifica larghezza, spazi interni, tastiera virtuale e posizione del pulsante di chiusura. Il popup non deve occupare lo schermo senza lasciare una via evidente. Controlla focus, tasto Esc se previsto e ritorno al punto precedente dopo la chiusura.

Infine chiediti se l’elemento serve davvero. Canvas e Interactions rendono semplice costruire interfacce scollegate dal flusso, ma non giustificano avvisi continui. Usali per un compito chiaro e misurabile. Nella parte 14 passeremo al Loop Builder e costruiremo layout dinamici ripetuti a partire da un solo elemento progettato con cura.

Se il popup contiene un form, prova errori di validazione e invio riuscito senza usare il mouse. Verifica che il messaggio di conferma sia percepibile e che il focus non resti intrappolato su un elemento ormai nascosto. Controlla anche la pagina con JavaScript lento o temporaneamente non disponibile: il contenuto principale deve rimanere accessibile e l’interfaccia aggiuntiva non dovrebbe bloccare la navigazione.

Documenta infine nome del Canvas, pagine che lo richiamano, trigger, target e cookie utilizzato. Questa piccola scheda evita che una futura modifica alla homepage interrompa un popup apparentemente “globale”. È particolarmente utile quando più interazioni puntano allo stesso contenitore o quando una campagna viene riattivata dopo mesi.

Evita inoltre trigger concorrenti sullo stesso elemento. Se scroll, tempo trascorso e clic possono mostrare il popup, definisci priorità e condizioni di esclusione. Prova l’interfaccia anche dopo una navigazione avanti e indietro e dopo l’invio del form. Uno stato chiaro riduce apparizioni duplicate, animazioni sovrapposte e cookie impostati in momenti diversi.

Se il Canvas viene usato in più pagine, crea una tabella minima dei punti di attivazione e rimuovi quelli non più necessari. In questo modo il componente globale resta unico, mentre la sua distribuzione rimane controllabile. È molto più semplice di cercare interazioni sparse quando la campagna termina. Segna anche la data prevista per la rimozione.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.