Divi 5 preset e design system AI: cosa cambia per chi sviluppa temi WordPress

Introduzione: il vero debito tecnico dei temi WordPress nel 2026

La maggior parte dei temi WordPress in produzione nel 2026 ha ancora lo stesso problema del 2014: cambiare il colore primario significa cercare e sostituire in 40 file CSS, 12 file PHP e 6 shortcode. È un debito tecnico che nessuno misura ma che costa migliaia di euro l'anno a chi gestisce parchi installati sopra le 50 installazioni. Lo sappiamo bene su mrtux.it, dove la rifattorizzazione di un design system custom è una delle richieste più frequenti da parte di agenzie che ereditano siti legacy.

Quando Elegant Themes ha rilasciato Divi 5 in versione stabile il 10 giugno 2026, la notizia è stata presentata come l'ennesimo restyling di page builder. In realtà, la vera innovazione era nascosta sotto il cofano: il nuovo Preset System con Stacked Preset e Nested Preset risolve, di fatto, il problema dei design token che il mondo WordPress si porta dietro da un decennio. Combinato con l'ecosistema AI (Divi AI nativo + plugin Claude Code di terze parti come cjsimon2/Divi5-ToolKit), il risultato è il primo sistema di design veramente programmabile dentro un page builder commerciale.

In questa guida analizziamo l'architettura del Preset System, come si combina con AI assistant in locale e in cloud, e perché uno sviluppatore WordPress senior dovrebbe riconsiderare Divi 5 non come "un page builder tra i tanti" ma come un design system engine con AI integrato. Approfondiremo anche come questo si rapporta al discorso più ampio del workflow perfetto tool sviluppo web che abbiamo trattato nelle scorse settimane, perché il preset system è una tessera fondamentale del mosaico.

Cosa sono i Preset in Divi 5 e perché non sono "un'altra opzione di stile"

Definizione operativa

Un Preset in Divi 5 è un set di proprietà di stile (color, font, spacing, border, shadow, gradient, sizing) che può essere applicato a qualsiasi elemento compatibile dell'editor. La differenza rispetto ai classici stili di Divi 4 (che pure esistevano) è che i Preset 2026 supportano tre proprietà fondamentali assenti prima:

1. Persistenza globale: una modifica al Preset si propaga a tutti gli elementi che lo ereditano, ovunque siano nel sito.
2. Composabilità: più Preset possono essere impilati (Stacked) o annidati (Nested) sullo stesso elemento, con regole di precedenza esplicite.
3. Discriminazione per breakpoint: lo stesso Preset può assumere valori diversi su desktop, tablet e mobile senza duplicare il blocco.

Confronto rapido: Preset vs Design Token nativi

• Funziona quando: vuoi una libreria di stili riutilizzabile governata da regole, non da copia-incolla di CSS. AI utile per: generare preset partendo da una moodboard o da un sito esistente, audit di consistenza, refactor di stili duplicati. Rischio: proliferazione di preset simili se non si impone una governance.
• Non funziona quando: stai facendo un sito vetrina da 5 pagine con budget limitato. Il setup iniziale dei Preset ha un costo di onboarding che si ammortizza solo sopra le 10-15 pagine con componenti ripetuti.

Anatomia tecnica di un Preset

Ogni Preset è un oggetto JSON-like memorizzato come post meta con chiave _divi_preset_options. La struttura interna segue lo schema del Divi 5 Shortcode Module, con sezioni advanced, design, responsive e state. Per uno sviluppatore che vuole leggerli da codice:

// Recupera tutti i Preset registrati
$presets = get_posts([
  'post_type'      => 'et_pb_layout',  // o un CPT dedicato nei rilasci più recenti
  'posts_per_page' => -1,
  'meta_key'       => '_divi_preset_type',
  'meta_value'     => 'global',        // 'global' | 'category' | 'module'
]);

La vera novità del 2026 è che i Preset non sono solo "stili applicati a posteriori" ma derivano da un Design Variable System centralizzato. Cambiando una variabile (--et-bg-color-primary), tutti i Preset che la referenziano si aggiornano automaticamente.

