Passar para o conteúdo principal

Como Alterar Cores e Tipografias Globais no Elementor

Aprenda a definir cores e tipografias globais no Elementor para padronizar o design da loja sem ajustar manualmente cada elemento. Configure cores, fontes e estilos padrão de forma centralizada para otimizar aparência e desempenho.

🧭 Quando usar

  • Ao iniciar o design de uma nova loja WooCommerce

  • Ao padronizar cores e fontes do tema

  • Ao ajustar a identidade visual da marca

✅ Pré-requisitos

  • Acesso de administrador ao WordPress

  • Plugin Elementor instalado e ativo

  • Tema compatível com o Elementor

🛠️ Passo a passo

Passo 1 – Acessar o editor do Elementor

  1. Abra qualquer página do seu site e clique em Editar com Elementor.
    ​

  2. Aguarde o carregamento do editor visual.

  3. Clique em um título, botão ou texto para visualizar suas propriedades.

Passo 2 – Visualizar cores e fontes globais

  1. Com o elemento selecionado, vá até a aba Estilo.
    ​

  2. Clique em Personalizar na seção de Cor do texto.

  3. Observe as opções: Cor primária, Cor secundária, Cor de texto e Cor de acento.

  4. No campo Tipografia, clique no ícone de Globo para acessar as fontes globais (Primária, Secundária, Texto e Acento).

Passo 3 – Definir cores globais

  1. No menu lateral esquerdo, clique nas três linhas (☰) » Configurações do site.
    ​

  2. Selecione Cores Globais.

  3. Defina:

    • Cor primária: usada em botões e elementos de destaque

    • Cor secundária: usada em títulos e ícones complementares

    • Cor do texto: usada em parágrafos

    • Cor de acento: usada em links e elementos interativos

  4. Clique em Atualizar para salvar as alterações.

Passo 4 – Definir tipografias globais

  1. Ainda em Configurações do site, clique em Fontes Globais.

  2. Configure:

    • Fonte primária: títulos principais (H1, H2)

    • Fonte secundária: subtítulos ou destaques

    • Fonte de texto: parágrafos e descrições

    • Fonte de acento: menus ou chamadas de ação

  3. Mantenha a família padrão Sans Serif, caso não tenha uma fonte personalizada.

Passo 5 – Aplicar estilos globais

  1. Para aplicar os estilos definidos, volte ao editor e selecione um texto.

  2. Em Conteúdo, defina o tipo de cabeçalho (ex.: H1, H2).

  3. O estilo será automaticamente aplicado conforme o padrão configurado.

  4. O mesmo vale para botões, links e subtítulos.

🧩 Exemplos práticos

  • Exemplo 1: Definir cor primária azul → todos os botões e títulos principais passam a usar o mesmo tom.

  • Exemplo 2: Fonte Montserrat configurada como primária → aplicada automaticamente a todos os H1 e H2.

🧪 Solução de problemas

  • Erro/Sintoma: As cores não aplicam aos textos.
    ​Causa provável: O elemento está com cor manual definida.
    ​Como resolver: Restaure a configuração para “Global” no seletor de cor.

  • Erro/Sintoma: As fontes não atualizam após salvar.
    ​Causa provável: Cache do navegador ou plugin de otimização.
    ​Como resolver: Limpe o cache e recarregue o editor.

  • Erro/Sintoma: O estilo de botão não segue o padrão.
    ​Causa provável: O botão foi adicionado antes da configuração global.
    ​Como resolver: Remova e reinsira o botão para herdar o novo estilo.

🔎 Referências e links úteis

🗂️ Metadados

  • Categoria: Design e Personalização

  • Subcategoria: Elementor e Estilo Visual

  • Tags: Elementor, WooCommerce, cores globais, fontes, tipografia, personalização

  • Nível: básico

  • Atualizado em: 2025-10-20

Artigos relacionados
Respondeu à sua pergunta?