Portuguese 
English 
German 
Spanish 
Italian 
French 
Danish 
Swedish 
Polish 
Korean 
Japanese 
Você está procurando construir um site para sua empresa, mas não tem tempo para criar um grande? Ou não está pronto para se comprometer com a manutenção de longo prazo do site?
Então você deve optar por um site de página única com navegação em uma página. O site de página única fornece todas as informações de uma forma atraente e dá ao seu site uma aparência deslumbrante para que os usuários possam se envolver mais.
Neste blog, você não aprenderá apenas como crie 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, portanto, esta dica 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 deslumbrante com um Elementor navegação de uma página. Você pode conferir o visual final do site no botão abaixo:
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 uma única página. A navegação de uma página com efeito de rolagem suave torna a navegação para 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 necessária sobre os outros. Um site de uma página é ótimo para pequenas empresas, como planejadores de casamento, fotografia, pequenos salões, restaurantes, 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ê.
Você não deve pensar em criar um site de uma página para sua empresa só porque ela é pequena. Há 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 é algo crucial a se considerar quando se trata de SEO (Search Engine Optimization) de sites. A partir de 2021, 70% de cidadão dos EUA usa 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 design de página única, seu site entra nos bons livros do Google desde o início.
- A maioria das pessoas prefira um site que seja simples, bonito e direto ao ponto em vez de um desnecessariamente longo.
- Contagens do Google Domínio e nível de página autoridade de link em um grau de 40%. Esta é outra área onde o seu site de uma página terá uma vantagem.
- Sites de página única carregam mais rápido do que sites com toneladas de páginas. Considerando que hoje em dia as pessoas têm opções ilimitadas, ter um site de carregamento rápido é realmente inegociável.
- Sites de uma página são fáceis de manter.
- Como um site de página única contém todas as informações em uma página, a navegação de rolagem torna a navegação muito mais fácil e um efeito de rolagem suave torna a experiência do usuário relaxante.
Posso continuar por mais algum tempo, mas acho que as informações acima transmitem a mensagem de que, se sua empresa for pequena, você poderá realmente crescer. grandes benefícios usando o pequeno site com navegação de uma página. Então, vamos direto ao processo principal sem perder tempo.
Neste blog, vou mostrar não apenas como construir um site, mas também 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 popular construtor de sites WordPress (eu sei que está escrito no título!)
Então vamos começar…
Etapa #1: Instale os plug-ins WordPress necessários para criar Elementor One Page Scroll
Depois de instalar o WordPress em seu sistema. Você precisa instalar os seguintes plug-ins do WordPress para criar
um site Elementor rolagem de uma página:
- Elementor (Versão gratuita)
- Kit de Elementos (Versão gratuita e Pro)
- MetForm (Versão gratuita)
Depois de instalar e ativar os plug-ins necessários do WordPress, é hora de construir o site.
Etapa #2: Crie um site usando a página pré-fabricada do ElementsKit
ElementsKit fornece muitos páginas e modelos pré-fabricados e seções para que as pessoas possam construir um site com qualquer design, layout e estilo que desejarem, sem codificação. Para este blog, vou usar o Página inicial do planejador de casamento por ElementsKit.
Para criar seu site, no painel do WordPress, vá para Páginas ⇒ Adicionar novo
- Dar uma título como Casa, escolha Largura total do elemento nas opções de modelo
- Clique para publicar e após publicar clique em Editar com Elementor
- Clique no botão ElementsKit (EK) quando a janela do Elementor Builder abrir
- Vou ao Página guia, Pesquisar por Casamento Página e clique em inserir
Agora clique na atualização para salvar
Agora que temos nosso site, é hora da parte divertida que é adicionar a navegação de rolagem de uma página do Elementor. A navegação de rolagem ElementsKit Onepage é mais fácil de usar e dá ao seu site uma aparência deslumbrante. É muito improvável que você encontre outro complemento Elementor de rolagem de página tão bom quanto o ElementsKit.
Agora, vamos dar uma olhada no processo passo a passo de adição de um link de navegação de rolagem de página ao seu site WordPress:
3.1 Ativar módulo de rolagem de uma página
Para adicionar navegação de rolagem ao seu site WordPress, primeiro precisamos ativar o módulo Onepage Scroll.
- Vá para: Painel WordPress ⇒ ElementsKit ⇒ Módulos
- Ligar Rolagem de uma página
- Clique em Salvar alterações atualizar
3.2 Habilite 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
- Habilitar opção de rolagem de uma página
Observação: Se você não conseguir encontrar a opção Onepage Scroll Setting, provavelmente não o encontrou. ativou seu ElementsKit Pro
Agora é hora de escolher o estilo de navegação. ElementsKit oferece várias opções de navegação. Por exemplo, abaixo do círculo, você obtém Aumentar escala, preencher, preencher, etc. Para padrão quadrado, você terá opções como aumentar escala e como parte da Linha você terá opções como linha para crescer, preenchimento de linha , encolhimento de linha, etc.
Você pode escolher o 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 no biblioteca de ícones ou carregue um personalizado Ícone SVG.
Para escolher um ícone personalizado
- Escolha o ícone personalizado opção no menu suspenso de estilo de navegação
- Flutuar no ícone de navegação e clique na biblioteca de ícones
- Pesquisar e inserir o ícone que você gosta
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.
Agora que todas as configurações estão feitas é hora de adicionar as seções que deseja que apareçam na navegação. Para fazer isso
- Flutuar na seção e clique no Editar seção ícone
- Vou ao Guia Avançado
- Expandir Opção de rolagem na página do ElementsKit
- Ative a seção para tornar a seção visível
- Ativar ativar fazeropção de 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 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 desejadas à 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 o visualização de navegação de uma página no WordPress e também para verificar os links do menu de navegação.
Bem, agora você tem um site de navegação de uma página no WordPress, mas ainda precisa de um cabeçalho e rodapé 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.
ElementsKit fornece muitos Cabeçalho pré-fabricado e Seções de rodapé escolher a partir de. Para usar o rodapé do cabeçalho do ElementsKit:
- Vá para ElementsKit ⇒ Cabeçalho Rodapé ⇒ Clique em Adicionar novo
- Escolha Digitar como Cabeçalho, Condições como Site inteiro, Ligar a opção Ativar/Desativar e por fim 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 de cabeçalho que você gosta e clique em inserir
Você pode acompanhar o vídeo abaixo para criar um lindo rodapé de cabeçalho para o seu site.
Observação: Você pode seguir as mesmas etapas do Cabeçalho para criar uma seção de rodapé para o seu site usando 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 necessário.
Para adicionar um pop-up modal, vou substituir o de RSVP botão com um modal pop-up e adicione um formulário de contato a ele.
- Vá para ElementsKit ⇒ Widgets ⇒ Ative o modal Popup ⇒ Clique em salvar alterações
- Vá para a página All Page ⇒ página inicial (ou o nome que você deu à sua página) e clique em Editar com Elementor
- No modo de edição, vá 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 qualquer coisa que você quiser)
- Vá para a guia Estilo ⇒ Botão de alternância para alterar a cor de fundo do botão, cor do texto, raio da borda e outras configurações para visualização normal e instantânea.
- 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
Você pode conferir mais detalhes em nosso blog em diferentes maneiras de utilizar o widget modal pop-up do ElementsKit em seu site WordPress
- Pesquise 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
Observação: Eu já tinha feito o formulário RSVP usando Metform e também mudei um pouco a cor e o estilo para combinar com o modelo de landing page que estamos usando. Você pode conferir o blog em como criar e estilizar formulários de contato usando Metform.
Você também pode conferir o vídeo abaixo para instruções sobre como construir um formulário de contato personalizado usando Metform.
Bem, tudo está feito. Agora vamos para a etapa final, a mais fácil e emocionante. Depois de concluir toda a personalização e etapas mencionadas acima, clique no botão Botão Atualizar para salvar tudo e clicar no Botão de visualização para ver seu site.
Desde que você tenha seguido todas as etapas corretamente, você deverá obter um site de página única com navegação de uma página no WordPress como o mostrado abaixo:
Quer saber mais sobre o ElementsKit? Confira a última atualização do ElementsKit Para saber mais sobre este incrível complemento Elementor.
Palavras finais sobre o site Elementor One Page Scroll
Dê um tapinha nas costas! Porque você criou com sucesso um lindo site de aparência moderna 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 do seu site para aprender sobre o seu negócio. E aquele 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 usuários do WordPress e Elementor experimentarem e construirem um site de 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 construção de sites usando WordPress, Elementor e o mágico ElementsKit, siga-nos em nossas contas de mídia social.
Deixe um comentário