Se ti serve un modo per gestire menu, pop-up, sidebar e componenti riutilizzabili senza impazzire dentro la pagina principale, allora i Divi 5 Canvas ti fanno respirare. Perché, diciamolo: tenere tutto “in pagina” quando in realtà dovrebbe stare “dietro le quinte” è sempre stato un pezzo un po’ macchinoso del workflow con Divi.

I Divi 5 Canvas risolvono proprio questo: ti danno spazi di lavoro separati, dentro il Visual Builder, dove costruisci e organizzi elementi off-canvas in modo pulito, senza mischiarli al contenuto della pagina o del post.

Un Divi 5 Canvas è, in pratica, un’area di lavoro dedicata e isolata all’interno del Visual Builder. Ogni pagina Divi parte da un Main Canvas per il layout principale, ma puoi aggiungere canvas extra che diventano “stanze” indipendenti dove prepari menu slide-in, modal, sidebar e simili. Così puoi duplicare e modificare design in modo sicuro, senza toccare quello già pubblicato, e se vuoi puoi anche renderli globali per riusare gli stessi componenti su tutto il sito.

Ogni pagina o articolo Divi include automaticamente un’area predefinita chiamata Main Canvas. È la tela principale dove costruisci il contenuto. Poi, oltre a quella, puoi creare dei Detached Canvas: sono aree totalmente separate che non compaiono nell’area principale della pagina dentro il Visual Builder.

Sono perfetti per costruire elementi off-canvas come menu a scorrimento, sidebar o modal. E la cosa bella è che puoi salvarli come componenti riutilizzabili senza appesantire il layout principale.

I canvas possono essere creati e assegnati a una singola pagina oppure impostati come elementi globali, così diventano accessibili da qualsiasi pagina o post del sito. I canvas globali sono ideali per cose che vuoi coerenti ovunque: menu, mega menu, pop-up, banner cookie o qualsiasi componente che vuoi riutilizzare senza reinventarlo ogni volta.

E no, i canvas non sono “scatole vuote” isolate e basta: sono integrati con gli strumenti di Divi 5, e questo li rende molto più elastici. Con la funzionalità Interactions, per esempio, puoi collegare un canvas a specifici trigger (cioè azioni dell’utente), tipo un click su un pulsante, un passaggio del mouse o lo scroll fino a un certo punto.

Questo ti permette di mostrare, nascondere o animare contenuti off-canvas in base a quello che fa l’utente. Risultato: menu più sofisticati, pannelli slide-in, effetti “reveal”… e tutto senza scrivere codice custom.

Quando crei un canvas nel Visual Builder, puoi scegliere se aggiungere il suo contenuto alla pagina live. Una volta “appeso” (append), il design off-canvas appare e funziona correttamente sul front-end, ma nel builder resta nascosto e separato: così l’editing rimane ordinato e non ti ritrovi una pagina piena di roba “di servizio”.

Ogni canvas supporta tutte le funzionalità standard di Divi: animazioni, trasformazioni, impostazioni di visibilità (tipo “nascondi su smartphone, mostra su desktop”), editing responsive e moduli annidati (moduli dentro altri moduli). Ci sono anche i Preset (stili salvati e riapplicabili con un clic) e le Variabili di Design Globali, che ti permettono di cambiare colori o font una volta sola e vedere l’aggiornamento su tutto il sito.

Il Canvas Portal Module, invece, serve a inserire il contenuto di un canvas distaccato direttamente dentro il layout nel Visual Builder o in un template del Theme Builder. In pratica: piazzi il canvas dove ti serve, e lo riusi in modalità plug and play su tutto il sito.

Una cosa da ricordare: una volta che aggiungi un canvas tramite il Portal Module, non puoi modificarlo cliccandoci sopra direttamente nel workspace. Devi passare dalla Canvas Grid View, che è un po’ come un pannello di controllo dove vedi e gestisci tutti i canvas in un colpo solo. Da lì apri il canvas giusto, fai le modifiche e salvi. Il Portal Module nel layout si aggiorna da solo con la versione nuova.

Per esempio: hai inserito via Portal Module un canvas chiamato “Hero Banner”. Vai sull’icona Canvas Grid View nella top bar, trovi “Hero Banner” nell’elenco, clicchi Edit, aggiorni contenuto e poi Save. Fine. Non devi toccare il Portal Module.

Tipi di Canvas in Divi: una panoramica

In Divi esistono diversi tipi di canvas, ognuno con uno scopo preciso nel flusso di lavoro. Se li conosci, ti muovi più veloce nell’editor e scegli subito “la stanza giusta” per quello che devi fare.

