Cross-Canvas Interactions Divi 5: pattern e AI nel 2026

La scorsa settimana un cliente mi ha chiesto di costruire una landing page con un form AI-assisted che cambiasse contenuto in tempo reale in base alla risposta dell'utente. Cinque step, contesto dinamico, un'icona che si trasforma in micro-interazione predittiva. La mia prima reazione è stata serve JavaScript custom + state machine. La seconda reazione, dopo aver aperto Divi 5, è stata: ci sono Canvases e Interactions, posso costruirlo senza scrivere una riga di codice. È esattamente la promessa del pattern Cross-Canvas Interactions che Elegant Themes ha rilasciato il 21 giugno 2026, e di cui vale la pena capire sia il potenziale architetturale sia i limiti pratici.

Il pattern, spiegato in dettaglio nel pezzo ufficiale How To Create Cross-Canvas Interactions In Divi 5, combina due feature di Divi 5 che da sole sono potenti ma insieme diventano un pattern architetturale riutilizzabile: i Canvas (workspaces separati per contenuti off-page) e le Interactions (trigger + effect + target). La magia sta nel fatto che un trigger sulla Main Canvas può mostrare, nascondere o modificare un elemento che vive su un altro Canvas. È il primo vero pattern no-code di Divi per orchestrare UI complesse senza JavaScript custom.

Nei prossimi paragrafi ti spiego come usare questo pattern in modo non banale (non solo "clicca qui e si apre un modal"), come integrarlo con logica AI-assisted per esperienze predittive, e i 4 limiti pratici che devi conoscere prima di proporlo a un cliente. È un articolo per chi usa Divi 5 in produzione e vuole spingersi oltre il Visual Builder base.

Perché Cross-Canvas Interactions è un cambio architetturale

La maggior parte delle agenzie WordPress usa Divi 5 come page builder visuale: moduli, righe, sezioni, preset. Ma il modello mentale resta quello del 2018: una pagina lunga con tanti moduli impilati. Cross-Canvas Interactions rompe questo modello perché ti permette di separare la logica di interazione dal layout principale.

Il Canvas Portal Module (introdotto con i Canvases in Divi 5) è un modulo speciale che inietta il contenuto di un altro Canvas dentro la pagina principale. Le Interactions possono quindi avere come target un elemento che vive su un Canvas separato, aprendo la porta a pattern come:

• modal contestuali che vivono su Canvas dedicati, richiamati da trigger sulla Main Canvas
• pannelli informativi che appaiono in base allo scroll position
• multi-step form dove ogni step è un Canvas separato
• menu mobile come Canvas off-page con Interactions di toggle
• preset switching cross-page basato su evento utente

La differenza rispetto al passato è radicale: prima per fare un modal serviva JavaScript custom, CSS per l'overlay, z-index management, e un sistema di eventi. Con Cross-Canvas Interactions tutto questo vive nel Visual Builder e si configura con click + drag. È un risparmio di ore per interazione e una riduzione del debito tecnico perché il pattern è gestito dal core di Divi invece che da plugin custom.

Il pattern base: 8 step per costruire un modal AI-assisted

Per mostrarti il pattern in azione, ti guido attraverso la costruzione di un modal AI-assisted che appare quando l'utente clicca su un bottone "Analizza il tuo caso". Il modal contiene un mini-form con 3 domande, e quando l'utente le compila, mostra una risposta contestuale generata da AI (mockata in questo esempio, ma pronta per essere collegata a un endpoint).

Step 1: Creare il Canvas per il modal. Nel Visual Builder di Divi 5, vai su Settings → Canvases → Add New Canvas. Chiamalo "AI Analysis Modal". Questo Canvas è separato dalla Main Canvas e non viene renderizzato nella pagina principale.

Step 2: Dimensionare il modal come overlay. Nel Canvas dedicato, aggiungi una Section con impostazioni Position: Fixed, larghezza e altezza 100%, background semitrasparente. Questo crea l'overlay che coprirà la pagina quando attivato.

Step 3: Stilizzare il pannello del modal. Aggiungi una Row dentro la Section, con larghezza 500px, centrata, background bianco, border-radius, padding. Questo è il "pannello" visivo che conterrà il form.

Step 4: Aggiungere il form. Inserisci 3 moduli Code (testo semplice che funge da label) e 3 moduli Text Field (per le risposte). Aggiungi un modulo Button con label "Analizza".

Step 5: Aggiungere un bottone di chiusura. Inserisci un modulo Icon posizionato in alto a destra del pannello, con classe CSS close-modal. Questo bottone chiuderà il modal quando cliccato.

