Primeira dobra: o que colocar na primeira tela da sua landing page

A "primeira dobra" (em inglês, above the fold) é tudo o que o visitante vê antes de rolar a página. As pessoas rolam, sim, então ela não é a única parte que importa. Mas é ela que decide se a pessoa vai querer rolar: nos primeiros segundos, o visitante tenta entender o que é aquilo, se é para ele e o que fazer em seguida. Se a primeira tela não responde essas três perguntas, o resto da página quase nunca é lido.

Os 6 elementos de uma primeira tela que converte

1. Uma headline que diz o resultado

Diga o que o visitante ganha, com as palavras dele, em 4 a 12 palavras. "Feche o mês da sua loja em 2 dias" funciona; "O futuro da gestão financeira" não. Teste os seus rascunhos no analisador de headline grátis.

2. Uma sub-headline que diz o que é e para quem é

Uma ou duas frases: a categoria do produto, o público e como funciona. "Sistema financeiro para lojas da Nuvemshop que concilia os repasses do Pix e do cartão sozinho." A headline vende, a sub-headline explica.

3. Uma única chamada para ação principal

Um botão só, com bom contraste, cujo texto diz o resultado ("Começar minha auditoria grátis", "Receber meu primeiro relatório"), não a mecânica ("Enviar"). Um link secundário ("Ver como funciona") tudo bem; três botões do mesmo tamanho, não. Confira o seu no verificador de CTA.

4. Redutores de atrito ao lado do botão

Notas curtas que respondem à objeção na hora do clique: "Sem cartão de crédito", "Grátis por 14 dias", "Leva 60 segundos", "Cancele quando quiser". Escreva só as que forem verdade.

5. Uma imagem que mostra o produto

Um print, um vídeo curto do produto em uso ou um exemplo do resultado. Foto de banco de imagem com gente apontando para o notebook não diz nada ao visitante. Se o produto é difícil de mostrar, mostre o resultado (o relatório, o painel, a coisa pronta).

6. Uma prova que dê para acreditar

Uma fileira de logos de clientes reais, um número específico ("2.300 lojas") ou um depoimento curto e real, com nome. Ainda não tem clientes? Não invente prova: mostre o produto e acrescente a prova assim que tiver.

O que deixar fora da primeira tela

• Carrosséis e banners rotativos. O visitante vê no máximo o primeiro slide. Escolha a sua melhor mensagem e fique com ela.
• Pop-up logo na chegada. Um modal de newsletter antes de a pessoa ler uma palavra tapa justamente o que você precisa que ela veja.
• Menus longos. Cada link é uma saída. Numa landing page, deixe poucos itens no menu ou tire o menu.
• Listas de funcionalidades. Funcionalidades vão abaixo da dobra, depois que o visitante já sabe por que deveria se importar.
• Vídeo pesado no topo que atrasa o carregamento. Uma página lenta no 4G perde mais do que um fundo bonito ganha.

A primeira dobra no celular

No celular, a primeira tela tem mais ou menos 390×700 pixels e, depois que a barra do navegador e o aviso de cookies ocupam a parte deles, bem menos. Confira estes pontos num celular de verdade, não numa janela do computador encolhida:

• A headline aparece sem rolar e não quebra em cinco linhas. Aqui, headline curta ganha.
• O botão principal está na primeira tela, ou fica fixo, e tem pelo menos 44px de altura.
• O aviso de cookies (ou de LGPD) não cobre a headline nem o botão.
• O botão flutuante de WhatsApp não fica em cima do CTA.
• O texto tem pelo menos 16px, para ninguém precisar dar zoom.
• A imagem do topo não empurra todo o resto para baixo da dobra. No celular, muitas vezes ela deve vir depois do texto.

Erros comuns na primeira dobra

Checklist da primeira dobra em 10 itens

1. Um desconhecido consegue dizer o que você vende depois de 5 segundos.
2. A headline diz um resultado, não uma categoria.
3. A sub-headline diz para quem é.
4. Existe exatamente um botão principal.
5. O texto do botão diz o resultado.
6. Um redutor de atrito verdadeiro fica ao lado do botão.
7. A imagem mostra o produto ou o que ele entrega.
8. Há pelo menos uma prova real, ou nenhuma (nunca falsa).
9. Nada abre por cima antes de o visitante ler a headline.
10. Tudo isso também vale no celular.

O resto da página também importa: veja o checklist de landing page com 30 itens, os 17 erros de landing page e o guia de copywriting.