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

Questa guida è tecnico-economica, non una recensione. Ho passato in rassegna SeedProd WPVibe, Elementor AI, Divi AI, Beaver Builder AI mode, Bricks AI e i nuovi player verticali (ZipWP, WP Chef, Coursebox) basandomi sulla documentazione ufficiale 2026, sui changelog pubblici e sui report delle agenzie con cui lavoro. Lo schema è una matrice decisionale a sei dimensioni: qualità output AI, integrazione con stack WP, costi reali a 12 mesi, lock-in, governance del team e idoneità per profilo di utilizzo. Su mrtux.it abbiamo già coperto l'evoluzione dei temi AI, i page builder nell'era AI e gli App Kit: qui ci concentriamo sul confronto ragionato per aiutare chi deve scegliere adesso, non tra sei mesi.

I sei profili di utilizzo che cambiano la scelta

Prima di parlare di vendor serve il framework. Un AI website builder è un prodotto, non una magia. Ha casi d'uso in cui eccelle e casi in cui è una perdita di tempo. Ho individuato sei profili reali che ricorrono nelle agenzie con cui lavoro, ciascuno con una diversa combinazione di volumi, qualità, governance e costi accettabili.

Profilo 1: Freelance 1-2 siti/mese

Volume basso, qualità alta, costo contenuto. Il freelance usa l'AI website builder per accelerare il "primo render" di un sito vetrina per un piccolo cliente locale, poi rivede tutto a mano. Il margine è nel tempo risparmiato sul draft iniziale, non nella qualità dell'output AI.

• Cosa serve: prompt design assistito, generazione immagini integrata, copia modificabile senza lock-in.
• Cosa NON serve: white-label, governance team, integrazione CRM, API headless.
• Budget accettabile: 0-50 €/mese.

Profilo 2: Piccola agenzia 5-15 siti/mese

Volume medio, qualità alta, costo ricorrente sotto i 200 €/mese. L'agenzia vuole accelerare il "primo render" e poi fare il resto a mano. Il focus è su velocità di consegna, non su automazione end-to-end.

• Cosa serve: template AI differenziati per settore (ristoranti, studi medici, immobiliare), clonazione tra siti dello stesso cliente, esportazione pulita del codice.
• Cosa serve secondario: governance minima sui crediti AI per evitare sforamento budget.
• Budget accettabile: 100-300 €/mese totali (non per sito).

Profilo 3: Media agenzia 15-50 siti/mese

Volume alto, qualità alta, costo ricorrente 500-2.000 €/mese, governance team. Qui l'AI website builder diventa un moltiplicatore di produttività, non un giocattolo. Serve white-label, gestione crediti per progetto, export di tutto il codice, integrazione con stack WP esistente (theme custom, plugin proprietari).

• Cosa serve: API headless, governance crediti AI, white-label, account management dedicato.
• Cosa serve secondario: integrazione con Figma, supporto CSS Grid, generazione prompt library riutilizzabile.
• Budget accettabile: 500-2.000 €/mese.

Profilo 4: Software house 50+ siti/mese o gestione flotte

Volume enterprise, qualità alta su template, governance forte. L'AI website builder è una fabbrica, non un tool creativo. La metrica è sites-shipped/mese per developer.

• Cosa serve: CLI, deploy automation, integrazione CI/CD, governance per sviluppatore, account manager dedicato.
• Cosa serve secondario: AI model swap (per evitare lock-in su OpenAI), audit log delle generazioni.
• Budget accettabile: 2.000-10.000 €/mese.

Profilo 5: Agenzia white-label per terze parti

Qui l'AI website builder è un prodotto che rivendi ai tuoi clienti con il tuo brand. Il focus è sul pannello clienti, sulla fatturazione e sulla governance multi-tenant.

• Cosa serve: white-label completo, pannello clienti, billing automatico, governance multi-tenant.
• Cosa serve secondario: reportistica per cliente, gestione domini custom.
• Budget accettabile: 500-3.000 €/mese + ricarico al cliente finale.

Profilo 6: Sviluppatore singolo / studio tecnico