• Page Canvas: è il canvas principale per costruire le pagine. Ogni pagina del sito ha il suo canvas indipendente, dove definisci struttura e contenuto.
• Global Canvas: raccoglie gli elementi globali come header, footer e template riutilizzabili. Le modifiche fatte qui si propagano automaticamente su tutto il sito.
• Template Canvas: serve per creare e gestire template di pagina o di sezione da applicare in modo coerente su più contenuti.
• Popup Canvas: dedicato a popup e overlay. Ti permette di progettarli “in isolamento”, senza interferire con il resto della pagina.

Ogni canvas vive in un contesto separato, ma la logica di editing è sempre la stessa. Capire in quale canvas ti trovi, in quel momento, è fondamentale per evitare modifiche involontarie e per tenere il progetto ordinato.

Divi ti dà anche strumenti dedicati nel Visual Builder per accedere ai canvas, vederli in griglia e gestire le azioni principali direttamente dall’interfaccia.

In alto nel Visual Builder, vicino al titolo della pagina, trovi il menu a tendina Canvas. È l’accesso principale per passare da un canvas all’altro.

Clicca sul menu Canvas e vedrai l’elenco di tutti i canvas disponibili. Da qui puoi passare rapidamente tra canvas Local e Global per modificarli, oppure usare Add Canvas per crearne uno nuovo.

Se vuoi una vista più “panoramica”, usa la Canvas Grid View. La trovi a destra del menu a tendina.

Qui vedi tutti i canvas come miniature, così gestisci più workspace contemporaneamente senza perderti.

Ogni canvas ha un menu con i puntini di sospensione dove trovi le azioni principali.

Dentro Canvas Settings puoi rinominare il canvas, impostarlo come canvas globale (quindi condiviso tra più pagine) e decidere se il suo contenuto deve essere aggiunto al layout principale. Questa opzione è append: se è attiva, il contenuto del canvas compare nella pagina pubblicata; se è disattiva, il canvas esiste ma non viene mostrato nella pagina.

L’opzione Export Canvas ti permette di esportare il canvas come file JSON da usare su altri siti Divi, oppure importare un layout per sostituire quello esistente.

Puoi anche modificare, duplicare o eliminare un canvas, oppure impostarlo come Canvas Principale, cioè quello visualizzato sulla pagina.

Canvas Locale o Globale?

Già con Divi 4 mi capitava spesso di vedere dei layout fatti con il theme builder quando non ce n'era assolutamente bisogno. Lo stesso problema potrebbe accadere con i canvas. Quando usare un canvas locale e quando uno globale? Ecco qualche regola utile:

• Usa un canvas globale per gli elementi ripetuti su tutto il sito. Header, footer, barre di navigazione, banner promozionali fissi: se deve comparire in modo coerente su più pagine, è un candidato naturale. Lo cambi una volta e cambia ovunque.
• Usa un canvas locale per i contenuti specifici di una singola pagina. Sezioni hero, layout unici, contenuti che variano pagina per pagina: qui non serve centralizzare.
• Non duplicare la logica globale a livello locale. Se stai copiando lo stesso blocco su più pagine, è quasi sempre il segnale che dovresti gestirlo come canvas globale. Se devi cambiare solo un contenuto puoi utilizzare i campi dinamici.
• Interfaccia del sito globale, contenuti locali. La struttura e l’identità visiva (UI) stanno bene nei globali; i contenuti editoriali e le variazioni per pagina stanno bene nei locali.
• Quando sei in dubbio, pensa alla manutenzione futura. Se un cambiamento dovrà riflettersi ovunque, rendilo globale. Se deve essere diverso anche graficamente, tienilo locale. Se hai bisogno dello stesso layout grafico, ma contenuti diversi, utilizza i campi dinamici e eventualmente ACF, ti risparmierà ore di lavoro per modifiche future.

Esempio pratico: menu di navigazione e footer come canvas globali. Un popup che deve comparire specificatamente in una singola pagina, nel canvas locale di quella pagina. È una separazione che mantiene il sito pulito, coerente e facile da aggiornare.

Inoltre uno degli usi più semplici (e più furbi) dei Canvas è usarli come “zona sicura” per sperimentare. Puoi duplicare il tuo Canvas principale e creare una variante indipendente.

Da lì puoi fare modifiche radicali, testare layout nuovi o costruire una versione alternativa della pagina, senza rischiare nulla sul design live. Quando ti convince, imposti il nuovo canvas come Main Canvas e Divi lo sostituisce sul front-end con un clic.

È ottimo per testare varianti, sviluppare preset o raccogliere feedback dai clienti. I canvas locali vanno benissimo per esperimenti su una pagina specifica, quelli globali sono comodi per testare template a livello di sito.

