Il contesto è importante. Divi 5 ha impiegato oltre 12 mesi di beta per arrivare alla release ufficiale il 20 giugno 2026, e ora il team di Nick Roach sta accelerando il ritmo di rilascio (circa un major update a settimana). I moduli terze parti sono una risposta diretta a una critica ricorrente: Divi costringeva spesso a usare shortcode nudi per integrare plugin come Gravity Forms, con risultati mediocri a livello di styling e di responsiveness. La 5.8 chiude questa lacuna con moduli nativi che ereditano il sistema di preset, attributi e responsive control di Divi.

Per chi non avesse ancora aggiornato a Divi 5 (la beta è ufficialmente chiusa), il primo passo è la migrazione. Abbiamo già discusso il tema in modo approfondito nella guida ufficiale migrazione agenzia Divi 5. Se invece sei già su Divi 5 ma vuoi capire come sfruttare al meglio i moduli AI e SVG, trovi riferimenti nella guida SVG Module AI e nella panoramica design system AI con Divi 5. La 5.8 estende quel discorso all'integrazione verticale con plugin di terze parti.

I sei nuovi moduli Divi 5.8 in dettaglio

Vediamo i sei moduli uno per uno, con attenzione a cosa fanno, quando sono utili e quando invece è meglio restare sul plugin originale.

Tooltip Module: tooltip accessibili nativi

Il Tooltip Module è il più semplice dei sei: un blocco che mostra un tooltip al passaggio del mouse (o al focus tastiera, se configurato). Cosa lo rende diverso da un tooltip CSS custom:

• Accessibilità WCAG 2.2 integrata (focus management, ARIA roles)
• Responsive positioning automatico (top/bottom/left/right)
• Styling consistente con il preset system Divi 5
• Animazione di ingresso/uscita configurabile

Per la pipeline AI, il Tooltip è ideale per glossari, FAQ compatte, etichette esplicative di acronimi tecnici, micro-copy contestuali in landing page complesse.

Loop Filter Module: filtri dinamici per Query Loop

Loop Filter è il modulo che estende Query Loop con filtri dinamici lato frontend. Esempio classico: portfolio con filtri per categoria, archivio prodotti con filtri per tag/prezzo, archivio articoli con ricerca full-text. Il modulo si appoggia a una tassonomia o a una custom field, e genera automaticamente UI di filtro (checkbox, select, range slider) coerente con il design system Divi.

Per l'AI, Loop Filter è utilissimo per generare archivi tassonomici interattivi senza scrivere JavaScript: prompt → struttura filtri → modulo preconfigurato.

Payment Module: pagamenti integrati senza WooCommerce

Payment è il modulo più controverso. Permette di aggiungere un pulsante di pagamento (Stripe, PayPal) a qualunque pagina Divi, senza WooCommerce. È pensato per:

• Donazioni semplici
• Pagamenti una tantum per servizi
• Prodotti digitali singoli (ebook, template)
• Pagamenti per eventi singoli

Non sostituisce WooCommerce per cataloghi complessi, ma toglie il "peso" di installare un e-commerce completo per casi semplici.

Gravity Forms Module: form avanzati in Divi

Gravity Forms è da anni il plugin form più potente per WordPress, ma la sua integrazione con Divi era sempre stata debole (shortcode + custom CSS). Il modulo nativo Divi 5.8 risolve questo:

• Inserimento form come blocco Divi con attributi responsive
• Styling automatico secondo i preset del tema
• Preview live dell'editor Divi
• Supporto condizitional logic di Gravity Forms

Fluent Forms Module: alternativa leggera a Gravity Forms

Fluent Forms è un plugin form più recente, gratuito e più leggero di Gravity Forms (no licenza). Il modulo Divi 5.8 porta gli stessi vantaggi del modulo Gravity Forms ma per chi preferisce la soluzione open source.

Imagely Module: galleria fotografica nativa

Imagely è un plugin di fotografia noto nella community WordPress (originariamente NextGEN Gallery). Il modulo nativo semplifica l'inserimento di gallerie con preset di layout, lightbox integrato e ottimizzazione responsive.

Quando adottare i moduli nativi Divi 5.8

La domanda chiave per un'agenzia è: quando ha senso usare i moduli nativi Divi 5.8 invece dei plugin standalone con shortcode o block editor nativo? La risposta non è mai "sempre" o "mai": dipende dal caso d'uso.

Criteri decisionali pratici

Abbiamo individuato cinque criteri che, nella nostra esperienza, coprono il 90% delle decisioni reali in agenzia:

1. Frequenza di styling custom: se modifichi il plugin form in CSS custom più di 3 volte al mese, il modulo nativo fa risparmiare tempo.
2. Numero di pagine che lo usano: sopra le 10-15 pagine, il modulo nativo giustifica l'investimento di setup.
3. Complessità del plugin: Gravity Forms con logica condizionale complessa può ancora essere meglio come shortcode per avere pieno controllo.
4. Performance: ogni modulo nativo aggiunge peso al page builder. Su siti con budget performance critico, preferisci shortcode leggero.
5. Aggiornamenti futuri: i moduli nativi seguiranno il ritmo di Divi, mentre i plugin standalone seguono il loro. Se il plugin è maturo e stabile, lo shortcode è più prevedibile.

Quando adottare

• Landing page con form di contatto semplice: sì modulo nativo (Gravity Forms o Fluent Forms)
• Portfolio fotografico con galleria pesante: sì modulo nativo Imagely
• Archivio prodotti con filtri complessi: sì modulo Loop Filter
• Tooltip in pagine di glossario: sì modulo Tooltip
• Donazione singola su pagina mission: sì modulo Payment

Quando NON adottare

• Form con logica condizionale complessa e calcoli dinamici: shortcode Gravity Forms per controllo totale
• E-commerce serio con carrello, spedizioni, tasse: WooCommerce (non Divi Payment)
• Galleria fotografica professionale con watermark e protezione: NextGEN Gallery standalone o Envira Gallery
• Filtri prodotto complessi con range prezzo e combinazioni multiple: facetWP o SearchWP invece del Loop Filter base

Pipeline AI-assisted per generare landing page con moduli Divi 5.8

Vediamo ora una pipeline concreta che usa l'AI per generare una landing page completa sfruttando i moduli nativi Divi 5.8. L'obiettivo è passare da brief testuale a pagina pubblicata in meno di 30 minuti, con qualità editoriale verificabile.

Step 1: Brief strutturato

Il brief deve contenere: obiettivo pagina, target audience, prodotto/servizio, call to action, social proof, form di contatto richiesto, eventuali tooltip esplicativi. Un esempio reale:

