Para estudar uma landing page de verdade, guarde a versão que roda, com fontes, imagens e animação, e não o "Salvar como" do navegador. Depois, desmonte em camadas: a ordem dos blocos, a primeira dobra, a tipografia e as cores, a grade, os botões e o movimento. É estudo: o que você publica precisa ser seu.
Por que o "Salvar página como" não basta?
Porque o HTML é a menor parte da página. O capítulo Page Weight do Web Almanac 2025, publicado em janeiro de 2026, mediu a home page mediana no celular em julho de 2025: o resto vem em arquivos que o navegador busca enquanto a página monta, e muitos só aparecem quando você rola.
2.559 KB
peso da home page mediana no celular em julho de 2025 (505 KB em 2014)
HTTP Archive, Web Almanac 2025, jan/2026
22 KB
parte que é HTML nessa página mediana
HTTP Archive, Web Almanac 2025, jan/2026
632 KB
parte que é JavaScript, que costuma comandar a animação
HTTP Archive, Web Almanac 2025, jan/2026
88%
sites que usam web fonts em 2025
HTTP Archive, Web Almanac 2025, jan/2026
O dado das fontes, do capítulo Fonts do Web Almanac 2025, explica um sintoma comum: a cópia salva abre com a letra errada. Sem a fonte, a hierarquia que você queria estudar some. O caminho manual para ver tudo isso é o painel Network do navegador, que lista cada recurso e filtra por tipo, segundo a documentação do Chrome DevTools. Ele mostra, mas não guarda. A explicação completa está em como baixar um site completo e abrir offline.
Como baixar a landing page?
Escolha a página certa
Abra a URL exata da landing page, de preferência a que recebe o anúncio, e não a home do site.
Escolha o modo
Use o modo Rápido para página simples, ou o Completo se ela tiver 3D, vídeo ou muita animação.
Deixe rolar
No modo Completo a extensão rola a página sozinha para disparar o que só carrega ao chegar na tela.
Abra offline
Dê dois cliques no atalho da pasta e confira se fontes, imagens e animações vieram.
Anote a data
Renomeie a pasta com o nome do site e o mês, porque landing page muda com frequência.
Os modos são do Extrator, que é a nossa extensão. Segundo a página do Extrator, consultada em outubro de 2026, o Rápido é para página simples, guarda só o que já carregou, gera uma pasta menor e leva cerca de 30 segundos; o Completo rola tudo, varre o código e traz as bibliotecas. Funciona no Chrome, Brave, Edge, Opera, Vivaldi e Arc.
Como desmontar a estrutura, camada por camada?
Uma página de cada vez, com um bloco de notas ao lado. A ordem abaixo vai do que pesa mais na decisão do visitante ao que pesa menos.
- Mapa de blocos. Role do topo ao fim e dê a cada seção um nome pela função: promessa, prova, oferta, objeção, garantia, chamada final. Compare com a anatomia em 9 blocos de uma landing page que converte.
- Primeira dobra. O que aparece sem rolar, no celular e no computador. Quantas palavras, qual o botão, o que a imagem diz. O porquê está no ensaio a primeira dobra é o julgamento.
- Tipografia e cores. Quantas famílias, quantos tamanhos, qual cor é reservada para a ação.
- Grade e espaçamento. A largura do texto, o respiro entre seções, como o layout muda nos breakpoints.
- CTAs. Quantos botões, onde aparecem e se todos levam ao mesmo destino.
- Movimento. O que anima, quando e se a animação ajuda a ler ou só enfeita.
- Peso. Quanto a página carrega e o que poderia sair sem perda.
O que o design system entrega?
As camadas 3, 4 e 6 ficam mais rápidas com o design system que o Extrator gera junto com a captura: um design-system.html com 15 seções e um tokens.css, montados com o CSS do próprio site, segundo a página do produto consultada em outubro de 2026.
| Seção do design system | O que observar no estudo |
|---|---|
| Tipografia | Quantos estilos de texto existem e qual é o salto entre título e corpo |
| Cores | Qual cor é exclusiva do botão e quantas cores de fundo a página usa |
| Botões e Links | Estado normal, hover e foco; se o botão principal é diferente dos outros |
| Formulários | Quantos campos e como o erro aparece |
| Ícones, Cartões, Componentes e Sliders | Quais peças se repetem e formam o sistema |
| Layout e grade | Largura máxima, colunas e alinhamento |
| Espaçamento e Breakpoints | A escala de espaços e onde o layout muda |
| Efeitos e Animações | Duração, curva e o que dispara cada movimento |
| Tokens | As variáveis prontas para comparar com as do seu projeto |
Fonte das 15 seções: página do Extrator, consultada em outubro de 2026. A coluna da direita é o roteiro de estudo da Brave Cross.
Para extrair os mesmos dados à mão, pelo DevTools, e organizar em tokens, o caminho está em como extrair cores, fontes e espaçamentos de qualquer site.
O que o download não entrega?
O número que importa. A cópia mostra a forma, não a taxa de conversão, os testes que a equipe rodou nem o que acontece depois do formulário. Uma página bonita pode converter mal. Para comparar a sua, use uma referência pública: a mediana de 3,07% dos 2.425 sites do Panorama Leadster 2026, publicado em junho de 2026, e melhore um bloco por vez com o ciclo de CRO para pequenas empresas.
Também não entrega copy para reaproveitar. O texto, as fotos e o código têm dono. Estudar a ordem dos argumentos é livre; publicar as frases de outra empresa, não. A própria página do Extrator diz que ele não serve para quem quer publicar o site de um concorrente como seu. O que a lei protege e o que deixa livre está em copiar site é crime?.
Perguntas frequentes
Como baixar uma landing page completa?
Use uma ferramenta que guarde todos os arquivos que a página carrega, não só o HTML. Pelo Web Almanac 2025 do HTTP Archive, publicado em janeiro de 2026, o HTML é 22 KB de uma página mediana de 2.559 KB no celular. Depois de baixar, abra a pasta offline e confira se fontes, imagens e animações vieram.
Posso usar a estrutura de uma landing page de outra empresa?
A ordem dos blocos é método, e método não tem dono: prova depois da promessa, oferta depois da objeção. O que tem dono é a expressão: texto, foto, ilustração e código. Estude a sequência e escreva a sua com as suas provas. Este artigo não substitui orientação de advogado em um caso concreto de disputa.
Qual a diferença entre o modo Rápido e o Completo do Extrator?
Segundo a página do Extrator, consultada em outubro de 2026, o Rápido é para página simples: guarda só o que já carregou, gera uma pasta menor e leva cerca de 30 segundos. O Completo é para site com 3D e animação: rola a página inteira, varre o código e traz as bibliotecas. Para landing page com vídeo ou efeito de rolagem, prefira o Completo.
Como descobrir a fonte e as cores de uma landing page?
Pelo painel Elements e pelo painel Network do DevTools, filtrando por fonte, ou pelo design system gerado na captura, que traz tipografia, cores e tokens em seções. Como cerca de 88% dos sites usam web fonts, segundo o Web Almanac 2025 de janeiro de 2026, o nome da família quase sempre está no CSS.
Baixar uma landing page mostra a taxa de conversão dela?
Não. A cópia mostra a forma da página, não os resultados. Taxa de conversão, testes e a qualidade dos leads ficam com quem opera a página. Para ter uma régua, compare a sua com a mediana de 3,07% do Panorama Leadster 2026, publicado em junho de 2026, e meça cada bloco da sua página.
Comece pela página que você mais quer entender
O que fica: o "Salvar como" guarda a menor parte da página. Guarde a versão que roda, desmonte em camadas e anote a função de cada bloco. O resultado é um repertório de estruturas para escrever a sua, não uma página para republicar.
A pergunta é qual landing page você abriria primeiro. Instale o Extrator, entre com seu e-mail e use os 2 downloads grátis do mês, sem cartão, com o design system junto; quem assina a escola da Brave Cross usa sem pagar. Instale o Extrator e baixe a sua primeira landing page de referência.
