Botões de CTA — Onde e Como Posicionar
Cor, tamanho, posição — tudo importa. Descobre o que funciona melhor para a tua landing page.
Ler artigoComposição da Hero Section — Tudo Começa Aqui
A seção inicial é o que decide se alguém fica ou sai. Vê os elementos que funcionam e por quê.
Sabemos que tens apenas segundos. Aquele primeiro scroll decide tudo — se o visitante vai explorar a página inteira ou sair logo. A hero section é onde essa decisão acontece. Não é só sobre ter uma imagem bonita e um título. É sobre estrutura, proporções e psicologia.
Vamos ser diretos: a maioria das landing pages falha aqui. Títulos confusos, imagens que não funcionam, CTAs no sítio errado. Mas quando gets it right? Quando os elementos estão bem equilibrados e a hierarquia é clara? Aí funciona.
55%
dos visitantes decidem em 15 segundos
3
elementos essenciais para funcionar
72%
de conversões melhoram com ajustes na hero
A Anatomia: O Que Realmente Funciona
Uma hero section eficaz tem três camadas. Primeira: o background — pode ser cor sólida, imagem ou vídeo, mas tem de ter contraste suficiente para o texto ser legível. Não é opcional.
Segunda camada: o headline. Não precisa ser criativo. Precisa ser claro. “Descobre Como Aumentar Vendas em 90 Dias” funciona melhor que “A Solução Inovadora que Transforma Tudo”. As pessoas não querem poesia, querem saber o que ganham.
Terceira: call-to-action. Um botão bem posicionado, com cor que contrasta, texto ação-orientado. Colocar o CTA ao lado do título? Geralmente não funciona. Abaixo, com espaço respeitável, sim.
Proporções e Espaçamento — Onde a Magia Acontece
O espaçamento é o que separa designs amadores de designs profissionais. Um headline muito perto do topo? Parece apertado. Muito longe? Parece perdido. O sweet spot fica entre 15% a 25% do topo da viewport.
O título e a descrição precisam respirar. Usa line-height de 1.2 a 1.3 para headlines e 1.5 a 1.6 para corpo de texto. Não é números aleatórios — é o que o olho humano consegue seguir confortavelmente.
“O melhor design é invisível. Ninguém nota que o espaçamento está perfeito — mas nota quando está errado.”
Cores e Contraste — Legibilidade Não Negocia
Texto branco em fundo azul claro? Não. Texto cinzento em fundo cinzento? Definitivamente não. A regra é simples: mínimo de 4.5:1 de contraste (WCAG AA). Testa sempre com ferramentas de acessibilidade.
A cor do CTA tem de ser diferente do resto. Não precisa ser neon. Pode ser subtil. Mas tem de ser óbvia como o ponto de ação principal. A maioria dos sites usa a cor primária da marca aqui — e funciona porque a marca já foi estabelecida como ação.
- Fundo: cor sólida ou imagem com overlay escuro
- Headline: branco ou muito escuro (máximo contraste)
- Descrição: cinzento claro (lê-se bem, não compete com headline)
- CTA: cor que se destaca — geralmente cor primária da marca
Responsive — Porque Metade dos Teus Visitantes Estão no Mobile
No desktop podes ter uma imagem grande e espaçoso. No mobile? Tudo muda. A altura da hero precisa ser entre 60vh a 80vh (não 100vh — deixa espaço para o utilizador saber que há conteúdo abaixo). O título reduz em tamanho mas mantém o impacto.
O CTA tem de ser tátil — mínimo 44×44 pixels de área clicável. Testar em verdadeiros dispositivos, não só no browser. A diferença entre 45 e 48 pixels pode parecer nada, mas em mobile faz a diferença entre conversão e frustração.
O Resumo: Construir uma Hero Section que Funciona
Não precisa ser complicado. Precisa ser intencional. Cada elemento — o background, o título, a descrição, o botão — tem um propósito. E cada proporção, cada cor, cada espaçamento foi escolhido porque funciona, não porque “parece bem”.
Começa aqui. A hero section é onde o visitante decide se confia em ti. Se consegues comunicar claro, rápido e com bom design nos primeiros 15 segundos? O resto fica muito mais fácil.
Nota Importante
Os princípios apresentados neste artigo baseiam-se em boas práticas de design e comportamento do utilizador. Cada negócio é único — os teus resultados podem variar consoante o teu público, indústria e contexto específico. Recomendamos testar diferentes abordagens com dados reais do teu site. Este conteúdo é informacional e educacional.