Volume basso, qualità massima, costo contenuto, focus su developer experience. L'AI website builder è un acceleratore per il primo render e per la generazione di shortcode/ACF, non un sostituto del tema custom.

• Cosa serve: export codice pulito, hook PHP personalizzabili, integrazione con ACF/Meta Box.
• Cosa serve secondario: generazione CSS Grid e Flexbox puliti, supporto theme.json.
• Budget accettabile: 0-100 €/mese.

I sei player del 2026 a confronto

Il mercato si è consolidato. Sono sei i player che vale la pena considerare nel 2026, ciascuno con un posizionamento distinto. Non c'è un vincitore assoluto: c'è il player giusto per il profilo giusto.

1. SeedProd WPVibe (plugin AI conversazionale)

Posizionamento: AI assistant integrato nel page builder SeedProd. WPVibe gira su MCP (Model Context Protocol) e permette di generare landing page, sezioni e copy parlando con Claude o ChatGPT direttamente dall'editor. È la scelta naturale per agenzie 5-15 siti/mese che vogliono un AI assistant integrato con il flusso di lavoro esistente, senza dover riscrivere il proprio stack.

• Punti di forza: integrazione nativa con SeedProd, MCP server esposto, sandbox temi, whitelist WP-CLI, draft di default prima della pubblicazione. Cfr. la nostra analisi dedicata.
• Limiti: legato all'ecosistema SeedProd, governance limitata su multi-cliente.
• Costo reale anno 1: 99 € plugin + 240 € provider AI = ~340 €/anno per 1 licenza.
• Profilo ottimale: piccola agenzia 5-15 siti/mese che usa già SeedProd.

2. Elementor AI (AI integrato nel page builder)

Posizionamento: AI generativa integrata in Elementor. Editor visuale + prompt per generare sezioni, copy, immagini, codice CSS. È la scelta per agenzie con volumi medio-alti che hanno già standardizzato su Elementor e vogliono accelerare senza stravolgere il workflow.

