Um site de página única é quando todo o conteúdo reside numa só página e o menu não leva a outros URLs: ao clicar, a página desliza suavemente até ao bloco pretendido. Sem recarregamentos, sem visitantes perdidos. Parece o que precisa para uma landing page, portfólio ou cartão de visita, certo?

Mas, na prática, um principiante esbarra em duas paredes. A primeira: «Não sei programar». A segunda: «Provavelmente preciso de plugins caros». Ambas as paredes caem em menos de uma hora.

Vai criar um site de página única completo em WordPress, com deslizamento suave, secções com âncoras e totalmente com ferramentas gratuitas. Nem uma única linha de código.

Se prefere ver em vez de ler, aqui está um guia visual desde a instalação até à publicação:

💡 Resumo rápido:

• Instalar o XAMPP, um servidor local para testar o WordPress no seu computador
• Implementar o WordPress numa máquina local através do phpMyAdmin e da edição do wp-config.php
• Escolher um tema compatível com a estrutura de página única (vamos usar o SiteOrigin North)
• Instalar dois plugins gratuitos da SiteOrigin: Page Builder e Widgets Bundle
• Montar uma página a partir de layouts prontos, atribuir IDs de âncora e ligá-los aos itens do menu

Porquê um site de página única

Um site de página única supera um site clássico de várias páginas em cenários específicos. Controla a ordem pela qual o visitante consome a informação: primeiro o valor, depois o preço, e não ao contrário. Nada de andar à procura de links no menu.

Quando isto funciona

O portfólio de um fotógrafo, uma landing page de serviços, uma página promocional de produto, o cartão de visita de uma empresa com cinco secções, tudo isto cabe num único ecrã de deslizamento. Seis blocos de dois a três parágrafos numa página têm um aspeto sólido. Os mesmos seis blocos em seis páginas diferentes parecem um site vazio.

Mobile e velocidade

Um site de página única carrega uma vez. Depois disso, só deslizamento. Um visitante pode perder a internet a meio da leitura e mesmo assim deslizar até ao fim: a página já está em memória. Num ecrã de telemóvel, isto parece uma app, não um site. A Google confirmou há muito tempo: a indexação mobile-first é o padrão desde 2018.

Quando não usar

Cem artigos de blog, uma loja online complexa, uma estrutura de vários níveis, um site de página única não vai dar conta. O deslizamento torna-se interminável e o SEO sofre: os motores de busca adoram URLs separados para cada conjunto de significados.

Passo 1: Instalar o XAMPP no Windows

O XAMPP é um pacote multiplataforma gratuito: Apache (servidor web), MariaDB (base de dados), PHP e Perl. Dito de forma simples, transforma o seu computador numa hospedagem local onde o WordPress funciona sem internet e sem custos. Ideal para testar e aprender a construir.

Procedimento de instalação no Windows:

• Vá ao site da Apache Friends e descarregue a versão mais recente do XAMPP para o seu sistema.
• Execute o instalador. No ecrã de boas-vindas, clique em Next.
• Na fase de seleção de componentes, deixe as marcas em MySQL e phpMyAdmin, isto é suficiente para o WordPress. O resto pode ser desmarcado: pode adicioná-los mais tarde através do painel de controlo, se necessário.

• Escolha uma pasta de instalação (a predefinida é C:\xampp, pode mantê-la).
• No ecrã do Bitnami, desmarque «Learn more about Bitnami for XAMPP», vamos instalar o WordPress manualmente. Clique em Next.
• Aguarde que os ficheiros sejam descompactados. Deixe a caixa «Launch control panel» marcada e clique em Finish.

Se o painel de controlo abriu sem erros vermelhos e o Apache e o MySQL estão destacados a verde, o servidor está a funcionar. Abra um navegador e vá a http://localhost/. Se vir a página de boas-vindas do XAMPP, está tudo configurado corretamente.

Se o Apache não iniciar, verifique se a porta 80 está ocupada por outro programa. O Skype e o IIS são culpados comuns. Nas definições do Apache (Config → Apache → httpd.conf), pode alterar a porta de 80 para 8080.

Passo 2: Criar uma base de dados e instalar o WordPress

O WordPress guarda tudo, páginas, definições, utilizadores, numa base de dados MySQL. Vamos criá-la através do phpMyAdmin.

• No painel de controlo do XAMPP, clique no botão Admin na linha do MySQL. O phpMyAdmin será aberto.
• Vá ao separador Databases no menu superior esquerdo.
• Introduza um nome para a base de dados, por exemplo wordpress, e clique em Create.

A base de dados está pronta. Agora, o próprio WordPress:

• Transfira a versão mais recente do WordPress e extraia o arquivo para a pasta C:\xampp\htdocs\wordpress (pode dar outro nome à pasta, isto fará parte do URL local).
• Dentro da pasta, localize o ficheiro wp-config-sample.php e mude-lhe o nome para wp-config.php.
• Abra o ficheiro em qualquer editor de texto e encontre o bloco de definições do MySQL:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Guarde o ficheiro e feche o editor.
• No navegador, abra http://localhost/wordpress/. Escolha um idioma, crie um nome de utilizador e uma palavra-passe, clique em Instalar WordPress.

Pronto. Está autenticado na administração do WordPress na sua máquina local. Primeiro marco alcançado.

Passo 3: Escolher um tema

Quase qualquer tema funciona para um site de página única, mas vamos usar o SiteOrigin North, que é gratuito, responsivo e pensado para trabalhar com o construtor de páginas SiteOrigin, que entrará em ação no próximo passo. O tema suporta um menu fixo, para que os visitantes não tenham de voltar a fazer scroll para cima para navegar para outra secção.

