Como criar um site one page (página única) do zero
2026-03-25 — Equipe Htmly
Você já acessou um site onde tudo estava numa única página, e bastava rolar para baixo para ver todas as informações? Esse é o famoso site one page — ou site de página única.
É um formato que ganhou força nos últimos anos, especialmente entre portfólios, eventos, projetos pessoais e pequenos negócios. E faz sentido: nem todo projeto precisa de um site com dezenas de páginas. Às vezes, uma página bem feita resolve tudo.
Este guia cobre a criação de site one page de ponta a ponta: o que é, quando usar (e quando não), a estrutura seção a seção, o código real do menu âncora, os três caminhos para criar — IA, template ou na mão — exemplos por tipo de negócio e a publicação gratuita. Diferente da maioria dos guias sobre o assunto, este não termina num convite para assinar um construtor: termina com o site no ar.
O que é um site one page?
Um site one page é, como o nome sugere, um site inteiro contido em uma única página HTML. Em vez de ter um menu que leva para páginas diferentes, o menu usa links âncora que rolam suavemente até cada seção da mesma página.
A estrutura típica é mais ou menos assim:
- Hero (topo): título principal, subtítulo e um botão de ação
- Sobre: quem é você ou o que é o projeto
- Serviços ou recursos: o que você oferece
- Portfólio ou galeria: exemplos do seu trabalho
- Depoimentos: o que as pessoas dizem
- Contato: formulário ou informações de contato
Tudo numa página só, fluindo naturalmente conforme o visitante rola para baixo.
One page, landing page ou hotsite? Nomes parecidos, ferramentas diferentes
Três termos que se confundem o tempo todo — e escolher o formato errado custa resultado:
| Formato | O que é | Quando usar |
|---|---|---|
| Site one page | A presença completa condensada numa página: menu, várias seções, mais de um caminho | Portfólio, profissional autônomo, pequeno negócio, evento |
| Landing page | Página com UM objetivo de conversão; distrações removidas de propósito | Campanha, anúncio, captura de leads, lançamento |
| Hotsite | Página temporária de ação promocional; nasce e morre com a campanha | Promoção com prazo, evento pontual, lançamento sazonal |
A fronteira prática: se a página tem menu e apresenta o todo, é one page; se tudo empurra para um único botão, é landing page; se tem data para sair do ar, é hotsite. Os três, tecnicamente, são a mesma coisa — uma página HTML — e se criam e publicam do mesmo jeito.
Quando usar um site one page?
O site de página única não é a melhor opção para todo tipo de projeto. Mas existem situações onde ele brilha:
Portfólios pessoais. Se você é designer, fotógrafo, desenvolvedor ou qualquer profissional criativo, um one page é perfeito. Você mostra quem é, seus trabalhos e como entrar em contato — tudo sem complicação.
Eventos. Casamentos, festas, conferências, workshops. O visitante precisa de poucas informações: data, local, programação e como se inscrever. Uma página resolve.
Projetos pessoais e MVPs. Está testando uma ideia? Quer validar um produto antes de investir pesado? Um one page é rápido de criar e direto ao ponto.
Profissionais e pequenos negócios. Advogado, nutricionista, barbearia, estúdio: uma página com serviços, prova social e WhatsApp cobre o essencial da presença online.
Currículos online. Em vez de enviar um PDF, você compartilha um link com seu currículo interativo e sempre atualizado.
Vantagens e desvantagens (a lista honesta)
A favor:
- Velocidade de criação — é uma página; com IA, sai em minutos
- Carregamento rápido — tudo chega numa requisição; bem feito, abre instantaneamente
- Navegação natural no celular — rolagem vertical é o gesto padrão do mobile
- Manutenção mínima — um arquivo para atualizar, nada de painel com 40 menus
- Narrativa controlada — o visitante percorre a história na ordem que você desenhou
- Custo zero de infraestrutura — HTML estático roda em hospedagem gratuita
Contra (e quando pesam):
- Uma URL só para o Google — se o negócio precisa ranquear para muitos termos diferentes, páginas separadas ganham
- Cresce mal — a partir de certo volume de conteúdo, a página vira um rolo infinito; blog e loja não cabem
- Métricas menos granulares — o analytics enxerga uma página; para medir seção a seção é preciso instrumentar eventos
- Página pesada se mal feita — quem empilha 30 imagens sem comprimir transforma a vantagem de velocidade em desvantagem
Regra de bolso: se o conteúdo cabe em até 7 seções e o negócio vive de um público que chega por indicação, rede social ou busca pelo nome, o one page serve. Se a estratégia é ser encontrado no Google por dezenas de buscas diferentes, comece multi-página.
A estrutura de um site one page
Vamos detalhar como organizar cada seção para que seu site fique profissional e fácil de navegar.
Navegação com links âncora — com o código
O menu do topo usa links que apontam para seções na mesma página. Este é o esqueleto completo, pronto para copiar:
<nav>
<a href="#sobre">Sobre</a>
<a href="#servicos">Serviços</a>
<a href="#portfolio">Portfólio</a>
<a href="#contato">Contato</a>
</nav>
<section id="sobre">...</section>
<section id="servicos">...</section>
<section id="portfolio">...</section>
<section id="contato">...</section>
E no CSS, duas linhas fazem a mágica da rolagem suave — sem JavaScript nenhum:
html {
scroll-behavior: smooth;
}
Um refinamento que separa o amador do profissional: se o menu é fixo no topo, a seção rola para baixo dele e o título some. Resolve-se com uma linha:
section {
scroll-margin-top: 80px; /* altura do menu fixo */
}
Isso cria a sensação de um site com várias páginas, mas tudo carrega de uma vez — o que deixa a navegação muito rápida.
Seção Hero
É o primeiro impacto. Precisa ter:
- Um título claro que diga o que você faz ou oferece
- Um subtítulo que complemente com mais detalhes
- Um botão de ação (CTA) — "Ver meu trabalho", "Entrar em contato", "Saber mais"
- Opcionalmente, uma imagem ou vídeo de fundo
Seção Sobre
Conte sua história de forma breve. Quem é você, qual sua experiência, o que te motiva. Duas ou três frases bem escritas valem mais que um texto enorme que ninguém vai ler.
Seção de Serviços ou Recursos
Use cards ou colunas para apresentar o que você oferece. Ícones ajudam a tornar a seção mais visual e fácil de escanear.
Seção de Portfólio
Mostre exemplos reais do seu trabalho. Imagens com títulos curtos e links para os projetos completos. Qualidade importa mais que quantidade — escolha seus 4 a 6 melhores trabalhos.
Seção de Contato
Pode ser um formulário simples (nome, email, mensagem) ou apenas suas informações de contato e links para redes sociais. Facilite ao máximo para o visitante falar com você. Para a maioria dos negócios brasileiros, o botão de WhatsApp com link direto (https://wa.me/5511999999999) converte mais que formulário.
Criação de site one page: os 3 caminhos
Existem três formas de criar o seu, do mais rápido ao mais artesanal.
Caminho 1: Gerar com IA (o mais rápido)
Ferramentas como ChatGPT, Claude e Gemini geram um site one page completo em segundos a partir de uma descrição. Um prompt que funciona bem:
"Crie um site one page responsivo para um fotógrafo chamado João Silva. Inclua seções: hero com título e botão, sobre mim, portfólio com 6 imagens placeholder, serviços (ensaios, eventos, produtos) e contato com botão de WhatsApp. Menu fixo no topo com links âncora e rolagem suave. Design moderno, cores escuras. Tudo em um único arquivo HTML com CSS embutido, mobile-first."
A IA vai gerar o HTML completo. Você pode pedir ajustes — mudar cores, reorganizar seções, adicionar animações — até ficar do jeito que quer. Os guias por ferramenta ajudam a extrair o melhor de cada uma: ChatGPT, Claude e Gemini.
Se o seu one page é uma página de conversão (vender, captar contato), vale gerar o prompt no criador de landing page — ele estrutura o briefing do seu negócio em 7 passos e produz um prompt profissional com framework de conversão, grátis.
Caminho 2: Partir de um template pronto
Quem prefere ver algo funcionando antes de mexer pode começar por um template HTML pronto — os one-page de cardápio, currículo e afins já vêm com a estrutura de seções e navegação âncora montadas. Clona, edita os textos no navegador e publica. É o caminho do meio: mais controle visual que a IA, menos trabalho que o código do zero.
Caminho 3: Escrever o HTML na mão
Se você tem familiaridade com código, criar do zero dá controle total sobre cada detalhe. Comece com um arquivo index.html, monte as seções com tags semânticas (<section>, <nav>, <header>), estilize com CSS e use os snippets de âncora da seção anterior. Para validar o resultado sem publicar, a ferramenta de preview HTML mostra o site em tempo real enquanto você cola o código.
Exemplos de one page por tipo de negócio
A estrutura muda pouco; a ênfase muda muito. Cinco receitas prontas:
- Fotógrafo / designer (portfólio): hero com o melhor trabalho de fundo, galeria com 6 peças, serviços com faixa de preço, WhatsApp. A seção estrela é a galeria — invista nas imagens (comprimidas!)
- Advogado / contador (serviços): hero sóbrio com área de atuação, seção de credenciais (OAB/CRC, formação), serviços em cards, depoimentos com nome, formulário + telefone. A prova social carrega a página
- Barbearia / estúdio (local): fotos do espaço, tabela de serviços com preço, mapa incorporado, horários, botão de agendamento no WhatsApp. Endereço e horário respondidos antes da pergunta
- Evento / casamento (data): contagem regressiva, programação, local com mapa, confirmação de presença. A página inteira serve à data — depois dela, vira memória ou sai do ar
- Restaurante (cardápio + reserva): este tem guia próprio — a landing page para restaurante cobre do cardápio resumido ao pedido pelo WhatsApp
Como publicar seu site one page grátis
Depois de criar o HTML, falta o passo que muita gente acha que é o difícil — e é o mais fácil. Nada de configurar servidor, comprar hospedagem cara ou instalar certificado:
- Acesse htmly.com.br
- Faça upload do seu arquivo HTML (ou ZIP, se tiver imagens e CSS separados)
- Pronto — seu site está no ar com um link público e HTTPS automático
Com a conta gratuita, o site fica permanente num subdomínio seu (seusite.htmly.com.br). Errou um texto? O editor visual corrige direto no navegador. E quando quiser o endereço próprio (www.seusite.com.br), o plano Pro conecta seu domínio com SSL automático — R$ 29/mês, com PIX.
A conta completa do "do zero ao ar": R$ 0 obrigatórios. O domínio próprio, opcional, custa ~R$ 40/ano no Registro.br.
SEO para site one page: como ranquear com uma URL só
A limitação de SEO do formato é real, mas costuma ser mal explicada. Uma URL única não significa invisibilidade no Google — significa foco obrigatório. O que funciona na prática:
Escolha UMA busca principal e monte a página para ela. "Fotógrafo de casamento em Goiânia" é uma busca vencível com uma página; "fotógrafo" não é. O título da página (<title>), o H1 do hero e a primeira frase devem falar a mesma língua da busca escolhida.
Os H2 das seções são seus mini-títulos de ranqueamento. Em vez de "Serviços", escreva "Ensaios, casamentos e eventos em Goiânia". Em vez de "Sobre", "Fotógrafo há 12 anos em Goiás". Cada heading é uma chance de casar com variações da busca — e o Google indexa âncoras: às vezes mostra sitelinks direto para as seções.
Preencha title e description com capricho. São as duas linhas que aparecem no resultado do Google, e a maioria dos one page deixa a IA preencher com genérico ("Bem-vindo ao meu site"). A ferramenta de meta tags monta o conjunto completo em um minuto.
Dados estruturados fazem diferença desproporcional. Um bloco JSON-LD de LocalBusiness (nome, endereço, telefone, horários) habilita o Google a mostrar sua página com informações ricas — e é copiar-e-colar no <head>. Peça à IA: "adicione schema.org LocalBusiness com estes dados".
Google Business Profile + one page é a dupla do negócio local. Para barbearia, clínica ou estúdio, o perfil no Google Maps traz a descoberta e o one page fecha a convicção. O link do site no perfil aponta para a sua página — é a fonte de tráfego mais barata que existe para negócio físico.
O que uma página só não faz: ranquear para dezenas de buscas informacionais diferentes ("como escolher fotógrafo", "quanto custa ensaio"). Isso é trabalho de blog — e se o negócio chegar nesse estágio, o one page vira a home de um site que cresceu, sem desperdiçar nada do que foi feito.
Dicas para um one page que funciona
Mantenha simples. A força do one page é a objetividade. Não tente colocar informação demais. Cada seção deve ter um propósito claro.
Pense em mobile primeiro. A maioria dos acessos hoje vem do celular. Teste seu site em telas pequenas e garanta que tudo funciona bem.
Use imagens otimizadas. Imagens pesadas deixam o site lento, especialmente em conexões móveis. Comprima com o compressor de imagens antes de subir — WebP costuma reduzir 70% sem perda visível.
Tenha um CTA claro. O que você quer que o visitante faça? Entre em contato? Veja seu portfólio? Chame no WhatsApp? Deixe isso óbvio — e repita o botão no fim da página.
Teste a navegação. Clique em todos os links do menu e confirme que levam para a seção certa. Parece básico, mas âncora quebrada passa impressão de site abandonado.
Cuide do preview de compartilhamento. Quando o link circular no WhatsApp, o card mostra título, descrição e imagem — defina as meta tags Open Graph (ou preencha no painel da hospedagem) para o primeiro contato já ser profissional.
Conclusão
O site one page é uma das formas mais eficientes de colocar um projeto na internet. É rápido de criar, fácil de manter e perfeito para quem precisa de uma presença online sem complicação — e, diferente do que os construtores de site sugerem, não exige assinatura de ferramenta nenhuma: é um arquivo HTML que é seu.
Se você já tem seu HTML pronto — gerado por IA, adaptado de template ou escrito na mão — publique gratuitamente no HTMLy. Em poucos cliques, seu site estará acessível para o mundo inteiro.
Leia também: