O que é Hero Section?
Hero section, também chamada de seção hero ou apenas hero, é o bloco de abertura de uma página, aquele que ocupa o topo e recebe o visitante. A composição padrão reúne título, subtítulo, um elemento visual de apoio e a chamada para ação principal.
A seção carrega esse nome porque assume o papel de protagonista da página. Ela responde três perguntas em poucos segundos: onde a pessoa chegou, o que é oferecido ali e qual o próximo passo. Um visitante que não encontra essas respostas volta para o resultado de busca ou para o feed do qual veio.
A hero section ocupa boa parte da área acima da dobra, e os dois conceitos não são a mesma coisa. Above the fold é uma área determinada pela tela do visitante. Hero section é um bloco de design com começo e fim definidos por você, que pode ultrapassar a linha da dobra em telas menores.
Como funciona na prática?
Uma hero section costuma ser montada em cinco camadas:
- Título com a proposta de valor, escrito com clareza da oferta, sem metáfora nem trocadilho.
- Subtítulo com uma frase de apoio: para quem serve, como funciona ou o que a pessoa ganha.
- Apoio visual que mostre o produto, o serviço ou o resultado, no lugar de uma foto genérica de banco de imagens.
- Chamada para ação principal, com o design de botão destacado do restante da tela.
- Elemento de confiança: número de clientes, selo, avaliação ou logos de quem já comprou.
Exemplo hipotético: uma escola de inglês trocou o título “Transforme seu futuro” pelo texto “Aulas de inglês on-line com professor nativo, a partir de R$ 149 por mês”, manteve o mesmo botão e viu os cliques em “Agendar aula teste” subirem de 4,2% para 6,1% dos visitantes.
Hero Section vs Above the Fold: qual a diferença?
| Critério | Hero Section | Above the Fold |
|---|---|---|
| O que é | Bloco de design no topo da página | Área visível sem rolagem |
| Quem define o limite | A equipe que projeta a página | A tela do visitante |
| Tamanho | Fixo no layout | Muda a cada dispositivo |
| Uso principal | Estruturar a abertura da página | Priorizar o que todos veem |
Veredito: a hero section é o conteúdo que você constrói para o topo, e o above the fold é o espaço disponível para exibi-lo, variável em cada aparelho.
Exemplos de uso
- Um e-commerce de café coloca na hero uma foto do pacote, o título “Café especial torrado na semana do seu pedido” e o botão “Ver moagens”, com frete grátis acima de R$ 99 logo abaixo.
- Uma software house em Florianópolis usa a hero para exibir uma captura de tela do painel, a frase de valor e o botão de demonstração, com logos de clientes conhecidos como prova.
- Um estúdio de pilates testa duas heros: uma com vídeo de uma aula em segundo plano e outra com foto estática e formulário de agendamento visível, medindo agendamentos concluídos.
Erros comuns
- Escrever títulos abstratos que servem para qualquer empresa e não dizem o que o negócio vende.
- Usar imagem de banco genérica no lugar do produto real, gastando o espaço mais valioso da página com decoração.
- Colocar vários botões com o mesmo peso visual e diluir a ação principal.
- Deixar o vídeo ou a imagem de fundo pesada travar o carregamento da primeira tela.
- Projetar a hero apenas no desktop e descobrir tarde que, no celular, título e botão nem aparecem juntos.
Perguntas frequentes sobre Hero Section
O que colocar na hero section de um site?
Cinco elementos resolvem a maioria dos casos: título com a proposta de valor, subtítulo de apoio, imagem do produto ou do resultado, botão com a ação principal e um sinal de confiança. O conjunto precisa responder onde a pessoa está, o que é oferecido e qual o próximo passo.
Hero section e above the fold são a mesma coisa?
São conceitos diferentes que costumam ocupar o mesmo espaço. Hero section é um bloco de design com tamanho definido no layout. Above the fold é a área visível antes da rolagem, que muda conforme a tela. Em celulares menores, parte da hero frequentemente fica abaixo da dobra.
A hero section precisa ocupar a tela inteira?
Ela não precisa. Heros de altura total ficaram populares em certos estilos de design, e nada obriga esse formato. Uma hero mais compacta deixa parte da seção seguinte visível, o que sinaliza a existência de mais conteúdo e incentiva a rolagem em vez de encerrar a leitura na primeira tela.