Landing pages

A hero section perfeita: o que pôr nos primeiros 600 píxeis

Os primeiros 600 píxeis decidem se o visitante fica ou desliza para a próxima aba. Em telemóvel, são literalmente um único ecrã — antes do polegar fazer qualquer movimento. Se nesse ecrã não está claro o que vendes, para quem, e o próximo passo, perdeste. Não vale recuperar com prova social no fim, vídeo do fundador a meio, ou um CTA flutuante. A dobra é o ringue.

A maior parte das hero sections em PT erra por excesso: headline criativo que não diz nada ("Dá asas ao teu negócio."), subheadline com 3 buzzwords ("soluções integradas, transformação digital, ecossistema 360º"), e uma foto de stock de pessoas a apontar para um portátil. Concorrem todas pela mesma frase vazia. Quem chega ali fica 4 segundos e sai.

Os 5 elementos canónicos

Uma hero section que funciona tem cinco elementos, nesta ordem visual:

  1. Headline — promessa concreta, ≤ 10 palavras.
  2. Subheadline — clarifica para quem, com o quê, em quanto tempo.
  3. Visual — render, screenshot, fotografia real ou ilustração. Não decorativo.
  4. CTA primário — botão único, infinitivo de ação.
  5. Micro-prova — 1 linha de prova social (logos, número, selo) — não obrigatória, mas frequente.

Mais do que isto = ruído. Menos = vendes mal. Não há "hero minimalista zen" com 3 palavras a 80px — vende uma vez em mil, e essa vez é um designer a aplaudir, não um comprador.

1. Headline — diz o resultado, não o produto

A headline canónica responde à pergunta: "O que ganho eu se ficar nesta página?" Não "o que vendem". Não "quem são". Resultado.

Headline ruimHeadline bom
"Soluções digitais à medida""Site novo em 4 semanas, pronto para o Google"
"Bem-vindo à nossa agência""Cortes 300€/mês de Meta Ads sem perder leads"
"A tua presença digital, elevada""Reservas online no teu site, sem comissão para a Booking"
"Inovação para o teu negócio""Loja online entregue em 6 semanas, código teu"

Regra prática: se a tua headline também serve para o concorrente que está ao lado, não diz nada. Se a podes dizer ao espelho sem corar, podes pôr na página.

Mais sobre o título de landing page com exemplos por setor.

2. Subheadline — quem, o quê, prazo (≤ 25 palavras)

Uma frase que:

  • Identifica o público — "Para PME portuguesas com loja física que querem vender online."
  • Diz o produto/serviço concreto — "Site WordPress com checkout integrado."
  • Quantifica o prazo, preço ou resultado — "Pronto em 6 semanas, desde 1.500€."

A subheadline sela o que a headline promete. Headline "Site novo em 4 semanas" + subheadline "para restaurantes em Portugal que querem reservas pelo Google, sem depender da TheFork" = leitor reconhece-se em 5 segundos.

Sem "Bem-vindo a…", sem "Acreditamos que…", sem "Há mais de 10 anos…". Verbos de utilizador.

3. Visual — não decorativo, mostra o produto

O visual é a peça mais difícil — e a mais maltratada. Princípios:

  • Mostra o produto, não pessoas a sorrir. Screenshot do produto, render do imóvel, foto do tour, mockup do site.
  • Fotografia real vence stock por uma ordem de grandeza. Stock anuncia "agência genérica".
  • Render 3D ou ilustração funciona em SaaS e produtos abstratos. Em serviços concretos (restaurante, hotel, oficina), foto real.
  • Otimizado — WebP/AVIF, dimensões corretas, <200 KB. O LCP da página é quase sempre a imagem do hero — se ela demora 2,3s, o LCP é 2,3s. Como o LCP funciona, no detalhe.
  • Sem vídeo em autoplay. Quebra a velocidade, é mau para acessibilidade, e raramente é assistido. Vídeo abaixo da dobra, com play manual.

Variante aceitável: ilustração SVG inline, leve, com cor de marca — funciona em landing de SaaS, infoproduto, formação.

4. CTA primário — único, infinitivo de ação

Um botão. Não três. Não dois lado a lado. Um.

  • Verbo + benefício — "Pedir orçamento", "Reservar agora", "Comprar acesso", "Receber dossier".
  • Cor que destaca — não cor de marca discreta. Verde, laranja, magenta — algo que explode contra o resto.
  • Tamanho mínimo no telemóvel: 48px de altura, dedo do polegar adulto.
  • Texto curto — 2-4 palavras. "Pedir orçamento" > "Solicite a sua proposta sem compromisso".

CTA secundário (opcional) — link discreto, abaixo do botão: "Ver preços primeiro" / "Ver caso real". Nunca compete pela mesma cor. Detalhe completo do botão acima da dobra.

5. Micro-prova — 1 linha, opcional mas eficaz

