Site - Criar Seção da Home

O que é

Página de cadastro de uma nova seção personalizada da home do site público. Cada seção é um bloco de conteúdo que aparece entre as áreas fixas da página inicial (Hero, Excursões, Ingressos, Diferenciais, Depoimentos e CTA), com layout escolhido por você.

O usuário normalmente chega aqui depois de abrir Site > Seções da Home e clicar no botão de adicionar nova seção. É o caminho usado para inserir banners promocionais, blocos de texto, galerias de fotos, carrosséis de logos de parceiros ou listas de serviços sem mexer no template do site.

Como usar

1. Vá em Site > Seções da Home no sidebar e abra a tela de nova seção.
2. Preencha Título (campo obrigatório). É o nome interno usado na listagem. Só aparece no site se a opção Mostrar título no site estiver marcada.
3. Escolha o Tipo de Conteúdo clicando em um dos quatro cards:
   • Imagem - banner com upload desktop, upload mobile opcional, link de destino e seletor Abrir link em (mesma aba ou nova aba).
   • HTML - editor TinyMCE com botão Inserir Bloco Pronto para abrir a galeria de blocos da plataforma.
   • Editor de Blocos - editor visual drag-and-drop (componente <x-visual-editor>).
   • Componentes - sub-tipos prontos: galeria de fotos, cards com imagem, carrossel de logos de parceiros ou lista de serviços.
4. Selecione Posição na Página Inicial. As opções fixas são: Após o Hero, Após Excursões, Após Ingressos, Após Diferenciais, Após Depoimentos, Após CTA.
5. Preencha o conteúdo conforme o tipo escolhido (campos descritos em Casos especiais).
6. No card Opções de Exibição, ajuste:
   • Mostrar título no site - exibe o Título como heading da seção.
   • Largura total - a seção ocupa toda a largura da tela (recomendado para banners).
   • Espaçamento interno - aparece apenas quando Largura total está ligado e adiciona padding lateral e vertical.
   • Cor de fundo - color picker mais campo de texto hexadecimal, com botão Limpar para voltar ao fundo transparente.
   • Seção ativa - controla se a seção aparece no site público.
7. Clique em Criar Seção para salvar e voltar à listagem, ou em Criar e continuar editando para ir direto à tela de edição.

A ordem dentro da mesma posição é definida automaticamente como a próxima disponível (maior ordem + 1) e pode ser ajustada depois na listagem por drag-and-drop.

Casos especiais

Tipo Imagem

Os campos Imagem (Desktop) e Imagem (Mobile) - Opcional usam o componente <x-upload-image> com pasta secoes-home. Recomendação no próprio formulário: 1920x600px para banners full-width, 1200x400px para container e 768x600px para mobile. Se a imagem mobile for preenchida, ela substitui a desktop em telas pequenas. Os campos Link e Abrir link em só são salvos quando o tipo é Imagem.

Tipo HTML

Abre o editor TinyMCE com a classe tinymce-editor. O botão Inserir Bloco Pronto abre o <x-block-picker-modal> com os templates retornados por PaginaTemplateService::getAll() para inserir HTML pré-pronto no editor.

Tipo Editor de Blocos

Renderiza o <x-visual-editor> com show-blocks ligado e altura de 600px. O conteúdo é serializado no campo conteudo_blocos.

Tipo Componentes

Quatro sub-tipos com configurações próprias:

• Galeria de Fotos - máximo de colunas (3, 4 ou 5), opção de slider automático com intervalo e lightbox, lista de imagens com legenda opcional.
• Cards com Imagem - colunas visíveis (2, 3 ou 4), opção de carrossel infinito com velocidade e pausar ao passar o mouse, lista de cards com título, subtítulo e link.
• Carrossel de Logos - altura do logo (40 a 96px), velocidade, espaçamento, opção de tons de cinza colorido no hover e pausar no hover. Lista de logos com nome opcional.
• Lista de Serviços - cada serviço tem ícone Font Awesome (selecionado em modal próprio com busca por categorias), cor de fundo e cor do ícone configuráveis, título e descrição.

O conteúdo dos componentes é serializado como JSON no campo oculto conteudo_componente. O formulário tem um guard de submit: se o tipo for componente e o JSON estiver vazio ou inválido, o submit é cancelado com alerta orientando a recarregar a página.

Largura total e espaçamento

A opção Espaçamento interno só aparece quando Largura total está ativa. Sem largura total, a seção usa o container padrão do template e o espaçamento é controlado pelo CSS do template.

Preview na home

O botão Ver Página Inicial no canto superior direito abre route('site.home') em nova aba para conferir o resultado antes de ativar.

Erros comuns e como resolver

• "O título é obrigatório." - Causa: campo Título vazio. Solução: preencher com um nome interno descritivo, por exemplo "Banner Promocional Verão".
• "O tipo de conteúdo é obrigatório." - Causa: o hidden tipo ficou sem valor. Solução: clicar em um dos quatro cards de tipo antes de salvar.
• "A posição é obrigatória." - Causa: select Posição na Página Inicial sem valor válido. Solução: escolher uma das seis posições disponíveis no select.
• "Não foi possível salvar: o conteúdo do componente está vazio ou inválido. Recarregue a página e tente novamente." - Causa: o JSON do hidden conteudo_componente não foi serializado pelo Alpine.js antes do submit. Solução: recarregar a página e reconfigurar o componente sem trocar de aba antes de salvar.
• Seção não aparece no site - Causa provável: Seção ativa desligada ou posição escolhida não está habilitada no template em uso. Solução: ativar a seção no card Opções de Exibição e revisar o template em Site > Aparência do Site.

Onde encontrar

• URL: /admin/secoes-home/create
• Caminho no menu: Site > Seções da Home, botão de nova seção no canto superior direito
• Permissões necessárias: ver as configurações e editar as configurações
• Módulo necessário: nenhum

Veja também

• Site - Seções da Home (listagem)
• Site - Editar Seção da Home
• Site - Hero Slides (Carrossel)
• Site - Template do Site