In questo articolo parliamo dei colori globali di Divi 5 e di come usarli in modo intelligente dentro un sito WordPress.

Se ti è già capitato di cambiare un colore e poi inseguirlo in dieci moduli diversi, ecco, questa funzione serve proprio a evitare quel tipo di perdita di tempo.

Divi migliora la gestione dei colori con un sistema basato su variabili, pensato per flussi di lavoro più moderni, ordinati e facili da scalare.

Al centro c’è un selettore di colore riprogettato, collegato alle variabili di design, che usa il modello HSL — cioè tonalità, saturazione e luminosità — insieme ai colori relativi per creare palette dinamiche, collegate tra loro e aggiornabili in modo coerente in tutto il sito.

In pratica, invece di trattare ogni colore come un elemento isolato, puoi costruire un sistema che si muove insieme.

Cambi il colore base, e tutte le varianti collegate seguono la modifica.

In questo articolo vedremo come costruire, gestire e ottimizzare sistemi di colori scalabili in Divi. Partiremo dalle basi del modello HSL, poi passeremo alla configurazione delle variabili globali, alla creazione di colori relativi annidati e alle buone pratiche da seguire lungo il lavoro.

Pronti? Via.

Creare e gestire i colori relativi

Creare i colori relativi in Divi è piuttosto semplice.

Dato che i colori globali li abbiamo già visti, qui ci concentriamo solo sui colori relativi.

Lista di controllo del flusso di lavoro dei colori globali

Se stai lavorando su un nuovo progetto o stai rimettendo ordine in un sito già esistente, questa lista di controllo ti aiuta a configurare i colori globali in Divi in modo rapido e coerente.

Così eviti di rincorrere colori sparsi in giro per il progetto ogni volta che devi fare una modifica.

1. Definisci la palette prima di aprire Divi. Raccogli i colori del brand, in formato esadecimale o RGB, in un documento di riferimento. Avere i valori già pronti ti evita errori di inserimento e ti fa partire con il piede giusto fin dal primo clic.
2. Accedi al pannello dei colori globali dal Builder visuale. Apri le impostazioni globali del tema e trova la sezione dedicata ai colori. È il punto centrale da cui puoi gestire l’intera palette del progetto.
3. Assegna nomi descrittivi, non generici. Usa etichette come Primario del Brand, Sfondo della Sezione, Testo del Corpo invece di Colore 1 o Blu. Nomi chiari rendono il lavoro molto più veloce, anche se riapri il progetto dopo settimane.
4. Collega i colori agli elementi nel Builder, non inserirli manualmente. Ogni volta che imposti un colore su un modulo, seleziona il colore globale corrispondente invece di digitare il codice esadecimale. È questo il passaggio che rende il sistema davvero utile.
5. Verifica il contrasto prima di pubblicare. Controlla che le combinazioni tra testo e sfondo rispettino le soglie minime di leggibilità, usando WCAG AA come riferimento. Strumenti come WebAIM Contrast Checker funzionano benissimo anche fuori da Divi.
6. Testa una modifica globale su un elemento non critico. Prima di cambiare un colore globale in tutto il sito, guarda l’effetto su una sezione di test. Alcuni moduli potrebbero avere sostituzioni locali che non riflettono subito la modifica.
7. Documenta la palette nel materiale di consegna al cliente. Se il sito passa al cliente o a un altro sviluppatore, includi i nomi e i valori dei colori globali. Riduce parecchio le domande dopo la consegna.

Seguire questi passaggi all’inizio del progetto richiede pochi minuti, ma poi può farti risparmiare ore di correzioni durante revisioni, modifiche o aggiornamenti del brand.

Creare variabili colore regolando il filtro luminosità

Il cursore di Luminosità è lo strumento principale per creare variazioni di profondità partendo da un colore base.

Impostando un colore globale come riferimento, puoi generare tinte spostando il cursore verso valori positivi, quindi aggiungendo bianco, oppure ombre spostandolo verso valori negativi, quindi aggiungendo nero.

Per esempio, un valore di +20% produce una tinta più chiara, mentre -20% crea un’ombra più scura.

