O que é Above the Fold?
Above the fold, também chamado de acima da dobra ou primeira dobra, é a parte da página que aparece na tela no momento em que ela termina de carregar, sem que o visitante role nada. O termo nasceu nos jornais impressos, onde a metade superior da capa ficava visível na banca com o jornal dobrado ao meio.
Na web, essa área concentra a atenção de praticamente todos os visitantes, porque ver o topo não exige esforço algum. Rolar exige uma decisão mínima, e uma parte das pessoas nunca a toma. Por isso o espaço acima da dobra costuma receber a promessa central da página, a prova de credibilidade e a chamada para ação principal.
O conceito evoluiu com o tempo. Não existe uma dobra fixa: cada dispositivo tem sua altura de tela, e um notebook mostra bem mais conteúdo que um celular. A leitura útil hoje trata o above the fold como uma faixa variável, planejada para a resolução que domina o seu tráfego real.
Como funciona na prática?
O trabalho com a primeira dobra segue quatro passos:
- Descubra as resoluções e dispositivos mais comuns do seu público nos relatórios de analytics.
- Liste o que precisa caber nessa faixa: a proposta de valor em uma frase, um apoio visual, um elemento de confiança e o botão principal.
- Verifique o resultado nos aparelhos reais, principalmente em celulares menores, onde a área útil encolhe bastante.
- Meça o comportamento com um scrollmap e veja qual porcentagem do público passa da dobra em cada página.
Exemplo hipotético: uma página de captação exibe apenas uma imagem de banco de imagens e o logo acima da dobra. O scrollmap mostra que 45% dos visitantes nunca rolam. A equipe move o título com a oferta e o formulário para o topo, e a conversão passa de 2,1% para 2,9%.
Exemplos de uso
- Uma clínica de estética em Belo Horizonte coloca o botão “Agendar avaliação gratuita” acima da dobra no mobile, junto com o preço da consulta e o selo do conselho regional.
- Um e-commerce de suplementos garante que preço, botão de compra e prazo de entrega apareçam sem rolagem na página de produto, porque o scrollmap mostra queda forte de atenção após a primeira tela.
- Um SaaS testa duas versões da hero section: uma com formulário de trial acima da dobra e outra com apenas um botão que rola até o formulário mais abaixo.
Erros comuns
- Entupir a primeira dobra de informação e destruir a hierarquia visual, deixando o visitante sem saber para onde olhar.
- Ocupar todo o topo com banner decorativo, empurrando a oferta e o botão para fora da tela.
- Planejar a dobra só no monitor do designer, ignorando a tela de 6 polegadas onde vive a maior parte do tráfego brasileiro.
- Tratar a dobra como limite rígido e concluir que ninguém rola, o que contraria o comportamento real medido em scrollmaps.
- Colocar elementos que parecem o fim da página no topo, criando uma falsa sensação de que não existe mais conteúdo abaixo.
Perguntas frequentes sobre Above the Fold
As pessoas ainda rolam a página abaixo da dobra?
Sim, rolar virou gesto natural em qualquer celular. A relevância do topo permanece por outro motivo: ele decide se a pessoa continua ou sai. Conteúdo abaixo da dobra é lido por quem se interessou pelo topo, então as duas áreas trabalham juntas em vez de competir.
O que colocar acima da dobra em uma landing page?
Quatro elementos costumam ocupar o espaço: a proposta de valor em uma frase clara, um apoio visual que reforce a oferta, um sinal de credibilidade como selo ou depoimento curto e a chamada para ação principal. O objetivo é responder “onde estou e o que ganho aqui” em poucos segundos.
Qual a altura exata da dobra?
Não existe altura única, porque ela muda conforme a tela do visitante. Em vez de perseguir um número fixo, consulte a distribuição de resoluções do seu tráfego no analytics e projete a página pensando na tela mais comum, verificando o resultado nos aparelhos menores.