Ti chiedono di impostare colori, font, spaziature, bottoni, loghi e testi ricorrenti dentro Divi 5. Apri il builder, vedi mille opzioni e il rischio è sempre quello: inizi a incollare valori un po’ ovunque.

#2176ff qui, 16px lì, un padding “più o meno giusto” da qualche altra parte.

Funziona? Sì. Per i primi dieci minuti.

Poi il cliente ti dice: “Cambiamo il blu?”. E lì parte il giro tra moduli, sezioni, template e impostazioni sparse. Una gioia, diciamo.

Le Variabili di Design di Divi 5 servono proprio a evitare questo avanti e indietro. Il concetto è semplice: salvi una volta i valori importanti del sito, dai loro un nome chiaro e poi li riusi dove ti servono.

Colori, font, numeri, immagini, testi e link.

In questo articolo vediamo insieme come costruire il set di variabili per il sito Coworking Space. L’obiettivo non è fare una lista infinita “perché così sembra più ordinato”, ma preparare una base concreta da usare poi nei preset, nelle sezioni e nei template.

Iniziamo da qui: prima mettiamo ordine nei valori fondamentali, poi tutto il resto diventa molto più facile da gestire.

Perché le Variabili di Design vengono prima dei preset

Una variabile di design è un valore salvato con un nome. Invece di scrivere ogni volta #2176ff in tutti i moduli dove ti serve il blu del brand, crei una variabile chiamata Colore Primario e la richiami dove vuoi.

Il vantaggio è molto pratico: se domani quel blu cambia, non devi andarlo a cercare a mano in tutto il sito. Modifichi Colore Primario una volta sola e tutti gli elementi collegati si aggiornano.

Divi 5 supporta sei tipi di variabili:

• Colori, per palette, testi, bordi, overlay e ombre.
• Font, per famiglie tipografiche come titoli e testo corpo.
• Numeri, per dimensioni, spaziature, bordi, raggi e larghezze.
• Immagini, per elementi riutilizzabili come i loghi.
• Testo, per frasi, dati aziendali e CTA ricorrenti.
• Link, per URL esterni usati in più punti del sito.

Le variabili vanno create prima dei preset, perché i preset useranno proprio quelle come riferimento.

Prova a guardarla così: le variabili sono i mattoni, i preset sono i blocchi già assemblati, le pagine sono la casa. Se parti dal tetto, prima o poi qualcosa scricchiola.

Prima regola: dai nomi chiari alle variabili

Prima di creare variabili a raffica, scegli una logica per i nomi. Sembra una cosa piccola, ma quando il progetto cresce ti evita domande tipo: “Chi ha chiamato questa cosa Colore 7?”.

Per i valori generali usa nomi semplici e riutilizzabili:

• Colore Primario
• Colore Secondario
• Colore del Testo Titoli
• Colore del Testo Corpo

Per i valori con uno scopo preciso, invece, usa nomi funzionali:

• Bordo – Campi Scuro
• Sfondo Overlay – Scuro
• Angoli Arrotondati – Bottoni

La regola pratica è questa: se una variabile può servire in tanti contesti, usa un nome descrittivo. Se serve per una cosa specifica, dillo nel nome.

Chi aprirà il progetto tra due mesi capirà subito dove mettere le mani.

Aprire il gestore delle Variabili di Design

Per accedere alle variabili, apri una pagina o un template nell’Editor Visuale di Divi 5. Poi clicca sull’icona Variabili di Design nella barra dell’editor, sul lato sinistro dello schermo.

Si aprirà il gestore delle variabili. Da lì puoi creare, modificare e organizzare i valori globali del sito.

Nella parte alta del gestore trovi un menu per filtrare le variabili per tipo: Colori, Font, Numeri, Immagini, Testo e Link.

Per crearne una nuova, scegli il tipo giusto, clicca sul pulsante +, assegna un nome, inserisci il valore e salva.

La parte tecnica è semplice.