I canvas sono anche comodissimi per costruire navigazioni dinamiche, che compaiono solo quando servono. Di solito si parte creando un Global Canvas dedicato al menu.

Con elementi off-canvas puoi costruire un menu laterale su misura che scorre dentro dallo schermo. Dentro il canvas imposti colonne verticali, aggiungi icone, raggruppi link in sezioni e tieni tutto nascosto finché non lo attivi con un pulsante o un’interazione. È l’ideale quando la navigazione sarebbe troppo “ingombrante” se lasciata nel layout principale.

Usa l’Interaction Builder per collegare il canvas a un trigger come Click, così si apre quando l’utente clicca.

Per rendere le sezioni off-canvas ancora più piacevoli, puoi applicare le animazioni integrate di Divi 5 direttamente al Canvas o ai moduli interni. Effetti come slide, fade o scale rendono le transizioni più “volute” e meno brusche.

Ad esempio, per dare una slide-in al menu off-canvas:

• seleziona il modulo Canvas
• apri la tab Advanced
• vai su Animation
• imposta Animation Style su Slide
• scegli Left come direzione
• porta la durata intorno a 400ms per un ingresso fluido

Così, ogni volta che il menu viene attivato, scivola dentro dal lato invece di “comparire” all’improvviso, migliorando la UX del layout.

Il canvas resta separato nel builder (quindi l’area di lavoro rimane pulita), ma viene aggiunto automaticamente al front-end quando si attiva. Risultato: menu responsive e animati senza codice personalizzato.

Oltre ai menu, i canvas si usano anche nel Theme Builder di Divi 5, dove puoi definire layout per header, footer e template di archivio. In questo scenario, un menu off-canvas costruito come canvas separato può essere riutilizzato dentro questi template, mantenendo coerenza visiva su tutto il sito senza duplicare lavoro.

Creare pop-up riutilizzabili e basati su interazioni diventa davvero semplice. Puoi costruire il pop-up in un Global Canvas per averlo disponibile ovunque, oppure legarlo al Main Canvas di una singola pagina.

Per attivare un canvas pop-up, usa l’Interaction Builder, cioè lo strumento che collega un elemento visivo a un’azione dell’utente. Tra i trigger più comuni ci sono:

• Scroll to Viewport: il pop-up appare quando l’utente arriva a un certo punto della pagina
• Click: il pop-up appare solo al clic su un elemento (tipo un pulsante “Scopri di più”)

Aggiungi un’animazione di ingresso per renderlo più fluido e usa le impostazioni di Visibilità per tenerlo nascosto fino all’attivazione dello scroll o del click.

Se lo imposti su Global, un singolo canvas pop-up può gestire exit-intent, iscrizioni newsletter e molto altro su tutto il sito.

Buone Pratiche: Quando Usare i Canvas Globali

I canvas globali sono potenti, ma come tutte le cose “condivise”, se li usi a caso possono creare confusione. Ecco qualche dritta pratica per non perdere il controllo.

Riutilizzo sì, ma con consapevolezza

Un canvas globale aggiorna tutto ovunque venga usato. Fantastico per header, footer e sezioni ripetute. Però diventa rischioso se lo usi per elementi che, in realtà, potrebbero cambiare da pagina a pagina. Prima di renderlo globale chiediti: questa sezione deve essere identica su tutto il sito? Se non è un sì convinto, meglio locale.

Nomenclatura chiara fin dall'inizio

Quando i canvas globali aumentano, la libreria può diventare un labirinto. Quindi dai nomi leggibili e coerenti, indicando tipo di elemento e posizione. Tipo: Header – Principale, Footer – Blog, CTA – Servizi. Ti salva tempo, soprattutto se lavori in team o rimetti mano al sito dopo mesi.

Attenzione alle animazioni pesanti

Animazioni ed effetti complessi dentro un canvas globale vengono caricati su ogni pagina che lo usa. Occhio alle performance: quello che su una singola landing va benissimo, su tutto il sito può rallentare. Se un elemento è molto animato, valuta un canvas locale o limita l’effetto a contesti specifici.

Testa sempre le modifiche globali

Prima di salvare una modifica a un canvas globale in produzione, controlla almeno due o tre pagine diverse. Cambiano le larghezze, cambiano i contenuti vicini, e possono saltare fuori effetti collaterali che su una pagina sola non vedi.

Se stai creando un elemento da riutilizzare su più pagine, costruiscilo come canvas globale. Così lo hai subito disponibile ovunque e lo aggiorni da un solo punto: la modifica si riflette automaticamente in tutte le pagine che lo usano. È perfetto per menu, mega menu, pop-up, avvisi cookie o modali promozionali.

