Hero
O que você vai aprender
- Como adicionar e configurar a section Hero
- Como usar imagem ou vídeo, com versão diferente para mobile
- Como ajustar altura, alinhamento e overlay
Visão geral
A Hero é a section de banner principal, geralmente usada no topo da home. Suporta até duas mídias (imagem ou vídeo) lado a lado, uma versão de mídia separada para mobile, e blocos de conteúdo (texto, botão, etc.) por cima.
Como adicionar
- No Editor de temas, clique em Adicionar section
- Escolha Hero
- Configure a mídia e o conteúdo conforme abaixo
Referência de configurações
Mídia (Media 1 e Media 2)
| Configuração | O que faz |
|---|---|
| Tipo | Escolhe entre Imagem ou Vídeo para o slot |
| Imagem | Aparece quando o tipo é Imagem |
| Vídeo | Aparece quando o tipo é Vídeo |
💡 Se você preencher Media 1 e Media 2, elas aparecem lado a lado (50%/50%). Com apenas uma, ela ocupa 100% da largura.
Mídia mobile
| Configuração | O que faz |
|---|---|
| Empilhar mídia no mobile | Em vez de lado a lado, empilha as mídias verticalmente no celular |
| Mídia customizada no mobile | Permite escolher uma imagem/vídeo diferente da versão desktop especificamente para mobile |
Link da section
| Configuração | O que faz |
|---|---|
| Link | Torna a section inteira clicável, levando para a URL informada |
| Abrir em nova aba | Abre o link informado em uma nova aba |
Layout
| Configuração | O que faz |
|---|---|
| Mostrar indicador de scroll | Exibe um ícone animado indicando que há mais conteúdo abaixo |
| Direção do conteúdo | Empilha o conteúdo na vertical ou horizontal |
| Alinhamento | Posição horizontal do conteúdo dentro da section |
| Posição | Posição vertical do conteúdo dentro da section |
| Espaçamento (gap) | Espaço entre os blocos de conteúdo, em px |
| Largura | Section em largura total ou contida na largura da página |
| Altura | Automática, pequena, média, grande, tela cheia ou customizada (%) |
Aparência
| Configuração | O que faz |
|---|---|
| Esquema de cores | Define a paleta de cores aplicada à section |
| Overlay de mídia | Adiciona uma camada sólida ou em gradiente sobre a mídia, útil para dar contraste ao texto |
| Reflexo desfocado | Adiciona um efeito de reflexo borrado abaixo da mídia (só funciona com imagem) |
| Raio da borda | Arredonda os cantos da section, em px |
Onda decorativa
| Configuração | O que faz |
|---|---|
| Ativar onda | Adiciona uma forma de onda animada na base da section |
| Cor da onda | Cor da onda |
| Altura da onda (desktop/mobile) | Altura da onda em cada breakpoint |
| Animar onda | Liga/desliga a animação de movimento da onda |
Boas práticas
- Use overlay quando o texto estiver sobre uma imagem clara, melhora a legibilidade.
- Prefira vídeo apenas em um dos dois slots de mídia, dois vídeos ao mesmo tempo pesam o carregamento da página.
- Em mobile, ative "mídia customizada" quando o enquadramento da imagem desktop cortar elementos importantes.
- A Hero não tem Proporção fixa, a imagem estica pra preencher a altura escolhida. Envie em alta resolução (pelo menos 1920px de largura pro desktop, 750px pro mobile) mas comprimida, ela é a primeira coisa que carrega na página. Veja Dimensão de imagem.