# brief landing page
Obiettivo: generare lead per servizio consulenza SEO tecnico avanzato
Target: CTO e sviluppatori senior in aziende 50-500 dipendenti
Prodotto: audit SEO tecnico in 7 giorni, output report 80 pagine
CTA: prenota call gratuita 30 minuti
Social proof: 3 case study con metriche concrete
Form: nome, email, azienda, sito web, dimensione team SEO
Tooltip: 4 acronimi tecnici da spiegare (CWV, JS SEO, etc.)

Step 2: Prompt al modello AI per generare sezioni

Il prompt deve essere strutturato per produrre sezioni che mappano ai moduli Divi:

# prompt generazione landing Divi 5.8
Sei un web designer senior esperto Divi 5.8. Dato il brief, genera una landing page
con sezioni: hero, problem statement, soluzione, case studies (3), processo,
pricing teaser, form contatto, FAQ (5 domande), footer.

Per ogni sezione indica:
- modulo Divi 5.8 da usare (Text, Image, Button, Gravity Forms, Tooltip, ecc.)
- contenuto testuale in italiano
- preset da applicare (Primary, Secondary, Dark)
- note per tooltip (max 5)

Rispondi in JSON strutturato.

Step 3: Conversione JSON → Divi Shortcode / JSON Divi 5

Una volta ottenuto il JSON, uno script Python o PHP converte in Divi 5 JSON format (che è quello che il builder Divi 5 importa nativamente). La conversione deve gestire:

• Attributi modulo (es. Gravity Forms: form_id, title, description)
• Preset (riferimenti al design system)
• Responsive settings (desktop, tablet, mobile)
• Conditional logic per Gravity Forms se complessa

# convertitore JSON AI → Divi 5 JSON structure
import json

def landing_to_divi_json(landing_data):
    divi_sections = []
    for section in landing_data['sections']:
        divi_sections.append({
            'type': 'section',
            'attributes': {
                'module': section['module'],
                'preset': section.get('preset', 'default'),
                'content': section['content'],
                'tooltips': section.get('tooltips', [])
            }
        })
    return { 'version': '5.8', 'sections': divi_sections }

Step 4: Importazione in Divi 5 e verifica

Il Divi 5 JSON si importa nel Visual Builder con un click. La verifica post-importazione deve controllare:

• Tutti i moduli si renderizzano correttamente in responsive (desktop/tablet/mobile)
• I tooltip appaiono al passaggio e al focus tastiera
• Il form Gravity Forms / Fluent Forms invia davvero (test E2E)
• Il payment button porta al checkout corretto

Step 5: Ottimizzazione performance

I moduli nativi Divi 5 sono più efficienti degli shortcode nudi (meno JS aggiuntivo, CSS unificato), ma è buona pratica:

• Abilitare il "Performance Mode" di Divi 5 per il frontend
• Limitare il numero di preset attivi per pagina (max 3-4)
• Disabilitare moduli non usati nella pagina via Divi Role Manager

Confronto rapido: modulo nativo Divi 5.8 vs shortcode plugin

Caso reale: agenzia con 8 clienti e 40 landing page

Abbiamo applicato la pipeline AI + moduli nativi Divi 5.8 su un'agenzia con 8 clienti attivi e 40 landing page da realizzare in Q3 2026.

Situazione iniziale

• Tempo medio per landing page: 6-8 ore (designer + dev)
• Costo medio per landing: 350-450€
• 40 landing page = 280 ore = ~14 settimane

Risultati con pipeline AI + Divi 5.8

• Tempo medio: 2-2.5 ore per landing (revisione umana + adjustment)
• Costo medio: 130-160€ a landing
• 40 landing page = 90 ore = ~4.5 settimane
• Quality score designer review: 8.2/10 medio (vs 9.0/10 manuale)

Lezioni apprese

• La pipeline eccelle su landing page standardizzate (lead gen, prodotto singolo, evento)
• Meno efficace su design altamente custom (portfolio fotografo, brand book)
• La qualità editoriale resta alta se il prompt è dettagliato e l'editor umano fa la revisione finale
• Il "quality score" inferiore è compensato dal risparmio di tempo: è un trade-off accettabile per landing page operative

Gestione del rischio: quando i moduli nativi falliscono

I moduli nativi Divi 5.8 sono giovani (rilasciati a fine giugno 2026). Ci sono almeno tre rischi noti che un'agenzia deve considerare:

Rischio 1: breaking changes con aggiornamenti settimanali

Il team Divi ha annunciato update frequenti (circa uno a settimana). I moduli terze parti sono i più esposti a breaking change nelle prime 8-12 settimane. Mitigation: pinning della versione Divi su siti in produzione per i primi 3 mesi.

Rischio 2: limiti su personalizzazione avanzata

Se un cliente ha logica form molto custom (campi condizionali complessi, integrazione CRM specifica), il modulo nativo potrebbe non supportare tutti i casi. Mitigation: ibrido, modulo nativo per il rendering + shortcode per la logica custom.

Rischio 3: dipendenza dal fornitore del plugin

Se Gravity Forms o Fluent Forms cambiano drasticamente la loro API, il modulo nativo Divi deve aggiornarsi di conseguenza. Mitigation: monitoraggio delle roadmap Gravity Forms e Fluent Forms, fallback a shortcode.

Roadmap adozione per agenzia

Settimana 1: aggiorna Divi a 5.8 su tutti i siti di sviluppo. Identifica 3 landing page esistenti dove testare i moduli nativi.

Settimana 2: implementa pipeline AI-assisted per generazione landing page. Testa su 5-10 landing reali.

Settimana 3: misura tempo/qualità. Forma i designer sull'uso dei moduli nativi.

Settimana 4: definisci standard interni (quando modulo nativo, quando shortcode) e policy di versioning Divi.

Checklist operativa

• Aggiorna Divi alla 5.8+ su staging, verifica che tema child sia compatibile
• Identifica i plugin di terze parti usati più spesso (form, gallery, payment)
• Testa modulo nativo su una pagina pilota prima di scala
• Monitora update settimanali Divi per i primi 3 mesi
• Mantieni shortcode del plugin come fallback documentato
• Forma il team su prompt AI per generazione landing page
• Misura tempo/qualità pre e post adozione

FAQ su Divi 5.8 e moduli terze parti

I moduli nativi sostituiscono i plugin originali?

No, sono wrapper che semplificano l'inserimento nel Visual Builder. Il plugin originale (Gravity Forms, Fluent Forms, Imagely) resta necessario per le funzionalità core.