Questo metodo è più coerente della scelta manuale del colore, perché mantiene l’identità cromatica del punto di partenza.

Vediamo come creare ombre e tinte usando il gestore delle variabili e i filtri colore di Divi.

Per prima cosa, crea una nuova pagina nel Builder visuale. Poi crea una nuova variabile colore, cioè un colore globale, e aggiungila al gestore delle variabili.

Ora andremo a creare un colore figlio che usa il colore base e applica una regolazione della Luminosità.

Come primo passaggio, creeremo una sfumatura del blu medio #0460d9 definito prima. Con il gestore delle variabili aperto, clicca su + Aggiungi colore globale per aggiungere una nuova variabile colore.

Assegna un nome al nuovo colore, poi clicca sull’icona del selettore colore per aggiungerlo.

Quando si apre la finestra di selezione colore, scegli il colore globale che hai creato in precedenza, cioè #0460d9.

Clicca sul campione di colore nel campo Colore.

Quando compare il pannello Filtra colore globale, clicca per espandere il menu a tendina Filtri colore.

Cerca il cursore Luminosità e imposta il valore su +20%.

In questo modo creerai una tinta leggermente più chiara rispetto al colore globale di partenza.

Chiudi la finestra e clicca sul pulsante Salva variabili.

Per creare un blu più scuro, invece, regola il cursore Luminosità su una percentuale negativa.

Clicca per aggiungere un nuovo colore globale, seleziona il colore base #0460d9 e applica un filtro Luminosità -30%. Otterrai così una variante più scura del colore base.

Capire le basi: il modello cromatico HSL

Prima di entrare nelle funzioni dei colori globali e dei colori relativi di Divi, conviene fermarsi un attimo sul modello cromatico HSL.

È la base su cui si appoggia tutto il sistema. E, una volta capito, molte cose diventano subito più intuitive.

Se non hai mai ragionato in HSL, non preoccuparti.

Ora lo vediamo in modo semplice.

Creare variabili colore con il filtro tonalità

Regolare il filtro della tonalità ti permette di creare colori complementari o colori di accento spostando il valore della tonalità in gradi.

Nel modello HSL, la tonalità è rappresentata come una ruota cromatica di 360 gradi. I colori complementari si trovano esattamente sul lato opposto di questa ruota.

Quindi, per trovare il complementare perfetto del colore base, basta aggiungere o sottrarre 180° al valore attuale.

Vediamo come creare una variante complementare del colore base #0460d9 nel gestore delle variabili.

Clicca per aggiungere un nuovo colore globale. Seleziona il colore base #0460d9 nel selettore del colore.

Poi espandi il menu a tendina Filtri colore e inserisci 180 nel campo della tonalità. In questo modo creerai un valore cromatico esattamente opposto al colore base.

Cos'è HSL?

HSL è l’acronimo di Tonalità, Saturazione e Luminosità.

È un modello di colore cilindrico che rappresenta i colori in un modo più vicino a come, di solito, le persone pensano alle variazioni cromatiche.

Tonalità: è il colore base, misurato in gradi su una ruota cromatica da 0° a 360°.

Per esempio, 0° o 360° corrisponde al rosso, 120° al verde e 240° al blu. Modificando la tonalità puoi creare facilmente colori complementari o analoghi. Se aggiungi o sottrai 180°, ottieni il colore opposto sulla ruota.

Saturazione: è una percentuale da 0% a 100% che controlla quanto il colore è intenso o vivido.

Al 100% il colore è pieno e brillante. Allo 0%, invece, è completamente desaturato e diventa una tonalità di grigio.

Luminosità: anche qui parliamo di una percentuale da 0% a 100%.

Serve a decidere quanto il colore appare chiaro o scuro. A 0% hai il nero puro, a 100% il bianco puro, mentre a 50% vedi la tonalità alla sua intensità piena, senza aggiunta di nero o bianco.

Messi insieme, questi tre valori ti danno un controllo molto preciso sul colore.

Per esempio, HSL(240, 100%, 50%) corrisponde a un blu puro.

Creare variabili di colore regolando il filtro di saturazione