La parte importante è decidere bene cosa salvare come variabile, come chiamarla e quanto rendere flessibile il sistema. Per esempio, se imposti colori, spaziature e tipografia con criterio, puoi costruire anche un sistema di colori scalabile che resta facile da aggiornare in tutto il sito. Vediamolo un pezzo alla volta.

Variabili colore

I colori sono il primo gruppo da sistemare. Non servono solo a “fare bello”: definiscono identità, gerarchia, contrasto e leggibilità.

Per il sito Coworking Space useremo una palette ridotta. Pochi colori base, più alcune varianti generate con i colori relativi di Divi.

Tradotto: parti da un colore, per esempio il nero o il bianco, e crei versioni con opacità diverse senza inventarti ogni volta un grigio nuovo.

Colori base

Parti dai colori fondamentali. Alcuni sono già presenti in Divi: aggiornali in base al design del sito e verifica che restino coerenti anche nel responsive Divi 5, soprattutto tra desktop, tablet e mobile.

• Colore Primario: #2176ff
• Colore Secondario: #ff5700
• Colore Testo Titoli: #000000
• Colore Testo Corpo: rgba(0,0,0,0.7)
• Colore Link: riferimento a Colore Primario

Aggiungi poi tre variabili di supporto:

• Nero: #000000
• Bianco: #ffffff
• Sfondo – Grigio Chiaro: #f5f5f5

Nero e bianco non sono lì per essere usati sempre in modo diretto. Servono soprattutto come base per creare trasparenze: bordi leggeri, ombre morbide, overlay chiari o scuri.

Così eviti una collezione infinita di grigi “quasi uguali, ma non proprio”.

Colori di testo adattivi

Adesso creiamo i colori per gestire testi su sfondi chiari e scuri. Ti evita di sistemare a mano ogni titolo quando cambi il colore di una sezione.

Che è una di quelle attività che sembrano veloci, finché non lo sono più.

• Testo Titolo – Chiaro: riferimento diretto alla variabile Bianco.
• Testo Corpo – Chiaro: colore relativo da Bianco con opacità al 90%.
• Testo – Scuro Trasparente: colore relativo da Colore del Testo Corpo con opacità al 40%.
• Testo – Chiaro Trasparente: colore relativo da Testo Corpo – Chiaro con opacità al 60%.

Esempio pratico: hai una sezione con sfondo scuro. Il titolo usa Testo Titolo – Chiaro, quindi resta bianco e leggibile. Il paragrafo usa Testo Corpo – Chiaro, un po’ più morbido.

Le etichette o le didascalie possono usare Testo – Chiaro Trasparente, così non urlano più del contenuto principale.

Colori relativi per sfondi, overlay e dettagli

Ora completiamo la palette con variabili di utilità. Qui entrano in gioco overlay, bordi, trasparenze e ombre.

Alcune variabili hanno un nome molto pratico, come Bordo scuro o Ombra. Altre sono più aperte, come Nero trasparente, perché possono tornare utili in contesti diversi.

• Overlay dello sfondo scuro: colore relativo da Nero con opacità all’86%. Utile sopra immagini di sfondo quando il testo deve restare leggibile.
• Overlay dello sfondo chiaro: colore relativo da Bianco con opacità all’86%. Utile su sfondi scuri quando vuoi schiarire l’area.
• Nero trasparente: colore relativo da Nero con opacità al 10%.
• Bianco trasparente: colore relativo da Bianco con opacità al 20%.
• Bordo scuro: colore relativo da Nero con opacità al 12%. Serve per separare elementi su sfondi chiari senza creare linee troppo pesanti.
• Bordo chiaro: colore relativo da Bianco con opacità al 30%. Stesso uso, ma su sfondi scuri.
• Bordo campi scuro: colore relativo da Nero con opacità al 30%. Pensato per i campi modulo su sfondi chiari.
• Bordo campi chiaro: colore relativo da Bianco con opacità al 50%. Pensato per i campi modulo su sfondi scuri.
• Ombra: colore relativo da Nero con opacità al 15%. Utile per card e contenitori, senza effetto “scatola volante anni 2009”.

Cosa puoi fare adesso: crea prima i colori base, poi costruisci le varianti relative. Così mantieni la palette compatta e modificabile.

Controllare contrasto e accessibilità

Prima di usare questi colori nei preset, fermati un attimo. Lo so, è il momento in cui vorresti andare avanti.

Però qui si evita un problema molto concreto: testo bello, coerente, perfettamente sistemato… ma poco leggibile.

Le linee guida WCAG indicano il rapporto minimo di contrasto tra testo e sfondo. In parole semplici: misurano se un testo si legge davvero su quel colore di sfondo.

• AA: minimo consigliato. Richiede un rapporto 4.5:1 per testo normale e 3:1 per testo grande o grassetto.
• AAA: livello più alto. Richiede 7:1 per testo normale. Non sempre è realistico ovunque, ma è ottimo per contenuti importanti.

Non devi farlo a occhio. Anzi, meglio di no.

Usa uno di questi strumenti:

• Verificatore di contrasto WebAIM: inserisci i valori HEX o RGB e controlli subito il rapporto di contrasto.
• Who Can Use: ti mostra come una coppia di colori viene percepita da persone con diverse condizioni visive.
• Gli strumenti per sviluppatori di Chrome o Firefox: nell’ispettore trovi anche controlli sul contrasto.

Controlla almeno queste combinazioni:

• testo scuro su sfondo chiaro;
• testo chiaro su sfondo scuro;
• testo su colore primario;
• testo su colore secondario;
• testi dentro pulsanti e campi modulo.

Se una coppia non passa il controllo, hai due strade: modifichi il colore principale oppure crei una variante dedicata per i contesti in cui serve più leggibilità.

L’accessibilità non è un bollino da aggiungere alla fine. È parte del lavoro fatto bene.

Meglio sistemarla ora, mentre stai definendo le variabili, che rincorrerla dopo su mezzo sito.

Variabili tipografiche

Per questo sito servono due variabili font:

• Titolo: Inter
• Testo corpo: Inter

Divi permette di selezionare Google Fonts e supporta anche font personalizzati caricati manualmente. Qui usiamo Inter sia per i titoli sia per il testo corpo.

Usare un solo font non è obbligatorio, ma semplifica il sistema. La differenza tra titoli e paragrafi non la ottieni cambiando famiglia tipografica, ma lavorando su dimensione, peso e interlinea.

Esempio: un titolo principale può usare Inter a 48px con peso 700, mentre il testo corpo può usare Inter a 16px con peso 400. Stesso font, gerarchia chiara.

Se il tuo progetto richiede due famiglie diverse, va bene. L’importante è scegliere con intenzione, non aggiungere font “perché mancava un po’ di movimento”.

Variabili numeriche per la tipografia

Le variabili numeriche salvano valori come dimensioni, spaziature, larghezze, bordi e raggi. Possono usare unità come px, rem, em, oppure funzioni CSS come clamp().

Partiamo dalla tipografia: titoli, testo del corpo e interlinea.

Dimensioni dei titoli

Per i titoli usiamo clamp(), una funzione CSS che permette al testo di adattarsi alla larghezza dello schermo.

Detta semplice: con clamp() imposti una dimensione minima, una dimensione massima e un valore intermedio che cresce in modo fluido.

Così un H1 non diventa minuscolo su desktop né gigantesco su mobile.

Per usarla in Divi, crea una nuova variabile numerica e incolla il valore completo nel campo della variabile.

• Titolo 1 (H1): clamp(1.75rem, 4.4975vw + 0.6254rem, 3.75rem)
• Titolo 2 (H2): clamp(1.5rem, 2.2596vw + 0.9534rem, 2.5rem)
• Titolo 3 (H3): clamp(1.25rem, 1.4122vw + 0.9085rem, 1.875rem)
• Titolo 4 (H4): clamp(1.0625rem, 0.9831vw + 0.8155rem, 1.5rem)
• Titolo 5 (H5): clamp(0.9375rem, 0.7007vw + 0.7588rem, 1.25rem)
• Titolo 6 (H6): clamp(0.875rem, 0.2824vw + 0.8067rem, 1rem)
• Titolo Grande (H1 Big): clamp(3rem, 7.3219vw + 1.1924rem, 6.25rem)
• Sottotitolo Eyebrow: clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem)

Dimensioni del corpo del testo

Ora definiamo le dimensioni per paragrafi, testi secondari, etichette e campi modulo.

• Testo corpo: clamp(0.875rem, 0.2824vw + 0.8067rem, 1rem)
• Testo secondario: clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem)
• Testo extra piccolo: 12px
• Testo campi modulo: clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem)

Testo corpo è la dimensione standard dei paragrafi. Testo secondario va bene per note, didascalie e contenuti meno importanti.

Testo extra piccolo serve per tag o micro-etichette. Testo campi modulo resta separato anche se ora ha lo stesso valore del testo secondario: così, se domani vuoi modificare solo i form, puoi farlo senza toccare il resto.

In pratica, il testo corpo scala tra circa 14px su schermi piccoli e 16px su schermi più grandi.

Interlinea

L’interlinea è lo spazio verticale tra le righe.

Se è troppo stretta, il testo diventa faticoso. Se è troppo larga, sembra che ogni riga abbia litigato con quella sotto.

• Interlinea – Titoli: 1.3em
• Interlinea – Corpo: 1.8em
• Interlinea – Testo piccolo: 1.55em

I titoli possono avere un’interlinea più compatta. Il testo del corpo ha bisogno di più respiro. Il testo piccolo sta nel mezzo.

Variabili numeriche per spaziature, bordi, pulsanti e layout

Dopo la tipografia, passiamo agli altri valori numerici. Qui mettiamo ordine in spaziature, bordi, angoli, pulsanti e larghezze del layout.

Spaziatura

Le variabili di spaziatura servono a non decidere ogni margine “a sentimento”.

Se ogni sezione ha uno spazio diverso, il sito sembra disordinato anche quando i singoli pezzi sono belli.

Con una scala di spaziatura, invece, scegli pochi valori e li riusi. Se Spaziatura – Piccola vale 20px, quel valore resta uguale ovunque venga richiamato.

• Spaziatura – Molto piccola: 10px
• Spaziatura – Piccola: 20px
• Spaziatura – Media: 30px
• Spaziatura – Regolare: 60px
• Spaziatura – Grande: 100px
• Spaziatura – Fluida: clamp(24px, 6vw, 90px)
• Distanza della griglia – Fluida: min(4vw, 60px)

Spaziatura – Fluida cambia in base alla larghezza dello schermo. È utile quando vuoi sezioni più ariose su desktop e più compatte su mobile.

Distanza della griglia – Fluida fa una cosa simile, ma per lo spazio tra colonne. È particolarmente comoda quando vuoi mantenere coerente anche il gap CSS in Divi nei layout più flessibili, senza dover ritoccare ogni volta la distanza tra gli elementi.

Bordi e angoli

I bordi strutturali e i bordi dei campi modulo partono dallo stesso valore, ma restano variabili separate.

Perché? Perché magari oggi sono uguali, domani no.

• Larghezza bordo: 1px
• Larghezza bordo – Campi: 1px
• Larghezza bordo – Pulsanti: 0px
• Angoli arrotondati – Regolare: 8px
• Angoli arrotondati – Immagini: 8px
• Angoli arrotondati – Campi: 8px
• Angolo arrotondato – Piccolo: 4px
• Angolo arrotondato – Grande: 16px
• Angoli arrotondati – Pulsanti: 500px

Il valore 500px sui pulsanti crea l’effetto pillola.

