Crie um site de página única com navegação de uma página no WordPress (com bônus)

Você está procurando construir um site para o seu negócio, mas não tem tempo para criar um grande? Ou não está pronto para se comprometer com a manutenção do site de longa data?

Então você deve ir para um site de página única com navegação de uma página. O site de página única fornece todas as informações de maneira atraente e dá ao seu site uma aparência impressionante para que seus usuários possam se envolver mais.

Neste blog, você não apenas aprenderá como criar um site de página única com navegação de uma página no WordPress, mas também como adicionar um formulário de contato em um pop-up como bônus.

A maioria das pessoas sai do site se não encontrar uma maneira adequada de entrar em contato com o proprietário, então essa dica de bônus realmente agregará um valor extraordinário ao seu site.

Não vamos perder mais tempo e iniciar o processo de criação de um site de aparência impressionante com uma navegação de uma página Elementor . Você pode conferir a aparência final do site no botão abaixo:

O que é a navegação de uma página?

A navegação de uma página, como o nome sugere, é um menu de navegação especialmente projetado para navegar para diferentes partes de um site de página única. A navegação de uma página com um efeito de rolagem suave torna a navegação em diferentes seções uma experiência fácil e amigável.

"A simplicidade é a sofisticação final." - Leonardo da Vinci

E essa simplicidade dá aos sites de página única a vantagem que eles precisam sobre os outros. Um site de uma página é ótimo para pequenas empresas, como planejadores de casamento, fotografia, pequeno salão, restaurante, etc.

No entanto, se você tem um grande negócio de comércio eletrônico que vende muitos produtos ou fornece vários serviços e precisa atender a um público maior, o site de página única não é para você.

Quais são os benefícios do site de página única com navegação de uma página?

Você não deve pensar em obter um site de uma página para sua empresa apenas porque sua empresa é pequena. Existem muitos outros benefícios em ter um site de uma página, especialmente um site WordPress de uma página. Vamos dar uma olhada em alguns dos prós:

• Em primeiro lugar, é compatível com dispositivos móveis. Isso é uma coisa crucial a considerar quando se trata de SEO do site (Search Engine Optimization). A partir de 2021, 70% dos cidadãos dos EUA usam um dispositivo móvel para pesquisar na internet. Dados como esses são a razão pela qual o Google prioriza um site compatível com dispositivos móveis. Com o design de página única, seu site aparece nos bons livros do Google desde o início.

• A maioria das pessoas prefere um site simples, bonito e direto ao ponto, em vez de um site desnecessariamente longo.
• O Google conta a autoridade de link no nível do domínio e da página em um grau de 40%. Esta é outra área em que seu site de uma página terá uma vantagem.
• Sites de página única carregam mais rápido do que sites com muitas páginas. Considerando o fato de que as pessoas hoje em dia têm opções ilimitadas, ter um site de carregamento rápido é realmente inegociável.
• Os sites de uma página são fáceis de manter.
• Como um site de página única tem todas as informações em uma página, a navegação de rolagem facilita muito a navegação e um efeito de rolagem suave torna a experiência do usuário calmante.

Posso continuar por mais algum tempo, mas acho que as informações acima transmitem a mensagem de que, se sua empresa é pequena, você pode obter grandes benefícios, de fato, grandes usando o pequeno site com navegação de uma página. Então, vamos pular para o processo principal sem perder tempo.

Como criar um único site da Web com navegação de uma página no WordPress

Neste blog, mostrarei não apenas como criar um site, mas uma navegação de uma página com aparência moderna no WordPress que impressionará seus clientes em potencial. Para este tutorial, vou usar o construtor de sites populares WordPress (eu sei que diz no título!)

Então vamos começar…

Passo #1: Instale os plugins WordPress necessários

Depois de ter o WordPress instalado em seu sistema. Você precisa instalar os seguintes plugins do WordPress:

• Elementor (versão gratuita)
• ElementsKit (versão gratuita e Pro)
• MetForm (versão gratuita)

Depois de instalar e ativar os plugins WordPress necessários, é hora de construir o site.

Passo #2: Crie um site usando a página pré-criada do ElementsKit

O ElementsKit fornece muitas páginas, modelos e seções pré-criados para que as pessoas possam criar um site com qualquer design, layout e estilo que desejarem, sem codificação. Para este blog, vou usar a página de destino do planejador de casamentos da ElementsKit.

Para criar seu site, no painel do WordPress, vá para páginas ⇒ Adicionar novo