Logo abaixo do CTA ou ao lado, uma linha curta de prova social:

  • "Construímos sites desde 2020. Stack rápida, sem builders pesados."
  • "120+ tours realizados em 2025. Empresa RNAAT n.º 8901."
  • "Lighthouse 95+ no nosso próprio site — verifica."

Sem inventar. Sem "★ 4.9 de 1.200 clientes". Se não tens, não pões. Honestidade é a prova social que ninguém usa em PT — diferencia.

Acima da dobra ≠ acima de 600 píxeis em desktop

Em 2026, "acima da dobra" significa o primeiro ecrã do telemóvel. Em telemóveis comuns (iPhone 14, Galaxy S24), são ~700-900 píxeis verticais, com o status bar + a barra do browser a comer. Tens cerca de 600 píxeis úteis.

Se o teu hero precisa de scroll horizontal ou de "rolar um pouco para ver", está partido. Testa em iPhone SE (375x667) — se passa aí, passa em tudo.

Velocidade: o hero é o LCP

O LCP (Largest Contentful Paint) da página é, em 99% dos casos, a imagem ou o título do hero. Alvo: LCP < 1,5s no telemóvel em 4G. Como chegar lá:

  • Imagem do hero pré-carregada (<link rel="preload" as="image">).
  • Fontes do título locais, com font-display: swap.
  • Sem scripts bloqueantes antes do hero (GTM, Pixel, chat) — todos defer ou gated.
  • Sem CSS de above-the-fold em CSS externo a carregar — crítico inline.

A Page Experience do Google e os Core Web Vitals decidem-se aqui.

Cookies e hero: o erro que tapa o CTA

O banner de cookies em Portugal é obrigatório por RGPD e orientação da CNPD: opt-in explícito, não pré-aceite. Mas se o banner tapa a hero section completa no primeiro carregamento, mataste a conversão de 30% dos utilizadores que fecham sem ler.

Solução: banner na parte inferior, não no topo. Não bloqueia o conteúdo. Aceitar/recusar com igual destaque. O scroll do utilizador continua disponível durante a decisão.

A/B test do hero — onde começar

Se vais testar variantes, prioridade:

  1. Headline — maior impacto isolado em 80% dos casos.
  2. CTA (texto e cor) — segundo maior impacto.
  3. Visual — terceiro. Mudar foto pode mover 5-15% de conversão.
  4. Subheadline — quarto. Refina, não revoluciona.
  5. Ordem de elementos — quinto. Só mudas se há dados que sugerem.

Não testas 4 variantes ao mesmo tempo com 200 visitantes/dia. Lê como configurar um A/B test em landing primeiro.

Erros frequentes que matam o hero em PT

  • Carrossel de slides — divide intenção, ninguém vê o slide 3, peso pesado. Banido.
  • Vídeo institucional em autoplay com som — corta-se em 3 segundos com um swipe.
  • Headline em maiúsculas — perde 13% de legibilidade.
  • Headline em 3 idiomas no mesmo bloco — desorienta. Cria URLs separadas.
  • Logo da empresa enorme + nome da empresa em H1 — o teu nome não vende. O resultado vende.
  • "Bem-vindo ao nosso website." — caracter ofensivo.
  • CTA "Saber mais" — pior CTA de Portugal. Diz o que ganhas no clique.

Hero por tipo de landing: nuances

  • Tráfego de Meta Ads — hero tem de espelhar a criatividade do anúncio. Mesmo visual, mesma headline. Coerência de scent.
  • Tráfego de Google Ads (search) — hero tem de incluir a keyword pesquisada. Quem pesquisou "loja online algarve" tem de ver "loja online" no hero.
  • Tráfego orgânico SEO — hero pode ser mais descritivo, menos transacional. O leitor chegou por intenção informacional.
  • Tráfego de email — hero pode ser mais direto, partir do meio da conversa. "O orçamento que pediste."

Em resumo

A hero section perfeita em 2026 cabe num ecrã de telemóvel, responde em 5 segundos a "o que ganho", tem headline concreta, subheadline que qualifica, visual do produto real, um CTA único e (opcional) uma linha de prova honesta. Carrega abaixo de 1,5s, não é tapada pelo banner de cookies, e bate certo com o anúncio que trouxe o visitante até lá. Tudo o que sobra é decoração — e decoração custa segundos.

Se queres fazer o teste, abre a tua landing no telemóvel, conta até cinco em voz alta, e pede a alguém ao lado para te dizer o que vendes. Se não consegue, escreveste decoração. Recomeça pelo resultado.

No sitesfixe.pt desenhamos hero sections que carregam abaixo de 1,5s e dizem em 5 segundos o que vendes. Landing pages desde 400€. Sites institucionais desde 1.500€. Pedir orçamento sem compromisso.

Lê também:

Fontes

Precisas de um site ou loja online?

Agência digital portuguesa. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento