Generador de paleta per a Elementor: kit global i contrast
Tria els quatre colors i les quatre fonts globals, comprova que el text es llegeix bé i descarrega un kit per importar a Elementor o les variables CSS.
- Gratuïta
- sense registre
- tot passa al teu navegador
Contrast (WCAG AA)
| Combinació | Ratio | Text normal | Text gran |
|---|
Vista prèvia amb les fonts instal·lades al teu ordinador
Titular principal
Subtítol secundari
Text de paràgraf per comprovar que es llegeix bé sobre el fons triat.
BotóImportar a Elementor: Eines › Importar/Exportar kit › Importar. Fes una còpia de seguretat abans.
Com crear el kit global amb l'eina
Defineix la paleta
Principal, secundari, text i accent, amb els mateixos IDs que usa Elementor per als seus globals. Per a cadascun, un color, una font i un pes.
Comprova el contrast
Tria el color de fons del teu lloc. Cada combinació mostra el seu ratio i si passa el WCAG AA per a text normal i gran.
Descarrega
Un kit .zip per importar a Elementor, o les variables CSS --e-global-* per enganxar al teu tema.
Què genera el kit global
Un kit que Elementor importa
El .zip segueix el format d'exportació d'Elementor: un manifest.json i un site-settings.json amb els colors i les fonts del sistema.
Variables CSS amb els noms d'Elementor
Les variables usen els mateixos noms que genera Elementor (--e-global-color-primary, --e-global-typography-primary-font-family…).
Contrast WCAG AA
La taula calcula el ratio de cada color sobre el fons. AA exigeix 4,5:1 per a text normal i 3:1 per a text gran.
Vista prèvia
Un encapçalament, un subtítol, un paràgraf i un botó amb els teus colors i fonts, perquè puguis comprovar que la combinació es llegeix bé.
Com definir els colors globals d'Elementor a mà
A l'editor d'Elementor, obre el menú i ves a Paràmetres del lloc. Allà hi ha Colors globals i Tipografies globals. Els quatre primers (principal, secundari, text i accent) són els del sistema.
Un widget usa un color global quan el selecciones des de la icona de globals. Canvia aquell global i canvia a tots els widgets que el fan servir. Si el color s'ha escrit a mà, no.
Fer-ho a mà va bé per a un lloc. Si construeixes diverses webs amb la mateixa marca, o vols comprovar el contrast abans de decidir, el kit estalvia passos.
I els colors escrits a mà que ja hi ha al lloc?
Un kit nou no canvia els widgets amb un color escrit a mà. El plugin de sistema de disseny els troba i els converteix en globals o variables d'Elementor 4.
Design system · Properament
Què no fa aquesta eina
- No canvia els colors escrits a mà als widgets: només defineix els globals.
- Per a les fonts defineix la família i el pes; la mida i l'alçada de línia s'ajusten després a Elementor.
- La vista prèvia usa les fonts instal·lades al teu ordinador; al lloc, Elementor les carrega.
- No crea variables d'Elementor 4, que són un sistema separat dels colors globals.
Altres eines gratuïtes
Cerca i substitueix en JSON d'Elementor
Canvia textos i enllaços en una plantilla exportada sense trencar el JSON.
Text legal per a formularis
La primera capa de protecció de dades i les caselles, en HTML.
Smart Search & Replace
Cerca i substitueix textos i enllaços a tot Elementor, amb previsualització i desfés.
Colors globals d'Elementor: preguntes freqüents
On estan els colors globals a Elementor?
A l'editor, al menú › Paràmetres del lloc › Colors globals. Les fonts estan al costat, a Tipografies globals.
El kit eliminarà els meus colors personalitzats?
No hauria: en importar un kit, Elementor substitueix els quatre colors i fonts del sistema i afegeix els personalitzats als que ja tens. Fes una còpia de seguretat abans.
Quin ratio de contrast necessito?
El WCAG 2.2 nivell AA exigeix 4,5:1 per a text normal i 3:1 per a text gran (24 px, o 18,66 px en negreta).
Funciona amb Elementor 4?
Sí. El kit es va provar important-lo a Elementor 4.4. Les variables d'Elementor 4 són una altra cosa i aquest kit no les crea.