Kit global de Elementor: colores, fuentes y contraste
Elige los cuatro colores y las cuatro tipografías globales, comprueba que el texto se lee y descarga un kit para importar en Elementor o las variables CSS.
- Gratis
- sin registro
- todo ocurre en tu navegador
Contraste (WCAG AA)
| Combinación | Ratio | Texto normal | Texto grande |
|---|
Vista previa con las fuentes que tengas instaladas
Titular principal
Subtítulo secundario
Texto de párrafo para comprobar que se lee bien sobre el fondo elegido.
BotónImportar en Elementor: Herramientas › Importar/Exportar kit › Importar. Haz una copia de seguridad antes.
Cómo crear el kit global con la herramienta
Define la paleta
Principal, secundario, texto y acento, con las mismas IDs que usa Elementor en sus globales. Para cada uno, el color, la fuente y el peso.
Comprueba el contraste
Elige el fondo de tu web. Cada combinación muestra su ratio y si pasa el nivel AA de WCAG para texto normal y grande.
Descarga
Un kit .zip para importarlo en Elementor, o las variables CSS --e-global-* para pegarlas en tu tema o en otra herramienta.
Qué genera el generador de kit global
Un kit que Elementor importa
El .zip sigue el formato de exportación de Elementor: un manifest.json y un site-settings.json con los colores y las tipografías del sistema. Lo hemos probado importándolo en Elementor 4.4: crea un kit nuevo con los cuatro colores y las cuatro tipografías tal cual.
Variables CSS con los nombres de Elementor
Las variables se llaman igual que las que genera Elementor (--e-global-color-primary, --e-global-typography-primary-font-family…), así encajan con el CSS que ya tengas escrito para tu web.
Contraste WCAG AA
La tabla calcula el ratio de cada color sobre el fondo y del blanco sobre los colores de botón. El nivel AA pide 4,5:1 para texto normal y 3:1 para texto grande.
Vista previa
Un titular, un subtítulo, un párrafo y un botón con tus colores y tus fuentes, para ver si la combinación se lee bien antes de importarla.
Cómo configurar los colores globales de Elementor a mano
En el editor de Elementor, abre el menú y entra en Ajustes del sitio. Ahí están Colores globales y Fuentes globales. Los cuatro primeros (principal, secundario, texto y acento) son los del sistema; debajo puedes añadir colores y fuentes personalizados.
Un widget usa un color global cuando lo eliges desde el icono de globales en su ajuste de color. Si cambias ese global, cambia en todos los widgets que lo usan. Si el color está escrito a mano, no.
Hacerlo a mano está bien para una web. Si montas varias con la misma marca, o si quieres comprobar el contraste antes de decidir, el kit ahorra pasos: lo preparas una vez y lo importas en cada web.
¿Y los colores escritos a mano que ya tiene la web?
Un kit nuevo no cambia los widgets que llevan el color escrito a mano. El plugin de sistema de diseño los encuentra y los convierte en globales o en variables de Elementor 4.
Sistema de diseño · Próximamente
Lo que no hace esta herramienta
- No cambia los colores escritos a mano en los widgets: solo define los globales.
- De las fuentes define la familia y el peso; el tamaño y el interlineado se ajustan después en Elementor.
- La vista previa usa las fuentes instaladas en tu equipo; en la web, las carga Elementor.
- No crea las variables de Elementor 4, que son un sistema aparte de los colores globales.
Otras herramientas gratis
Buscar y reemplazar en un JSON de Elementor
Cambia textos y enlaces dentro de una plantilla exportada sin romper el JSON.
Texto legal para formularios
La primera capa de protección de datos y las casillas, en HTML.
Smart Search & Replace
Busca y reemplaza textos y enlaces en todo Elementor, con vista previa y deshacer.
Preguntas sobre los colores globales de Elementor
¿Dónde están los colores globales en Elementor?
En el editor, en el menú › Ajustes del sitio › Colores globales. Las fuentes están al lado, en Fuentes globales.
¿El kit borra mis colores personalizados?
No debería: al importar un kit, Elementor sustituye los cuatro colores y tipografías del sistema y añade los personalizados a los que ya tienes. Haz una copia antes, como con cualquier importación.
¿Qué ratio de contraste necesito?
WCAG 2.2 nivel AA pide 4,5:1 para texto normal y 3:1 para texto grande (24 px, o 18,66 px en negrita).
¿Funciona con Elementor 4?
Sí. El kit se ha probado importándolo en Elementor 4.4. Las variables de Elementor 4 son otra cosa y este kit no las crea.