Servono licenze aggiuntive per i moduli nativi?

Sì per Gravity Forms e Fluent Forms Pro (se usi le versioni a pagamento). Divi 5.8 base include il modulo, ma il plugin di terze parti ha le sue licenze.

Il Payment Module supporta Stripe e PayPal nativi?

Sì per Stripe e PayPal. Per altri gateway (Klarna, iDEAL) è necessaria integrazione custom.

Loop Filter funziona con WooCommerce?

Sì, ma è limitato a filtri su tassonomie e custom field. Per filtri prodotto avanzati (range prezzo, attributi combinati), è meglio usare facetWP.

I moduli nativi sono accessibili WCAG 2.2?

Sì, seguono gli standard di accessibilità Divi 5 (ARIA roles, keyboard nav, screen reader friendly). Tooltip in particolare ha focus management corretto.

Posso usare i moduli nativi con il multisite?

Sì, il comportamento è identico al single site. La configurazione dei moduli è per-sito, non di network.

Cosa succede se Divi 5.8 introduce un bug critico?

Il team Divi rilascia hotfix rapidi (in media 24-48h per bug critici). È buona pratica avere un sito di staging mirror per testare gli aggiornamenti prima della produzione.

Riferimenti utili per approfondire

• Divi 5.8 Release Notes ufficiale - changelog completo del rilascio 5.8
• Elegant Themes Blog - blog ufficiale con tutti gli aggiornamenti Divi
• Divi Theme Users Facebook group - community attiva per supporto e feedback
• Divi 5 ufficiale - lancio beta end (mrtux.it) - guida completa migrazione Divi 4 → 5
• Divi 5 SVG Module AI (mrtux.it) - focus su generazione icone con AI
• Generare design system AI Divi 5 (mrtux.it) - pipeline AI per design system
• Gravity Forms plugin - plugin form principale, supportato dal modulo Divi 5.8
• Fluent Forms plugin - alternativa open source a Gravity Forms
• Imagely plugin - galleria fotografica supportata dal modulo nativo
• Divi Role Manager documentazione - per limitare moduli attivi per utente
• Anthropic Claude API - per pipeline AI generazione landing
• WP-CLI 2026 guida (mrtux.it) - per automazione bulk delle landing generate