• Dê um título como Home, escolha Elementor Full Width nas opções de Template
• Clique para publicar e após a publicação clique em Editar com Elementor

• Clique no botão ElementsKit (EK) quando a janela do Elementor Builder for aberta

• Vá para a guia Página , procure por página de casamento e clique em inserir

Agora clique em atualizar para salvar

Etapa 3: Como adicionar a navegação de uma página do Elementor usando o ElementsKit

Agora que temos nosso site, é hora da parte divertida que é adicionar a navegação de rolagem de uma página.ElementsKit A navegação de rolagem de uma página é mais fácil de usar e dá ao seu site uma aparência impressionante. É muito improvável que você encontre outro complemento Elementor de navegação de uma página tão bom quanto o ElementsKit.

Agora, vamos ver o processo passo a passo de adicionar um link de navegação de rolagem de página ao seu site WordPress:

3.1 Ativar o módulo de rolagem de uma página

Para adicionar navegação de rolagem ao seu site WordPress, primeiro, precisamos ativar o Módulo de rolagem de uma página.

• Vá para: Painel do WordPress ⇒ ElementsKit ⇒ Módulos
• Ativar a rolagem de uma página
• Clique em Salvar alterações para atualizar

3.2 Ativar a rolagem de uma página nas configurações da página

• Clique no ícone Configurações no canto inferior esquerdo do Painel Elementor
• Abra a guia Configurações do ElementsKit
• Ativar a opção de rolagem de uma página

Nota: Se você não conseguir encontrar a opção Onepage Scroll Setting, provavelmente não ativou seu ElementsKit Pro

3.3 Escolha o estilo de navegação

Agora, é hora de escolher o estilo de navegação. O ElementsKit oferece várias opções de navegação. Por exemplo, sob o círculo, você obtém Scale-up, fill in, fill etc. , redução de linha, etc.

Você pode escolher qualquer estilo que quiser, para este blog vou escolher o ícone personalizado. Depois de escolher um ícone Personalizado, você terá a opção de escolher um ícone para a opção Estilo de navegação de rolagem de uma página. Você pode escolher um ícone da biblioteca de ícones ou fazer upload de um ícone SVG personalizado.

Para escolher um ícone personalizado

• Escolha a opção de ícone personalizado no menu suspenso de estilo de navegação
• Passe o mouse sobre o ícone de navegação e clique na biblioteca de ícones
• Pesquise e insira o ícone que você gosta

3.4 Configurar outras configurações de navegação

Depois de escolher um estilo de navegação, você terá acesso às seguintes configurações:

• Posição de navegação: você pode definir a posição de navegação como superior, direita, inferior ou esquerda.
• Deslocamento da Posição de Navegação: Aqui você pode escolher o valor do deslocamento da posição de navegação.
• Espaçamento de Navegação: Escolha o espaço desejado entre cada ícone de navegação.
• Cor de Navegação: Escolha uma cor para o ícone de navegação.
• Tipografia da dica de ferramenta: Aqui você pode escolher família, tamanho da fonte, transformação de peso, estilo, decoração e altura da linha para a dica de ferramenta.

3.5 Adicionar seções de página aos links de navegação

Agora que todas as configurações estão feitas, é hora de adicionar as seções que você deseja que apareçam na navegação. Para fazer isso

• Passe o mouse sobre a seção e clique no ícone Editar seção
• Vá para a guia Avançado
• Expandir a opção de rolagem na página do ElementsKit
• Ative habilitar a seção para torná-la visível
• Ative a opção ativar dot para adicionar esta seção como um dos links de navegação
• Forneça um nome para o texto da dica de ferramenta. O texto da dica de ferramenta aparecerá quando alguém passar o mouse sobre o link
• Por fim, clique em atualizar para salvar

Você pode repetir o mesmo processo mencionado acima para adicionar todas as seções que deseja à navegação.

Observação: você pode adicionar uma seção à navegação, não a seção interna. Portanto, você não encontrará a opção ElementsKit Onpage Scroll na guia avançada da seção interna ou em qualquer outro widget.

Depois de fazer toda a navegação, atualize e clique para ver a visualização de uma página de navegação no WordPress e também para verificar os links do menu de navegação.

Etapa 4: Adicione o rodapé do cabeçalho usando a seção de rodapé do cabeçalho pré-fabricada do ElementsKit

