Hero
O que você vai aprender
- Pra que serve esta section
- Como funcionam os 2 slots de mídia e a versão mobile separada
- O recurso de reflexo desfocado e a onda decorativa
Pra que serve
É o banner principal de topo de página, o primeiro elemento que o visitante vê. Aceita até 2 mídias (imagem ou vídeo cada) lado a lado, com controle total de altura, e aceita blocks de conteúdo (Texto, Botão, Grupo, Selo, Contagem regressiva, etc.) sobrepostos.
Como configurar
Mídia 1 e Mídia 2
| Configuração | Pra que serve |
|---|---|
| Tipo | Imagem ou Vídeo, pra cada um dos 2 slots. |
| Imagem / Vídeo | O arquivo correspondente ao tipo escolhido. |
Se só a Mídia 1 for preenchida, ela ocupa a largura toda. Com as duas preenchidas, cada uma ocupa metade.
Mídia no celular
| Configuração | Pra que serve |
|---|---|
| Empilhar mídia no celular | Em vez de lado a lado, mostra uma mídia embaixo da outra na visualização mobile. |
| Mídia customizada no celular | Permite enviar imagens/vídeos diferentes especificamente pro celular, em vez de reaproveitar as de desktop redimensionadas. |
Link da section
| Configuração | Pra que serve |
|---|---|
| Link | Torna a section inteira clicável (a mídia de fundo vira um link). |
| Abrir em nova aba | Só faz sentido com Link preenchido. |
Layout
| Configuração | Pra que serve |
|---|---|
| Mostrar indicador de rolagem | Ícone animado sugerindo rolar a página, só aparece quando a altura não é "Automático". |
| Direção / Alinhamento / Posição / Espaçamento | Controlam como os blocks de conteúdo se organizam sobre a mídia. |
| Largura | Largura total ou Largura da página. |
| Altura | Automático, Pequena, Média, Grande, Tela cheia, ou Personalizada (percentual da altura da tela). |
Aparência
| Configuração | Pra que serve |
|---|---|
| Esquema de cores | Cor de fundo/texto aplicada à section (relevante principalmente quando não há mídia). |
| Sobreposição da mídia | Ativa uma camada de cor (sólida ou gradiente) por cima da mídia, útil pra manter contraste do texto. |
| Reflexo desfocado | Mostra uma versão borrada e ampliada da imagem como fundo atrás da mídia principal, um efeito visual de preenchimento. Só funciona com imagem, não com vídeo. |
| Raio do canto | Arredonda os cantos da mídia. |
Onda decorativa
| Configuração | Pra que serve |
|---|---|
| Ativar onda | Adiciona uma forma de onda decorativa na base da section. |
| Cor / Altura (desktop e celular) / Animação | Controlam a aparência e se a onda se move sozinha. |
Boas práticas
- Reflexo desfocado só funciona com imagem, se os dois slots de mídia forem vídeo, a opção fica sem efeito mesmo que ativada.
- Ao usar 2 mídias lado a lado, prefira imagens com proporção parecida entre si, evita um layout desequilibrado entre os dois lados.