Gerador de paleta Elementor: kit global e contraste
Escolha as quatro cores e quatro tipos de letra globais, verifique que o texto é legível e descarregue um kit para importar no Elementor ou as variáveis CSS.
- Grátis
- sem registo
- tudo acontece no seu navegador
Contraste (WCAG AA)
| Combinação | Rácio | Texto normal | Texto grande |
|---|
Pré-visualização com os tipos de letra instalados no seu computador
Título principal
Subtítulo secundário
Texto de parágrafo para verificar que se lê bem no fundo escolhido.
BotãoImportar no Elementor: Ferramentas › Importar/Exportar kit › Importar. Faça uma cópia de segurança antes.
Como criar o kit global com a ferramenta
Defina a paleta
Principal, secundária, texto e destaque, com os mesmos IDs que o Elementor usa para os seus globais. Para cada um, uma cor, um tipo de letra e um peso.
Verifique o contraste
Escolha a cor de fundo do seu site. Cada combinação mostra o seu rácio e indica se passa o WCAG AA para texto normal e grande.
Descarregue
Um kit .zip para importar no Elementor, ou as variáveis CSS --e-global-* para colar no seu tema.
O que gera o kit global
Um kit que o Elementor importa
O .zip segue o formato de exportação do Elementor: um manifest.json e um site-settings.json com as cores e tipos de letra do sistema.
Variáveis CSS com os nomes do Elementor
As variáveis usam os mesmos nomes que o Elementor gera (--e-global-color-primary, --e-global-typography-primary-font-family…).
Contraste WCAG AA
A tabela calcula o rácio de cada cor no fundo. AA exige 4,5:1 para texto normal e 3:1 para texto grande.
Pré-visualização
Um título, um subtítulo, um parágrafo e um botão com as suas cores e tipos de letra, para verificar que a combinação é legível.
Como definir as cores globais do Elementor manualmente
No editor do Elementor, abra o menu e vá a Definições do site. As cores globais e os tipos de letra globais encontram-se lá. Os quatro primeiros (principal, secundário, texto e destaque) são os do sistema.
Um widget usa uma cor global quando a seleciona a partir do ícone de globais. Altere esse global e muda em todos os widgets que o usam.
Fazer manualmente é adequado para um site. Se construir vários com a mesma marca, ou quiser verificar o contraste antes de decidir, o kit poupa passos.
E as cores escritas manualmente no site?
Um novo kit não altera os widgets com uma cor escrita manualmente. O plugin de sistema de design encontra-os e converte-os em globais ou variáveis Elementor 4.
Design system · Em breve
O que esta ferramenta não faz
- Não altera as cores escritas manualmente nos widgets: apenas define os globais.
- Para os tipos de letra define a família e o peso; o tamanho e a altura da linha são ajustados depois no Elementor.
- A pré-visualização usa os tipos de letra instalados no seu computador; no site, o Elementor carrega-os.
- Não cria variáveis Elementor 4, que são um sistema separado das cores globais.
Outras ferramentas gratuitas
Localizar e substituir no JSON do Elementor
Altere textos e links num modelo exportado sem quebrar o JSON.
Texto de consentimento para formulários
O aviso de proteção de dados de primeira camada e as caixas, em HTML.
Smart Search & Replace
Pesquise e substitua textos e links em todo o Elementor, com pré-visualização e desfazer.
Cores globais do Elementor: perguntas frequentes
Onde estão as cores globais no Elementor?
No editor, em menu › Definições do site › Cores globais. Os tipos de letra estão ao lado, em Tipos de letra globais.
O kit vai eliminar as minhas cores personalizadas?
Não deve: ao importar um kit, o Elementor substitui as quatro cores e tipos de letra do sistema e adiciona os personalizados aos que já tem. Faça uma cópia de segurança antes.
Que rácio de contraste preciso?
O WCAG 2.2 nível AA exige 4,5:1 para texto normal e 3:1 para texto grande (24 px, ou 18,66 px a negrito).
Funciona com Elementor 4?
Sim. O kit foi testado ao importá-lo no Elementor 4.4. As variáveis Elementor 4 são outra coisa e este kit não as cria.