Il vero potenziale dei canvas esce fuori quando usi l’Interaction Builder, cioè lo strumento che collega un’azione dell’utente all’apertura o chiusura di un canvas. Per i menu, in genere funzionano bene trigger su click o hover. Per pop-up o modali promozionali, spesso è meglio un trigger basato sullo scroll (si attivano quando l’utente arriva a un certo punto).

Un buon metodo è partire con un trigger alla volta, e solo dopo combinarli per effetti più elaborati. Ad esempio, puoi impostare un menu che si apre al click su un’icona e si chiude automaticamente quando l’utente scorre verso il basso.

Il Visual Builder nasconde i canvas scollegati per mantenere tutto ordinato, ma puoi collegarli per farli vivere sul sito. Dopo aver configurato i trigger di Interazione, testa sempre i layout su tutti i breakpoint: desktop, tablet e telefono. Controlla tempi delle animazioni, overlay e chiusura dei pop-up, e correggi dove serve.

Infine, svuota la cache e fai un giro in incognito per vedere la versione “vera” del sito. Un check veloce sul front-end ti risparmia un sacco di tempo dopo.

Errori Comuni da Evitare con Modal e Slide-In

I canvas di tipo modal e slide-in (cioè tipo i pop-up) sono super flessibili, ma è facile inciampare in errori che rovinano l’esperienza utente o la leggibilità. Ecco cosa tenere d’occhio.

• Troppi trigger sovrapposti: se più elementi aprono canvas diversi, l’utente si disorienta. Meglio una singola azione prioritaria per ogni sezione.
• Contenuto eccessivo nel canvas: modal e slide-in funzionano meglio con contenuti brevi e focalizzati. Form lunghi, gallerie o testi estesi riducono efficacia e aumentano l’abbandono.
• Mancanza di un punto di chiusura chiaro: l’utente deve poter chiudere sempre e in modo intuitivo. Il pulsante di chiusura deve essere visibile e comodo, soprattutto su mobile.
• Apertura automatica aggressiva: aprire un canvas subito al caricamento può risultare invasivo. Spesso meglio trigger basati su interazione, non solo “sei arrivato sulla pagina”.
• Gestione del focus tastiera: quando un modal si apre, il focus dovrebbe spostarsi dentro al canvas. Se non succede, chi naviga da tastiera (Tab) può non riuscire a interagire o a chiudere.
• Conflitti tra canvas annidati: aprire un canvas da dentro un altro canvas può generare comportamenti strani. Va sempre testato prima di pubblicare.

Lavorare bene con i canvas significa sfruttare le possibilità senza spezzare il flusso naturale di navigazione. Un canvas ben configurato è “invisibile” come meccanica e utile per davvero come contenuto.

I Divi Canvas sono uno strumento che cambia il modo in cui i designer costruiscono siti moderni, dinamici e interattivi. Con spazi di lavoro dedicati e separati per elementi off-canvas come menu, pop-up, sidebar e componenti riutilizzabili, i Canvas rendono il flusso più ordinato, migliorano la riusabilità dei componenti e aumentano la flessibilità dentro il Builder.

Checklist Prima di Pubblicare un Canvas in Divi

Prima di mettere online una pagina costruita con i canvas di Divi, conviene fare un controllo sistematico. Questa checklist copre le cose che saltano più spesso e che poi ti fanno perdere tempo in debug.

• Trigger configurati correttamente: verifica che ogni canvas si attivi nel contesto giusto (scroll, click, caricamento pagina) e che non ci siano sovrapposizioni.
• Comportamento di chiusura: controlla che i canvas con overlay (popup, slide-in) si chiudano in modo chiaro e funzionante, sia da tastiera che da touch.
• Overlay e z-index: assicurati che l’overlay non copra elementi critici come nav fisse o pulsanti di accessibilità.
• Breakpoint mobile: testa su almeno due dimensioni mobile. Verifica che nulla venga troncato e che i pulsanti siano raggiungibili senza scroll infinito.
• Cache e anteprima: dopo le modifiche, svuota la cache del plugin di caching e ricarica in navigazione privata per vedere la versione realmente pubblicata.
• QA pass finale: naviga come un utente reale (non loggato) e verifica che il canvas appaia, si chiuda e non interferisca con altri elementi.

Tenere questa lista a portata di mano prima di ogni pubblicazione riduce il rischio di errori visibili agli utenti e rende tutto più semplice da controllare. Se hai dubbi su un caso specifico, scrivimi.