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.

Neste guia, você vai entender exatamente o que é um site one page, quando ele é a melhor escolha e como criar o seu — mesmo sem experiência com programação.

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.

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.

Landing pages. Páginas de captura para campanhas de marketing, lançamentos de produtos ou promoções funcionam muito bem no formato de página única.

Currículos online. Em vez de enviar um PDF, você compartilha um link com seu currículo interativo e sempre atualizado.

Quando NÃO usar um site one page?

Se seu projeto precisa de muitas páginas de conteúdo — como um blog, uma loja virtual com dezenas de produtos ou um site institucional com muitas seções — o formato one page vai ficar apertado.

O principal problema é SEO: com uma única página, você tem uma única URL para ranquear no Google. Se precisa aparecer em buscas para vários termos diferentes, páginas separadas funcionam melhor.

Mas para a maioria dos projetos simples, o one page é mais que suficiente.

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

O menu do topo usa links que apontam para seções na mesma página. Em HTML, funciona assim: o menu tem links como #sobre, #servicos, #contato, e cada seção correspondente tem um id igual. Quando o visitante clica, a página rola suavemente até aquela seção.

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ê.

Como criar seu site one page

Existem basicamente dois caminhos: criar na mão com HTML/CSS ou usar inteligência artificial para gerar o código.

Caminho 1: Criando com HTML e CSS

Se você tem alguma familiaridade com código, pode criar tudo do zero. A vantagem é o controle total sobre cada detalhe.

Comece com um arquivo index.html e um style.css. Monte a estrutura das seções com tags semânticas do HTML. Use CSS para estilizar — fontes, cores, espaçamentos, responsividade.

Para a navegação suave, basta adicionar scroll-behavior: smooth no CSS. Isso faz os links âncora rolarem suavemente em vez de pular direto para a seção.

Caminho 2: Usando IA para gerar o site

Esse é o caminho mais rápido. Ferramentas como ChatGPT, Claude e Cursor conseguem gerar um site one page completo em segundos.

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. Use design moderno, cores escuras e navegação suave com links âncora. Tudo em um único arquivo HTML com CSS embutido."

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.

Como publicar seu site one page

Depois de criar o HTML, você precisa colocá-lo online para que outras pessoas acessem. E é aqui que muita gente trava — configurar servidor, comprar domínio, instalar certificado SSL...

Com o Htmly, esse processo leva segundos:

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

Você ganha HTTPS automático, um subdomínio gratuito (seusite.htmly.com.br) e pode até conectar um domínio próprio nos planos pagos. Sem servidor para configurar, sem terminal, sem dor de cabeça.

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 suas imagens antes de adicionar ao site.

Tenha um CTA claro. O que você quer que o visitante faça? Entre em contato? Veja seu portfólio? Assine sua newsletter? Deixe isso óbvio.

Teste a navegação. Clique em todos os links do menu e confirme que levam para a seção certa. Parece básico, mas links quebrados passam uma impressão ruim.

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.

Se você já tem seu HTML pronto — seja feito na mão ou gerado por IA — experimente publicar gratuitamente no Htmly. Em poucos cliques, seu site estará acessível para o mundo inteiro.

Como criar um site one page (página única) do zero