Creare una versione attenuata di un colore riducendone la saturazione è una tecnica utile per costruire gerarchia visiva.

Nel design delle interfacce, se ogni colore è saturo al massimo, tutto compete per attirare l’attenzione nello stesso momento. E il risultato, spesso, è un’interfaccia visivamente stancante e confusa.

Spostare il cursore della Saturazione su un valore negativo in Divi equivale ad aggiungere grigio al colore.

I titoli principali, per esempio, possono restare vividi e ad alto contrasto, mentre i testi secondari dovrebbero arretrare visivamente. Un modo rapido per ottenere questo effetto è partire dal colore base e ridurre la saturazione tra -30% e -50%.

Crea un nuovo colore globale usando il colore base creato in precedenza (#0460d9).

Nelle Impostazioni colore, imposta il valore di Saturazione a -50% tramite il cursore.

Perché preferire HSL a HEX o RGB?

I formati tradizionali come HEX, cioè un codice a sei caratteri tipo #3a7bd5, e RGB, cioè tre valori numerici per rosso, verde e blu come rgb(58, 123, 213), sono precisi.

Il problema è che, nel lavoro di design, spesso non sono molto pratici. Trattano ogni colore come un valore fisso.

Quindi, se vuoi ottenere una variante più scura, devi modificare i numeri a mano, spesso andando un po’ a tentativi e senza una logica visiva immediata.

Per esempio: se vuoi scurire il colore #3a7bd5, guardando il codice HEX non è affatto chiaro da dove partire.

Con HSL, invece, basta abbassare la luminosità dal 60% al 40% e il colore diventa più scuro mantenendo lo stesso tono di base.

È proprio qui che HSL torna comodo, perché permette di lavorare in modo relativo:

• Sfumature e tinte: ti basta regolare la luminosità, lasciando invariati tonalità e saturazione.
• Complementari e accenti: puoi spostare la tonalità di un numero fisso di gradi.
• Toni attenuati: riduci la saturazione per ottenere varianti più morbide.
• Accessibilità: puoi correggere facilmente luminosità o saturazione per migliorare il contrasto senza rompere l’armonia della palette.

Questo rende HSL molto adatto per costruire palette professionali e scalabili, dove ogni colore mantiene un rapporto chiaro con i colori di base.

Applica i nuovi colori globali

Ora che hai creato le nuove variabili colore, puoi applicarle a un layout in modo molto semplice.

Per aggiungere un colore globale allo sfondo di una sezione, apri la scheda Contenuto, espandi il menu Sfondo e clicca sull’icona del selettore del colore.

In fondo al selettore dei colori vedrai apparire l’elenco dei colori globali disponibili.

Per applicare un colore globale a un modulo Heading, vai nella scheda Design ed espandi il menu a tendina Testo del Titolo.

Nel campo Colore del Testo del Titolo, clicca sull’icona del selettore del colore e scegli il colore globale che vuoi usare.

Applica il colore complementare creato in precedenza a un modulo Button.

Con i colori globali configurati, puoi aggiornare l’intera palette cromatica modificando un solo colore base.

Per esempio, se vuoi passare da un tema blu a uno verde, ti basta cambiare il colore base nel gestore delle variabili. Il cambiamento si propagherà automaticamente ovunque, tutto in un solo passaggio.

Come Divi usa HSL per modifiche cromatiche precise e relative

Divi 5 migliora il lavoro con i colori grazie al supporto del modello HSL, cioè tonalità, saturazione e luminosità, e ai filtri colore.

Questi strumenti permettono di creare variazioni cromatiche in modo relativo e coerente, mantenendo comunque la compatibilità con i formati HEX e RGB.

Invece di trattare ogni colore come un elemento isolato, ti ritrovi con un sistema in cui tutto è collegato matematicamente.

Partendo da un colore globale di base, puoi definire varianti.

Per esempio, un colore per lo stato hover di un pulsante che sia il 20% più scuro, oppure uno sfondo con saturazione ridotta del 30%, semplicemente usando i cursori dei filtri colore.

Tipo: imposti il blu #1E90FF come colore globale principale.

Poi crei una variante con luminosità ridotta del 20% per i pulsanti nello stato attivo. Se più avanti decidi di cambiare quel blu in un verde, tutte le varianti collegate — quindi lo stato attivo, lo sfondo attenuato e qualsiasi altra sfumatura derivata — si aggiornano da sole, senza che tu debba rimettere mano a ogni singolo elemento.

Buone pratiche e consigli

Usare bene i colori globali e i colori relativi in Divi non significa solo conoscere gli strumenti.

Significa anche lavorare in modo ordinato, così da mantenere coerenza visiva, facilità di aggiornamento e un flusso di lavoro più leggero nel tempo.

Qui sotto trovi alcune buone pratiche e suggerimenti concreti per sfruttarli davvero bene.

I colori globali in Divi: le basi del sistema

I colori globali in Divi sono la base di tutto il sistema di gestione del colore.

Sono integrati direttamente con le variabili di design, cioè un archivio centralizzato dove raccogli e gestisci valori riutilizzabili come colori, font, testi e immagini.

Puoi immaginarlo come un pannello di controllo generale: cambi un colore lì, e si aggiorna automaticamente ovunque lo hai usato nel sito.

Grazie a questa integrazione, i colori globali non sono più solo una tavolozza separata.

Diventano parte di un sistema di design coordinato e coerente.

Pianifica prima la tua palette di colori

Prima ancora di aprire il Builder visuale e iniziare ad assegnare colori, fermati un attimo a pianificare.

Una piccola preparazione iniziale può evitarti parecchia frustrazione dopo. Parti dalle linee guida della tua identità visiva: raccogli i colori principali e quelli di accento da usare come colori globali in Divi.

Se stai partendo da zero, strumenti come Adobe Color possono aiutarti a trovare una combinazione adatta.

Pianifica anche come collegherai le varianti cromatiche ai colori base. Per esempio, definisci prima i colori per gli stati dei pulsanti, come hover e attivo.

Avere un piano chiaro prima di costruire rende tutto più fluido.

Come funzionano i colori globali in Divi

In passato, i colori globali di Divi erano una funzione utile ma abbastanza isolata.

Ti permettevano di definire un insieme di colori fissi, tramite codici esadecimali, e di applicarli in tutto il sito, con il vantaggio di poterli aggiornare da un solo punto.

Il limite, però, era che si trattava di colori statici e scollegati tra loro.

Per esempio, se volevi una variante più chiara o più scura di un colore, dovevi crearla a mano come colore separato, senza nessun legame con quello originale.

Divi ridisegna questo approccio integrando i colori direttamente nel sistema delle variabili di design, cioè un insieme di impostazioni globali che controllano l’aspetto dell’intero sito in modo coordinato:

• I colori diventano variabili: possono essere di base oppure relativi, cioè derivati da un colore principale tramite piccole modifiche di tonalità, saturazione o luminosità.
• Al posto della vecchia scheda "Global", ora c’è un’icona che collega direttamente al sistema delle variabili di design.
• I colori relativi funzionano come una catena: se cambi il colore principale, tutti quelli derivati si aggiornano automaticamente. È un po’ come cambiare il colore di una parete e vedere tende, cuscini e quadri adattarsi da soli per restare in armonia.
• Questo approccio rende più semplice costruire e mantenere nel tempo una gamma di colori coerente per tutto il sito.

In pratica, puoi cambiare un singolo colore base e vedere aggiornati in automatico tutti i colori derivati nell’intero progetto, senza dover toccare ogni elemento a mano.

Organizza e nomina i tuoi colori

Assegnare nomi chiari alle variabili colore riduce gli errori, accelera le modifiche e rende più semplice lavorare su un progetto condiviso.

Bastano pochi minuti spesi bene per risparmiarti un sacco di confusione più avanti.

Ecco alcuni criteri pratici per mantenere il gestore delle variabili ordinato e facile da consultare:

• Usa nomi semantici quando ha senso: scegli nomi chiari, basati sul ruolo del colore e sulla sua funzione. Per esempio: Marchio Principale, Successo di Accesso, Titolo del testo o Pulsanti. Questo approccio è particolarmente utile se lavori in team.
• Raggruppa i colori correlati: aggiungi prefissi semplici come Base principale, Principale Chiaro, Principale Scuro o Principale al passaggio del mouse. Così le famiglie di colori restano vicine mentre navighi nell’elenco.
• Mantieni i nomi brevi e chiari: non servono etichette lunghissime, ma nemmeno abbreviazioni misteriose. L’obiettivo è capirli al volo, soprattutto se il progetto passa di mano.

Accedere alla gestione delle variabili di design

Per gestire i colori globali, fai clic sull’icona del gestore delle variabili nel Builder visuale.

Vai alla scheda Colori ed espandila.

Da qui puoi visualizzare, modificare o aggiungere un nuovo colore globale cliccando sul pulsante Aggiungi un colore globale. Quando hai finito, salva tutto con il pulsante Salva le variabili.

Evita gli errori comuni

Anche con un sistema di variabili ben organizzato, ci sono alcuni errori ricorrenti che possono mandare fuori strada la coerenza della palette.

Ecco come riconoscerli ed evitarli:

• Aggiustamenti casuali: non modificare luminosità, cioè quanto un colore è chiaro o scuro, o saturazione, cioè quanto è intenso o spento, solo perché “a occhio sembra giusto”. Mantieni variazioni costanti, per esempio sempre del 10-20%, così la tua scala resta prevedibile e armoniosa.
• Troppi colori: è facile farsi prendere la mano e creare una variabile per qualunque cosa. Però prova a restare entro 10-15 colori. Troppe opzioni generano confusione e aumentano il rischio di usare tonalità incoerenti.
• Ignorare l’accessibilità: non trascurare mai il contrasto tra testo e sfondo. Le regolazioni relative della luminosità aiutano parecchio a rispettare le soglie WCAG, cioè le linee guida internazionali per l’accessibilità del web, man mano che modifichi i colori base.

Seguire questi accorgimenti ti aiuta a evitare incoerenze nella palette e rende più semplice la gestione del colore, anche quando lavori con varianti relative e controlli di accessibilità.

Colori globali predefiniti

Divi include quattro colori globali predefiniti, e ognuno ha un ruolo preciso nell’aspetto visivo del sito:

• Colore primario: di solito è il colore principale del brand, perfetto per pulsanti, link e accenti visivi.
• Colore secondario: un colore complementare o di supporto al brand.
• Colore dei titoli: il colore predefinito per i titoli da H1 a H6.
• Colore del testo principale: il colore predefinito per paragrafi e testo corrente.

Quando importi un pacchetto di layout o un sito iniziale, Divi aggiunge automaticamente i colori associati al gestore delle variabili.

Questi colori ti danno una base immediata da cui partire.

I valori predefiniti, infatti, sono un buon punto di appoggio per applicare i colori in modo coerente tra i moduli e ottenere un risultato visivamente uniforme.

Accessibilità e contrasto: usare i colori relativi senza fallire i criteri WCAG

Definire una palette con i colori globali è solo il primo passo.

Il punto delicato arriva quando inizi ad applicare varianti relative — per esempio un tono più chiaro del colore primario come sfondo di una card — senza verificare se il testo sopra supera davvero le soglie di contrasto WCAG: 4.5:1 per il testo normale e 3:1 per il testo grande.

Applicazione su tutto il sito e aggiornamenti dinamici

Una volta definiti, i colori globali si applicano in modo molto semplice.

Per esempio, se vuoi aggiornare il colore di un modulo icona nel layout, clicca sul modulo, vai nella scheda Progettazione ed espandi il menu Icona. Poi clicca sul campione di colore nel campo Colore dell’icona.

Si aprirà il selettore colore, e lì potrai scegliere uno dei colori globali che hai già configurato.

Una volta che un colore globale è stato definito, puoi modificarlo direttamente dal gestore delle variabili, cioè il pannello che raccoglie le variabili di stile.

Ogni cambiamento si propaga automaticamente a tutte le parti del sito che usano quel colore. Quindi, se devi aggiornare l’identità visiva, puoi farlo in pochi clic.

Imposta le coppie testo/superficie fin dall'inizio

Prima di creare varianti relative, definisci in modo esplicito quali colori devono lavorare insieme: quale colore di testo userai su quale sfondo.

Ragionare per coppie testo/superficie ti permette di testare il contrasto in modo ordinato, invece di correggere tutto dopo, componente per componente.

I colori relativi

I colori relativi sono una delle funzioni più interessanti di Divi 5.

Ti permettono di creare varianti cromatiche collegate a un colore globale principale, mantenendo armonia visiva e aggiornamenti automatici in tutto il sito.

Testa il contrasto prima di propagare le modifiche

Strumenti come WebAIM Contrast Checker o il pannello Accessibilità di Chrome DevTools ti permettono di verificare rapidamente una coppia di colori.

Fai il test ogni volta che modifichi un colore globale, perché quella modifica si propagherà automaticamente a tutte le istanze. Un valore HEX che sembra innocuo può rompere decine di combinazioni in un colpo solo.

Cosa sono i colori relativi?

Un colore relativo è una variabile di colore che parte da un colore globale già esistente e ne ricava una variante: una tinta più chiara, un’ombra più scura oppure una versione semi-trasparente.

Invece di definire un colore fisso e indipendente, costruisci il nuovo colore partendo da una base e mantieni un legame dinamico con essa.

Per esempio, se il colore principale del brand è un blu scuro, il suo colore relativo potrebbe essere lo stesso blu con il 30% di opacità, usato per sfondi o overlay.

In questo modo la palette smette di essere una collezione di colori sparsi e diventa un sistema coerente. Se cambi il colore genitore, tutte le varianti si aggiornano di conseguenza.

Usa la luminosità per correggere senza rompere l'armonia

Se una variante relativa non supera il test di contrasto, la prima leva da toccare è la luminosità nel modello HSL.

Aumentare o diminuire la luminosità della superficie o del testo ti consente di recuperare il contrasto necessario mantenendo la stessa tonalità e la stessa saturazione della palette originale.

Di solito è meglio questo approccio che sostituire il colore con un valore arbitrario, perché preserva la coerenza visiva del progetto.

Come funzionano i colori relativi

Per prima cosa si crea un colore figlio basato su un genitore.

Per esempio, puoi ottenere una variante chiara derivata da un colore globale aumentando la luminosità.

Quando modifichi il colore base, ogni variazione relativa collegata si aggiorna automaticamente lungo tutta la catena.

Questo mantiene la coerenza matematica senza interventi manuali e riduce i tempi di revisione del design.

Lista di controllo minima prima della messa online

• Verifica le coppie principali: testo su sfondo chiaro e testo su sfondo scuro.
• Controlla le varianti relative usate per stati hover, badge e notifiche.
• Testa con un simulatore di daltonismo le combinazioni di colore su colore, non solo testo su sfondo.
• Documenta i valori approvati nel tuo sistema di design o nel file di consegna al cliente.

Gestire il contrasto a livello di colore globale, invece di correggere modulo per modulo, riduce parecchio il tempo di revisione e rende il progetto più solido anche nella fase di consegna.

Integrazione con i filtri HSL

I colori relativi si gestiscono tramite i filtri del selettore colore, che lavora con il modello HSL — quindi Tonalità, Saturazione e Luminosità:

• Tonalità (Hue): si regola in gradi e supporta anche valori negativi. Aggiungere o sottrarre gradi ti permette di ottenere colori di accento o complementari. Per esempio, spostando di 30° ottieni una variante più calda del colore base.
• Saturazione (Saturation): si regola in percentuale da 0 a 100. Ridurla avvicina il colore al grigio, mentre portarla a zero lo trasforma in scala di grigi. È utile per creare versioni più neutre o più spente.
• Luminosità (Lightness): anche questa è in percentuale. Se la aumenti, il colore si schiarisce; se la riduci, si scurisce. Per esempio, aggiungere il 15% di luminosità al colore base può creare un tono ideale per gli stati di hover.
• Opacità (Opacity): controlla la trasparenza del colore. È utile per overlay, ombre leggere o effetti al passaggio del mouse.

Questi cursori ti permettono di fare modifiche cromatiche precise direttamente sul colore base.

Il risultato può essere salvato come nuova variabile relativa, così la relazione resta dinamica. In altre parole, se il colore base cambia, anche il colore derivato si aggiorna automaticamente. Ad esempio, se crei una variabile relativa che scurisce il colore primario del 20%, quella variabile continuerà a riflettere qualsiasi modifica futura del colore primario.

Risoluzione dei problemi: quando i colori globali/relativi non si aggiornano come previsto

Lavorare con i colori globali e relativi in Divi semplifica molto la gestione del design.

Però ci sono situazioni in cui le modifiche non si propagano come dovrebbero. Sapere quali sono i casi più comuni ti aiuta a risolvere il problema in pochi minuti, senza perderti in tentativi inutili.

Sovrascritture a livello di modulo

Questo è il caso più frequente: aggiorni un colore globale nella palette, ma alcuni elementi della pagina non cambiano.

Quasi sempre la causa è un colore impostato direttamente nelle opzioni del modulo, che va a sovrascrivere il valore globale.

Per controllare, apri il modulo interessato e verifica se il campo colore mostra un valore esplicito invece del riferimento al colore globale. Se è così, rimuovi il valore locale e riassegna il colore globale.

Annidamento eccessivo ed ereditarietà interrotta

Con strutture molto annidate — per esempio sezioni dentro sezioni o moduli dentro colonne personalizzate — l’ereditarietà del colore può interrompersi.

Se un elemento intermedio ha un colore impostato in modo esplicito, i livelli successivi non ricevono più il valore globale.

In questi casi conviene controllare la gerarchia partendo dall’elemento problematico e risalendo verso l’alto, fino a trovare dove si spezza la catena.

Colori relativi e overlay con opacità

I colori relativi calcolano le varianti partendo dal colore base.

Se il risultato visivo ti sembra strano, controlla due cose: che il colore di partenza sia davvero un colore globale e non un valore statico, e che non ci siano overlay con opacità applicati a livello di sezione o riga che alterano la percezione finale.

Un overlay semitrasparente può cambiare parecchio l’aspetto di una variante anche se il calcolo è corretto.

Cache e anteprima non aggiornata

A volte il problema non è nella configurazione ma nella cache.

Svuota la cache del plugin di caching attivo e ricarica la pagina in modalità privata prima di escludere problemi di rendering nel builder.

Questo vale anche per le anteprime dei moduli nel frontend.

Se dopo questi controlli il comportamento continua a essere anomalo, la strada più efficace è isolare il modulo problematico in una pagina di test, assegnare il colore globale da zero e verificare se il problema si ripresenta.

Inizia a usare i colori globali in Divi

Costruire un sistema di colori variabile in Divi richiede un po’ di pianificazione: dalla scelta del colore base alla definizione delle relazioni tra tonalità, saturazione e luminosità, fino alla verifica dei contrasti per fare in modo che il sito resti leggibile per tutti.

In cambio, però, ottieni un sistema molto più ordinato, flessibile e facile da aggiornare.

Ricapitolando: i colori globali di Divi 5 ti permettono di centralizzare la palette, creare varianti collegate tra loro e aggiornare l’aspetto del sito in modo coerente, anche quando il progetto cresce o cambia direzione.

Se vuoi assicurarti che la tua palette sia coerente, accessibile e ben strutturata, posso aiutarti:

• Revisione della palette: analisi dei colori globali attivi nel tuo sito, con identificazione di incoerenze o ridondanze.
• Verifica accessibilità: controllo dei rapporti di contrasto secondo le linee guida internazionali per l’accessibilità web, con suggerimenti pratici per correggere le criticità.
• Impostazione del sistema variabile: supporto operativo per strutturare tinte, sfumature e colori di risalto derivati matematicamente da un colore base in Divi.

Se stai lavorando a un progetto e vuoi un confronto tecnico su come organizzare il tuo sistema colore, scrivimi direttamente.

Oppure se hai dubbi su qualche passaggio, puoi anche partire da una domanda specifica e ragionarla insieme.

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