Por que a área acima da dobra é importante?
Descubra por que a área acima da dobra é fundamental para engajamento, conversões e SEO. Aprenda as melhores práticas para otimizar o espaço mais valioso do seu...
12 min de leitura
Acima da dobra é a porção de uma página web que fica visível na janela do navegador no momento em que o visitante acessa — antes de rolar, clicar ou interagir de qualquer forma. Tudo além desse limite inicial da janela de visualização está abaixo da dobra.
A frase descreve a primeira tela de conteúdo: o título, a imagem principal, a navegação e qualquer chamada para ação que carregue sem necessidade de rolagem. É a zona de maior visibilidade em qualquer página.
O que significa “acima da dobra”?
Em design web, acima da dobra (frequentemente abreviado como ATF, do inglês above the fold) significa a área visível de uma página web antes de qualquer rolagem. A “dobra” é a linha imaginária na parte inferior da janela do navegador — o ponto de corte entre o que o visitante vê imediatamente e o que requer ação para ser revelado.
O termo não descreve uma altura fixa em pixels. Em um monitor desktop de 27 polegadas, a dobra pode ficar entre 900 e 1.000 pixels do topo. Em um celular no modo retrato, pode ser de apenas 500 a 600 pixels. A dobra muda com cada dispositivo, tamanho de tela, barra de ferramentas do navegador e configuração de zoom.
Três perguntas que a área acima da dobra deve responder quase instantaneamente:
- Sobre o que é esta página? — um título claro e descritivo
- Por que devo ficar? — uma proposta de valor ou declaração de benefício
- O que devo fazer a seguir? — uma chamada para ação visível ou um indicador de navegação
Lance seu programa de afiliados hoje
Configure o rastreamento avançado em minutos. Não é necessário cartão de crédito.
De onde veio o termo “acima da dobra”?
O termo tem origem na publicação de jornais impressos. Os jornais físicos eram dobrados ao meio nas bancas. Apenas a metade superior da primeira página ficava visível para quem passava. Os editores colocavam as manchetes mais importantes, fotografias impactantes e principais reportagens nesse espaço para chamar a atenção e impulsionar as vendas.
A mesma lógica foi transportada para o design web no início dos anos 1990. Designers adotaram o conceito de “dobra” para descrever o que os usuários veem antes de rolar — o equivalente digital da exposição em banca de jornais.
Diferentemente do papel-jornal, no entanto, uma página web não tem uma dobra física. A dobra é virtual, definida inteiramente pela janela de visualização do visitante.
Por que o acima da dobra é importante?
O conteúdo acima da dobra determina se um visitante permanece ou sai.
Primeiras impressões e taxa de rejeição
Um visitante forma uma impressão de uma página em aproximadamente 50 milissegundos. Se a área acima da dobra parecer poluída, confusa ou irrelevante, a taxa de rejeição aumenta. Páginas que comunicam claramente propósito e valor na janela de visualização inicial apresentam taxas de abandono mensuravelmente menores.
Impacto na conversão
Chamadas para ação, formulários de cadastro e ofertas principais posicionados acima da dobra consistentemente superam aqueles enterrados mais abaixo.
Implicações para SEO
Os sinais de experiência de página do Google e o Core Web Vitals recompensam páginas onde o conteúdo principal carrega rapidamente e é imediatamente acessível. Embora a dobra em si não seja um fator de classificação direto, páginas que empurram conteúdo relevante para baixo de intersticiais intrusivos ou imagens enormes correm risco de desclassificação. Conteúdo mais difícil de alcançar é conteúdo que ranqueia de forma menos competitiva.
| Fator | Acima da Dobra | Abaixo da Dobra |
|---|---|---|
| Visibilidade ao carregar | Imediata | Exige rolagem |
| Potencial de conversão do CTA | Mais alto | Mais baixo, mas ainda valioso para leitores aprofundados |
| Peso para SEO | Maior — Google lê de cima para baixo | Menor — ainda indexado, menos influente |
| Melhores tipos de conteúdo | Título, proposta de valor, CTA principal | Detalhes, depoimentos, FAQs, CTAs secundários |
Assine nossa newsletter
Seja o primeiro a saber sobre novos recursos e atualizações do produto.
Onde fica a dobra em um site?
Não existe uma única linha de dobra. A dobra varia com:
- Tamanho e resolução da tela — um monitor desktop 1920×1080 mostra muito mais que uma tela de celular 375×667
- Elementos do navegador — barras de ferramentas, barras de favoritos e abas reduzem o espaço vertical disponível
- Orientação do dispositivo — paisagem vs. retrato em tablets e celulares resulta em diferentes posições da dobra
A janela de visualização móvel mais comum tem aproximadamente 390×660 pixels. Isso significa que visitantes móveis veem cerca de metade do conteúdo vertical que visitantes de desktop — tornando o design acima da dobra para mobile mais restrito e mais crítico.
Como o acima da dobra é medido?
Designers web e profissionais de marketing usam vários métodos para medir onde a dobra se encontra:
- Ferramentas de mapa de calor (Hotjar, Crazy Egg, Microsoft Clarity) — mostram o alcance agregado de rolagem como gradientes de cor
- BrowserStack e ferramentas de teste responsivo — simulam janelas de visualização em diferentes perfis de dispositivo
- Teste manual — redimensione o navegador para pontos de quebra comuns e observe onde o conteúdo é cortado
A regra prática dos 600 pixels do início dos anos 2000 está obsoleta. Designers agora tratam a dobra como um conceito fluido e testam em pelo menos cinco larguras de janela de visualização: 390px (celular pequeno), 428px (celular grande), 768px (tablet retrato), 1024px (tablet paisagem / laptop pequeno) e 1440px (desktop).
Acima da dobra ainda é relevante?
Sim — mas não da forma como era entendido uma década atrás. A ideia de que todo o conteúdo crítico deve estar estritamente acima da dobra está desatualizada. Os usuários rolam, e rolam com frequência. Feed de redes sociais, sites de notícias com rolagem infinita e plataformas de vídeo curto treinaram as pessoas a deslizar e rolar como segunda natureza.
No entanto, o conteúdo acima da dobra ainda determina se um visitante decide rolar ou não.
Conselho obsoleto:
- Colocar todo CTA, título e imagem acima de uma linha rígida de 600px
- Projetar apenas para desktop e ignorar janelas de visualização móveis
- Presumir que usuários nunca rolam
Melhor prática atual:
- Posicione sua proposta de valor central e um CTA principal acima da dobra
- Use dicas visuais — conteúdo parcial visível no corte, setas direcionais, animações acionadas por rolagem — para sinalizar que existe mais conteúdo abaixo
- Projete primeiro para a menor janela de visualização comum, depois aprimore para telas maiores
O que colocar acima da dobra?
A combinação exata depende do tipo de página. Uma homepage, uma landing page e um artigo de blog têm objetivos diferentes.
Para homepages e landing pages
- Um título claro e focado em benefício — diga aos visitantes o que você faz e por que isso importa
- Subtítulo de apoio — uma frase que adiciona contexto ou um benefício secundário
- Botão de chamada para ação principal — posicionado de forma proeminente, alto contraste, texto orientado à ação
- Imagem principal ou vídeo curto — visual relevante que reforça a mensagem sem dominar o espaço
- Navegação — limpa, minimalista e intuitiva
Para artigos de blog e páginas de conteúdo
- Título do artigo — descritivo e rico em palavras-chave
- Imagem em destaque — dimensionada para não empurrar o texto para baixo da dobra
- Parágrafo de introdução — apresenta o tópico e o que o leitor ganhará
- Sumário — para posts mais longos, um menu de navegação ajuda os leitores a se localizarem
Para páginas de produtos de e-commerce
- Nome do produto e imagem principal
- Preço — visível sem rolagem
- Botão de adicionar ao carrinho
- Classificação por estrelas e número de avaliações — prova social de relance
- Diferencial principal — frete grátis, garantia ou funcionalidade exclusiva
Como o acima da dobra se aplica ao marketing de afiliados?
Profissionais de marketing de afiliados — sejam anunciantes, publishers ou gestores de programa — dependem do posicionamento acima da dobra para maximizar visibilidade, cliques e conversões.
Para anunciantes (marcas que administram programas de afiliados)
Suas landing pages de afiliados devem comunicar valor imediatamente. Se um visitante indicado acessar uma página e o título, oferta ou CTA estiver enterrado abaixo da dobra, o clique que você pagou foi desperdiçado.
- Teste títulos de landing page acima da dobra com seus afiliados de melhor desempenho
- Mantenha o formulário ou botão de compra na janela de visualização inicial em dispositivos móveis
Para publishers (afiliados promovendo ofertas)
Links e banners de afiliados posicionados acima da dobra geram significativamente mais impressões e cliques do que aqueles em barras laterais ou rodapés. No entanto, as diretrizes de posicionamento de anúncios do Google penalizam páginas que empurram o conteúdo para baixo devido a um excesso de anúncios acima da dobra.
- Integre CTAs de afiliados de forma natural — links de texto contextuais dentro dos dois primeiros parágrafos geralmente superam banners
- Evite empilhar vários banners acima da dobra em páginas de conteúdo
- Divulgue claramente os relacionamentos de afiliados próximo ao link, não enterrado no rodapé
Para gestores de programa de afiliados
Ao revisar inscrições de afiliados e monitorar o desempenho de parceiros, avalie onde seus afiliados posicionam seus links. Afiliados que posicionam suas ofertas acima da dobra em páginas de alto tráfego tendem a gerar mais conversões. Use esses dados para:
- Identificar posicionamentos de alto desempenho e compartilhar esses padrões com afiliados com baixo desempenho
- Fornecer ativos criativos (banners, links de texto) dimensionados para dimensões comuns acima da dobra
- Monitorar a conformidade — garantir que os afiliados não estejam usando posicionamento enganoso que viole seus termos
| Função | Prioridade Acima da Dobra | Métrica Principal |
|---|---|---|
| Anunciante | Título e CTA da landing page | Taxa de conversão |
| Publisher | Posicionamento contextual de link ou banner | Taxa de cliques |
| Gestor de programa | Qualidade do posicionamento entre afiliados | Receita por clique |
Os CTAs devem ficar acima ou abaixo da dobra?
A resposta curta: coloque seu CTA principal acima da dobra e inclua CTAs de apoio abaixo.
Um CTA acima da dobra captura visitantes que decidem rapidamente. São usuários com alta intenção — chegaram sabendo o que querem e precisam apenas do estímulo certo para agir.
Um CTA abaixo da dobra atende visitantes que precisam de mais informações. Após ler benefícios, depoimentos ou detalhes do produto, eles convertem com maior confiança. Essas conversões geralmente têm valores médios de pedido mais altos e taxas de devolução mais baixas.
Nenhum dos posicionamentos é universalmente superior. O padrão mais eficaz, validado por milhares de testes A/B, é:
- Único CTA principal acima da dobra — a ação que a maioria dos visitantes está pronta para tomar imediatamente
- CTAs secundários distribuídos abaixo da dobra — posicionados após cada seção importante que apresenta um argumento convincente
- CTA fixo no mobile — um botão persistente ancorado na parte inferior da tela enquanto o usuário rola
Teste ambos os posicionamentos. Acompanhe não apenas cliques, mas conversões concluídas. Um CTA que gera muitos cliques acima da dobra, mas poucas conclusões, pode estar atraindo o público errado. Um CTA abaixo da dobra com menos cliques, mas taxas de conclusão mais altas, pode estar mais bem qualificado.
