Última atualização em 05/05/2021
Não há nada pior do que um site desordenado. Não só parece pouco profissional, mas também perde clientes.
Estatisticamente falando, 55% por cento de todos os usuários passarão apenas 15 segundos no site da sua empresa antes de perder o interesse e sair.
Tráfego menos sustentado significa menos conversões – e, portanto, se você depende muito da receita digital, é provável que seu site desordenado esteja prejudicando mais do que ajudando.
Felizmente, mais e mais empresas estão encontrando uma solução simples para esse problema, implantando sites de uma página.
Você vai encontrar neste artigo:
ToggleO que é um One page site?
O termo “site de uma página” é exatamente o que parece – embora, para desenvolver e implantar adequadamente um, você precisa colocar muita consideração sobre o que está fazendo e como vai alcançá-lo.
Simplificando, um site de uma página é um site de uma única página que utiliza apenas uma página HTML.
A maioria dos sites de uma página tem barras de menu como o seu site comum.
No entanto, em vez de transportá-lo para diferentes páginas HTML, a seleção de um item de menu simplesmente leva os usuários a uma âncora HTML predefinida em algum lugar na página única do site.
Normalmente, isso é obtido por meio de JavaScript, CSS3, Ajax e jQuery.
Por que usar um site One page?
Não deve ser uma surpresa que mais e mais empresas estão contando com sites de uma página.
Por um lado, ter todo o seu conteúdo em uma página linear simplificada significa que os visitantes permanecem focados em seu conteúdo.
Dessa forma, sua única página se torna o próprio funil, convencendo continuamente os leitores a rolar para baixo até uma frase de chamariz. Isso reduz o risco de perder clientes ao clicar em links para outras páginas, que podem carregar muito lentamente ou criar uma distração.
Esse formato de layout do site também nos limita à quantidade de conteúdo, obrigando-nos a sermos espartanos e lacônicos, algo que é perfeito para direcionar o público mais jovem e usuários móveis – que é onde o Google está direcionando seu viés de mecanismo de busca, com seu Mobile-First agenda que começou em 1º de julho.
Sites de uma página são ótimos para todos os tipos de negócios e causas.
Não faz muito tempo, publicamos uma lista de 12 dicas essenciais para destacar o site de seu portfólio, apenas um dos incontáveis exemplos de como os sites de uma página são cada vez mais usados.
Quando usar um site one page?
A decisão de usar um site de uma página depende inteiramente do conteúdo e dos serviços que você está fornecendo.
Obviamente, se você tiver muitas informações ou vários serviços e produtos diferentes que oferece, a escolha de um site de uma única página pode ser imprudente, pois pode criar confusão e fornecer uma experiência ruim para o usuário.
Esse tipo de site é frequentemente usado por empresas com um único produto, empresas que oferecem um único serviço (como advogados, contadores, empresas de consultoria, etc.) ou portfólios individuais (freelancers).
Exemplos de sites One page
Reunimos alguns exemplos interessantes de sites de uma página, para que você possa ver como eles se parecem visualmente.
Formation Stone
https://www.banyaksurfadventure.com
Banyak Surf Adventure
Como criar um site de uma página
No tutorial desta semana, estaremos construindo um site de uma página do zero que incluirá:
- A própria página, com o conteúdo dividido em seções
- Um menu que permitirá aos visitantes avançar para as seções relevantes
- Um cabeçalho que incluirá nosso menu.
- Um rodapé.
Nosso cliente de exemplo nos contratou para construir um site para seu serviço de aluguel de iates, Yachtora.
Para dar início a este tutorial, precisamos de alguns princípios básicos:
- WordPress (gostamos de trabalhar com uma instalação limpa e o tema 2020 ativado)
- Construtor Elementor (gratuito) e Elementor Pro
Também instalaremos o Hello Theme, um tema inicial gratuito que é tão minimalista que fica praticamente em branco.
Como tal, não só nos permitirá usar o criador de temas do Elementor, mas também nos permitirá adicionar elementos às partes do tema (cabeçalho, rodapé, etc.) sem qualquer preocupação com conflitos, além de ajudar a reduzir o tempo de carregamento e a necessidade para plug-ins adicionais.
Criando Seu Site de One page
Criaremos nossa página da maneira mais simples e eficiente possível, clicando em Novo no painel do WordPress e selecionando a opção Página.
Assim que sua página for aberta, selecione a opção Editar no Elementor.
No Editor do Elementor, clique no ícone da biblioteca e na caixa de pesquisa da biblioteca de modelos, procure o termo ‘Iate’. Clique no modelo e insira-o.
Usaremos isso como base para nossa página.
Criando um menu para o seu site de uma página no WordPress
Como você verá, nossa página agora inclui as seguintes seções:
- Top (Inicio)
- Características
- Sobre nós
- Nosso CEO
- Destinos
- Galeria de fotos
- Se inscrever
- Contate-Nos
Estas são as seções básicas às quais queremos que nosso menu se refira. Mas existe uma chance de que, quando importamos o modelo, as seções podem ter sido renomeadas automaticamente.
Como queremos evitar que isso cause problemas futuros, atribuiremos a cada uma dessas seções um ID CSS.
Para fazer isso, vamos simplesmente clicar com o botão direito do mouse no identificador da seção de cada seção e selecionar Editar seção.
Do menu. Insira a guia Avançado no painel Editor e, no campo ID CSS, insira o nome da seção correto.
Observação importante: evite usar a chave hash (#) na frente dos IDs no Elementor, pois o Elementor adiciona isso automaticamente ao código.
Nomearemos nossas seções da seguinte forma (você pode usar qualquer nome de sua preferência):
- Principal
- Características
- Sobre nós
- CEO
- Destinos
- Fotos
- Se inscrever
- Contato
Com cada seção agora claramente nomeada, é hora de construir o menu de nossa página.
Use a ferramenta Finder (cmnd ou ctrl + E) para acessar as opções de Menus no painel do WordPress (você também pode encontrar as opções de Menus na seção Aparência no painel do WordPress).
Chamaremos nosso menu de “Menu de uma página” e clicaremos em Criar menu.
Agora podemos começar a adicionar os itens de menu ao nosso novo menu.
Para adicionar itens de menu, clique no botão Links personalizados e, no campo URL, insira o URL do site seguido por uma cerquilha (#) e o ID CSS apropriado para criar o slug para cada seção.
No campo Texto do link, insira o título do menu como deseja que apareça no seu site.
Começaremos com a seção de recursos porque queremos transformar o logotipo da empresa em um botão ‘Home‘ mais tarde. Portanto, os itens de menu que criamos são os seguintes:
URL Testo do Link
#recursos_______________ Características
#Sobre nós_______________ Sobre nós
#CEO__________________ CEO
#destinos_______________ Destinos
#photos________________ Fotos
#se inscrever_____________ Se inscrever
#contato________________ Contato
Assim que terminarmos de criar nossos itens de menu, atribuiremos o menu ao local apropriado nas configurações do menu, marcaremos a caixa de seleção Principal e clicaremos em Salvar para salvar este menu.
Criação de um cabeçalho / rodapé para seu site de uma página
Vamos criar nosso cabeçalho e rodapé no Theme Builder, encontrado na seção Modelos no painel do WordPress.
Tanto o cabeçalho quanto o rodapé podem ser criados dessa forma, no entanto, para o propósito deste tutorial, vamos nos concentrar principalmente no cabeçalho, em vez de repetir as mesmas instruções.
No Theme Builder, clique em Add New e na caixa de diálogo que aparece, selecione Header, dê um nome a ele e clique no botão Create Template.
Na galeria de modelos, selecionaremos um cabeçalho adequado ao nosso design (selecionamos Cabeçalho 1) e clicaremos em Inserir.
Adicionar um logotipo
Tendo retornado ao modo Elementor, começaremos a ajustar nosso cabeçalho excluindo o logotipo e substituindo-o por uma caixa de ícone.
No painel do editor Elementor, vamos mudar o ícone para uma âncora da biblioteca de ícones que aparece quando clicamos na imagem do ícone.
Também podemos adicionar um ícone / logotipo personalizado aqui no formato SVG, da mesma forma, nas versões Free e Pro do Elementor.
Continuando no painel do editor Elementor, configurarei a visualização do ícone como emoldurada e digitarei o nome da empresa Yachtora na caixa Título e excluirei o texto da caixa de descrição.
Para transformar o próprio ícone ou logotipo em um botão inicial, insira o link para a seção superior no campo Link.
Certifique-se de usar o endereço do seu site, seguido por uma chave hash e o nome que usamos como o ID CSS.
Em nosso caso, o link seria: http://yourwebsite.com/#top ou home
Use a flexibilidade do widget a seu favor e faça bom uso da variedade de configurações no painel do Editor para estilizar e aperfeiçoar seu cabeçalho.
Alteramos a posição do ícone na guia de conteúdo e na guia de estilo alteramos a cor do ícone para o mesmo azul escuro recorrente que é usado em outras partes da página.
Também alteramos o quadro do ícone e a cor de fundo para branco e ajustamos o espaçamento para 27 pixels e o tamanho para 21 pixels.
Quanto ao texto, mudamos a cor para branco e inserimos as configurações de topografia para definir o tamanho da fonte para 18, o peso 500 e transformar as letras em maiúsculas.
Gostaríamos também que este ícone tivesse uma aparência mais contemporânea e adicionasse alguma animação selecionando a opção Flutuar nas configurações do Hover.
Personalizando Seu Menu de Cabeçalho
Passando para outros elementos do cabeçalho, ajustaremos o menu de navegação.
Na guia Conteúdo, no painel Elemento, definiremos o ponteiro para Texto, definiremos a animação como Flutuante, para permanecer consistente com nosso ícone / logotipo. Também definiremos o Submenu como Clássico
Na guia de estilo, em Topografia, definiremos o tamanho da fonte em 14 pixels e o peso em 400, bem como definiremos o texto Transformar em maiúsculas.
Continuaremos consistentes com nosso ícone / logotipo e mudaremos a cor do texto para branco e faremos o mesmo com o ícone de pesquisa (no painel do editor do widget de formulário de pesquisa, na guia Estilo)
Enquanto aqui, pensamos em adicionar uma borda sólida, com uma largura de 1 pixel, na parte inferior da seção de título.
Também queremos tornar o fundo de todo o cabeçalho transparente, para que possamos preservar a paisagem marítima romântica e pacífica com todos os iates que temos em nossa página como um vídeo.
Para fazer isso, iremos para o Editor de Seção e, na guia Estilo, usaremos o seletor de cores para tornar o plano de fundo transparente.
Para garantir que este lindo fundo de vídeo apareça como fundo de nosso cabeçalho, faremos dois pequenos ajustes.
Primeiro, na guia Avançado do editor de seção, definiremos o Índice Z para 4 (o índice pode ser qualquer número, desde que seja mais alto do que todo o resto).
Em segundo lugar, definiremos uma margem negativa para a “seção principal”, a seção que contém o vídeo no topo da página.
Isso, no entanto, pode ser mais conveniente fazer quando retornarmos à página principal, uma vez que terminamos nosso cabeçalho / rodapé.
Configurando um cabeçalho / rodapé em seu site
Assim que terminarmos de projetar nosso cabeçalho / rodapé, clicaremos em Publicar na parte inferior do painel do editor.
Na caixa de diálogo que aparece, vamos adicionar uma condição e selecioná-la para aparecer em toda a Visão e, em seguida, clicar em Salvar e Fechar.
Usando o Finder (cmnd / ctrl + E), retornaremos como prometido à nossa página principal e lá, entraremos no editor de seção, na guia avançada e definiremos uma margem negativa de -300 pixels, para garantir seu lugar como o plano de fundo do nosso cabeçalho.
Clique na opção de visualização (parte inferior do painel do editor) e no modo de visualização, teste todos os links no cabeçalho para se certificar de que eles realmente funcionam e navegue para baixo em sua página, alcançando os locais atribuídos.
Como mencionado anteriormente, usaremos o mesmo procedimento para criar nosso rodapé, usando o Theme Builder, selecionando um modelo, personalizando e publicando-o com uma condição definida para aparecer em todo o site.
Configurando a página principal como página inicial do seu site
Assim que terminarmos de construir e inserir o conteúdo de nosso site de uma página, voltaremos ao painel do WordPress e, na seção Configurações (WordPress), selecionaremos a subseção Leitura.
Nas opções em Exibições de sua página inicial, selecione Uma página estática e, em seguida, selecione sua página principal no menu suspenso abaixo da opção.
Clique em Salvar alterações e pronto. Agora temos nosso site de uma página, que inclui um cabeçalho, conteúdo e rodapé.
Temas WordPress de site de uma página
A função rudimentar do Hello Theme, como uma base minimalista, se mostrará muito eficiente para diminuir o peso da página e acelerar o tempo de carregamento.
No entanto, existem vários temas WordPress de uma página disponíveis para uso oportuno.
Astra
Astra é um fornecedor de temas popular para WordPress. Eles ultrapassaram 1.000.000 de usuários e oferecem diversos temas. Eles têm uma boa seleção de temas de site de uma única página.
OceanWP
OceanWP é outro grande provedor de temas WordPress que oferece muitos temas diferentes. Você pode ver seus temas de site de uma página aqui.
Envato
Envato é outro fornecedor de temas popular para WordPress. Eles ostentam um grande número de mais de 53 milhões de ativos criativos, incluindo temas de site de uma página, que você pode conferir aqui.
Conclusão
Um site de uma página é uma ótima maneira de chamar a atenção do usuário para as informações mais importantes e, lentamente, direcioná-lo para a frase de chamariz.
O site de uma página também serve como um limitador de desordem.
Isso força o criador do site a ser o mais sucinto e focado na mensagem que está tentando transmitir.
Esse tipo de site também oferece desafios de design visual, que, se bem enfrentados, podem despertar a criatividade e mostrá-la ao mundo.
Espero que tenha gostado do nosso artigo, e se possível deixe seu feedback!
Leia também – 24 Sites Padrões, Prontos, Simples – Modelos de Sites
Leia também – Manutenção de sites como funciona e como fazer