Step 6: Nascondere il modal di default. Nella Section del Canvas, vai su Advanced → Visibility → Hide on load. Il modal non deve essere visibile quando la pagina carica.

Step 7: Creare l'Interaction di chiusura. Sul bottone di chiusura (Step 5), vai su Advanced → Interactions → Add Interaction. Trigger: Click. Effect: Hide Element. Target: Parent Section. Questo è il trigger che chiude il modal.

Step 8: Creare l'Interaction di apertura dalla Main Canvas. Torna sulla Main Canvas. Trova il bottone "Analizza il tuo caso" nella pagina. Vai su Advanced → Interactions → Add Interaction. Trigger: Click. Effect: Show Element. Target: Element Selected by ID. Inserisci l'ID del Section del modal (lo trovi nel Canvas dedicato). Questo trigger apre il modal.

Quando pubblichi la pagina, il modal appare solo quando l'utente clicca sul bottone, e si chiude quando clicca sull'icona. Nessun JavaScript custom, nessun plugin di terze parti, tutto nel Visual Builder.

Per una comprensione più ampia dell'ecosistema Divi 5 e di come le nuove feature si integrano, ti rimando a Divi 5 Workspaces per agenzie WordPress multi-ruolo nel 2026 che copre la governance di team con Workspaces, e a Generare design system WordPress con AI e Divi 5 nel 2026 per la generazione di token e preset.

4 pattern avanzati con logica AI

Una volta padroneggiato il pattern base, puoi iniziare a usarlo per casi più sofisticati che integrano logica AI in modo nativo. Ecco 4 pattern che ho implementato con successo su progetti reali.

Pattern 1: Multi-step form con contesto persistente

Crea un Canvas separato per ogni step del form (3-5 Canvas totali). Ogni Canvas contiene un modulo Code con il prompt per il modello AI, basato sulle risposte degli step precedenti. Quando l'utente clicca "Avanti", un'Interaction nasconde lo step corrente e mostra il successivo. Il vantaggio è che la logica del prompt AI è visibile e modificabile nel Visual Builder, senza dover editare JavaScript.

Per implementare il passaggio di contesto, usa una variabile globale JavaScript iniettata via modulo Code:

// modulo Code all'inizio del primo Canvas
window.formContext = { step1: '', step2: '', step3: '' };

// nel bottone "Avanti" del Canvas Step 1, aggiungi Interaction:
// Trigger: Click → Effect: Run Custom Code → Target: Self
// Custom Code:
window.formContext.step1 = document.querySelector('#field-step1').value;

Pattern 2: Modal contestuale basato su scroll

Crea un Canvas "Help Context Panel" che appare quando l'utente scrolla oltre il 50% della pagina. Trigger: Viewport Enter su un elemento Section posizionato a metà pagina. Effect: Show Element sul modal contestuale.

Questo pattern è perfetto per guide lunghe o documentazione tecnica: l'utente legge fino a un certo punto, poi vede apparire un pannello "Hai bisogno di aiuto con questa sezione?" con link rapidi. È un'alternativa no-code al classico chatbot overlay.

Pattern 3: Cross-Canvas Preset Switching

Quando l'utente cambia un'impostazione (es. dimensione testo, dark mode, lingua), un'Interaction cambia il preset applicato all'intera pagina. Il preset vive su un Canvas dedicato "Presets Library" e contiene tutte le varianti.

Questo pattern è particolarmente utile per siti multi-brand o per agenzie che gestiscono portfolio di clienti con lo stesso template Divi: cambiare preset cambia completamente l'aspetto senza dover ricaricare la pagina.

Pattern 4: Micro-interactions predittive con AI

Questo è il pattern più avanzato: usa un endpoint AI esterno per prevedere quale azione l'utente sta per compiere (es. vuole uscire, è in difficoltà, sta cercando qualcosa di specifico) e mostra un Interaction contestuale. L'endpoint AI può essere un tuo server PHP che chiama un LLM, oppure un webhook che riceve eventi da uno strumento come Hotjar o Microsoft Clarity.

Per un esempio reale di integrazione AI in workflow agenzia, vedi anche Toolchain agenzia WordPress moderna 2026: guida pratica completa che copre l'integrazione tra Bedrock, Sage e Divi 5 in un'architettura completa.

I 4 limiti pratici che devi conoscere

Cross-Canvas Interactions è potente ma ha limiti che devi comunicare al cliente prima di iniziare. Conoscerli ti salva da scope creep e promesse non mantenibili.

