Easy Builder
Assinar Easy Builder

Template importado ficou diferente do preview: como ajustar

Como configurar cores e fontes globais corretamente

O Problema

Você importou um template do Easy Builder, mas:

  • Cores estão diferentes do preview

  • Fontes não aparecem corretas

  • Elementos parecem "genéricos"

  • Faltam efeitos visuais

Isso é NORMAL! Templates vêm com cores e fontes "globais" não configuradas de propósito para você personalizar com a identidade do cliente.

Por Que Isso Acontece?

Templates do Easy Builder usam:

  • Cores Globais (Primary, Secondary, Text, Accent)

  • Fontes Globais (Primary, Secondary, Text, Accent)

Você precisa:

  1. Definir as cores da marca do cliente

  2. Escolher as fontes adequadas

  3. Aplicar em todo o site de uma vez!

Vantagem: Troca cores/fontes do site INTEIRO em segundos!

Solução: Configurar Cores e Fontes Globais

Passo a Passo:

1. Abra Configurações do Site

No Elementor, clique no ícone de hambúrguer (≡) no canto superior esquerdo

Selecione: Configurações do Site

2. Vá em Estilos Globais

Menu lateral:

  • Configurações do Site

  • Estilos Globais

  • Cores do Sistema

3. Defina as 4 Cores Principais

Configure cada cor clicando no quadradinho:

Primary (Primária):

  • Cor principal da marca

  • Geralmente logo/identidade

  • Ex: Azul #0066FF

Secondary (Secundária):

  • Cor complementar

  • Botões secundários

  • Ex: Laranja #FF6600

Text (Texto):

  • Cor padrão dos textos

  • Geralmente: Preto #000000 ou Cinza escuro #333333

Accent (Destaque):

  • Cor para chamar atenção

  • CTAs importantes

  • Ex: Verde #00CC66

4. Salve e Publique

Clique em Atualizar no canto inferior

Todas as seções vão atualizar automaticamente!

Passo a Passo - Fontes:

1. Abra Configurações do Site

Elementor → Ícone hambúrguer (≡) → Configurações do Site

2. Vá em Tipografia

Menu lateral:

  • Estilos Globais

  • Tipografia

3. Defina as 4 Fontes Principais

Configure cada fonte:

Primary (Primária):

  • Títulos principais (H1, H2)

  • Fonte chamativa

  • Ex: Montserrat Bold, Poppins Bold

Secondary (Secundária):

  • Subtítulos (H3, H4)

  • Fonte complementar

  • Ex: Roboto, Open Sans

Text (Texto):

  • Parágrafos e textos corridos

  • Fonte legível

  • Ex: Roboto, Lato, Inter

Accent (Destaque):

  • Elementos especiais

  • Botões, badges

  • Ex: Fonte da marca ou igual Primary

4. Configure Peso e Tamanho

Para cada fonte, ajuste:

  • Família (qual fonte)

  • Peso (Weight: 400 Regular, 700 Bold)

  • Tamanho (opcional, deixe automático)

  • Transformação (Uppercase, Capitalize, etc)

5. Salve e Publique

Clique em Atualizar

Todo o site vai usar as fontes definidas!

Fontes Recomendadas

Modernas e Clean

Para sites corporativos e profissionais:

  • Títulos: Montserrat, Poppins, Raleway

  • Textos: Roboto, Open Sans, Lato, Inter

  • Destaque: Bebas Neue, Oswald (para impacto)

Elegantes

Para sites de luxo, beleza, moda:

  • Títulos: Playfair Display, Cormorant, Abril Fatface

  • Textos: Lora, Crimson Text, Source Serif Pro

  • Destaque: Great Vibes, Allura (manuscritas)

Tecnológicas

Para sites tech, SaaS, software:

  • Títulos: Inter, Space Grotesk, Manrope

  • Textos: IBM Plex Sans, Work Sans, DM Sans

  • Destaque: JetBrains Mono (código), Orbitron

Criativas

Para sites de design, arte, criatividade:

  • Títulos: Archivo Black, Righteous, Fredoka One

  • Textos: Nunito, Quicksand, Comfortaa

  • Destaque: Pacifico, Lobster, Permanent Marker

Regra de ouro: Não use mais de 2-3 famílias de fontes no mesmo site. Fica poluído!

Onde Encontrar Fontes?

Google Fonts

Fontes gratuitas para web

Já integrado no Elementor!

Adobe Fonts

Fontes premium (requer Adobe CC)

Mais exclusivas e profissionais

Personalizar Elementos Individuais

E se você quiser mudar cor/fonte de UM elemento só?

Clique no Elemento

Selecione o texto, botão ou imagem

Vá na Aba Estilo

Aba Estilo → Seção de Cor ou Tipografia

Mude Individualmente

  • Cor: Escolha cor específica (não global)

  • Fonte: Escolha fonte específica (não global)

Elementos customizados NÃO mudam quando alterar globais!

Dica Profissional: Paletas de Cores

Não sabe quais cores usar? Use geradores!

Coolors

Gerador de paletas

Aperte Espaço para gerar

Adobe Color

Paletas profissionais

Baseadas em teoria das cores

Color Hunt

Paletas prontas

Inspiração visual

Checklist Final

Antes de entregar o site, verifique:

✅ Cores Globais Configuradas

Primary, Secondary, Text, Accent definidas

✅ Fontes Globais Configuradas

Primary, Secondary, Text, Accent escolhidas

✅ Teste em Todas as Telas

Desktop, Laptop, Tablet, Mobile

✅ Contraste Adequado

Texto legível sobre fundos (use Contrast Checker)

✅ Consistência Visual

Mesmas cores/fontes em seções similares

Precisa de Ajuda?

Comunidade Discord

Tire dúvidas com outros membros

Suporte WhatsApp

Fale diretamente com o suporte