Instalação: Aparência → Temas → Adicionar Novo → introduza SiteOrigin North → Instalar → Ativar. O tema é desenvolvido pela equipa do SiteOrigin, as mesmas pessoas que criam o plugin Page Builder. Não haverá conflitos.

Passo 4: Plugins SiteOrigin, Page Builder e Widgets Bundle

O núcleo da nossa construção, dois plugins gratuitos do repositório do WordPress:

• SiteOrigin Page Builder (siteorigin-panels), um construtor de arrastar e largar com uma grelha, layouts e funcionalidade integrada de scroll em página única (desde a versão 2.3). Pré-visualizações ao vivo, código HTML limpo, mais de 500.000 instalações ativas.
• SiteOrigin Widgets Bundle (so-widgets-bundle), um conjunto de widgets: botões, imagens, sliders, mapas, preços e mais duas dezenas de elementos. Tudo o que preenche os layouts.

Instalação: Plugins → Adicionar Novo → procure por SiteOrigin Page Builder e SiteOrigin Widgets Bundle um de cada vez → Instalar → Ativar ambos. É precisamente a combinação destes dois plugins que lhe dará o construtor e o conteúdo para os layouts. A funcionalidade de navegação por âncoras está incorporada no Page Builder, não sendo necessários plugins adicionais para a funcionalidade de página única.

Passo 5: Construir uma página no SiteOrigin Page Builder

Crie uma nova página (Páginas → Adicionar Nova). Acima do editor padrão, aparecerão separadores; mude para Page Builder.

O SiteOrigin Page Builder inclui uma biblioteca de layouts pré-definidos. Clique no botão Layouts acima do editor.

Abrirá um catálogo de predefinições, desde Fitness Gym a Agência. Escolha uma adequada (nós escolhemos Fitness Gym) e clique em Inserir. Se já existir conteúdo na página, o plugin perguntará: inserir antes, depois ou substituir. Para uma página em branco, é indiferente.

Guarde a página e abra-a. Mude para o **Editor **Visual; o link para o mesmo aparecerá na barra de administração superior do WordPress.

No Editor Visual, passa o cursor sobre qualquer elemento e vê imediatamente qual o widget responsável pelo mesmo. Pode editar texto, alterar imagens e arrastar blocos, tudo em tempo real.

Passo 6: IDs de âncora e menu de navegação

O último passo é ligar os itens do menu às secções da página. Sem isto, o scroll não funciona.

No Live Editor, passe o cursor sobre a primeira linha após o bloco Hero, clique no ícone da chave inglesa e selecione Editar Linha. Vá ao separador Atributos e, no campo ID da Linha, introduza um identificador, por exemplo activities. Clique em Concluído.

Repita para cada linha com um ID único: services, depois pricing, depois contact, e assim por diante. Guarde a página.

Agora o menu: Aparência → Menus. Crie um novo menu. Adicione itens através de Links Personalizados: no campo URL, introduza #activities; no campo nome, «Activities». Repita para cada ID.

Nuance importante: o cardinal # é obrigatório no URL do item de menu (é o formato de âncora HTML), mas no ID da Linha dentro do Page Builder não precisa de colocar o cardinal, o construtor percebe por si que se trata de um identificador.

Mais detalhes sobre como criar menus no WordPress são abordados no nosso guia sobre configurar a navegação.

Guarde o menu, atribua-o a uma área de visualização do tema e abra o site. Clique num item do menu e a página fará scroll suavemente até à secção pretendida.

⁉️🤔 Perguntas frequentes

O XAMPP é obrigatório ou posso avançar diretamente para o alojamento?

O XAMPP é necessário para testes locais. Se já tem alojamento com WordPress, salte os passos 1 e 2 e avance diretamente para o tema e os plugins. A lógica das âncoras funciona da mesma forma, tanto localmente como num servidor ativo.

Posso usar outro tema em vez do SiteOrigin North?

Sim, quase todos os temas WordPress modernos suportam a estrutura de página única. O principal é que o tema não entre em conflito com o SiteOrigin Page Builder. Os criadores do Page Builder garantem compatibilidade com a maioria dos temas do repositório do WordPress.

Esta configuração funciona em Mac ou Linux?

O XAMPP é multiplataforma, existem versões para Windows, macOS e Linux. No Mac, também pode usar o MAMP (versão gratuita). A instalação do WordPress e dos plugins após configurar um servidor local é idêntica em todos os sistemas operativos.

O que fazer se o Apache não iniciar?

As duas razões mais comuns: a porta 80 está ocupada por outro programa (Skype, IIS, outro servidor web) ou o antivírus está a bloquear a atividade de rede. Solução: altere a porta do Apache para 8080 no httpd.conf ou termine o processo interferente através de netstat -ano | findstr :80 na linha de comandos.

Posso adicionar mais secções mais tarde?

Sim. A qualquer momento, entre no Page Builder, adicione uma nova linha, atribua-lhe um ID de Linha e crie um item de menu com a mesma âncora. O construtor não limita o número de secções.

O que obteve numa hora

Um site de página única funcional em WordPress. Com um menu de âncoras, scroll suave, editor ao vivo e totalmente com ferramentas gratuitas. A mesma configuração XAMPP + SiteOrigin funciona também para projetos comerciais: construa uma landing page localmente, teste-a e transfira-a para um alojamento ativo através de qualquer plugin de migração.

Crie o hábito: primeiro a construção local, depois a produção. Isto poupa dinheiro em alojamento durante as experiências e poupa nervos quando algo corre mal.

Se o material foi útil, experimente construir hoje o seu primeiro site de página única. O XAMPP e o WordPress transferem-se em cinco minutos, e o construtor SiteOrigin trata de todo o layout.