Site - Identidade Visual

O que é

Identidade Visual é a página central de branding do site público. Em um único formulário, você define como sua marca aparece para o visitante: nome exibido, logo principal, logo alternativa para fundo escuro, banner Hero, redes sociais, WhatsApp flutuante, QR Code do site e link Trabalhe Conosco. Todos os valores são gravados diretamente no registro da sua empresa e refletem no site público imediatamente após salvar.

O usuário normalmente chega aqui no primeiro setup do site (logo após cadastrar a empresa) e volta sempre que precisa trocar logo, atualizar redes sociais, ajustar o banner inicial ou gerar um novo QR Code para divulgação impressa.

Como usar

1. Vá em Vitrine > Identidade Visual no menu lateral.
2. Preencha o Nome exibido no site e painel no primeiro card. Esse texto vira fallback do cabeçalho quando não há logo cadastrada e aparece nos títulos de todas as páginas.
3. No card Logo, envie a Logo Principal (coluna esquerda). Ela também é usada como ícone do navegador.
4. Opcionalmente envie a Logo (Modo Escuro) (coluna direita) para quando o visitante usa o tema escuro.
5. No card Exibição da Logo no Menu, ajuste a aparência com a prévia ao vivo do cabeçalho no topo do card:
   • Tamanho da Logo - slider de 40 a 140 pixels (referência: 80px).
   • Logo Estendida - aparece só quando o tamanho passa de 80px; faz a logo extrapolar a altura do cabeçalho como um selo.
   • Retrair ao Rolar - aparece quando Logo Estendida está ativa; encolhe a logo conforme a página rola.
   • Adicionar Sombra - destaca a logo em fundos claros.
   • Adicionar Fundo - abre opções de cor, formato (Auto, Arredondado, Circular, Quadrado) e espaçamento interno.
6. No card Banner Principal (Hero):
   • Faça upload de Imagem de Fundo própria (recomendado 1920x768) ou clique em Escolher da Galeria para usar uma das imagens prontas.
   • Preencha Título Principal (use **texto** para destacar com cor), Subtítulo e Texto do Botão.
   • Opcionalmente cole uma URL do Vídeo de Fundo (YouTube ou Vimeo) que é usado quando a variante "Vídeo de Fundo" está selecionada em Template.
   • No bloco amarelo Estatísticas do Hero (Histórico), informe excursões e clientes anteriores ao Viagilize (somados aos totais automáticos) e o Formato dos Números (1.000, 1 mil ou 1k).
   • No bloco Personalizar Hero, ajuste Tamanho do Título, Altura do Hero e marque quais elementos exibir (badge, botões, estatísticas, e os botões específicos: Excursões, Ingressos, WhatsApp).
7. No card WhatsApp do Site, escolha entre Usar WhatsApp da empresa (recomendado, puxa de Dados da Empresa) ou Usar outro número e digitar um número com DDD e código do país.
8. No card Redes Sociais, selecione a plataforma, cole a URL ou @usuario, defina um Label opcional e clique em Adicionar. Reordene com as setas para cima/baixo e remova com a lixeira. Na parte inferior, marque Mostrar labels e escolha Layout Horizontal ou Vertical.
9. No card QR Code do Site (visível só quando você tem domínio cadastrado), ajuste cor, fundo, estilo (Quadrado, Arredondado ou Circular) e tamanho, e clique em Baixar PNG ou Baixar SVG.
10. Em Trabalhe Conosco, cole o link da página de vagas (formulário Google, página externa, etc.). Deixe vazio para não exibir o botão flutuante.
11. Confirme em Salvar Configurações no rodapé.

Casos especiais

Logo Estendida e Retrair ao Rolar

Os toggles Logo Estendida e Retrair ao Rolar ficam ocultos enquanto o tamanho da logo for igual ou menor que 80 pixels. Aumente o slider acima de 80px para que apareçam. Se você reduzir o tamanho depois, ambos voltam automaticamente para desligado.

Imagem do Hero da galeria pronta

Se você não tem foto própria para o banner, clique em Escolher da Galeria e selecione uma das imagens curadas (a padrão é kombi-praia.jpg). O sistema gravará a referência da galeria no campo hero_imagem_galeria e o site usará essa imagem.

WhatsApp com fallback para empresa

A opção Usar WhatsApp da empresa lê o número configurado em Configurações > Dados da Empresa. Se ali estiver vazio, aparece um aviso laranja com link direto para preencher. O campo do site continua salvo como empresa e passa a funcionar assim que o número da empresa for cadastrado.

Normalização automática das redes sociais

O backend normaliza o que você cola no campo URL. Aceita @usuario, instagram.com/usuario, facebook/pagina ou URL completa - todos viram a URL canônica correta (https://instagram.com/usuario, etc.). Para WhatsApp basta colar o número; vira https://wa.me/<numero> automaticamente. Para E-mail, basta o endereço; vira mailto: automaticamente.

Logo como favicon e og:image

Não há campo separado de favicon nem de imagem de compartilhamento nesta página. A Logo Principal é reaproveitada nos dois lugares: vira ícone da aba do navegador (favicon) e alimenta o og:image exibido quando o link do site é compartilhado no WhatsApp ou redes sociais. Por isso, prefira uma logo limpa e quadrada quando possível. Detalhes do comportamento estão no artigo Identidade Visual no Site.

QR Code só aparece com domínio configurado

O card QR Code do Site só é renderizado quando você tem ao menos um domínio (customizado ou *.viagilize.com.br). Sem domínio, esse card simplesmente não aparece no formulário.

Componentes da página

A página é composta pelos seguintes cards, na ordem em que aparecem:

1. Nome do Site - campo único nome_site.
2. Logo - uploads logo (principal) e logo_escuro (modo escuro).
3. Exibição da Logo no Menu - Preview do Navbar + controles de tamanho, sombra, fundo, formato e espaçamento.
4. Banner Principal (Hero) - upload ou galeria, textos, URL de vídeo, estatísticas históricas e personalização.
5. WhatsApp do Site - número usado no botão flutuante, rodapé e página de contato.
6. Redes Sociais - gestor dinâmico com 15 plataformas suportadas (Instagram, Facebook, WhatsApp, TikTok, YouTube, X/Twitter, Threads, LinkedIn, Telegram, Pinterest, Spotify, Kwai, Site/Blog, E-mail, Outro).
7. QR Code do Site - gerador com download em PNG e SVG (condicional a ter domínio).
8. Trabalhe Conosco - link único link_trabalhe_conosco.

Erros comuns e como resolver

• "O campo Nome exibido é obrigatório" - Causa: você tentou salvar com o primeiro card vazio. Solução: preencha o Nome do Site antes de salvar; é o único campo obrigatório do formulário.
• "O campo URL do Vídeo de Fundo deve ser uma URL válida" - Causa: a URL colada não tem http:// ou https://. Solução: cole a URL completa do YouTube ou Vimeo, começando com https://.
• "O campo Link da página deve ser uma URL válida" - Causa: o link de Trabalhe Conosco foi digitado sem https://. Solução: inclua o protocolo ou deixe o campo vazio.
• WhatsApp não aparece no site mesmo marcando "Usar WhatsApp da empresa" - Causa: o campo WhatsApp em Configurações > Dados da Empresa está vazio. Solução: cadastre o número da empresa no link indicado no próprio card.
• Logo aparece cortada no cabeçalho - Causa: tamanho alto demais sem Logo Estendida. Solução: ative Logo Estendida no card de exibição ou reduza o slider.
• Botão Adicionar de Redes Sociais está cinza e não clica - Causa: a plataforma ou a URL não foram preenchidas. Solução: selecione a plataforma e cole a URL - o botão libera quando os dois campos têm valor.
• QR Code não baixa em SVG quando o fundo está transparente - Causa: alguns leitores não renderizam fundo #00000000 no PNG salvo. Solução: use fundo branco se for imprimir; o transparente é melhor para sobrepor a designs em editores gráficos.

Onde encontrar

• URL: "/admin/identidade"
• Caminho no menu: Vitrine > Identidade Visual
• Permissão necessária: ver as configurações para abrir e editar as configurações para salvar
• Módulo necessário: nenhum

Veja também

• Identidade Visual no Site (Header, Favicon e Compartilhamento) - como cada upload feito aqui é renderizado no site público, no favicon e na imagem de compartilhamento
• Cores e Aparência - cores que ficam atrás da logo no gradiente do cabeçalho
• Hero Slides (Carrossel) - alternativa rotativa ao Hero estático configurado aqui
• Personalização do Site - visão geral de todos os pontos de customização do site
• Template do Site - escolhe a variante de Hero que consome estas configurações