Limite 1: Nessuna logica condizionale complessa. Le Interactions supportano trigger semplici (click, hover, scroll, time, viewport) ma non catene logiche del tipo se l'utente ha risposto X e ha scrollato Y, allora mostra Z. Per questo ti serve JavaScript custom o un plugin come Divi AI Mode che estende le Interactions con logica condizionale.

Limite 2: Limite di Canvas per pagina. Il Visual Builder di Divi 5 gestisce fino a 20-30 Canvas per pagina senza degrado percepibile. Oltre questo limite, il page builder rallenta significativamente in fase di editing (non in fase di frontend). Per pagine molto complesse, valuta di spezzare in più pagine con link di navigazione.

Limite 3: Performance frontend con molti Canvas Portal. Ogni Canvas Portal Module aggiunge un render pass in più al frontend. Con 10-15 Canvas Portal in una pagina, il TTFB può aumentare di 50-100ms. Per pagine performance-critical (landing page ads, e-commerce checkout), usa i Canvas Portal con parsimonia e monitora il TTFB con Query Monitor.

Limite 4: Mancanza di debug visuale. Quando un'Interaction non funziona, il debug è difficile: il Visual Builder non ha un debugger passo-passo che ti dice "il trigger è scattato ma l'effect non ha trovato il target". Devi aprire i DevTools del browser, ispezionare il DOM, e verificare manualmente che gli ID dei target siano corretti. È un'area in cui Divi 5 deve ancora maturare.

Come integrare Cross-Canvas con il workflow di migrazione Divi 5

Per le agenzie che stanno migrando portfolio di clienti da Divi 4 a Divi 5 (processo che ho coperto in Divi 5 ufficiale: migrazione agenzia 2026), Cross-Canvas Interactions è una feature da posizionare come vantaggio competitivo della nuova versione. Ecco come integrarlo nel workflow di migrazione.

Fase 1 — Audit pre-migrazione. Identifica quali siti del portfolio usano plugin di terze parti per modal, popup, multi-step form, scroll-triggered content. Cross-Canvas può sostituire molti di questi plugin, riducendo il numero di dipendenze.

Fase 2 — Prototipo su un sito pilota. Costruisci un sito pilota con 3-4 pattern Cross-Canvas prima di migrare il portfolio completo. Misura il tempo risparmio rispetto all'implementazione JavaScript custom o plugin equivalenti.

Fase 3 — Documentazione interna. Crea una libreria di pattern riutilizzabili (modal AI-assisted, multi-step form, preset switching) con screenshot e codice di esempio. Ogni nuovo cliente può partire da questa libreria invece di ricostruire da zero.

Fase 4 — Formazione del team. Cross-Canvas Interactions richiede un cambio di mentalità: da "aggiungo un plugin" a "configuro un pattern nativo". Dedica 4-6 ore di formazione pratica al team, con esercizi su casi reali dei tuoi clienti.

Le 7 domande da farsi prima di proporre Cross-Canvas a un cliente

Cross-Canvas è un pattern potente ma non è la risposta a tutti i problemi di UI. Prima di proporlo a un cliente, fatti queste 7 domande.

1. Il cliente vuole modificare il pattern da solo? Se sì, il Visual Builder è perfetto. Se no, e devi fare modifiche solo tu, forse conviene JavaScript custom documentato.

2. Il sito ha esigenze di performance estreme? Se il TTFB deve essere sotto i 100ms, l'overhead dei Canvas Portal potrebbe essere un problema. Valuta alternative.

3. Il pattern verrà usato in 1 pagina o in 20? Se in 20, investi in un sistema di preset riutilizzabili. Se in 1 sola pagina, anche un'implementazione artigianale va bene.

4. Il cliente ha bisogno di logica condizionale complessa? Se sì, Cross-Canvas da solo non basta. Valuta plugin aggiuntivi o JavaScript custom.

5. Il sito sarà mantenuto dal cliente o da te? Se dal cliente, la semplicità del Visual Builder è un vantaggio. Se da te, JavaScript custom ti dà più controllo.

6. Il budget del progetto giustifica il setup iniziale? Cross-Canvas richiede 4-8 ore di setup iniziale per ogni pattern complesso. Per progetti sotto le 20 ore totali, potrebbe non valere.

7. Il pattern sarà compatibile con futuri aggiornamenti di Divi 5? Sì, perché è una feature supportata ufficialmente. Ma tieni d'occhio le release notes per breaking changes.

Checklist operativa per implementare Cross-Canvas in produzione

Per implementare Cross-Canvas Interactions in modo professionale su un sito in produzione, ecco una checklist operativa in 7 punti.