Bem, você tem um site de navegação de uma página no WordPress agora, mas ainda precisa de um rodapé de cabeçalho para completar seu site. As seções de cabeçalho e rodapé de um site são muito importantes para exibir seu logotipo e informações importantes para que seus clientes possam vê-lo facilmente.

O ElementsKit fornece muitas seções de cabeçalho e rodapé pré-criadas para você escolher. Para usar o rodapé de cabeçalho do ElementsKit:

• Vá para ElementsKit ⇒ Cabeçalho Rodapé ⇒ Clique em Adicionar Novo

• Escolha Type as Header , Conditions as Entire Site , ative a opção Ativar /Desativar e finalmente clique em Salvar alterações .

• Agora, para adicionar a seção de cabeçalho, clique em Editar no menu que você criou
• Clique em Editar conteúdo
• Clique no botão EK e vá para a guia Seções
• Escolha o design do cabeçalho que você gosta e clique em inserir

Você pode seguir o vídeo abaixo para criar um belo rodapé de cabeçalho para o seu site.

Observação: você pode seguir as mesmas etapas do Header para criar uma seção de rodapé para o seu site usando as seções pré-fabricadas do ElementsKit.

Etapa 5: Adicionar formulário de contato como pop-up modal (BÔNUS)

É hora de adicionar um formulário de contato ao seu site para que seja mais fácil para seus clientes em potencial se comunicarem com você. Adicionar um formulário de contato usando um pop-up daria ao seu site de uma página uma aparência mais atraente, juntamente com o formulário muito necessário que você precisa.

Para adicionar um pop-up modal, vou substituir o botão RSVP por um modal pop-up e adicionar um formulário de contato a ele.

• Vá para ElementsKit ⇒ Widgets ⇒ Ative o modal Popup ⇒ Clique em salvar alterações

• Vá para a sua página inicial All Page ⇒ (ou qualquer que seja o nome da sua página) e clique em Editar com Elementor

• No modo de edição, role até a seção RSVP e exclua o botão RSVP
• Arraste e solte o pop-up modal no lugar do botão RSVP

• Para alterar o texto do botão modal, vá para Content ⇒ Toggler Button ⇒ Label e altere “Open Modal” para RSVP (ou o que você quiser)

• Vá para a guia Estilo ⇒ Botão de alternância para alterar a cor de fundo do botão, a cor do texto, o raio da borda e outras configurações para visualização normal e de foco.

• Agora vá para Conteúdo e ative o modo Ativar modelo para que possamos adicionar nosso formulário de contato.
• Clique no botão pop-up. Uma vez aberto, clique no ícone de edição no corpo para abrir o editor Elementor

• Pesquise por Metform, arraste e solte o widget
• Clique no formulário Editar para escolher o formulário de contato
• Escolha o formulário desejado na lista e clique em salvar e fechar
• Por fim, clique em atualizar para salvar

Nota: Eu já havia feito o formulário RSVP usando o Metform e também mudei um pouco a cor e o estilo para combinar com o modelo da página de destino que estamos usando. Você pode conferir o blog sobre como criar e estilizar formulários de contato usando o Metform .

Você também pode conferir o vídeo abaixo para obter instruções sobre como criar um formulário de contato personalizado usando o Metform.

Etapa 6: atualize e veja o site único de visualização com navegação de uma página

Bem, tudo está feito. Agora vamos ao passo final, o mais fácil e emocionante. Depois de concluir toda a personalização e etapas mencionadas acima, clique no botão Atualizar para salvar tudo e clique no botão Visualizar para ver seu site.

Desde que você tenha seguido todas as etapas corretamente, você deve obter um site de página única com navegação de uma página no WordPress, como o abaixo:

Embrulhar

Dê um tapinha nas costas! Porque você criou com sucesso um site bonito e moderno com navegação de uma página usando Elementor e ElementsKit. Usando um site de página única, os clientes podem navegar facilmente para diferentes seções de seu site para saber mais sobre sua empresa. E esse pop-up modal de um clique com formulário de contato torna a comunicação realmente a apenas um clique de distância!

Se você está impressionado com o que construiu, prepare-se para se surpreender ainda mais porque o ElementsKit abre possibilidades ilimitadas para os usuários do WordPress e Elementor experimentarem e criarem um site com aparência incrível. Então, reserve um tempo para conferir outros widgets e módulos avançados do ElementsKit.

Para saber mais sobre a criação de sites usando WordPress, Elementor e o mágico ElementsKit, siga-nos em nossas contas de mídia social.