Generatore di palette Elementor: kit globale e contrasto
Scegli i quattro colori e i quattro font globali, verifica che il testo sia leggibile e scarica un kit da importare in Elementor o le variabili CSS.
- Gratis
- senza registrazione
- tutto avviene nel tuo browser
Contrasto (WCAG AA)
| Combinazione | Rapporto | Testo normale | Testo grande |
|---|
Anteprima con i font installati sul tuo computer
Titolo principale
Sottotitolo secondario
Testo di paragrafo per verificare che si legga bene sullo sfondo scelto.
PulsanteImporta in Elementor: Strumenti › Importa/esporta kit › Importa. Fai un backup prima.
Come creare il kit globale con lo strumento
Imposta la palette
Principale, secondario, testo e accento, con gli stessi ID che Elementor usa per i suoi globali. Per ognuno, un colore, un font e un peso.
Controlla il contrasto
Scegli il colore di sfondo del tuo sito. Ogni combinazione mostra il suo rapporto e indica se supera il WCAG AA per testo normale e grande.
Scarica
Un kit .zip da importare in Elementor, o le variabili CSS --e-global-* da incollare nel tuo tema.
Cosa genera il kit globale
Un kit che Elementor importa
Il .zip segue il formato di esportazione di Elementor: un manifest.json e un site-settings.json con i colori e font di sistema.
Variabili CSS con i nomi di Elementor
Le variabili usano gli stessi nomi che Elementor genera (--e-global-color-primary, --e-global-typography-primary-font-family…).
Contrasto WCAG AA
La tabella calcola il rapporto di ogni colore sullo sfondo. AA richiede 4,5:1 per testo normale e 3:1 per testo grande.
Anteprima
Un titolo, un sottotitolo, un paragrafo e un pulsante con i tuoi colori e font, per verificare che la combinazione sia leggibile.
Come impostare manualmente i colori globali di Elementor
Nell'editor di Elementor, apri il menu e vai alle Impostazioni del sito. Lì si trovano Colori globali e Font globali. I primi quattro (principale, secondario, testo e accento) sono quelli di sistema.
Un widget usa un colore globale quando lo selezioni dall'icona dei globali nella sua impostazione colore. Cambia quel globale e cambia in tutti i widget che lo usano.
Farlo a mano va bene per un sito. Se costruisci più siti con lo stesso brand, o vuoi controllare il contrasto prima di decidere, il kit risparmia passi.
E i colori digitati a mano già presenti nel sito?
Un nuovo kit non cambia i widget con un colore digitato a mano. Il plugin di design system li trova e li converte in globali o variabili Elementor 4.
Design system · Prossimamente
Cosa non fa questo strumento
- Non cambia i colori digitati a mano nei widget: imposta solo i globali.
- Per i font imposta famiglia e peso; dimensione e altezza della riga si regolano dopo in Elementor.
- L'anteprima usa i font installati sul tuo computer; sul sito, Elementor li carica.
- Non crea variabili Elementor 4, che sono un sistema separato dai colori globali.
Altri strumenti gratuiti
Trova e sostituisci nel JSON di Elementor
Modifica testi e link in un modello esportato senza rompere il JSON.
Testo di consenso per moduli
L'informativa sulla protezione dei dati di primo livello e le caselle, in HTML.
Smart Search & Replace
Cerca e sostituisci testi e link in tutto Elementor, con anteprima e annulla.
Colori globali Elementor: domande frequenti
Dove si trovano i colori globali in Elementor?
Nell'editor, nel menu › Impostazioni del sito › Colori globali. I font si trovano accanto, in Font globali.
Il kit eliminerà i miei colori personalizzati?
Non dovrebbe: importando un kit, Elementor sostituisce i quattro colori e font di sistema e aggiunge quelli personalizzati a quelli che hai già. Fai un backup prima.
Quale rapporto di contrasto serve?
WCAG 2.2 livello AA richiede 4,5:1 per testo normale e 3:1 per testo grande (24 px, o 18,66 px in grassetto).
Funziona con Elementor 4?
Sì. Il kit è stato testato importandolo in Elementor 4.4. Le variabili Elementor 4 sono un'altra cosa e questo kit non le crea.