Quem usa Elementor pela primeira vez muda a cor em cada widget individualmente — seleciona o elemento, vai na aba Estilo, escolhe a cor. Funciona. Mas em projetos com muitas páginas, essa abordagem cria inconsistência: o azul do título numa página é levemente diferente do azul em outra, e corrigir isso significa editar elemento por elemento.
A solução é usar as Cores Globais do Elementor, que permitem definir as cores do site uma vez e aplicar em qualquer elemento com um clique. Quando você muda uma cor global, ela atualiza automaticamente em todos os elementos que a usam.
Existem três contextos onde você vai precisar mudar cores no Elementor:
| Situação | Método correto |
|---|---|
| Cor diferente em um elemento específico | Aba Estilo do widget |
| Cor consistente em todo o site | Cores Globais (Site Kit) |
| Cor de um só tipo de elemento (todos os H2, por exemplo) | CSS personalizado |
| Uma única palavra com cor diferente no título | Tag HTML inline |
Método 1: mudar cor num widget específico
Para alterar a cor de um texto, título, botão ou qualquer elemento isolado:
Passo 1: Abra a página no editor do Elementor.
Passo 2: Clique no elemento desejado. No painel esquerdo, clique na aba Estilo.
Passo 3: Localize a opção Cor do texto (em widgets de texto ou título) ou Cor (em outros elementos). Clique no seletor de cores.
Passo 4: No seletor, você pode:
- Clicar num ponto na paleta de cores
- Digitar o código hexadecimal no campo (ex:
#1a73e8) - Ajustar os valores RGB ou HSL
- Selecionar uma das cores globais do site (aparecem como quadrados no topo do seletor)
Passo 5: Clique em Atualizar para salvar.
Essa abordagem é rápida para ajustes pontuais. Para um site com identidade visual consistente, o método abaixo é o correto.
Método 2: Cores Globais — o jeito profissional
As Cores Globais ficam no Kit do Site do Elementor e são a forma recomendada para gerenciar as cores de marca em qualquer projeto. Quando você associa um elemento a uma Cor Global, qualquer mudança na cor atualiza automaticamente todos os elementos que a usam.
Como acessar e configurar:
Passo 1: No editor do Elementor, clique no ícone de hambúrguer (três linhas) no canto superior esquerdo e selecione Configurações do Kit ou acesse diretamente por Elementor > Configurações do Site no painel do WordPress.
Passo 2: Na seção Cores Globais, você verá quatro cores padrão: Primária, Secundária, Texto e Acento. Clique em qualquer uma para editar.
Passo 3: Para adicionar uma nova cor de marca, clique em + Adicionar Cor, dê um nome descritivo (ex: “Azul da marca” ou “Laranja CTA”) e insira o código hexadecimal.
Passo 4: Para usar uma Cor Global num elemento, abra o seletor de cores de qualquer widget — as Cores Globais aparecem como quadrados coloridos no topo do seletor, antes da paleta livre.
A vantagem prática: se a identidade visual da marca mudar, você edita uma vez nas Configurações do Kit e todas as páginas do site se atualizam automaticamente.
Para mais sobre como o Site Kit do Elementor funciona para personalizar o design global do site, veja o que é o Elementor e para que serve.
Método 3: CSS personalizado para casos específicos
CSS personalizado é útil quando você precisa mudar a cor de um tipo específico de elemento em toda a página sem mexer em cada widget individualmente.
Para mudar a cor de todos os parágrafos de uma página:
No editor do Elementor, selecione a seção ou o elemento, vá em Avançado > CSS personalizado e adicione:
p {
color: #1a73e8;
}
Para mudar a cor de todos os H2 de uma seção específica:
h2 {
color: #e63946;
}
O CSS personalizado no nível de seção afeta apenas os elementos dentro daquela seção. Se precisar de um estilo global para todo o site, use Elementor > CSS Personalizado nas configurações do site (disponível no Elementor Pro) ou adicione via Aparência > Customizar > CSS Adicional no WordPress.
A documentação do Elementor sobre como aplicar CSS a cores e tipografia está disponível em elementor.com/blog/pt-br/como-alterar-a-cor-do-texto-em-css-html.
Como mudar a cor de uma única palavra dentro de um título
Este é um dos casos mais pedidos e que o Elementor não resolve com uma opção visual nativa. A solução é usar HTML diretamente dentro do widget de Título.
Passo 1: Clique no widget de Título no editor.
Passo 2: No painel esquerdo, em Conteúdo, localize o campo de texto do título e clique no ícone < > para editar em modo HTML (alguns temas e versões têm esse botão, em outros você edita o campo diretamente).
Passo 3: Envolva a palavra que quer colorir com uma tag <span>:
Texto normal <span style="color: #e63946;">palavra colorida</span> texto normal
Passo 4: Salve e visualize o resultado.
Resultado esperado: apenas a palavra dentro do <span> muda de cor, o resto do título mantém a cor original.
Essa técnica também funciona para negrito com cor diferente:
Aumente sua <span style="color: #1a73e8; font-weight: 700;">conversão</span> com Elementor
Problema: a cor que você definiu não está aparecendo
Esse é o problema mais frustrante de quem está começando com Elementor. As causas mais comuns:
O tema está sobrescrevendo a cor do Elementor: alguns temas definem cores para h1, h2 e p via CSS com alta especificidade, que se sobrepõem aos estilos do Elementor. A solução é adicionar !important no CSS personalizado ou verificar nas ferramentas de desenvolvedor (F12 no Chrome) qual regra está sendo aplicada.
/* CSS personalizado no Elementor */
.elementor-widget-heading .elementor-heading-title {
color: #1a73e8 !important;
}
Você mudou a cor no estado Normal mas não no Hover: widgets de botão e link têm estados separados (Normal, Hover, Ativo). Se o texto parece mudar de cor ao passar o mouse, verifique se a cor está configurada nos três estados.
O widget usa cor global e você mudou a cor local: se o elemento estava usando uma Cor Global e você sobrescreveu com uma cor manual, a mudança na Cor Global não afeta mais esse elemento. Limpe a cor local e reassocie à global.
Para entender como a especificidade CSS funciona e por que algumas regras têm precedência sobre outras, a documentação MDN sobre especificidade é a referência mais completa em português.
Acessibilidade: contraste mínimo para texto legível
Mudar cores sem verificar o contraste pode criar problemas de acessibilidade e prejudicar a leitura para pessoas com baixa visão. O padrão WCAG recomenda:
- Texto normal: contraste mínimo de 4,5:1 em relação ao fundo
- Texto grande (18px+ ou 14px+ em negrito): mínimo de 3:1
Antes de publicar qualquer mudança de cor no site, verifique o contraste com a ferramenta gratuita do WebAIM: webaim.org/resources/contrastchecker. Basta inserir as cores do texto e do fundo e o sistema calcula se o contraste está dentro do padrão.
Para construção completa de layouts no Elementor aproveitando todos os recursos de estilo que vimos aqui, veja como colocar containers lado a lado no Elementor.
Perguntas frequentes
Como mudar a cor de todos os textos do site no Elementor de uma vez?
Acesse Elementor > Configurações do Site > Cores Globais. Edite as cores Primária, Secundária, Texto e Acento. Qualquer elemento que use essas cores globais será atualizado automaticamente. Para textos que não estão vinculados a uma cor global, use CSS personalizado global via Aparência > Customizar > CSS Adicional.
Como mudar a cor de um título H1 específico sem afetar os outros?
Clique no widget de Título, vá em Estilo > Cor do texto e escolha a cor. Essa mudança afeta apenas aquele widget. Se você editou a Cor Global de títulos, todos os títulos do site mudam juntos.
Por que a cor do texto no Elementor não salva?
Verifique se você clicou em Atualizar/Publicar após a alteração. Se a cor salva mas não aparece no frontend, um plugin de cache pode estar servindo a versão antiga da página. Limpe o cache do site e recarregue.
Elementor Free permite usar Cores Globais?
Sim. As Cores Globais no Site Kit estão disponíveis na versão gratuita do Elementor. O CSS personalizado global (para todo o site, não apenas por página) requer Elementor Pro.
Como usar uma cor de marca consistente em todo o site?
Crie uma Cor Global em Configurações do Site > Cores Globais com o código hexadecimal exato da sua marca. Ao escolher cores em qualquer widget, selecione essa cor global em vez de digitar o código manualmente. Assim, uma mudança no valor da Cor Global atualiza todo o site automaticamente.
