Primeiros Passos - Logo e Identidade Visual

O que é

A identidade visual da sua empresa no Viagilize está dividida em duas páginas do menu Vitrine: Identidade Visual (onde fica a logo, o favicon e o nome exibido do site) e Aparência (onde ficam paleta de cores, fontes do Google Fonts, modo claro/escuro e estilo do menu). A logo salva aqui aparece no cabeçalho do site público e é usada como base do favicon do navegador.

Este é o passo seguinte logo após cadastrar os dados da empresa: subir o logotipo da agência para o site sair da identidade genérica do Viagilize e ganhar a cara da marca antes de receber o primeiro visitante.

Como usar

1. Subir a logo e o favicon

1. Vá em Vitrine > Identidade Visual no sidebar.
2. No card Nome do Site, confirme o nome que aparece no cabeçalho quando a logo ainda não está carregada e no título das páginas.
3. No card Logo, clique em Logo Principal e faça upload do arquivo. A imagem é processada pelo componente de upload do projeto (recorte e redimensionamento automáticos para o preset logo).
4. Opcionalmente, suba também Logo (Modo Escuro) - se não enviar, a logo principal é reutilizada quando o site estiver em tema escuro.
5. O favicon usado no navegador é derivado da logo principal (campo favicon no controller também aceita upload separado, mas a logo é o caminho recomendado).

2. Ajustar a exibição da logo no menu

No card Exibição da Logo no Menu o preview do navbar reage em tempo real às alterações:

• Tamanho da Logo - slider de 40px a 140px.
• Logo Estendida - aparece apenas com tamanho acima de 80px; faz a logo "saltar" do navbar como um selo.
• Retrair ao Rolar - só com logo estendida ativa; encolhe a logo conforme a página é rolada.
• Adicionar Sombra - destaca a logo em fundos claros.
• Adicionar Fundo - útil para logos transparentes; libera Cor do Fundo (presets brancos, cinza, escuro, cor primária ou hex livre), Formato (Auto, Arredondado, Circular, Quadrado) e Espaçamento Interno (0px a 24px).

Clique em Salvar Identidade Visual no rodapé do formulário para gravar tudo.

3. Escolher paleta, cores e fontes

1. Vá em Vitrine > Aparência no sidebar (URL /admin/aparencia).
2. No card Paleta de Cores, escolha uma paleta pronta ou informe manualmente os hex de Cor Primária e Cor Secundária. O regex aceita só #RRGGBB válido (ex.: #3b82f6).
3. No card de fontes (logo abaixo), selecione Fonte do corpo e Fonte dos títulos. Os valores vêm de config/fontes.php e são carregados via Google Fonts no site público.
4. Defina o Modo do Site: claro, escuro ou auto. Para templates com modo restrito (Modern e Events em escuro; Modern Light em claro), o sistema força o modo correto e mostra um aviso no toast de sucesso.
5. Escolha o Estilo do Navbar: gradient (degradê com a paleta) ou clean (fundo branco/escuro liso).
6. Clique em Salvar Aparência no rodapé.

Casos especiais

empresa ainda sem logo

Enquanto não há logo cadastrada, o cabeçalho do site mostra o Nome do Site em texto. Esse mesmo nome serve de fallback no título das abas e em e-mails transacionais. Vale preencher mesmo antes de subir o arquivo da logo.

Template restrito a um modo

Os templates Modern e Events funcionam só em modo escuro; o Modern Light, só em claro. Se a paleta for salva com um Modo do Site incompatível, o controller sobrescreve para o modo correto e a mensagem de sucesso avisa: "O modo do site foi mantido em 'Somente Escuro' porque o template atual foi desenhado apenas para modo escuro." Para liberar a escolha de modo, troque o template em Vitrine > Template do Site antes.

Logo grande com efeito "selo"

Para o efeito de logo estendida (que ultrapassa o menu), a logo precisa estar acima de 80px. Só então o toggle Logo Estendida aparece, e em seguida o Retrair ao Rolar, que volta a comprimir a logo conforme o visitante rola a página.

Erros comuns e como resolver

• "A cor primária deve ser um código hexadecimal válido (ex: #3b82f6)."
  • Causa: o campo de cor recebeu um valor fora do padrão # seguido de 6 caracteres hexadecimais (atalhos como #fff não passam). Solução: informe o hex completo, em maiúscula ou minúscula.
• "A cor secundária deve ser um código hexadecimal válido."
  • Mesma causa do anterior, só que para a cor secundária.
• Salvei a logo mas o site não atualizou.
  • Causa: cache do navegador segurando o favicon/logo antigo. Solução: recarregue a aba com Ctrl+F5 (ou abra anônima). Em caso de logo nova ainda igual no preview do admin, salve uma segunda vez para forçar o reprocessamento do upload.
• O modo do site não fica em "auto" depois de salvar.
  • Causa: o template atual exige modo único (Modern/Events em escuro, Modern Light em claro). Solução: troque o template antes em Vitrine > Template do Site.

Onde encontrar

• URL principal (logo, favicon, nome): /admin/identidade
• URL complementar (paleta, fontes, modo): /admin/aparencia
• Caminho no menu: Vitrine > Identidade Visual e Vitrine > Aparência
• Permissão necessária: ver as configurações (ver) e editar as configurações (salvar)
• Módulo necessário: nenhum

Veja também

• Bem-vindo ao Viagilize
• Primeiros Passos - Dados da Empresa
• Personalizar seu Site