Seção Hero: o que Colocar no Topo para Continuarem Lendo

A seção hero é a primeira parte visível de uma página, a que aparece antes de rolar, e decide se o visitante continua lendo ou vai embora. Em poucos segundos deve responder três perguntas: o que você oferece, para quem é e o que deve fazer agora. Se não conseguir, o restante da página, por boa que seja, fica sem leitores.

Este guia explica quais elementos compõem um bom hero, que trabalho cada um faz, como manter a coerência com o anúncio que trouxe o visitante, por que o design deve ser pensado primeiro para o celular e como cuidar da velocidade de carregamento. Fecha com uma lista de passos para revisar o seu.

O que é a seção hero e por que decide se continuam lendo?

O hero é o bloco de cabeçalho de uma landing: o título, o subtítulo, o botão principal e uma imagem ou vídeo que ocupam a tela ao carregar. Recebe o nome do inglês “hero”, por ser o protagonista da página. Também é conhecido como “parte superior da página” ou pela expressão em inglês “above the fold”.

Importa porque a atenção é limitada e a decisão de ficar se toma muito rápido. Antes de ler uma só frase do restante, o visitante já formou uma impressão com o que vê na entrada. Um hero claro convida a continuar; um confuso, saturado ou lento provoca o abandono, e nenhuma seção posterior pode consertar isso porque ninguém chega até ela.

Quais elementos uma seção hero deve ter?

Um hero eficaz não precisa de muitos componentes, mas sim de que cada um faça bem o seu trabalho. Estes são os cinco que não deveriam faltar.

• Título claro. Deve dizer em uma frase o que você, o visitante, ganha com a oferta. Priorize o resultado concreto sobre o slogan engenhoso que ninguém entende de primeira.
• Subtítulo que completa. Uma ou duas linhas que esclarecem como o benefício é alcançado ou para quem é. Se o título promete, o subtítulo explica sem repetir.
• Botão de ação visível. Um único botão principal, com um verbo claro e um contraste que se destaque sobre o fundo. Evite várias ações que concorram entre si.
• Prova visual. Uma imagem, uma captura do produto ou um vídeo curto que mostre o que se oferece em uso real. As fotos genéricas de banco de imagens agregam pouco.
• Sinal de confiança. Um dado breve que reduza o risco: logotipos de clientes, uma avaliação, um número de usuários verificável ou um selo de garantia.

O título é a peça que mais pesa, e merece um trabalho próprio. Se quiser aprofundar, revise como escrever o título de uma página de vendas e teste várias versões antes de se decidir por uma.

O sinal de confiança não precisa ser grande: basta uma linha com um número real ou um par de logotipos. Para escolher qual mostrar, vai ajudar o que se explica sobre a prova social e o modo como ela reduz a dúvida do visitante nos primeiros segundos.

Que função cada elemento do hero cumpre?

Para revisar seu cabeçalho com critério, convém pensar em cada peça pelo trabalho que faz e pelo sinal de que algo falha. A tabela resume.

| Elemento | Seu trabalho | Sinal de que falha |

| --- | --- | --- |

| Título e subtítulo | Comunicar o que você oferece e o que se ganha em menos de cinco segundos | Os visitantes perguntam o que você faz ou saem sem rolar |

| Botão de ação | Indicar o próximo passo com um único caminho claro | Poucos cliques no botão ou cliques espalhados entre várias opções |

| Imagem ou vídeo | Mostrar o produto em uso e reforçar a mensagem | Uma imagem decorativa que não explica nada ou que deixa o carregamento lento |

| Sinal de confiança | Reduzir o risco percebido antes de pedir uma ação | Dúvidas sobre a confiabilidade que aparecem nas consultas e no suporte |

Se um elemento não cumpre o trabalho, não o enfeite: reescreva-o ou elimine-o. Um hero com quatro peças que funcionam rende mais do que um com sete que se atrapalham.

Um matiz importante: o fato de o hero ser decisivo não significa que o visitante não role. As pessoas descem uma página quando o que veem em cima lhes dá um motivo para isso. Por isso o objetivo do hero não é contar tudo, e sim despertar interesse suficiente para que o visitante queira continuar lendo e descubra o restante do seu argumento.

Por que o hero deve coincidir com o anúncio?

Quem chega de um anúncio, de um e-mail ou de um resultado de busca traz uma promessa na cabeça. Se o hero não a confirma de imediato, o visitante pensa que errou de página e vai embora. A essa coincidência entre o que você prometeu fora e o que encontra dentro se chama coerência de mensagem.

