A primeira tela decide: título em duas linhas, apoio que responde e a tela inteira
Se o título da primeira tela não cabe em duas linhas, a promessa está confusa. Três regras para a tela que todo visitante vê.
- Post
- 24 de out de 2026
- 3 min de leitura
A primeira tela é a única parte do site que todo visitante vê. Quem chega decide ali, rápido, se continua rolando ou fecha a aba. Mesmo assim, é comum ver a primeira tela tratada como capa decorativa: título enorme em três ou quatro linhas, duas frases de apoio, dois botões e o começo da próxima seção aparecendo embaixo.
Eu sigo três regras nessa tela. Todas cabem numa frase.
1. O título cabe em duas linhas
O título principal, o H1, cabe em no máximo duas linhas em qualquer tamanho de tela. No celular também. Se não cabe, a solução não é diminuir a letra. É reescrever.
Título que não cabe em duas linhas quase sempre está tentando dizer duas coisas. “A agência completa de marketing, design e tecnologia para empresas que querem crescer” fala de tudo e promete nada. “Sites que vendem, publicados em dias” cabe, e a pessoa entende o que leva.
Um teste rápido: leia o título em voz alta. Se você precisar respirar no meio, ele está longo.
2. O apoio responde a próxima pergunta
Depois do título, a pessoa pergunta: como? Para quem? O que está incluído? O texto de apoio responde a pergunta mais importante, em uma ou duas frases. Não repete o título com outras palavras e não lista serviços.
No exemplo do estúdio de fotos de produto, o título promete fotos que vendem no site. O apoio diz o que está incluído: ensaio, tratamento e entrega no formato da loja. Uma frase, e a dúvida principal está resolvida.
3. A tela inteira, sem espiar a próxima seção
A primeira seção ocupa a altura toda da tela. A tentação é encurtar para mostrar o começo da seção seguinte, como convite para rolar. O efeito é o contrário: a tela parece cortada e a promessa perde força, porque divide a atenção com o que vem depois.
Com a tela inteira, o título, o apoio e o botão têm espaço para respirar. A hierarquia fica clara sem precisar de letra gigante.
Libere o resto da matéria
Você também recebe por e-mail o link desta matéria e a aula grátis do Conversão Visual.
E o botão?
Um só por área de visão. Se o header já mostra o botão principal, a primeira tela não repete outro botão na mesma altura do olhar. Dois botões pedindo a mesma coisa viram ruído, mesmo com textos diferentes.
No celular a régua é a mesma
O erro mais comum é desenhar a primeira tela no desktop e deixar o celular se virar. O título que ocupava duas linhas largas vira cinco linhas estreitas, e o botão vai parar fora da tela.
A tipografia do celular é outra, um degrau menor, e o título é conferido de novo nessa largura. Se no celular ele passa de duas linhas, reescreva pensando nos dois tamanhos, não só em um. O texto de apoio também tem limite: no máximo três linhas no celular.
Como conferir em um minuto
Abra a página em três larguras: celular, tablet e desktop. Em cada uma, responda:
- O título cabe em duas linhas?
- O apoio responde a principal dúvida em até duas frases?
- Existe um único botão principal visível?
- A primeira tela ocupa a altura toda?
Se alguma resposta for não, o ajuste é de texto antes de ser de layout.
Por que isso vende
A primeira tela não precisa explicar tudo. Ela precisa fazer a pessoa entender o que leva e querer ver o resto. Uma promessa curta, uma resposta e um caminho fazem isso melhor do que qualquer efeito visual.
No Conversão Visual eu ensino essas decisões de página, da primeira tela até o botão final, e como passar cada uma para a IA executar. A aula grátis mostra o processo completo, com uma página real indo para o ar.
