Site - Layouts e Variantes Disponíveis

O que é

Este artigo é um catálogo visual das variantes que aparecem na tela de Template do Site (/admin/template). Em vez de descrever o passo a passo de aplicação (coberto em "Template do Site"), aqui o foco é explicar o que cada variante faz e em que cenário ela é a escolha mais adequada.

O usuário normalmente chega aqui quando está em dúvida entre duas opções da mesma seção - por exemplo, "Hero Dividido" versus "Hero com Vídeo de Fundo" - ou quando quer entender o que muda no site público ao trocar a variante de navbar ou do card de excursão.

Como usar

Use este artigo como referência. Para aplicar qualquer das variantes listadas abaixo:

1. Vá em Vitrine > Template do Site no sidebar.
2. Localize o card da seção que deseja alterar (Barra de Navegação, Banner Principal, Cards de Excursão, Banner da Página de Excursão ou Rodapé).
3. Clique sobre a miniatura da variante desejada. O check verde no canto superior direito confirma a seleção.
4. Confirme em Salvar Template no rodapé do formulário.

Barra de Navegação (5 variantes)

• Logo Esquerda + Menu Direita (default) - Layout tradicional e familiar. Logo no canto esquerdo, itens de menu alinhados à direita. Boa escolha quando a logo é horizontal e o menu tem até 6 itens.
• Logo Central (central) - Logo em destaque no centro, com metade dos itens de menu à esquerda e a outra metade à direita. Ideal para marcas que querem chamar atenção para a identidade.
• Logo Direita (direita) - Inversão do padrão. Usado quando o cliente quer um visual diferenciado e a leitura natural do menu vem primeiro.
• Menu Abaixo (menu-abaixo) - Logo em uma linha e menu em uma segunda linha logo abaixo. Útil para empresas com muitos itens de menu (mais de 7) ou logo extensa.
• Menu Lateral (sidebar) - Hamburger sempre visível, menu abre como gaveta lateral. Indicado para sites bem visuais onde o menu deve ficar fora do caminho.

Banner Principal - Hero (5 variantes)

• Imagem de Fundo (default) - Banner ocupando toda a largura, com imagem ao fundo e texto sobreposto. Aceita os controles de Ativar gradiente e Sombra no texto para melhorar legibilidade.
• Dividido 50/50 (split) - Imagem ocupa metade da tela e o texto ocupa a outra metade. Boa escolha quando o título precisa ter contraste alto sem competir com a imagem.
• Vídeo de Fundo (video) - Reproduz vídeo do YouTube ou Vimeo como fundo do banner. Também suporta os controles de gradiente e sombra no texto.
• Carrossel (slider) - Rotaciona múltiplas imagens ou excursões no banner. Quando selecionado, o card roxo Gerenciar Slides do Carrossel habilita o botão Configurar Slides que leva à tela de Hero Slides.
• Minimalista (minimal) - Apenas texto, sem imagem. Útil quando o site é altamente textual ou a primeira imagem mais importante é do bloco logo abaixo.

Cards de Excursão (6 variantes)

• Vertical (default) - Imagem em cima, conteúdo embaixo. Layout mais comum em sites de turismo.
• Horizontal (horizontal) - Imagem à esquerda e conteúdo à direita. Bom para listagens densas com muito texto.
• Compacto (compact) - Card pequeno em linha única. Ideal para listas longas onde o usuário já sabe o que procura.
• Destaque (featured) - Card grande pensado para promoções, com badge de destaque no canto. Combina com empresas que rodam campanhas pontuais.
• Imagem Completa (imagem-completa) - Mostra a imagem inteira sem cortes, com fundo desfocado preenchendo o restante. Útil para fotos verticais ou com proporções diferentes do padrão.
• Imagem Grande (imagem-grande) - 70% da área para a imagem, 30% para o conteúdo compacto embaixo. Visual mais cinematográfico.

O toggle Mostrar badge de data nos cards, abaixo da grade, adiciona um selo com dia e mês no canto superior direito da imagem de cada card. Vale para qualquer das 6 variantes.

Banner da Página de Excursão (4 modos)

Define o estilo padrão do banner que aparece na página de detalhes de cada excursão. Cada excursão pode sobrescrever esse padrão na própria edição de conteúdo.

• Hero (hero) - Fundo completo com a imagem ocupando toda a largura, título sobreposto.
• Vitrine (vitrine) - Card centralizado com a imagem em destaque, fundo neutro ao redor.
• Split (split) - Imagem de um lado, dados da excursão do outro.
• Minimal (minimal) - Sem destaque visual para a imagem, foco total no texto e nos botões.

Rodapé (3 variantes)

• Completo (default) - 4 colunas com todas as informações (links rápidos, contato, redes sociais, copyright). Indicado para a maioria dos empresas.
• Compacto (compact) - Versão reduzida em 2 linhas. Bom para sites enxutos que já têm muita informação em outras seções.
• Minimalista (minimal) - Apenas copyright e links essenciais numa linha. Combina com o template Minimal.

Casos especiais

Variantes "Em breve"

Algumas miniaturas aparecem com um selo amarelo Em breve e ficam desabilitadas. Esses layouts ainda não estão disponíveis para uso - o card mostra somente a prévia visual. Ao tentar salvar o formulário com uma variante "Em breve", a tela retorna o erro "Esta variante ainda não está disponível.".

Combinações recomendadas

• Template Clássico + Navbar Logo Esquerda + Menu Direita + Hero Imagem de Fundo + Cards Vertical + Rodapé Completo
  • combinação padrão, equilibrada e segura.
• Template Moderno Escuro ou Neon + Hero Vídeo de Fundo ou Carrossel + Cards Imagem Grande + Rodapé Minimalista - visual mais imersivo, indicado para eventos e marcas modernas.
• Template Minimal + Navbar Logo Central + Hero Minimalista
  • Cards Horizontal + Rodapé Minimalista - visual sóbrio, foco em conteúdo textual.

Carrossel exige slides cadastrados

Selecionar Carrossel como variante de Hero sem cadastrar pelo menos um slide ativo faz com que o banner apareça vazio no site público. Use o botão Configurar Slides no card roxo destacado abaixo do Hero para abrir a tela de Hero Slides.

Erros comuns e como resolver

• "Esta variante ainda não está disponível." - Causa: a variante enviada para navbar, hero, card ou footer está marcada como coming_soon na configuração interna. Solução: escolher outra variante na mesma seção que não esteja com o selo Em breve.
• Carrossel selecionado mas banner aparece vazio no site - Causa: o Hero está em Carrossel mas a tela de Hero Slides não tem nenhum slide ativo. Solução: clicar em Configurar Slides no card roxo abaixo do Hero e cadastrar pelo menos um slide ativo.
• Cards de Excursão sem badge de data mesmo com a variante certa
  • Causa: o toggle Mostrar badge de data nos cards está desligado. Solução: ativar o toggle abaixo da grade de cards e salvar o template.

Onde encontrar

• URL: /admin/template
• Caminho no menu: Vitrine > Template do Site
• Permissão necessária: ver as configurações para abrir, editar as configurações para salvar
• Módulo necessário: nenhum

Veja também

• Site - Template do Site
• Hero Slides - Carrossel
• Seções da Home
• Identidade Visual