Os sites de uma página fazem bem um trabalho específico: eles colocam cada informação que um visitante precisa em um único pergaminho Não há clique ao redor. Sem segunda página. Apenas herói, sobre, serviços, contato, feito.
Este guia percorre como criar um site de uma página com o Elementor usando o plugin gratuito, um tema leve e um punhado de widgets de Master Addons onde o conjunto gratuito do Elementor se esgota No final, você terá um site que rola de forma limpa de cima para baixo, com links de navegação que saltam para cada seção em vez de carregar uma nova página.
Se você estiver com pressa, pule para o atalho do kit de modelos perto da parte inferior Se você quiser realmente entender o que está construindo, comece de cima.
O que é um site de uma página e quando realmente funciona
Um site de uma página coloca todo o seu conteúdo em um único URL. Em vez de navegar para /about ou /services, o menu salta para seções ancoradas na mesma página.
Funciona bem para:
- Freelancers apresentando um pequeno portfólio
- Páginas de destino do evento (casamento, conferência, lançamento do produto)
- Pequenas empresas de serviços (consultores, barbeiros, designers)
- Páginas em breve ou anúncios de MVP
- Currículos e portfólios pessoais
Funciona menos bem para:
- Blogs, que precisam de URLs de postagem separados para SEO
- Lojas online com mais de um punhado de produtos
- Sites direcionados a várias palavras-chave de cauda longa
Se o seu conteúdo pode caber em aproximadamente 7 a 12 seções sem se sentir abarrotado, um pager provavelmente terá o formato certo.
O que você precisa antes de começar
Três ingredientes:
- Uma instalação do WordPress (auto-hospedada ou no seu host favorito).
- Grátis Elementor e o grátis Tema Olá Elementor. Olá navios sem qualquer estilo, que é exatamente o que você quer quando Elementor está desenhando tudo.
- O grátis Plugin Master Addons para os widgets Elementor não inclui (galerias filtráveis, tabelas de preços, caixas de informações, carrosséis de equipe, estilo do Formulário de Contato 7).
Você pode construir a maior parte disso apenas com o Elementor gratuito, mas algumas seções ficam estranhas sem widgets extras Eu vou sinalizá-los à medida que avançamos.
Escolha o tema certo e o modelo de página
Instale o Hello Elementor de Aparência > Temas > Adicionar Novo. É uma lousa em branco: sem barras laterais, sem estilos padrão, sem opiniões Elementor desenha a página inteira.
Uma vez ativo:
- Criar uma nova página (Páginas > Adicionar Novo).
- Abra-o no Elementor.
- Clique na engrenagem de configurações na parte inferior esquerda, vá para Layout da página, e escolha Lona Elementor.
Canvas tira o cabeçalho e rodapé do WordPress Seu pager único se torna a página inteira.
Se você quiser comparar as opções do tema, o melhores temas WordPress leves para Elementor o Roundup cobre alternativas, mas o Hello é o padrão por um motivo.
As 11 seções de um layout de elementador de uma página
A maioria dos pagers decentes segue o mesmo ritmo Aqui está a pilha que EU uso:
- Menu de navegação (pegajoso)
- Seção herói
- Sobre
- Serviços ou Recursos
- Equipe
- Portfólio ou Estudos de Caso
- Preços
- Depoimentos
- Formulário contato
- Ícones sociais
- Rodapé
Nem todo site precisa de todos os onze Um freelancer solo provavelmente pula a Equipe Um consultor B2 B pode pular o Preço Escolha aqueles que realmente aproximam seu visitante de entrar em contato com você e solte o resto.
Construir o Menu de Navegação
Primeiro, crie o menu no WordPress: Aparência > Menus > Criar um novo menu.
Adicionar Ligações Personalizadas com URLs de espaço reservado Por enquanto, use um hash (#) seguido do nome da secção: #about, #services, #pricing. Você os conectará corretamente no final, assim que cada seção tiver um ID correspondente.
Salve o menu.
Agora, dentro do Elementor, solte uma seção na parte superior com duas colunas Coloque seu logotipo na coluna da esquerda Para a coluna da direita, você tem duas opções:
- Elementor grátis: Use o widget Menu WP.
- Complementos Mestres: Usar o Widget do menu de navegação. Ele suporta mega menu, efeitos de hover, estilo de alternância móvel e pega o menu que você acabou de construir sem configuração extra.
Torne a seção pegajosa com Configurações da seção > Avançado > Efeitos de movimento > Adesivo: Top. Se você quiser um passo a passo completo, o cabeçalho pegajoso no guia Elementor quebra-o.
Projete a seção Hero
O herói dá o tom Mantenha-o curto: uma promessa, uma linha de apoio, um botão.
Adicione uma nova seção logo abaixo do menu. Abra as configurações da seção e defina:
- Largura do conteúdo: Largura total
- Altura: Ajustar ao Ecrã
- Alinhamento vertical: Médio
Solte um cabeçalho grande, uma linha de texto descritivo e um botão Use uma imagem de fundo ou uma cor sólida no Estilo de seção Uma sobreposição escura ajuda na legibilidade do texto quando a foto de fundo estiver ocupada.
Se você quiser uma vantagem inicial, o Master Addons envia modelos de seção de heróis no Biblioteca de modelos. Importe um, troque a cópia e a imagem, e você termina em alguns minutos.
Adicionar a Secção Sobre
Nada de fantasia aqui. Uma seção padrão com duas colunas:
- Coluna da esquerda: uma foto (sua, da sua equipe ou do seu espaço de trabalho)
- Coluna da direita: Título + Editor de Texto + Botão
Aponte o link âncora do botão na seção Serviços abaixo (“Veja o que EU faço”) para que os visitantes que passam por Sobre ainda tenham um caminho claro a seguir.
Construir a Secção de Serviços
É aqui que o widget Infobox ganha seu lugar O Elementor Livre tem uma Caixa de Ícones, mas é limitado Os Complementos Mestres Widget infobox oferece vários layouts, posicionamento de ícones, estados de hover e um campo URL em toda a caixa para que todo o cartão possa ser clicado.
Crie uma seção, adicione um título (“Services” ou “What I Do”), depois uma seção interna dividida em três ou quatro colunas Solte uma Infobox por coluna.
Cada caixa deve responder a uma pergunta: para que serve o serviço, para quem serve e para que resultado ele entrega Não despeje listas de recursos aqui É para isso que serve uma página de serviços dedicados, e você não tem uma em um pager.
Adicionar uma Secção de Equipa
Pule esta seção se você estiver sozinho.
Para 1-4 pessoas: use o widget Membro da equipe Cada membro recebe um cartão com foto, nome, função, biografia curta e ícones sociais.
Para equipes maiores: use o Carrossel de Membros da Equipe Ele mostra três ou quatro membros de cada vez e rola horizontalmente, o que mantém a seção visualmente contida.
Mantenha todas as fotos da equipe com a mesma proporção de corte e aspecto Tamanhos de cabeça incompatíveis em uma grade parecem mais desleixados do que você esperaria Documentação: Widget de membro da equipe e Carrossel de membros da equipe. Para um guia independente, consulte como criar uma seção de membros da equipe.
Adicionar um Portfólio Filtrável
A Galeria de Imagens do Free Elementor está bem para uma grade estática, mas não filtra por categoria.
Se você quiser que os visitantes cliquem em “Branding” ou “Web” e tenham a remodelação da grade, você precisa de uma galeria filtrável Master Addons tem uma. Ele suporta guias de categoria, lightbox pop-up, fitas (como “NEW” ou “FEATURED” emblemas) e uma sobreposição de metadados no hover.
Configuração: drop in the Widget Galeria Filtrável, upload de imagens, tag cada um com uma categoria, e estilo Mais contexto no Elementor plugins de galeria filtráveis arredondar se você quiser ver como isso se compara às alternativas.
Adicionar tabelas de preços
Se você vender serviços ou assinaturas produtivizadas, uma seção de preços converte melhor do que um vago “contact para cotação.”
O Elementor grátis não tem um widget de preços, então este é o território dos Addons Mestres. O Widget de tabela de preços está na versão gratuita e oferece títulos, preço, lista de recursos com ícones de cheques ou cruzados, um crachá para o plano recomendado e um botão CTA.
Três colunas é o ponto ideal para um pagers Visitantes eye-scan esquerda para direita, ea coluna do meio é onde você colocar o plano que você realmente quer que eles escolham Marque-o “Most Popular” com uma fita e estilo-lo ligeiramente diferente (borda mais ousada, botão preenchido) Mais dicas de padrões no Widget da tabela de preços do elementor postagem.
Adicionar Testemunhos de Clientes
Dois ou três depoimentos reais bateram em uma parede de falsos.
O Carrossel de Depoimentos do Elementor Gratuito lida com o layout básico Se você quiser uma versão mais limpa de coluna única (uma citação grande que gira), o Carrossel de Membros da Equipe em Complementos Mestres, estranhamente, também funciona bem aqui: solte fotos de clientes nos slots de membros e coloque a cotação no campo bio.
Peça depoimentos que mencionem um resultado específico (“got 3 clientes no primeiro mês”) em vez de elogios genéricos (“ótimo para trabalhar com”).Os detalhes são convincentes. Adjetivos vagos são preenchimentos.
Adicionar um Formulário de Contacto
Instale o grátis Plugin do Formulário de Contato 7 a partir do diretório plugin. criar um formulário, pegue o shortcode.
No Elementor, solte um widget do Editor de Texto e cole o shortcode O formulário será renderizado, mas parecerá simples.
É aí que o widget Master Addons Contact Form 7 assume Em vez de colar um shortcode, ele permite que você estilize rótulos, campos, bordas, mensagens de erro e o botão enviar do painel Elementor. Nenhum CSS personalizado.
Passo a passo completo no Formulário de contato 7 personalização doc. Se você quiser um ícone Font Awesome dentro do botão enviar, há uma postagem separada ativada aplicando ícones incríveis de fonte aos botões CF7.
Adicionar Ícones Sociais
O Elementor grátis inclui um widget de ícones sociais Ele cobre Facebook, X (anteriormente Twitter), LinkedIn, Instagram, YouTube, e um punhado de outros Você controla a cor (marca ou personalizado), tamanho, forma (quadrado arredondado ou círculo), e espaçamento.
Coloque estes acima ou dentro do seu rodapé Mantenha a contagem para três ou quatro plataformas onde você está realmente ativo Doze ícones, metade deles contas mortas, parece pior do que três saudáveis.
Organize o Rodapé
Em um pager, o rodapé pode ser uma única linha.
Adicione uma seção abaixo do formulário de contato, coluna única, centralizada Uma pequena linha de direitos autorais (© 2026 Seu Nome. Todos os direitos reservados) faz o trabalho Se você precisar de links de política ou termos de privacidade, solte-os aqui tambémNada mais pertence a um rodapé de um pager.
Vincule o Menu a Cada Seção (a parte em que a maioria das pessoas erra)
Este é o passo que tropeça os iniciantes Os itens de menu que você configurou no início (#about, #services, e assim por diante) não faça nada ainda, porque as seções não têm IDs correspondentes.
Aqui está a correção, feita uma vez por seção:
- Passe o mouse sobre uma seção, clique no identificador de seis pontos no meio para selecioná-lo.
- Ir para o Avançado guia no painel esquerdo.
- Rolar para ID CSS.
- Digite o ID sem o hash Então
about, não#about.
Salvar. repita para cada seção para a qual você deseja pular Se você preferir não ancorar fio à mão (wire anchors by hand) digamos em um landing em posts longos do blog em vez de um menu de página (page) plugin de índice constrói esses links de salto para você automaticamente.
Depois volta para Aparência > Menus e confirme que o link de cada item de menu é a versão hash (#about, #services, #pricing). Salve o menu.
Recarregue o front-end, clique em um item de menu e a página deve rolar suavemente para a seção correspondente Se ele pular abruptamente em vez de rolar, o tema está faltando a regra CSS de rolagem suave Adicione isso a Personalizar > CSS adicional:
html { scroll-behavior: smooth; }Feito.
Pular o Trabalho Manual: Comece a partir de um Kit de Modelos
Se você não sentir vontade de construir onze seções do zero, o Master Addons envia 30+ cheio Kits de modelos, muitos deles pagers únicos para indústrias específicas (agência, restaurante, portfólio, SaaS, consultor).
Importe um kit, troque as imagens e copie, ajuste as cores para combinar com sua marca e você estará ao vivo em uma tarde em vez de uma semana. O como importar modelos de Elementor post cobre a etapa de importação se você nunca fez isso.
É também assim que EU recomendo iniciantes começar Construir a partir de um modelo de trabalho, aprender como cada seção é estruturada, e depois ajustar a partir daí.
Dicas de velocidade e desempenho para sites de uma página
Como todo o site vive em um URL, esse URL tem que carregar cada imagem, fonte e script para cada visitante Um pager inchado é um assassino de conversões.
Vitórias rápidas:
- Comprima cada imagem antes do upload (TinyPNG, Squoosh ou um plugin como o Imagify).
- Use o formato WebP sempre que possível. O melhores plugins otimizador de imagem WordPress opções de capas de resumo.
- Imagens abaixo da dobra com carregamento preguiçoso (o Elementor lida com isso por padrão nas versões modernas).
- Limite as fontes da web a duas famílias, máx.
- Minifique CSS e JS com um plugin de cache (LiteSpeed Cache, WP Rocket ou Autoptimize).
Mais em como acelerar os sites da Elementor. Master Addons v3 é três vezes mais rápido que v2 e carrega apenas o widget CSS e JS para widgets realmente em uso, o que importa mais em um site de URL única do que em um de várias páginas.
Perguntas frequentes
Posso criar um site de uma página com o Elementor gratuitamente?
Sim. Elementor grátis mais o tema gratuito Hello Elementor mais o plugin Master Addons grátis cobre todas as seções deste guia Você não precisa de Pro para um pager a menos que queira widgets extras ou o construtor de temas nativo.
Qual é o melhor tema para um site Elementor de uma página?
Olá Elementor. Ele vem com estilo zero, carrega rápido e permite que o Elementor desenhe a página inteira Qualquer tema opinativo (Astra, GeneratePress) também funciona, mas eles adicionam estilo que você terá que substituir.
Como faço os links de menu saltarem para seções em vez de carregar uma nova página?
Atribua um ID CSS a cada seção (Seção > Avançado > ID CSS, sem o hash) e, em seguida, vincule o item de menu ao mesmo nome prefixado com um hash. Um ID de seção de about corresponde a um URL de menu de #about.
Um site de uma página é bom para SEO?
Para uma única palavra-chave focada ou intenção local, sim. Para SEO mais amplo cobrindo vários tópicos, não. Um pager compete por uma palavra-chave primária (o título da página).Sites de várias páginas podem ter como alvo dezenas de outros separados.
Quanto tempo leva para construir um site de uma página no Elementor?
Do zero, 4-8 horas para uma compilação limpa Começando a partir de um Kit de modelos, 1-3 horas A maior parte do tempo vai para a seleção de cópia e imagem, não o trabalho Elementor em si.
Embrulhando
Um site de uma página com Elementor não é difícil Escolha Hello Elementor, defina a página para Canvas, construa onze seções (ou menos), atribua IDs CSS e conecte o menu a links hash Feito.
Onde Master Addons acelera as coisas:
- Widget do menu de navegação com mega menu e alternância móvel
- Widget Infobox para serviços
- Galeria Filtrável para portfólios
- Tabela de preços (gratuita) com fita embutida e lista de recursos
- Formulário de contato 7 styling sem escrever CSS
- Carrossel de membros da equipe e membros da equipe
- Mais de 30 kits de modelo completos quando você deseja pular a compilação manual
Baixar o plugin Master Addons grátis e comece com qualquer seção que você esteja menos confiante construindo do zero Trabalhe para fora a partir daí.
Leitura relacionada: 100 melhores complementos de elementadores · Como Importar Modelos de Elementor · Widgets e extensões · Preços Master Addons