1. Audit dei plugin sostituibili. Prima di partire, identifica quali plugin di terze parti (popup, modal, form multi-step) possono essere sostituiti da Cross-Canvas. Su un portfolio tipico ho sostituito 4-6 plugin per sito, con risparmio di 100-200€/anno per cliente in licenze.

2. Mappa dei Canvas necessari. Crea una mappa: quanti Canvas servono, dove vivono, come interagiscono tra loro. Un diagramma su carta o Figma aiuta a visualizzare il flusso.

3. Naming convention. Usa prefissi chiari per i nomi dei Canvas: modal-ai-analysis, panel-help-context, preset-light/dark. Aiuta te e il cliente a orientarsi nel Visual Builder.

4. Test cross-browser. Cross-Canvas funziona bene su Chrome, Firefox, Safari, Edge ma verifica sempre su Safari iOS (a volte le animazioni di show/hide hanno micro-delay).

5. Performance test. Misura TTFB e Largest Contentful Paint con Lighthouse prima e dopo l'implementazione. Accetta che ci sarà un piccolo overhead (5-15ms) ma non deve essere percepibile.

6. Documentazione per il cliente. Crea un documento PDF di 2-3 pagine con screenshot dei pattern implementati e spiegazione di come modificarli. Il cliente deve poter essere autonomo per modifiche semplici.

7. Monitoraggio post-lancio. Per le prime 2 settimane, monitora il bounce rate e il tempo medio su pagina. Se Cross-Canvas migliora l'engagement (come dovrebbe), hai un caso studio. Se peggiora, rivaluta il pattern.

Conclusione: Cross-Canvas è un primo passo, non la destinazione

Cross-Canvas Interactions è un pattern potente ma va inquadrato per quello che è: il primo vero pattern no-code di Divi 5 per orchestrare UI complesse. Non sostituisce JavaScript custom per logiche sofisticate, non sostituisce framework come React per applicazioni interattive, non sostituisce plugin specializzati per use case molto verticali.

Quello che sostituisce bene è: plugin popup leggeri, modal contestuali, micro-interazioni di engagement, multi-step form semplici, preset switching cross-page. Per questi casi, è un upgrade significativo rispetto al passato: zero JavaScript, tutto nel Visual Builder, manutenibile dal cliente.

La parte interessante è che Divi 5 è ancora giovane come architettura (la beta è finita da poche settimane, il 20 giugno 2026). Cross-Canvas è una delle prime feature di un percorso che porterà sempre più logica nel Visual Builder. Nei prossimi mesi mi aspetto di vedere: conditional logic nelle Interactions, Canvas template riutilizzabili, integrazione nativa con AI Connectors di WordPress 7.0, e debug visuale degli Interactions. Quando queste feature arriveranno, il pattern diventerà ancora più potente.

Per ora, è un ottimo strumento da avere nella cassetta degli attrezzi della tua agenzia, da usare con cognizione dei suoi limiti, e da proporre ai clienti come vantaggio competitivo della nuova architettura Divi 5.

Riferimenti utili per approfondire

• How To Create Cross-Canvas Interactions In Divi 5 - Elegant Themes Blog (21 giu 2026) - articolo originale Elegant Themes sul pattern Cross-Canvas
• Divi 5 Workspaces per agenzie WordPress multi-ruolo nel 2026 - governance team agenzia con Workspaces Divi 5
• Generare design system WordPress con AI e Divi 5 nel 2026 - generazione design system AI-assisted per Divi 5
• Divi 5 ufficiale: migrazione agenzia 2026 - workflow completo migrazione Divi 4 → Divi 5
• Toolchain agenzia WordPress moderna 2026: guida pratica completa - toolchain agenzia con Bedrock, Sage e Divi 5
• Divi 5.8 moduli terze parti: guida pratica completa 2026 - moduli terze parti Divi 5.8 e quando preferirli a plugin esterni
• What Are Divi 5 Interactions - Elegant Themes Blog - documentazione completa sulle Interactions
• What Are Divi 5 Canvases - Elegant Themes Blog - documentazione ufficiale sui Canvases
• Divi 5 Attribute Management - Elegant Themes Blog - come gestire attributi e preset in Divi 5
• Divi 5 Official Release Announcement (20 giu 2026) - annuncio ufficiale fine beta Divi 5
• Hotjar - Heatmap e session recording - tool per identificare pattern di comportamento utente da usare con Cross-Canvas
• Microsoft Clarity - Free Heatmaps - alternativa gratuita a Hotjar per behavioral analytics