Gli altri raggi restano separati per poter cambiare, per esempio, solo le immagini o solo i campi modulo senza modificare tutto il sistema.

Pulsanti

Per i pulsanti usiamo tre variabili dedicate. Il padding orizzontale è il doppio di quello verticale: il risultato è un bottone ampio, leggibile e facile da cliccare.

• Dimensione font del pulsante: 14px
• Padding verticale del pulsante: 16px
• Padding orizzontale del pulsante: 32px

Queste variabili lavorano insieme a Angoli Arrotondati – Pulsanti e Larghezza Bordo – Pulsanti. Insieme definiscono la forma fisica del bottone.

Dimensioni del layout

Le variabili di layout servono a controllare la larghezza dei contenuti.

Perché sì, una riga di testo lunga quanto un’autostrada non è proprio il massimo da leggere.

• Larghezza Massima Riga: 1080px
• Larghezza Massima – 900: 900px
• Larghezza Massima – 700: 700px
• Larghezza Massima – 510: 510px

1080px funziona bene per layout generali e sezioni a colonne. 700px è più adatto ad articoli o testi lunghi. 510px va bene per moduli, box centrati o blocchi più compatti.

Variabili immagine

Le variabili immagine servono per elementi visivi che userai in più punti del sito. Il caso più semplice è il logo.

• Logo scuro: versione scura del logo, pensata per sfondi chiari.
• Logo chiaro: versione chiara o bianca del logo, pensata per sfondi scuri.

Header, footer e template possono richiamare queste variabili. Se in futuro cambi logo, ti basta aggiornare la variabile immagine e la modifica si applica ovunque quella variabile è usata.

Se non hai ancora un logo definitivo, puoi usare un segnaposto temporaneo, per esempio creato con Logoipsum. L’importante è non lasciare il sistema senza un riferimento.

Variabili di testo

Le variabili di testo salvano parole e frasi che si ripetono in più pagine. Se pensi di scrivere la stessa cosa più di una volta, valuta se trasformarla in variabile.

I dati aziendali sono perfetti per questo uso, perché compaiono spesso in footer, pagina contatti, template e sezioni informative.

• Nome azienda: Nome del Cliente Srl
• Indirizzo: Via Roma 10, 20121 Milano (MI)
• Telefono: +39 02 1234567
• Email: info@nomecliente.it
• Orari: Lun-Ven: 9:00–18:00 / Sab-Dom: Chiuso

Puoi fare lo stesso con le CTA, cioè i testi dei pulsanti.

Così mantieni coerenza nelle azioni principali e non ti ritrovi con cinque modi diversi per dire la stessa cosa.

• Prenota tour: Prenota Tour
• Vedi piani: Vedi Piani
• Approfondisci: Approfondisci
• Leggi di più: Leggi di Più

Qui il punto non è “automatizzare tutto perché sì”. Il punto è ridurre le micro-decisioni ripetitive mentre costruisci il sito.

Variabili link

Le variabili link salvano URL che usi in più moduli. Sono molto utili per link esterni, come profili social, strumenti di prenotazione o piattaforme di terze parti.

• Profilo social: https://www.instagram.com/tuo-profilo/
• Strumento di prenotazione: https://calendly.com/tuo-link/

Per i link interni a WordPress, spesso conviene usare i dati dinamici. Per i link esterni, invece, una variabile è più comoda.

Esempio: cambi il link Calendly o ottieni un nuovo handle Instagram. Aggiorni la variabile una sola volta e tutti i moduli collegati puntano al nuovo URL.

Rivedere il sistema completo

A questo punto il sistema del sito Coworking Space contiene:

• 21 variabili colore: 8 colori base e 13 colori relativi.
• 2 variabili font: titolo e testo corpo.
• 38 variabili numeriche: tipografia, spaziature, bordi, angoli, pulsanti e layout.
• 2 variabili immagine: logo scuro e logo chiaro.
• 9 variabili di testo: dati aziendali e CTA.
• 2 variabili link: URL esterni riutilizzabili.