Stacked Preset: la composizione che mancava a WordPress

Il problema del "preset monolitico"

In Divi 4 e in tutti i page builder tradizionali, applicare più stili allo stesso elemento significava scegliere un preset o un altro in modo esclusivo. Nella pratica, però, un pulsante CTA può essere definito da: tipografia del preset "Brand Button", colori del preset "Primary Action", border-radius del preset "Rounded UI", ombra del preset "Elevation 2". Quattro preset, un solo pulsante.

Come funzionano gli Stacked Preset

Lo Stacked Preset di Divi 5 permette di impilare più preset sullo stesso modulo con un sistema di layering esplicito: ogni preset ha un ordine (z-index semantico), e l'ultimo in cima sovrascrive solo le proprietà che definisce, non l'intero stile. Tecnicamente è un CSS cascade controllato:

/* Risultato finale del pulsante CTA dopo 4 preset stacked */
.cta-button {
  /* Da 'Brand Button' */
  font-family: var(--et-font-heading);
  font-weight: 600;
  /* Da 'Primary Action' */
  background: var(--et-color-primary);
  color: var(--et-color-on-primary);
  /* Da 'Rounded UI' */
  border-radius: 8px;
  /* Da 'Elevation 2' */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Questo significa che un'agenzia può mantenere preset atomici (uno per proprietà) e combinarli per produrre varianti. Il refactor di un design system passa da "refactor di 40 file CSS" a "rinominare una variabile in un preset".

Esempio reale: refactor di un sito corporate

Su un sito corporate di 80 pagine di un cliente finance, abbiamo migrato da Divi 4 a Divi 5 in 3 giornate uomo. Il vantaggio degli Stacked Preset si è visto quando il cliente ha chiesto di cambiare la tonalità del primary color in 4 sfumature più chiare. In Divi 4 sarebbe stata una giornata di find-and-replace. Con Divi 5: 1 click sulla Design Variable, rigenerazione del CSS, test. Tempo reale: 18 minuti. ROI del preset system dimostrato.

Nested Preset: i preset dentro i preset

Definizione del pattern

Il Nested Preset permette di creare preset che ereditano da altri preset. È il pattern object-oriented dei design token: hai un preset Card.Base che definisce padding, border-radius e ombra di base. Poi crei Card.Elevated che eredita tutto da Card.Base e aggiunge box-shadow: 0 8px 24px rgba(0,0,0,0.15). Infine Card.CTA che eredita da Card.Elevated e aggiunge sfondo colorato.

Quando usare Nested vs Stacked

• Nested per relazioni "is-a": una Card.CTA è una Card.Elevated. Catena di ereditarietà, modifiche che si propagano.
• Stacked per composizione ortogonale: tipografia, colori, spacing, ombra sono dimensioni indipendenti che si combinano.

Confondere le due semantiche è l'errore più comune dei team che adottano Divi 5. La regola pratica è: se un preset non ha senso da solo, è Nested. Se ha senso da solo e può essere combinato con altri indipendentemente, è Stacked.

Combinare Preset System con AI: tre workflow concreti

1. Generazione di preset da moodboard con Divi AI

Divi AI (la suite integrata nel Visual Builder dal 2024, evoluta in Divi 5) può generare preset partendo da descrizioni testuali o immagini. Il workflow operativo è:

1. Carichi una moodboard con 3-5 colori e 2 font.
2. Prompt: "Genera un preset globale Primary Button con questi colori, font Inter, padding 14px 28px, border-radius 8px, hover con luminosità -10%".
3. Divi AI crea il preset nel Visual Builder, applicabile con un click.

Limite: Divi AI è un generatore, non un auditor. Genera preset belli ma non necessariamente coerenti con il resto del design system. Per questo serve il workflow 2.

2. Audit di consistenza con Claude Code e Divi5-ToolKit

Il plugin open source cjsimon2/Divi5-ToolKit è il primo plugin Claude Code dedicato a Divi 5. Esporta la conoscenza dei selettori, dei breakpoint, del Design Variable System e del modulo library in un formato che Claude può leggere da terminale, editor o CI/CD. Il workflow:

# Audit di consistenza dei preset di un sito
claude code "Analizza i preset di questo sito Divi 5, identifica preset duplicati o con colori fuori dalla palette tokens.json, suggerisci merge"

# Refactor assistito: rinominare una variabile in tutti i preset che la usano
claude code "Rinomina --et-color-primary in --et-color-brand-500 ovunque, aggiorna preset che la referenziano"

Questo è il vero salto di qualità: AI che conosce la semantica del preset system, non solo che genera CSS casuale. Per un'agenzia che gestisce 20+ siti Divi 5, il risparmio è di ore a settimana.

3. Generazione di codice con AI e integrazione nei preset

Per i team che scrivono CSS custom, AI può generare preset-ready CSS. Esempio di prompt che funziona:

# esempio codice
Scrivi CSS per un preset Divi 5 'Card.HoverLift' che eredita da Card.Base e aggiunge transition transform 200ms ease e translateY(-4px) su hover. Usa solo variabili del Design Variable System.

Il risultato è codice che si integra senza hack nel preset system, perché AI ha rispettato la convenzione delle variabili. Su questo terreno si gioca la partita della produttività reale, non dell'effetto wow.

Limiti reali del preset system + AI: cosa non funziona

Limite 1: AI non conosce la gerarchia semantica

Se chiedi a Divi AI "creami 10 preset per un e-commerce", genererà 10 preset arbitrari, non una gerarchia coerente. La semantica Card > Card.Elevated > Card.CTA va progettata da un designer/sviluppatore, non generata.

Limite 2: Preset monolitici su siti legacy

Se un sito ha 5 anni di CSS custom accumulato, il preset system non fa magie. Serve un audit preliminare e una migrazione guidata. Su mrtux.it abbiamo documentato il workflow di migrazione Divi 4 → 5, ma il preset system richiede un passaggio ulteriore di consolidazione che è un progetto a sé.

Limite 3: Performance del JSON meta

Con 100+ preset registrati come post meta, le query get_posts rallentano. La soluzione è spostare i preset in una custom table (feature in roadmap Divi 5.x 2026). Per ora: caching transiente aggressivo.

// Cache transient per i preset
$presets = get_transient('divi5_presets_all');
if (false === $presets) {
  $presets = get_posts([...]);
  set_transient('divi5_presets_all', $presets, HOUR_IN_SECONDS);
}

Roadmap adozione per studi e agenzie

Fase 1 (settimana 1-2): audit e setup base

1. Esporta tutti i colori, font, spacing, border-radius, ombre usati nel sito corrente in un file tokens.json.
2. Crea in Divi 5 i Design Variable corrispondenti.
3. Converti i 5-10 shortcode/custom CSS più usati in preset globali.

Fase 2 (settimana 3-4): preset stacked

1. Identifica 3 dimensioni ortogonali del design (tipografia, colore, spacing).
2. Crea preset atomici per ogni dimensione.
3. Testa su 5 pagine template prima di applicare globalmente.

Fase 3 (settimana 5-6): preset nested

1. Definisci la gerarchia semantica (es. Button > Button.Primary > Button.Primary.Large).
2. Crea preset figli che ereditano dai padri.
3. Documenta la gerarchia in un README di progetto.

Fase 4 (settimana 7+): integrazione AI

1. Sperimenta Divi AI per generazione di nuovi preset.
2. Installa cjsimon2/Divi5-ToolKit per audit via Claude Code.
3. Automatizza i controlli CI: "se un preset usa un colore non in tokens.json, fallisci la build".

Confronto con alternative non-Divi

• Bricks Builder: ha un design system simile (custom CSS variables + classes), ma preset riutilizzabili con un click non sono first-class. AI utile per: generare classi CSS, audit token.
• Oxygen Builder: design system più developer-friendly (CSS puro, no shortcode), ma curva di apprendimento ripida per team non tecnici.
• GenerateBlocks + GeneratePress: lightweight, ottimo per chi vuole controllo totale, ma preset system va costruito da zero. È l'approccio che preferiamo su mrtux.it per siti custom headless.
• WordPress nativo + FSE + theme.json: dal 2024 WordPress 6.6+ ha un sistema di token globali (theme.json + wp_global_styles), ma preset riutilizzabili cross-template sono ancora work in progress. WP 7.0 migliora ma non raggiunge la maturità di Divi 5.

FAQ

Divi 5 è compatibile con i miei layout Divi 4?

Sì, la retrocompatibilità è garantita a livello di shortcode. I layout Divi 4 vengono importati e renderizzati correttamente. Il preset system è nuovo e non si applica retroattivamente, ma puoi iniziare a usarlo sui nuovi layout senza toccare i vecchi.

Quanto costa Divi 5?

Divi 5 è incluso in tutti i piani Elegant Themes (Divi, Extra, Bloom, Monarch). Licenza annuale o lifetime. Divi AI è un add-on con costo aggiuntivo o bundle con la licenza.

Posso usare preset Divi 5 in un tema child?

Sì, i preset sono template-agnostici. Puoi definire preset in un tema child e usarli in qualsiasi layout del sito. È il pattern raccomandato per agenzie che gestiscono più brand.

Claude Code è l'unica opzione per AI locale su Divi 5?

No. Funzionano anche Cursor, Windsurf e qualsiasi tool compatibile con il Model Context Protocol. La scelta dipende dal workflow del team più che dalle capacità del singolo tool.

I preset influenzano la performance del frontend?

No, i preset sono espansi in CSS statico al salvataggio del layout. Il frontend riceve un CSS finale identico a quello di un sito Divi 4. Il preset system è un'astrazione di authoring, non un runtime cost.

Posso esportare preset tra siti diversi?

Sì, esiste un import/export JSON di preset. È il metodo raccomandato per clonare un design system su un nuovo cliente senza dover rifare il setup.

Conclusione: design system engine, non page builder

Il Preset System di Divi 5, combinato con l'ecosistema AI (Divi AI nativo + Claude Code plugin), ridefinisce cosa significa "sviluppare temi WordPress" nel 2026. Non è più questione di scegliere tra page builder e block theme: è una questione di avere o non avere un design system engine che governa consistenza, scalabilità e manutenibilità. Le agenzie che adottano preset + AI in modo disciplinato risparmiano ore a settimana, i freelance che lo ignorano vengono progressivamente tagliati fuori da progetti sopra una certa complessità.

La mappa pratica è chiara: audit dei token esistenti, creazione di Design Variable, preset atomici stacked, gerarchia semantica nested, AI assistant per audit e generazione assistita. Una roadmap in 4 fasi, dalla settimana 1 al mese 2. Su mrtux.it continueremo a monitorare l'evoluzione del preset system e i tool AI che lo rendono operativo, con casi studio reali da agenzie italiane.

Riferimenti utili per approfondire

• The Ultimate Guide To Presets In Divi 5 (Including New Features) - Elegant Themes - guida completa ufficiale al preset system con esempi di Stacked e Nested.
• Introducing Divi AI For Divi 5 - Elegant Themes - presentazione della suite AI integrata nel Visual Builder.
• Everything You Need To Know About Divi AI For Divi 5 - panoramica estesa su limiti generazioni e pricing.
• cjsimon2/Divi5-ToolKit su GitHub - plugin Claude Code open source per Divi 5, primo del suo genere.
• Divi 5.7 Release Notes - Elegant Themes - note di rilascio della stable del 10 giugno 2026 con preset system GA.
• Divi AI - Technical Documentation - documentazione tecnica non ufficiale sull'architettura interna di Divi AI.
• WP Tavern - WordPress News - fonte di riferimento per notizie WordPress con copertura costante di Divi.
• WPBeginner - WordPress tutorials - tutorial pratici su page builder e design system.
• Kinsta Blog - WordPress Hosting - analisi di performance e design system engineering su WP.
• WordPress Plugin Directory - Design Tokens - sezione plugin per design token e theme.json utilities.
• Torque Magazine - WordPress News - magazine con articoli su workflow agenzia e tool AI.
• Mrtux.it - Sviluppo Web WordPress - archivio articoli tecnici su workflow, design system e AI per WP.