• Punti di forza: integrazione con il più grande page builder del mercato (13%+ del web, come raccontato da Miriam Schwab su WP Tavern #203), generazione immagini, CSS code generation, prompt history.
• Limiti: qualità output AI media, dipendenza dal vendor, costo per site.
• Costo reale anno 1: 240 € Elementor Pro + 220 € AI add-on = ~460 €/anno per 25 siti.
• Profilo ottimale: media agenzia 15-50 siti/mese con stack Elementor.

3. Divi AI (AI integrato in Divi 5)

Posizionamento: AI integrato nel page builder Divi 5, con preset system. È la scelta naturale per agenzie con design system articolato che vogliono AI + preset come leva di accelerazione. La combo preset + AI è ciò che distingue Divi nel 2026.

• Punti di forza: preset system (Stacked + Nested), design variables, generazione immagini e copy in linea, supporto custom CSS. Il preset system è un moltiplicatore di velocità quando hai un design system maturo. Approfondito nella guida Divi 5 preset.
• Limiti: vincolato all'ecosistema Divi, governance team limitata.
• Costo reale anno 1: 249 € Divi (annuale) + 0 € AI integrato = ~250 €/anno.
• Profilo ottimale: agenzie 5-50 siti/mese con forte componente design system.

4. Beaver Builder AI mode

Posizionamento: AI conversazionale integrato in Beaver Builder, con approccio "aspetta e integra bene" rispetto a Elementor "integra presto". È la scelta per agenzie che preferiscono stabilità e qualità output sopra la velocità di adozione.

• Punti di forza: output AI più curato, integrazione stabile, supporto team, AI non sperimentale. La posizione del co-founder Robby McCullough su WP Tavern #214 è esplicita: meglio adottare AI quando maturo che rincorrere la novità.
• Limiti: meno template AI pronti rispetto a Elementor, generazione immagini limitata.
• Costo reale anno 1: 399 € Beaver Builder (agency) + 0 € AI integrato = ~399 €/anno.
• Profilo ottimale: agenzie che privilegiano stabilità e qualità output.

5. Bricks AI (AI integrato in Bricks Builder)

Posizionamento: AI integrato in Bricks Builder, con focus su performance e developer experience. È la scelta naturale per agenzie e sviluppatori che usano Bricks e vogliono AI senza appesantire la pipeline.

• Punti di forza: performance nativa (Bricks genera HTML più leggero di Elementor), AI integrato, generazione CSS Grid, supporto ACF/Meta Box, theme builder completo.
• Limiti: comunità più piccola, governance team limitata.
• Costo reale anno 1: 239 € Bricks (single, lifetime updates) + 0 € AI integrato = ~239 €/anno se paghi annuale.
• Profilo ottimale: agenzie 5-30 siti/mese attente a performance.

6. ZipWP (AI-first website builder)

Posizionamento: AI-first website builder pensato per generare siti completi in pochi minuti. È la scelta per agenzie ad alto volume con profilo "fast turnaround" e per chi fa siti one-shot per piccoli clienti.

• Punti di forza: generazione sito completo in 60 secondi, 10.000+ starter templates AI, hosting opzionale integrato, white-label disponibile, pricing per sito.
• Limiti: qualità output AI variabile, governance limitata, ideale per vetrina non per custom complessi.
• Costo reale anno 1: 240 € (12 siti/mese) + 120 € provider AI opzionale = ~360 €/anno.
• Profilo ottimale: piccola agenzia con profilo "fast turnaround" o freelance che fanno siti one-shot.

Matrice decisionale: qualità output vs integrazione vs costo

Per orientare la scelta ho costruito una matrice ragionata. Non è una classifica, è uno strumento per abbinare profilo di utilizzo a player. I punteggi sono su scala 1-10, basati sull'uso reale che ne ho visto fare.

Qualità output AI

Quando l'output AI è il cuore del lavoro (landing page one-shot, generazione copy, immagini), la qualità conta sopra ogni altra cosa. Ecco come si posizionano i player.

• Beaver Builder AI: 8/10. Output più curato, meno allucinazioni su copy, immagini decenti.
• Bricks AI: 7.5/10. Buon copy, CSS generato pulito, immagini discrete.
• Divi AI: 7/10. Buon copy, immagini in linea con la qualità del prompt, CSS discreto.
• SeedProd WPVibe: 6.5/10. Copy discreto, dipende molto dal prompt engineering dell'utente.
• Elementor AI: 6/10. Copy standard, immagini sufficienti, CSS da rivedere.
• ZipWP: 5.5/10. Generazione veloce, qualità sufficiente per vetrina one-shot, non per siti premium.

Integrazione con stack WP esistente

Se hai già un tema custom, plugin proprietari, ACF field groups, l'integrazione conta. Ecco come si comportano.

• Bricks AI: 9/10. Supporto ACF nativo, Meta Box, hook PHP, theme builder completo.
• Beaver Builder AI: 8/10. Theme builder maturo, supporto ACF, hook PHP completi.
• Elementor AI: 7.5/10. Integrazione con ACF via addon, hook PHP completi, ecosistema vasto.
• Divi AI: 7/10. Theme builder Divi-only, hook limitati, integrazione ACF via plugin terzi.
• SeedProd WPVibe: 6.5/10. Pensato per landing page, integrazione WP limitata al di fuori di SeedProd.
• ZipWP: 5/10. Genera siti completi, integrazione con stack esistente limitata.

Costo reale a 12 mesi per agenzia 25 siti/mese

I costi sono calcolati su un'agenzia tipo da 25 siti/mese con stack WP managed e AI integrato. Includono licenza plugin, provider AI (stima 50 query/giorno per agenzia da 5 developer) e overhead amministrativo.

• Divi AI: ~250 €/anno (1 licenza lifetime, AI incluso).
• Bricks AI: ~480 €/anno (1 licenza, AI incluso).
• Elementor AI: ~720 €/anno (1 licenza Expert + AI add-on).
• Beaver Builder AI: ~799 €/anno (1 licenza Agency, AI incluso).
• SeedProd WPVibe: ~840 €/anno (1 licenza Elite + provider AI Claude/ChatGPT).
• ZipWP: ~960 €/anno (piano 12 siti/mese + provider AI opzionale).

Il workflow ibrido: AI per il draft, mano per il refactor

Una delle trappole più costose è trattare l'output AI come "sito finito". Non lo è, e non lo sarà per i prossimi 2-3 anni. Il pattern produttivo reale che vedo funzionare nelle agenzie è ibrido.

Step 1: AI per il draft (50% del tempo risparmiato)

L'AI website builder genera landing page completa in 5-15 minuti partendo da un prompt strutturato. Il prompt deve contenere: settore del cliente, target audience, tre benefici chiave, tone of voice (es. "professionale ma accessibile"), call to action principale, struttura sezioni attesa.

Il prompt template che uso di solito, generato come snippet JSON per essere riusato.

{
  "settore": "studio odontoiatrico",
  "target": "famiglie 30-55 anni, quartiere semicentro",
  "benefici": ["prima visita gratuita", "pagamenti rateali", "tecnologia laser"],
  "tone": "professionale ma accessibile, no linguaggio medico",
  "cta": "Prenota prima visita",
  "struttura": ["hero con CTA", "3 benefici con icona", "team", "recensioni Google", "mappa", "footer contatti"]
}

Step 2: Mano per il refactor (50% del tempo)

Una volta generato il draft, lo sviluppatore umano interviene su: ottimizzazione performance (immagini WebP, lazy loading, critical CSS), accessibilità WCAG 2.2, schema markup local business, integrazione CRM del cliente, ottimizzazione SEO on-page con pipeline GEO/AEO/SEO unificata, e governance editoriale per citabilità AI.

Step 3: Governance dei crediti AI

Una delle trappole ricorrenti è lo sforamento dei crediti AI. Su 25 siti/mese con AI integrato, una singola agenzia può bruciare 200-400 €/mese di API in 2-3 giorni se non c'è governance. Il workflow minimo prevede: budget mensile per developer (es. 50 €/settimana), prompt library condivisa per evitare duplicati, monitoraggio settimanale con WP-CLI o dashboard custom, alert email se burn rate > 80% del budget mensile.

Caso studio: agenzia 8 persone, 35 siti/mese, stack Divi 5

Stack operativo reale basato su un'agenzia italiana 8 persone (4 dev, 2 designer, 2 commerciali) che ha adottato Divi 5 + Divi AI come standard nel Q1 2026.

Prima dell'adozione (Q4 2025)

Stack: Elementor Pro + Tema custom su 30% dei siti, GenerateBlocks sul resto. Tempo medio draft landing page: 6-8 ore dev senior. Costo AI: 0 € (uso sporadico di ChatGPT free). Sites-shipped/mese per dev: 3-4.

Dopo l'adozione (Q2 2026)

Stack: Divi 5 + Divi AI + preset system custom (5 design system, 30 preset nested). Tempo medio draft: 1.5-2 ore dev senior. Costo AI: 240 €/anno Divi AI integrato + 30 €/mese prompt management custom = ~600 €/anno. Sites-shipped/mese per dev: 6-7.

Risultati a 6 mesi

• Time-to-market landing page: -65% (da 6-8 ore a 1.5-2 ore).
• Sites-shipped/mese per dev: +85% (da 3-4 a 6-7).
• Marginalità agenzia: +18 punti percentuali (i dev fanno più siti con stessa retribuzione).
• Costo AI overhead: 5% del revenue da agency fee AI, ben sotto il target 10%.
• Insoddisfazione clienti: invariata (i clienti finali non vedono l'AI, vedono il sito finito).

Le 5 trappole da evitare nella scelta

L'adozione di un AI website builder cade su pattern ricorrenti. Ecco le cinque trappole che vedo più spesso, in ordine di costo.

1. Scegliere per popolarità, non per profilo

Elementor è il page builder più diffuso, ma non è detto sia il migliore per il tuo profilo. Se fai siti vetrina one-shot, ZipWP è più adatto. Se fai siti custom su misura, Bricks è superiore. La scelta va guidata dal profilo di utilizzo, non dal numero di installazioni.

2. Ignorare il costo del provider AI

I plugin "AI integrato" spesso si appoggiano a OpenAI o Anthropic, e il costo del provider è separato dalla licenza plugin. Un'agenzia 25 siti/mese può spendere 200-400 €/mese solo di API. Prima di scegliere un plugin, calcola il costo provider su un mese reale.

3. Sottovalutare il lock-in

L'output di un AI website builder è un sito WordPress, quindi il lock-in è basso sul core, ma alto su elementi specifici: shortcode proprietari, layout template, CSS custom generato dal plugin. Verifica sempre che l'export sia pulito e che il tema custom sia esportabile senza il plugin.

4. Governance zero sui crediti AI

Il primo mese con AI integrato in agenzia, di solito si sfora del 30-50% il budget previsto. Serve governance: budget per developer, alert su burn rate, prompt library condivisa per evitare duplicati, monitoraggio settimanale.

5. Aspettarsi qualità "production ready" dall'AI

L'output AI è un draft, non un sito finito. Se ti aspetti che il sito sia pronto alla pubblicazione dopo la generazione, rimarrai deluso. Il pattern produttivo è ibrido: AI per il draft, umano per il refactor. Punta al 50% di riduzione del tempo, non al 100%.

Roadmap 90 giorni: dalla scelta al primo sito AI-shipped

Una sequenza operativa per adottare un AI website builder senza bruciare sei mesi. Basata sul rollout reale dell'agenzia caso studio.

Fase 1 (giorni 1-15): scelta e setup

• Mappa i tuoi profili di utilizzo sui sei elencati sopra.
• Calcola il costo reale 12 mesi: licenza plugin + provider AI + governance.
• Setup ambiente di staging con il plugin scelto, genera 5 draft su brief reali.
• Valuta qualità output, governance, integrazione con stack esistente.

Fase 2 (giorni 16-45): pilot su 5 siti

• Identifica 5 clienti "low risk" (vetrina semplice, no ecommerce, no membership) per il pilot.
• Genera draft AI, refactor umano, pubblica. Misura tempo effettivo, qualità percepita dal cliente, sites-shipped per dev.
• Governance: budget settimanale per developer, prompt library condivisa, monitoraggio burn rate.

Fase 3 (giorni 46-90): rollout e iterazione

• Estendi il pilot a tutti i siti low risk. Tieni i clienti enterprise su workflow tradizionale finché non hai 3 mesi di dati.
• Misura KPI: tempo medio draft, marginalità, sites-shipped per dev, soddisfazione cliente.
• Itera su prompt library, preset design system, governance budget. Se il ROI è negativo, hai i dati per tornare indietro senza sensi di colpa.

FAQ: AI website builder per WordPress nel 2026

Qual è il migliore AI website builder per chi inizia adesso?

Dipende dal profilo. Per un freelance che fa 1-2 siti/mese, ZipWP è la curva di apprendimento più rapida. Per una piccola agenzia con stack SeedProd, WPVibe è l'estensione naturale. Per una media agenzia con stack Elementor, Elementor AI è l'opzione meno disruptive. Per chi cerca qualità output sopra ogni cosa, Beaver Builder AI è la scelta più stabile. Non esiste un "migliore" assoluto: esiste il "migliore per te".

L'AI website builder sostituisce lo sviluppatore?

No, lo affianca. Il pattern produttivo reale è ibrido: AI per il draft (50% del tempo), umano per il refactor (altro 50%). Su 8 ore di lavoro per una landing page, 3-4 ore sono draft AI e 4-5 ore sono refactor umano. Il risparmio è di 2-3 ore, non di 8. Cfr. la pipeline AI workflow agenzia per il setup completo.

Quanto costa davvero un AI website builder a 12 mesi?

Su un'agenzia 25 siti/mese il range è 250-1.000 €/anno. Il costo è dominato dal provider AI (ChatGPT/Claude), non dalla licenza plugin. Una singola agenzia con 5 developer che fanno 50 query/giorno spende 200-400 €/mese solo di API. La licenza plugin è il 20-30% del costo totale, il provider AI è il 60-70%, la governance è il 5-10%.

L'AI website builder genera siti accessibili WCAG 2.2?

Dipende dal plugin e dal refactor umano. La maggior parte dei plugin genera markup semantico decente ma non rispetta WCAG 2.2 AA out of the box. Serve un audit accessibilità post-generazione, e una correzione manuale su focus state, contrasto colori, navigazione da tastiera. La pipeline AI accessibilità è il framework di riferimento per andare oltre l'alt-text automatico.

I siti generati da AI vengono penalizzati da Google?

No, Google non penalizza i siti generati da AI, ma premia i contenuti utili. Un sito generato da AI senza refactor umano è di solito "non utile" secondo le linee guida Google (esperienza first-hand, expertise dimostrabile, fonti verificabili). Un sito generato da AI con refactor umano e arricchimento editoriale è indistinguibile da un sito scritto a mano, e performa allo stesso modo. Il problema non è l'AI in sé, è la qualità del refactor.

Serve un hosting particolare per l'AI website builder?

Sì, no, dipende. L'AI website builder richiede PHP 8.1+ e MySQL 8+ per gestire i layout generati. La maggior parte dei hosting WP managed (Kinsta, SiteGround, Cloudways) è ok. Se usi generazione immagini pesante, considera un hosting con edge cache (Cloudflare) per ridurre i tempi di TTFB sotto i 200ms richiesti per l'AEO infrastruttura.

Posso esportare un sito generato da AI in un altro page builder?

Dipende dal plugin. Bricks, Beaver Builder e Divi hanno export pulito verso HTML + CSS + JS riusabile. Elementor ha export con shortcode proprietari, quindi il porting è più complesso. ZipWP genera siti completi su hosting proprio, quindi l'export è un dump di file statici + database. Prima di scegliere un plugin, testa l'export su un sito pilota: è il modo migliore per evitare lock-in non dichiarato.

Conclusione operativa

Gli AI website builder WordPress nel 2026 sono una leva di produttività reale, non un trend passeggero. La scelta giusta dipende dal profilo di utilizzo, non dalla popolarità del vendor. I sei profili delineati (freelance, piccola/media agenzia, software house, white-label, sviluppatore) mappano su sei player distinti, ciascuno con un posizionamento unico. Il workflow operativo raccomandato è ibrido: AI per il draft, umano per il refactor, governance sui crediti AI. Su mrtux.it il framework si inserisce nella pipeline editoriale più ampia che include temi AI, page builder AI, App Kit, Divi 5 preset e AI workflow agenzia. L'adozione è una decisione di business, non tecnica: misura il ROI a 90 giorni, itera su prompt e governance, tieni i clienti enterprise su workflow tradizionale finché non hai i dati.

Riferimenti utili per approfondire

• WP Tavern #203 - Miriam Schwab on Elementor's Decade of Growth and the Future With AI - Contesto su Elementor 13% del web e strategia AI
• WP Tavern #214 - Robby McCullough on Beaver Builder, AI Hype, and Evolving WordPress Workflows - Posizione "aspetta e integra bene" di Beaver Builder
• WPVibe e MCP per WordPress: come gestire un sito intero parlando con Claude e ChatGPT - Approfondimento tecnico su WPVibe MCP server
• Page builder nell'era degli AI agent: sopravviveranno al prompt che genera un sito intero? - Analisi strategica page builder vs AI agent
• App Kit WordPress 2026: come gli starter kit AI cambiano il time-to-market - Framework App Kit per agenzie
• Divi 5 preset e design system AI: cosa cambia per chi sviluppa temi WordPress - Approfondimento preset system Divi 5
• AI workflow agenzia WordPress: come ri-progettare i processi nel 2026 - Workflow completo agenzia con AI
• Kinsta - 6 best WordPress AI website builders to try - Confronto indipendente Kinsta sui 6 player principali
• SeedProd WPVibe documentation - Documentazione ufficiale plugin AI conversazionale
• Bricks Builder AI features - Feature AI integrato in Bricks 2026
• Divi 5 release notes - Changelog Divi 5.7 con AI e preset system
• Beaver Builder AI mode - Documentazione AI mode stabile 2026