Primeiros Passos - Personalizar seu Site

O que é

A tela de Aparência é o ponto central de personalização visual do site público da sua empresa. Nela o usuário escolhe a paleta de cores, fonte do corpo e dos títulos, estilo do menu (gradiente colorido ou clean) e o modo de exibição (claro, escuro ou automático). Todas as alterações são refletidas em tempo real num preview que reproduz a navbar, o hero e os cards de excursões do site real.

Normalmente você chega aqui logo após enviar a logo em Identidade Visual, ainda na fase de onboarding, para deixar o site "com a cara da empresa" antes de publicar a primeira excursão. Junto da Aparência existem páginas complementares para os textos da home, seções da home e hero slides - também acessíveis pelo menu Vitrine.

Como usar

1. Vá em Vitrine > Aparência no menu lateral (URL /admin/aparencia).
2. No card Visibilidade do Site (topo da página), use o toggle para deixar o site público ou em construção. Enquanto estiver em construção, somente administradores logados conseguem visualizá-lo - visitantes veem uma página de "em construção".
3. No card Portal Busca Excursões (logo abaixo), opcionalmente ative o toggle para publicar suas excursões no portal externo buscaexcursoes.com.br. A sincronização roda a cada 15 minutos e é disparada imediatamente quando o toggle é ligado.
4. No card Tipografia, escolha a Fonte do corpo (textos) e a Fonte dos títulos. As opções vêm do Google Fonts e o preview "A viagem dos seus sonhos começa aqui" mostra como ficará no site.
5. No card Paleta de Cores, clique em uma das paletas pré-definidas (Azul Oceano, etc.). Use o botão Ver todas as paletas se quiser expandir a grade completa. O par cor primária + cor secundária é aplicado automaticamente.
6. No card Estilo do Menu, escolha entre:
   • Gradiente - menu com fundo colorido usando as duas cores da paleta.
   • Clean - menu branco (modo claro) ou escuro (modo dark), mais sóbrio.
7. No card Modo do Site, defina Somente Claro, Somente Escuro ou Automático (segue a preferência do visitante).
8. Confira o Preview ao lado, alternando entre Claro e Escuro pelo seletor "Apenas para visualização, não altera o site".
9. Clique em Salvar Aparência no rodapé da página. O botão só fica habilitado quando há mudanças (track-changes ativo).

Editar textos da home, hero e seções

A Aparência cobre cores e fontes. Para mexer no conteúdo visível da home, use os atalhos do menu Vitrine:

• Vitrine > Textos do Site (/admin/textos) - edita títulos, subtítulos, botões e textos institucionais, agrupados por seção (Global, Navbar, Rodapé, Página Inicial, Excursões, Sobre, etc.). Cada grupo abre numa aba/tab.
• Vitrine > Hero Slides (/admin/hero-slides) - gerencia os banners do carrossel do topo (o "banner principal" do site).
• Vitrine > Seções da Home (/admin/secoes-home) - controla quais blocos aparecem na home (depoimentos, vídeos, FAQ, etc.) e a ordem deles.

Casos especiais

Template restringe o modo claro/escuro

Os templates Moderno Escuro e Neon foram desenhados só para modo escuro; o template Moderno Claro só funciona em modo claro. Nesses casos:

• A página exibe um aviso violeta no card Modo do Site indicando o template e o modo forçado.
• O botão da opção incompatível fica desabilitado (opacidade reduzida, cursor bloqueado).
• Se o usuário tentar salvar com outro modo, o sistema força o modo correto e a mensagem de sucesso explica: "O modo do site foi mantido em 'Somente Escuro' porque o template atual foi desenhado apenas para modo escuro."
• Para destravar, troque o template em Vitrine > Template do Site (/admin/template).

Site em construção durante onboarding

Quando você ainda está configurando, recomenda-se deixar o toggle Visibilidade do Site desligado. Assim:

• Visitantes externos veem a página de "em construção".
• O próprio administrador (logado) consegue navegar normalmente pelo site para testar.
• Depois de subir excursões, logo, textos e pagamentos, basta voltar à Aparência e ligar o toggle.

Limite de toggle no Portal Busca Excursões

O toggle do Portal Busca Excursões tem rate limit de 30 segundos por empresa. Se o usuário ligar/desligar repetidamente, o sistema responde com a mensagem "Aguarde alguns segundos antes de alterar novamente." e o toggle volta ao estado anterior.

Erros comuns e como resolver

• "A cor primária deve ser um código hexadecimal válido (ex: #3b82f6)." - Causa: cor passada não está no formato #RRGGBB (6 dígitos hexadecimais). Solução: usar uma das paletas pré-definidas ou digitar um hex completo, ex.: #FF6600.
• "A cor secundária deve ser um código hexadecimal válido." - Mesmo caso da primária. Solução: idem.
• "Aguarde alguns segundos antes de alterar novamente." - Causa: toggle do Portal Busca Excursões alternado mais de uma vez em 30s. Solução: esperar e tentar de novo.
• "Erro ao salvar" (toast vermelho ao mexer no toggle de visibilidade) - Causa: falha de rede ou CSRF expirado. Solução: recarregar a página (a sessão é renovada) e tentar de novo.
• Salvar não habilita o botão - Causa: o botão Salvar Aparência usa track-changes, só fica ativo quando algo realmente mudou. Solução: alterar pelo menos uma opção (cor, fonte, modo, estilo de menu).

Onde encontrar

• URL: /admin/aparencia
• URLs complementares: /admin/textos, /admin/hero-slides, /admin/secoes-home
• Caminho no menu: Vitrine > Aparência
• Permissão necessária: ver as configurações para visualizar, editar as configurações para salvar e alternar toggles
• Módulo necessário: nenhum

Veja também

• Adicionar Logo e Identidade Visual
• Configurar Dados da Empresa
• Conhecendo o Painel Admin
• Bem-vindo ao Viagilize