In totale sono 74 variabili di design, ancora prima di costruire i moduli della pagina.

Sembra tanto?

In realtà stai evitando di spargere valori casuali in giro per il sito. Ogni colore ha un nome, ogni spazio ha uno scopo, ogni titolo ha una dimensione fluida, ogni logo può essere aggiornato da un solo punto.

Il vantaggio concreto arriva appena devi cambiare qualcosa. Se il blu del brand cambia, aggiorni Colore Primario. Se vuoi aumentare gli spazi tra le card, modifichi la variabile di spaziatura. Se cambia il numero di telefono, aggiorni la variabile di testo.

Fine del giro tra le impostazioni.

Checklist prima di passare ai preset

Prima di andare al passaggio dopo, cioè la costruzione dei preset, fai un controllo veloce. È lo stesso approccio utile anche prima di passare ai preset: chiarire struttura, contenuti e priorità del progetto prima di costruire davvero il sistema di design.

Non per burocrazia: per evitare di costruire sopra una base traballante.

Variabili di design

• Tutte le variabili hanno un nome chiaro e coerente.
• Non ci sono variabili rimaste con nomi provvisori o valori temporanei.
• I colori coprono primario, secondario, testi, sfondi, bordi, overlay e ombre.
• Le variabili tipografiche includono titoli, testo corpo, testi piccoli e campi modulo.
• Le spaziature seguono una progressione leggibile: piccola, media, regolare, grande.
• I valori fluidi usano clamp() dove serve adattamento tra mobile e desktop.

Se lavori con un design system, vale la pena dedicare uno spazio specifico anche alle variabili di colore Divi: organizzare palette, ruoli e stati in modo centralizzato aiuta a mantenere coerenza visiva, velocizzare le modifiche e ridurre gli errori tra sezioni, moduli e varianti responsive.

Accessibilità

• Le principali coppie testo/sfondo rispettano almeno il contrasto WCAG AA.
• I testi sopra i colori primari o le immagini restano leggibili.
• I pulsanti hanno dimensioni comode da cliccare anche su mobile.
• Gli elementi interattivi hanno stati visibili, soprattutto focus e hover.

Test tra dispositivi

• Controlla il layout su desktop, tablet e mobile.
• Verifica almeno larghezze come 375px, 768px e 1440px.
• Guarda se titoli, spaziature e griglie scalano come previsto.
• Controlla che nessuna variabile risulti mancante o non collegata.

Note da lasciare al cliente o a chi lavorerà dopo di te

• Elenca le variabili principali e spiega a cosa servono.
• Indica quali valori si possono modificare senza rischi.
• Segnala quali variabili non vanno toccate a caso, soprattutto se sono usate in molti preset.
• Prepara una piccola guida interna con colori, font, spaziature e componenti principali.

Una consegna fatta bene evita tre giri di email confuse la settimana dopo.

E sì, questa è una motivazione molto concreta.

Cosa fare adesso

Se hai seguito tutti i passaggi, ora hai una base ordinata di Variabili di Design per Divi 5. Non hai ancora costruito tutto il sito, ma hai preparato le regole che lo renderanno più coerente e più facile da aggiornare.

Prima di continuare, controlla queste quattro cose:

• Le variabili colore coprono davvero tutti i casi principali?
• Le dimensioni tipografiche funzionano bene su mobile e desktop?
• Le spaziature sono coerenti o hai ancora valori messi “a occhio”?
• I nomi delle variabili sono comprensibili anche per un’altra persona?

Se la risposta è sì, puoi passare al passaggio successivo: usare queste variabili per costruire i preset.

Se invece vuoi adattare questo sistema a un progetto reale e capire quali variabili ti servono davvero, possiamo guardarlo insieme.

Partiamo da quello che hai già impostato e vediamo cosa funziona meglio per il tuo sito.

Scrivimi e ti do una mano a strutturarlo in modo pulito e personalizzato.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.