Cuide para que o título, a oferta e até as imagens do seu hero repitam a linguagem do anúncio. É a ideia que desenvolve a congruência entre anúncio e página: se o anúncio fala de um desconto do primeiro mês, o hero deve mostrá-lo, não escondê-lo no meio da página.

Quando você tem várias campanhas com promessas distintas, o ideal é um hero adaptado a cada uma, ainda que o restante da página seja o mesmo. Mudar só o título e o subtítulo costuma bastar para manter o fio.

Como desenhar um hero pensado primeiro para o celular?

Uma grande parte das visitas chega do telefone, e ali o espaço visível é muito menor. Desenhe primeiro a versão mobile e depois amplie-a para o computador, não o contrário. Convém revisar como uma landing se comporta no celular com conexão 4G antes de dar o design por pronto.

• Priorize o essencial. Na tela pequena cabem o título, o subtítulo curto e o botão. Se a imagem empurra o botão para fora da vista, reduza-a ou mova-a para baixo.
• Texto legível sem dar zoom. Use um tamanho de letra confortável e um contraste suficiente; um título longo demais se parte em cinco linhas e perde força.
• Zona de toque confortável. O botão deve ser grande o bastante e estar separado de outros elementos para tocá-lo com o polegar sem erros.

Como a velocidade de carregamento afeta o hero?

O hero é a primeira coisa que carrega, então o peso dele marca a primeira impressão. Uma imagem enorme ou um vídeo que começa de forma lenta deixa o visitante olhando uma tela em branco, e muitos não esperam. Aplicar boas práticas de otimização da velocidade web nessa zona rende mais do que em qualquer outra parte da página.

Comprima a imagem principal e use formatos modernos como WebP, defina o tamanho para que a página não se desloque ao carregar e evite sliders animados ou vídeos de fundo pesados. É recomendável que o elemento visível mais grande, que o Google mede como LCP dentro das Core Web Vitals, apareça em menos de dois segundos e meio. Se tiver dúvida entre uma imagem espetacular e uma rápida, fique com a rápida.

Como revisar sua seção hero passo a passo

Use esta lista cada vez que criar uma landing ou quiser melhorar uma existente. Não leva mais do que alguns minutos.

1. Mostre sua página a alguém que não a conheça durante cinco segundos e peça que diga o que você oferece e para quem.
2. Confira que o título promete um resultado concreto e que o subtítulo o explica sem repetir.
3. Verifique que há um único botão principal, visível sem rolar no celular e no computador.
4. Confirme que o hero repete a promessa do anúncio ou do link de onde o visitante chega.
5. Meça o carregamento: reduza o peso da imagem principal e teste de novo até o hero aparecer quase na hora.

Com o Atomicat, você pode montar um hero com título, botão, imagem e sinal de confiança a partir de blocos já otimizados para celular, e mudar os textos por campanha sem tocar em código.

Perguntas frequentes

O que é a seção hero de uma página web?

É o bloco de cabeçalho que se vê ao carregar a página, sem rolar. Costuma incluir um título, um subtítulo, um botão de ação e uma imagem ou vídeo, e sua função é captar a atenção e orientar o visitante.

O que a seção hero de uma landing deve ter?

Um título claro, um subtítulo que o complete, um único botão de ação, uma prova visual do produto e um sinal de confiança breve. Tudo isso deve coincidir com a promessa do anúncio que traz o visitante.

Qual é a diferença entre hero e above the fold?

Referem-se quase à mesma coisa. “Above the fold” é a zona visível sem deslocar e o hero é o bloco de design que a ocupa, embora em telas pequenas o visível varie conforme o dispositivo.

Quanto o hero deve pesar para carregar rápido?

Não há um número único, mas convém comprimir a imagem principal, usar formatos modernos e evitar vídeos de fundo pesados. O objetivo é que o elemento mais grande apareça em menos de dois segundos e meio.

Como sei se o meu hero funciona?

Observe se o visitante rola, quantos cliques o botão principal recebe e quantos abandonam assim que entram. Depois teste uma versão diferente do título ou da imagem e compare os resultados.

Ganhe os primeiros segundos e o restante virá depois

Tudo o que você escrever abaixo do hero só tem valor se o visitante chegar até ali. Um título claro, um botão único, uma prova visual real e um carregamento rápido transformam o cabeçalho no melhor argumento da sua página, e é a parte em que qualquer melhoria se nota antes.

Comece seu teste grátis e crie uma landing com um hero que retenha desde o primeiro segundo, sem escrever uma linha de código.