Personalização de Cores no eDirectory

A seção Cores & Fontes ( Design > Cores & Fontes) permite controlar a identidade visual geral do seu website.

Em vez de estilizar manualmente cada página, você pode definir até 8 cores principais que são automaticamente aplicadas em toda a plataforma para manter um design profissional e consistente.

Pense nisso como um sistema de design centralizado:

Escolha as cores uma única vez, e o eDirectory as aplicará em todo o site.

🎨 Cor da Marca

Objetivo

Sua principal cor de marca, utilizada nas principais áreas visuais e elementos-chave da interface.

Onde Ela Aparece

Cabeçalhos & Fundos

• Cabeçalho da página de detalhes do anúncio (quando não há imagem de capa)
• Caixa de pesquisa com slider (quando não há imagem no slider)
• Fundos de widgets (somente widgets compatíveis)

📸 Cabeçalho dos anúncios:

📸 Caixa de pesquisa com slider (quando não há imagem de slider)

📸 Fundos de widgets

Ícones

• Ícone de localização
• Ícone de telefone
• Ícone de e-mail
• Ícones de redes sociais

📸 Ícones:

Resultados de Busca

• Contadores de categorias
• Botões “Lista”, “Grade” e “Mapa” (estado selecionado)

📸 Contadores e botões

Comportamento Importante: Substituição por Imagem de Capa e Slider

Quando um anúncio possui uma imagem de capa, essa imagem substitui automaticamente a Cor da Marca no fundo do cabeçalho.

O mesmo comportamento se aplica ao widget Search Box with Slider: se uma imagem for enviada para o slider, ela substituirá o fundo da Cor da Marca naquela seção.

Isso permite que áreas visuais priorizem imagens personalizadas, enquanto continuam utilizando a Cor da Marca como fundo padrão quando nenhuma imagem é fornecida.

🎨 Cor Neutra

Objetivo

Cor principal utilizada para textos e elementos neutros da interface.

Onde Ela Aparece

Navegação & Títulos

• Títulos do menu de navegação
• Títulos de widgets
• Títulos de categorias

📸 Menu de navegação:

📸 Títulos de widgets e nomes de categorias:

Áreas de Conteúdo

• Descrições dos anúncios
• Horários
• Informações de endereço
• Informações de contato

📸 Página de detalhe do anúncio:

Campos de Busca

• Placeholders da pesquisa
• Texto dos banners de links patrocinados

📸 Placeholders da pesquisa:

📸 Texto dos banners de links patrocinados

Comportamento Importante: Ajuste Automático de Fundo

Quando a Cor Neutra é utilizada como fundo em um widget, o sistema automaticamente gera uma versão mais clara da cor.

Exemplo:

• Texto → Cinza escuro em Cores & Fontes
• Fundo → Cinza claro nas configurações do widget

Por quê?

• Melhora a legibilidade
• Evita baixo contraste
• Mantém os padrões de acessibilidade

🎨 Cor de Destaque

Objetivo

Utilizada para ações, efeitos hover e elementos interativos.

Onde Ela Aparece

Botões

• Enviar
• Entrar
• Botão de pesquisa
• Ícone de pesquisa
• Ícone de localização

📸 Botões e ícones:

Efeitos Hover

• Anúncios
• Eventos
• Artigos
• Blogs
• Categorias

📸 Efeito hover nos títulos dos anúncios:

Ícones & Navegação

• Ícones de Favorito / Compartilhar / Ver site
• Ícones de categoria (“+” e “✔” quando selecionados)
• Estado hover do menu de navegação

📸 Ícones:

📸 Efeito hover no menu de navegação:

🎨 Cor do Emblema

Objetivo

Utilizada para pequenos indicadores visuais.

Onde Ela Aparece

• Favoritos
• Estrelas de avaliações

📸 Favoritos e estrelas de avaliações:

🎨 Cor do Link

Objetivo

Define a aparência dos links clicáveis.

Onde Ela Aparece

Links de Anúncios & Categorias

• Categorias abaixo das miniaturas dos anúncios
• Links da página de detalhes do anúncio
• Links “Ver mais” (pode variar dependendo da configuração do seu site)

📸 Categorias abaixo das miniaturas dos anúncios e Links “Ver mais”

📸Links da página de detalhes do anúncio:

Slider & Áreas Patrocinadas

• Links dentro das imagens do slider
• Banner de links patrocinados

📸 Slider:

📸 Banner de links patrocinados:

Por Que Isso É Importante

Boas cores de links ajudam os usuários a:

• Identificar elementos clicáveis mais rapidamente
• Navegar com mais facilidade
• Melhorar a usabilidade

🎨 Cor de Atenção

Objetivo

Utilizada para alertas que exigem atenção imediata.

Onde Ela Aparece

• Mensagens de erro
• Campos obrigatórios
• Ações pendentes

📸 Erro:

🎨 Cor de Sucesso

Objetivo

Indica ações concluídas com sucesso e confirmações.

Onde Ela Aparece

• Mensagens de confirmação
• Envios realizados com sucesso
• Ações concluídas

📸 Mensagem de confirmação:

🎨 Cor de Aviso

Objetivo

Utilizada para ações arriscadas ou irreversíveis.

Onde Ela Aparece

• Botões de exclusão
• Alertas de aviso
• Ações destrutivas

📸 Botão de exclusão:

✅ Por Que Isso É Importante

Branding Consistente

Seu website mantém uma aparência profissional e polida sem necessidade de estilização manual em várias páginas.

Melhor Experiência do Usuário

O sistema de cores melhora:

• Legibilidade
• Navegação
• Clareza das interações

Proteção de Design Integrada

Alguns ajustes automáticos ajudam a:

• Evitar baixo contraste
• Melhorar a acessibilidade
• Manter padrões de usabilidade

🧾 Conclusão

O sistema de cores do eDirectory foi projetado para simplificar a personalização do website, mantendo consistência visual e usabilidade.

Em vez de estilizar manualmente cada seção do site, você precisa apenas definir algumas cores principais, e a plataforma as aplica automaticamente em todas as páginas.

Cada cor possui uma função específica:

• Reforçar o branding
• Guiar ações do usuário
• Melhorar a legibilidade
• Destacar informações importantes

Alguns ajustes visuais — como fundos mais claros para a Cor Neutra — são intencionais e ajudam a manter acessibilidade e clareza em toda a plataforma.