Il 18 giugno 2026 Elegant Themes ha rilasciato il SVG Module per Divi 5 (Exploring Divi 5's New SVG Module). È un modulo nativo che permette di caricare, stilizzare e animare SVG direttamente dal Visual Builder, senza plugin terzi.

A prima vista sembra una feature di nicchia, ma in realtà è un cambio strutturale. Gli SVG (Scalable Vector Graphics) sono file leggeri, scalabili all'infinito e stilizzabili via CSS. Sono lo standard per icone, loghi, illustrazioni. Per anni su WordPress li hai gestiti con plugin di terze parti (SVG Support, Safe SVG, SVG Icons Pro) che introducevano complessità, problemi di sicurezza (gli SVG possono contenere JavaScript malevolo) e performance sub-ottimali perché non erano integrati con il builder.

Con il modulo nativo di Divi 5, il quadro cambia. Il modulo gestisce automaticamente la sanificazione (via libreria interna di Elegant Themes), supporta styling granulare (colore, dimensione, hover state, animazioni CSS), e si integra con il preset system di Divi 5 che ho trattato su Divi 5 preset e design system AI. Significa che un'icona SVG può essere definita una volta, salvata come preset, e riusata in tutto il sito con coerenza assoluta.

La cosa più interessante però è l'integrazione con AI generativa: il modulo nativo apre la porta a un workflow completamente nuovo per cui generi icone con AI, le importi come SVG, e le governi con preset system. È un pattern che vedremo sempre di più nel 2026-2027.

Perché gli SVG sono strategici per un sito WordPress

Performance

Un'icona PNG trasparente 64x64 è mediamente 5-15 KB. La stessa icona come SVG è 1-3 KB. Su un sito con 50 icone in homepage, parliamo di 250-750 KB risparmiati per page load. Su mobile, dove la banda è il collo di bottiglia reale, questo si traduce in secondi di tempo di caricamento e in un punteggio PageSpeed che migliora di 5-15 punti.

Scalabilità perfetta

Un PNG 64x64 su un display retina 2x è sfocato. Un SVG è sempre perfetto, a qualsiasi risoluzione. Per chi progetta per device moderni (smartphone 3x, tablet 2x, desktop 1x-2x), gli SVG eliminano la complessità di gestire multiple risoluzioni.

Stilizzazione CSS

Un SVG può essere stilizzato via CSS come qualsiasi altro elemento HTML. Cambi colore, dimensione, hover state, animazione, transform, senza modificare il file originale. Per un design system coerente, questa è una proprietà essenziale.

SEO e accessibilità

Gli SVG nativi (inline) sono indicizzabili dai motori di ricerca e leggibili dagli screen reader (a patto che abbiano <title> e <desc> corretti). Plugin di terze parti che convertono SVG in <img> perdono questi vantaggi.

Il problema dei plugin SVG di terze parti

Fino a oggi, usare SVG su WordPress richiedeva un plugin. I più diffusi sono SVG Support, Safe SVG, WP SVG Extra. Tutti fanno la stessa cosa: aggiungono il supporto al mime type SVG, sanitizzano il file, permettono l'upload nella libreria media. Ma introducono 3 problemi.

Il primo problema è la sanificazione: gli SVG possono contenere JavaScript. Un file SVG malevolo può eseguire codice arbitrario quando viene aperto nel browser. I plugin di terze parti fanno una sanificazione best-effort, ma il rischio zero non esiste. Il modulo nativo di Divi 5 usa una libreria interna di Elegant Themes con garanzie di sicurezza più solide.

Il secondo problema è la performance del builder: i plugin terzi iniettano CSS e JavaScript aggiuntivi che possono rallentare il Visual Builder di Divi. Il modulo nativo è integrato e non aggiunge overhead.

Il terzo problema è la coerenza con il preset system: un'icona caricata come media tramite plugin non può essere parte del preset system di Divi 5. Ogni volta che la usi, devi riconfigurarla. Il modulo nativo la rende parte del design system, gestibile come qualsiasi altro elemento.

Workflow AI per generare icone coerenti con il brand

Ecco il workflow pratico che uso e che consiglio: 5 step per generare un set di icone SVG coerenti con il brand usando AI e il modulo Divi 5.

Step 1: definisci il brief del design system

Prima di toccare l'AI, definisci 3 elementi del design system iconografico:

• Stile: outline, filled, duotone, hand-drawn. Decidi uno stile e mantienilo coerente su tutto il set.
• Peso del tratto: 1px, 1.5px, 2px. Coerenza significa che tutte le icone devono avere lo stesso spessore del tratto se sono outline.
• Palette: 2-3 colori del brand da usare come fill o stroke. Definisci anche un colore per hover state.

Esempio di brief per un sito B2B:

Set di 12 icone outline, tratto 1.5px, arrotondato, stile Lucide/Feather.
Colori: brand primary (#2563eb) per stroke, bianco per fill.
Uso: navigazione principale del sito B2B (dashboard, progetti, team, fatture, report, integrazioni, notifiche, account, logout, search, settings, help).

Step 2: genera con AI usando un prompt strutturato

Con il brief in mano, usa un modello AI generativo di immagini. I tool più efficaci nel 2026 sono Recraft (specializzato in SVG), Vectorizer.ai (per convertire PNG in SVG), e i modelli GPT-4o/Claude che possono generare SVG inline. Il prompt deve essere strutturato per garantire coerenza:

Genera un set di 12 icone SVG per un'app B2B, stile outline Lucide,
tratto 1.5px arrotondato, dimensioni viewBox 24x24, stroke #2563eb,
no fill, no background. Output: codice SVG inline per ciascuna icona,
con <title> per accessibilità. Icone: dashboard, progetti, team,
fatture, report, integrazioni, notifiche, account, logout, search,
settings, help.

Un aspetto importante: chiedi sempre il codice SVG inline, non un'immagine raster. Solo così puoi intervenire manualmente sul file per garantire coerenza del tratto e delle proporzioni.

Step 3: verifica e normalizza il codice SVG

L'output AI è spesso incoerente anche con prompt ben scritti: spessori del tratto che variano, proporzioni sbagliate, viewBox inconsistenti. Devi normalizzare manualmente. Lo script Python che segue verifica 4 proprietà essenziali su un set di SVG e segnala le anomalie:

import re
import os
import glob

# normalizza attributi SVG su tutti i file in una cartella
for svg_path in glob.glob('/path/to/svg-icons/*.svg'):
    with open(svg_path) as f:
        content = f.read()
    # uniforma viewBox a 24x24
    content = re.sub(r'viewBox="[^"]+"', 'viewBox="0 0 24 24"', content)
    # uniforma stroke-width a 1.5
    content = re.sub(r'stroke-width="[\d.]+"', 'stroke-width="1.5"', content)
    # uniforma stroke al colore brand
    content = re.sub(r'stroke="[^"]+"', 'stroke="#2563eb"', content)
    # uniforma stroke-linecap e stroke-linejoin per coerenza visiva
    if 'stroke-linecap' not in content:
        content = re.sub(r'<svg ', '<svg stroke-linecap="round" stroke-linejoin="round" ', content)
    with open(svg_path, 'w') as f:
        f.write(content)
    print(f'Normalized: {os.path.basename(svg_path)}')

Questo script è un punto di partenza. Su un set reale potresti dover aggiungere normalizzazioni per fill, stroke-dasharray, opacity, e altre proprietà che possono variare.

Step 4: importa in Divi 5 come preset riutilizzabile

Una volta normalizzati gli SVG, importa ciascuno nel modulo SVG nativo di Divi 5. Per ogni icona:

1. Apri il Visual Builder sulla pagina
2. Aggiungi il modulo SVG
3. Carica il file SVG (drag-and-drop)
4. Configura dimensione, colore, hover state
5. Salva come preset con un nome semantico (icon-dashboard, icon-team, icon-search)

Da questo momento, l'icona è disponibile nel preset system e la puoi richiamare con un click su qualsiasi pagina del sito.

Step 5: audit finale e performance check

Dopo aver configurato tutte le icone, fai un audit finale. Lo snippet bash che segue verifica che tutti gli SVG inline siano stati correttamente sanitizzati (no tag <script>, no event handler inline):

# verifica che nessun SVG contenga JavaScript
find /home/your-user/your-site -name '*.svg' -path '*/uploads/*' \
  -exec grep -lE '<script|onload=|onclick=|onerror=' {} \;

Il comando non dovrebbe restituire nulla. Se restituisce file, hai un problema di sicurezza e devi sanificarli manualmente o eliminarli.

Integrazione con il preset system Divi 5

Il vero vantaggio del modulo nativo è l'integrazione con il preset system che ho trattato in Generare design system WordPress con AI e Divi 5. Una volta che un'icona è un preset, puoi:

• Variarla per tema: preset diversi per light mode e dark mode
• Variarla per brand: preset diversi per ogni brand se gestisci multi-brand
• Variarla per device: preset responsive che cambiano dimensione su mobile
• Animarla: preset con hover state, click state, micro-interazioni

Questo significa che il design system iconografico diventa un asset riutilizzabile e versionato, non un mucchio di file SVG sparsi nella libreria media. È la differenza tra avere un design system e avere un insieme di asset.

Confronto rapido: modulo nativo vs plugin terzi

Per moduli singoli, il modulo nativo vince per performance (no plugin aggiuntivo), sicurezza (sanificazione interna Elegant Themes), e integrazione preset system. Il plugin di terze parti vince solo se devi usare SVG massivamente fuori dal Visual Builder (es. in widget custom, custom post type, custom block). In quel caso, Safe SVG o SVG Support restano opzioni valide.

Per librerie di icone multiple (50+ icone), il modulo nativo vince nettamente: preset system + design system + variabili + performance. I plugin terzi non offrono preset system nativo e richiedono configurazione per ogni icona.

Per workflow AI-first, il modulo nativo è la scelta obbligata: solo con preset system puoi applicare lo stesso stile visivo a tutte le icone generate da AI in modo coerente. Plugin terzi richiedono configurazione manuale per ciascuna.

Limiti e cosa fare quando il modulo nativo non basta

Il modulo SVG di Divi 5 ha 3 limiti da conoscere.

Il primo limite è che funziona solo nel Visual Builder. Se devi usare SVG in widget di sidebar, in custom block, in template header custom codificati a mano, devi ricorrere a plugin terzi o a inclusioni PHP custom. La soluzione è combinare il modulo nativo per le icone del layout con un plugin leggero per gli SVG "tecnici" che escono dal Visual Builder.

Il secondo limite è che la library integrata è limitata. Divi 5 include alcune icone di base ma non ha una library di 1000+ icone come Lucide o Feather. Per un set completo, devi generare le icone con AI o importare da Iconify (la libreria open source più ricca).

Il terzo limite è che il modulo supporta un'animazione CSS di base. Per animazioni complesse (path animation, morphing, effetti avanzati) devi ricorrere a librerie JavaScript esterne (GSAP, anime.js) o a SMIL nativo SVG. Per il 90% dei casi l'animazione CSS basta.

Audit di un sito Divi 5 esistente

Se hai già un sito Divi 5 in produzione e vuoi capire se ha senso migrare al modulo nativo, fai questo audit rapido.

Conta quanti SVG stai già servendo. Plugin come Query Monitor o uno script bash sulla cartella uploads ti danno il numero esatto:

# conta quanti SVG sono nella libreria media
find /home/your-user/your-site/wp-content/uploads -name '*.svg' | wc -l

Se il numero è alto (20+), il modulo nativo ti darà un vantaggio significativo. Se è basso (5-10), il costo della migrazione potrebbe non valere.

Verifica se hai plugin SVG attivi: wp plugin list --status=active | grep -i svg. Se sì, hai un candidato immediato per la sostituzione.

Verifica le performance attuali: apri PageSpeed Insights sul tuo sito, focalizzati sul "Reduce unused CSS" e "Serve images in next-gen formats". Se gli SVG sono già convertiti correttamente e compressi, il guadagno sarà marginale. Se invece sono serviti come file non ottimizzati, il modulo nativo può darti 10-20 punti PageSpeed.

Roadmap di adozione in 3 fasi

Per agenzie e team che vogliono adottare il modulo nativo in modo strutturato, ecco una roadmap realistica in 3 fasi.

Fase 1 (settimana 1-2): audit e inventario. Conta gli SVG esistenti, identifica i plugin SVG attivi, mappa i punti del sito dove sono usati. Output: foglio di calcolo con elenco SVG, plugin attuali, sostituzioni previste.

Fase 2 (settimana 3-6): generazione AI del set di icone base. Usa il workflow AI descritto sopra per generare 12-20 icone coerenti con il design system. Normalizza, importa, crea preset. Output: set di preset SVG pronti all'uso.

Fase 3 (settimana 7-10): migrazione progressiva. Sostituisci gradualmente gli SVG esistenti con i preset nativi. Inizia dalle pagine più viste (homepage, landing key). Monitora PageSpeed Insights e tassi di conversione. Output: sito con modulo SVG nativo su tutte le pagine critiche, PageSpeed migliorato di 10-20 punti, design system iconografico coerente.

Lezione di sistema: i moduli nativi vincono sui plugin terzi

La storia del modulo SVG di Divi 5 è una micro-storia di un trend più ampio: i page builder stanno assorbendo le funzionalità dei plugin terzi, una dopo l'altra. Negli ultimi 18 mesi Divi 5 ha integrato popup, form, slider, animation, A/B testing, e ora SVG. Stessa cosa sta facendo Elementor con Elementor AI, Bricks con i suoi moduli nativi, Beaver Builder con il sistema di blocchi.

La regola operativa per chi sviluppa su WordPress è: riduci i plugin terzi quando il page builder offre una soluzione nativa equivalente. Il vantaggio non è solo tecnico (performance, sicurezza, integrazione) ma anche operativo (meno plugin da aggiornare, meno superfici di attacco, meno decisioni di governance). Il tema è coerente con Toolchain agenzia WordPress moderna 2026 e con la filosofia di ridurre la complessità non necessaria.

FAQ

Il modulo SVG supporta animazioni?

Sì, supporta animazioni CSS di base (hover, transform, opacity, transition). Per animazioni avanzate (path morphing, complesse sequenze) devi ricorrere a librerie JavaScript o a SMIL nativo SVG.

Posso usare icon library esterne come Lucide o Feather?

Sì. Le icon library open source (Lucide, Feather, Heroicons, Phosphor) forniscono SVG che puoi caricare direttamente nel modulo Divi 5. Il vantaggio del workflow AI è generare icone custom coerenti con il tuo brand, ma per icone standard queste library sono ottime.

Il modulo supporta SVG animati in formato SMIL?

Sì, il modulo renderizza qualsiasi SVG valido, incluse animazioni SMIL. Però SMIL è deprecato in Chrome a favore di Web Animations API; per nuovi progetti è meglio usare CSS animations o librerie JavaScript.

Posso usare SVG in widget di sidebar o custom block?

Il modulo SVG funziona solo nel Visual Builder di Divi 5. Per widget o custom block devi usare il blocco core Image di WordPress o un plugin SVG di terze parti per il supporto mime type.

Il modulo gestisce la sanificazione automatica?

Sì, Divi 5 usa una libreria interna di sanificazione che rimuove tag <script>, event handler JavaScript e altri pattern potenzialmente pericolosi. Per siti multi-editor con accesso a contributor, è una garanzia importante.

Quanto pesa un'icona SVG rispetto a PNG?

Dipende dalla complessità, ma in media un'icona 24x24 è 1-3 KB come SVG contro 5-15 KB come PNG. Su un set di 50 icone, il risparmio è 250-750 KB per page load.

Funziona con il multisite WordPress?

Sì, il modulo SVG funziona in installazioni multisite. I preset system sono ereditati dai child site se configurati a livello di network.

Riferimenti utili per approfondire

• Elegant Themes: Exploring Divi 5's New SVG Module - annuncio ufficiale del modulo
• Divi 5.7 Release Notes - tutte le novità della release 5.7
• Elegant Themes Blog - release notes periodiche e tutorial
• Elegant Themes: Nested Option Presets for Divi 5 - architettura del preset system
• Lucide Icons - icon library open source compatibile con il workflow Divi
• Feather Icons - altra icon library open source leggera
• Iconify - aggregatore di 200.000+ icone open source
• Recraft AI - tool AI specializzato in generazione SVG
• OWASP: SVG Security Cheat Sheet - linee guida sicurezza SVG
• CSS-Tricks: SVG Styling - guida completa alla stilizzazione CSS degli SVG
• MDN Web Docs: SVG - documentazione tecnica di riferimento
• WPBeginner Spotlight 24: WordPress 7.0 to hands-free AI management - panoramica ecosistema WP+AI giugno 2026
• PageSpeed Insights - per misurare il guadagno in performance dopo l'adozione del modulo

Elegant Themes ha rilasciato a giugno 2026 il Variable Generator per Divi 5: un tool visuale che, in pochi click, genera un intero sistema di variabili per il tuo sito Divi. Combinato con un prompt AI strutturato per la governance del brand e per le decisioni tipografiche, un'agenzia può passare da zero a un design system production-ready in 30 minuti, contro i 5-10 giorni di un approccio manuale.

Questo articolo è una guida operativa al workflow completo: cosa genera il Variable Generator, cosa deve invece generare l'AI, come gestire la governance multi-brand, e quali sono le trappole da evitare quando si scala il sistema su più siti Divi.

Perché un design system è un moltiplicatore di marginalità per l'agenzia

Il vero costo di un'agenzia WordPress non è costruire il sito, è mantenerlo. Ogni volta che un cliente chiede "puoi rifare il pulsante primario in verde?", senza un design system stai toccando 30-40 occorrenze nel CSS custom, 8 pagine template, 5 preset globali. Con un design system, cambi una variabile e il pulsante è verde ovunque.

I vantaggi misurabili di un design system Divi 5 attivo su un parco clienti:

• tempo medio di manutenzione: -60% (fonte: casi reali agenzie con 5+ brand)
• errori di brand consistency: -85% (colori sbagliati, spacing inconsistenti)
• onboarding nuovo developer: da 1 settimana a 2 giorni (leggendo la documentazione del sistema)
• time-to-market nuovo brand: da 2 settimane a 3 giorni (partendo dal template di base)

In un contesto dove il cliente medio chiede sempre più velocemente e con budget più stretti, un design system è uno degli investimenti con il ROI più rapido.

Cosa genera il Variable Generator di Divi 5 (e cosa no)

Il Variable Generator ha due modalità principali, entrambe accessibili dal Variable Manager di Divi 5.

Color Palette Generator

Prende il colore primario del tuo sito e genera automaticamente una palette HSL relativa: tonalità, sfumature chiare e scure, variazioni di trasparenza. Puoi scegliere quante sfumature vuoi (tipicamente 9-11), il colore secondario di relazione, e il sistema crea:

• variabili colore base: primary, secondary, body text, heading text, link
• spettro primary: da primary-50 (più chiaro) a primary-900 (più scuro)
• spettro secondary: stessa logica
• varianti trasparenti: primary con alpha 10%, 20%, 50% per overlay e hover

Tutte le variabili sono in HSL relativo: cambi il primary e tutto il sistema si aggiorna. Niente più primary: #3B82F6 sparso in 200 file CSS.

Sizing Variable Generator

Crea un sistema fluido completo con clamp() per typography e spacing. Le variabili generate includono:

• Font size: da --font-size-xs (12px) a --font-size-5xl (48px), ognuno con clamp() responsive
• Spacing: --space-1 (4px) a --space-16 (96px), con clamp() che scala con viewport
• Gap: variabili specifiche per flex container
• Radius: --radius-sm, --radius-md, --radius-lg, --radius-full
• Border width: variabili per gestire i bordi coerentemente

Il risultato è un sistema che si comporta come Tailwind o Material UI, ma integrato nativamente in Divi 5 senza plugin esterni.

Cosa NON genera il Variable Generator

Qui entra in gioco l'AI. Il tool visuale ti dà la struttura, ma le decisioni strategiche restano tue:

• quali token sono semanticamente rilevanti per il brand (es. color-success, color-warning, color-bg-elevated)
• la gerarchia tipografica (quali sono i 5 livelli H1-H4 + body, quali sono i "display" per hero)
• i token semantici di stato (hover, active, disabled, focus ring)
• le dark mode variants (se il brand le richiede)
• le regole di accessibilità (contrasto minimo WCAG AA, dimensione tap target mobile)
• i nomi dei token custom che riflettono il vocabolario del brand (es. --color-accent-rosso-corsa vs --color-accent-primary)

Per queste decisioni, un prompt AI strutturato ti fa risparmiare 2-3 ore di decision-making.

Workflow 5 step per costruire il design system in 30 minuti

Step 1: brief di brand con AI (5 minuti)

Parti da un brief scritto (anche solo 200 parole) sul brand: tone of voice, settore, pubblico target, brand archetype, valori, colori associati emotivamente. Passalo all'AI con questo prompt template:

Sei un senior brand designer con 15 anni di esperienza in design system aziendali.

BRIEF BRAND:
[inserisci brief 200 parole]

Genera in output JSON valido:
1. "color_primary_hsl": { "h": [0-360], "s": [0-100], "l": [0-100] } - colore primario brand
2. "color_secondary_hsl": { ... } - colore secondario complementare o analogo
3. "color_neutral_hue": [0-360] - hue di partenza per scale neutre (grigi brandizzati)
4. "typography_scale": ["font-size-xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl"] con valore clamp() per ciascuno
5. "spacing_scale": ["space-1" a "space-16"] con valore clamp() per ciascuno
6. "radius_scale": ["radius-sm", "md", "lg", "xl", "full"] con px
7. "semantic_tokens": { "color-success": "hsl(...)", "color-warning": "...", "color-error": "...", "color-info": "..." }
8. "font_family_suggestions": ["Google Fonts pair primario + secondario"]
9. "rationale": spiegazione 100 parole delle scelte

Vincoli:
- contrasto WCAG AA minimo 4.5:1 per body text
- mobile-first: clamp() deve garantire leggibilità a 320px viewport
- accessibilità: tap target mobile minimo 44x44px

L'output è una specifica tecnica che puoi incollare direttamente nel Variable Generator o che diventa la base del tuo design system documentation.

Step 2: configurazione Variable Generator (10 minuti)

Apri Divi 5 → Variable Manager → Numbers Group → "Generate Fluid Sizing Variables":

1. scegli Font Size, configura la scala ricevuta dall'AI
2. ripeti per Spacing, Gap, Radius, Border Width
3. rivedi ogni variabile: il tool ti permette di editare clamp() manualmente se la proposta automatica non ti convince

Poi Color Group → "Generate Color Palette Variables":

1. inserisci il primary HSL dall'AI
2. scegli 9 sfumature (default consigliato)
3. inserisci il secondary HSL
4. genera lo spettro secondario
5. verifica che primary-500 abbia contrasto sufficiente su bianco (WCAG AA)

Step 3: preset variables con logica di componente (5 minuti)

I preset in Divi 5 sono componenti riusabili. Crea preset per i pattern ricorrenti:

• Button Primary: background primary-500, text white, padding space-3 space-6, radius-md
• Button Secondary: background transparent, border primary-500, text primary-500
• Card: background white, padding space-6, radius-lg, shadow md
• Input: border neutral-300, focus ring primary-500, padding space-3

Ogni preset è una composizione di variabili. Quando cambi --color-primary-500, tutti i preset si aggiornano automaticamente. È lo stesso pattern di Tailwind UI o Material, ma con il vantaggio di essere visuale e nativo in Divi.

Step 4: documentazione interna in formato Markdown (5 minuti)

Una design system senza documentazione è una design system che morirà. Esporta la specifica in un file design-system.md nel repo del progetto (o in Notion/Confluence per team non tecnici):

# Design System [Nome Brand]

## Philosophy
[1 paragrafo: perché questo sistema esiste, cosa rappresenta]

## Color Tokens
- Primary: HSL(220, 90%, 56%) → usato per CTA, link, focus
- Secondary: HSL(180, 65%, 45%) → usato per accenti, badge
- Neutral-50 → Neutral-900: scala per testo e superfici
- Semantic: success HSL(142, 71%, 45%), warning HSL(38, 92%, 50%), error HSL(0, 84%, 60%)

## Typography Scale
- Display: clamp(2.5rem, 5vw, 4rem) - usato per hero, h1 marketing
- H1: clamp(2rem, 4vw, 3rem)
- H2: clamp(1.5rem, 3vw, 2.25rem)
- H3: clamp(1.25rem, 2.5vw, 1.75rem)
- Body: clamp(1rem, 1.5vw, 1.125rem)
- Small: clamp(0.875rem, 1.2vw, 1rem)

## Spacing Scale
- space-1 (4px) → space-16 (96px), scala logaritmica base 1.5

## Usage Rules
- Non usare MAI colori hex direttamente, sempre variabili
- Per CTA primary usare SEMPRE Button Primary preset
- H1 solo in pagine marketing, H2 per sezioni, H3 per sottosezioni
- Mobile: tutti i body text devono essere minimo 16px

Questo file diventa il reference per ogni developer, designer, AI assistant che lavora sul progetto.

Step 5: governance e manutenzione (5 minuti setup, poi ongoing)

La governance è la parte che la maggior parte delle agenzie salta e che porta al degrado del sistema in 6-12 mesi. Serve una procedura operativa:

• chi può aggiungere token: solo il design lead (o 1-2 persone designate)
• prima di aggiungere un token, verificare che non esista già un semanticamente simile
• ogni 6 mesi, audit di token inutilizzati (rimuovere o consolidare)
• ogni cambio di brand brief, rieseguire il workflow AI + Variable Generator

Le 5 trappole del design system Divi 5

Trappola 1: troppe variabili subito

La tentazione è generare 50 sfumature colore, 20 spacing, 10 radius. Risultato: il sistema diventa ingestibile. Parti con 9 sfumature, 8 spacing, 5 radius e aggiungi solo se hai casi d'uso reali.

Trappola 2: token semantici sbagliati

Creare --color-blue-500 è una scelta tecnica. Creare --color-action-primary è una scelta semantica. I token semantici sopravvivono ai cambi di brand; quelli tecnici vanno rifatti ogni volta.

Trappola 3: ignorare l'accessibilità

Un primary-500 che non passa WCAG AA su bianco è un problema legale oltre che tecnico. Usa un tool come WebAIM Contrast Checker per ogni combinazione bg/fg che usi.

Trappola 4: preset senza documentazione

Creare 30 preset senza spiegare quando usarli è come avere una cassetta degli attrezzi senza etichette. Ogni preset deve avere 1-2 esempi d'uso reali.

Trappola 5: design system scollegato dal codice custom

Se il tuo tema Divi 5 ha CSS custom hardcoded che non usa le variabili, hai un design system formale e uno reale. Il CSS custom va rifatto per usare le variabili, altrimenti diventa il punto di rottura del sistema.

Caso studio: agenzia 4 brand, design system unificato

Una web agency con 4 brand client (3 e-commerce fashion + 1 magazine editoriale) aveva il classico problema: ogni sito aveva il suo CSS custom con variabili locali che non comunicavano tra loro. Un designer cambiava il primary blu in un sito, gli altri 3 restavano fuori.

Dopo aver applicato questo workflow:

• token condivisi: 9 colori, 9 typography, 8 spacing, 5 radius (no overload)
• preset riusati: 12 preset (button, card, input, badge, alert, modal, navbar, hero, footer, form, pagination, breadcrumb)
• tempo di setup nuovo brand: da 4 giorni a 1 giorno (brief AI + Variable Generator + customizzazioni specifiche)
• manutenzione su 12 mesi: -55% tempo (grazie a cambio token centralizzato)
• coerenza visiva cross-brand: ogni brand ha la sua personalità (colori HSL diversi) ma stesso DNA strutturale

Il risultato economico per l'agenzia: marginalità +18 punti percentuali sui progetti ricorrenti perché il tempo risparmiato in setup e manutenzione si è trasformato in capacità di prendere più clienti.

Integrazione con AI per design system evolutivi

Una volta che il design system è in produzione, l'AI può aiutarti a farlo evolvere senza rivoluzioni. Tre use case reali:

Use case 1: audit di token inutilizzati

Prompt: "Analizza questo file CSS custom del progetto [nome brand].
Per ogni variabile CSS custom usata, dimmi quante volte è referenziata
nel codice. Per ogni variabile con 0 referenze, suggerisci se rimuoverla
o se è un token semantico candidato da aggiungere al sistema formale."

Use case 2: generazione di componenti da descrizione

Prompt: "Genera il codice Divi 5 + CSS custom per un componente
'Product Card' per un e-commerce fashion. Deve usare ESCLUSIVAMENTE
i token del design system [lista token]. Output: codice pronto
per essere incollato in Divi 5."

Use case 3: dark mode automatica

Prompt: "Dato il design system light [lista token], genera la variante
dark mode mappando ogni token light al suo equivalente dark.
Mantieni contrasto WCAG AA. Considera che le superfici non sono
semplicemente invertite (no #FFF → #000) ma scelte con criterio
percettivo."

Confronto rapido: Variable Generator, design system custom, plugin terzi

Quando l'agenzia decide come costruire il design system, tre opzioni si presentano.

Opzione 1: Divi 5 Variable Generator + workflow AI

Funziona quando: usi già Divi 5, gestisci 2-10 brand, vuoi un sistema nativo senza plugin esterni.

AI utile per: brief di brand, generazione scala tipografica, audit token, dark mode variants.

Rischio: lock-in a Divi 5 (ma il sistema è esportabile se cambi page builder).

Opzione 2: design system custom in CSS variables (no Divi)

Funziona quando: usi page builder diversi da Divi, hai developer front-end, vuoi massima portabilità.

AI utile per: generazione token, documentazione, conversione tra formati (CSS, SCSS, JS objects).

Rischio: richiede manutenzione del sistema custom, nessun vantaggio nativo del page builder.

Opzione 3: plugin terzi (Stylemix, Yabe, Customify)

Funziona quando: vuoi un sistema già pronto con documentazione, non hai tempo per workflow AI-assisted.

AI utile per: integrazione con il workflow esistente, mapping tra plugin e Divi nativo.

Rischio: plugin aggiuntivi = più superficie di manutenzione, possibili conflitti con Divi 5.

Per la maggior parte delle agenzie che usano Divi 5, l'opzione 1 è la più efficiente: tool nativo + workflow AI = sistema production-ready in 30 minuti, zero overhead di plugin.

Come il Variable Generator si integra con il preset system Divi 5

Il Variable Generator crea le variabili atomiche (color-primary-500, space-3, radius-md). Il Preset System crea i componenti semantici (Button Primary, Card, Alert). I due sistemi lavorano in sinergia:

1. una variabile è un singolo valore (es. HSL primary)
2. un preset è una composizione di variabili con uno scopo (es. Button Primary usa primary-500 + white + space-3 + radius-md)
3. un componente riusabile (Block Library) è un preset + contenuto

Quando aggiorni una variabile (es. primary HSL da 220 a 210), tutti i preset che la usano si aggiornano automaticamente, e di conseguenza tutti i componenti. È una propagazione a cascata che rende il design system veramente "vivo".

Per un approfondimento sul preset system e sui Nested Option Preset, vedi la guida Divi 5 preset pubblicata su mrtux.it, che copre la parte architetturale del sistema. Qui ci concentriamo sulla parte operativa del Variable Generator e sull'integrazione con l'AI.

Workflow AI per multi-brand governance

Quando gestisci 4-5 brand sullo stesso framework Divi 5, la governance diventa critica. La struttura consigliata è:

• design system base (variabili + preset condivisi)
• brand layer (override specifici per ogni brand: solo colori e typography, spacing resta condiviso)
• componente layer (pattern specifici per brand che ereditano il base)

In Divi 5 questo si realizza con:

• Child theme Divi con design system base
• Theme Customizer o JSON export per ogni brand
• Preset Library separata per brand

Un prompt AI per generare il "brand layer" da un brief è:

Dato il design system base [lista variabili] e il brand brief [inserisci brief],
genera SOLO le variabili che differiscono dal base (colori primary/secondary,
font family, eventuali token semantici custom).
Output: JSON Divi 5 ready (formato Variable Manager export).

FAQ

Il Variable Generator funziona anche con temi child Divi?

Sì. Le variabili sono globali al sito (non al child theme), quindi funzionano indipendentemente dal child. Il child theme può fare override custom delle variabili se necessario.

Posso usare il Variable Generator senza Divi 5?

No. Il tool è una funzionalità nativa di Divi 5. Se sei su Divi 4, devi aggiornare (la migrazione è documentata sul sito Elegant Themes).

Quante variabili dovrei generare inizialmente?

Regola pratica: 9 colori primary + 9 secondary + 9 neutral, 9 typography, 8 spacing, 5 radius, 4 border width. Circa 45-50 variabili. Aggiungi solo se hai casi d'uso reali.

L'AI può sostituire un designer per il design system?

No. L'AI è un acceleratore per le decisioni tecniche (scale, mapping, contrasto). Le decisioni strategiche (archetipo brand, personalità visiva, semantica) restano umane. Il workflow migliore è AI + designer, non AI al posto del designer.

Posso esportare il design system Divi 5 in CSS custom per altri progetti?

Sì, le variabili Divi 5 sono CSS variables native (--variable-name). Puoi esportarle e usarle in qualsiasi altro contesto CSS.

Quanto tempo reale richiede il workflow 5 step?

Setup iniziale: 30-45 minuti per un designer esperto. Manutenzione: 10-15 minuti/settimana se il sistema è attivo.

Il design system rallenta il sito Divi 5?

No. Le CSS variables sono native del browser, il lookup è O(1). Anzi, un sistema strutturato spesso velocizza il rendering perché il browser può cachare i pattern ripetuti.

Funziona con page builder diversi da Divi?

No, Variable Generator è specifico di Divi 5. Ma il workflow AI + documentazione è esportabile. Puoi generare le stesse variabili per Bricks, Elementor o Oxygen usando il prompt template dello Step 1.

Roadmap 30 giorni per agenzie che partono da zero

Una sequenza realistica per implementare il design system Divi 5 in un'agenzia:

• settimana 1: brief di brand per 1 cliente pilota, generazione AI, setup Variable Generator, documentazione
• settimana 2: applicazione a 3 pagine template del cliente pilota, feedback del designer e del cliente
• settimana 3: iterazione sui token (correzione contrasto, aggiunta semantic token), creazione preset componenti
• settimana 4: rollout al cliente pilota, training del team agenzia sul workflow, scaling a secondo brand

Dopo 30 giorni hai un sistema production-ready, un team formato, e la fiducia per applicarlo a tutti i brand successivi.

Conclusione: design system non è big design, è operational design

Costruire un design system nel 2026 non richiede più settimane di lavoro specialistico. Con il Variable Generator di Divi 5 e un prompt AI strutturato, un'agenzia può arrivare a un sistema production-ready in 30 minuti per brand, e riutilizzarlo su tutti i clienti successivi con minime personalizzazioni.

Il vantaggio competitivo non è "avere un design system" (ce l'hanno tutti i player medio-alti del mercato). È avere un design system mantenuto attivamente, documentato e integrato nel workflow AI del team. Quello fa la differenza tra un'agenzia che sopravvive e una che scala.

Riferimenti utili per approfondire

• Divi 5 preset e design system AI: cosa cambia per chi sviluppa temi WordPress - architettura del preset system Divi 5 e pattern AI
• Elegant Themes Blog: Divi 5 Variable Generator - articolo di partenza sul Variable Generator
• Strumenti di grafica web 2026: dai pixel ai sistemi di design agentici - panoramica su design agentici e tool 2026
• Web design 2026: 9 leggi che separano un sito da 500€ da uno da 50.000€ - principi di design che governano il design system
• Migliori AI website builder WordPress 2026: guida tecnica - confronto tra page builder con AI integrata
• App Kit WordPress 2026: come gli starter kit AI cambiano il time-to-market - starter kit AI per agenzie e freelance
• AI workflow agenzia WordPress: come ri-progettare i processi nel 2026 - workflow interno agenzia con AI
• W3C Design Tokens Community Group - specifica W3C per design tokens
• WebAIM Contrast Checker - tool per verificare contrasto WCAG AA/AAA
• Elegant Themes Documentation: Divi 5 Variables - documentazione ufficiale
• Google Fonts - libreria font open source per typography scale
• Tailwind CSS Design System - reference per design system strutturati