Como Criar um Incrível Site de Página Única

Atualizado: 22 de Dez de 2019



Tendências. Elas estão por todo o lado. Algumas até podem parecer absurdas. No entanto, há outros momentos onde essas tendências fazem todo o sentido. No mundo do web design, sites de uma só página são uma das tendências que mais têm crescido devido à sua funcionalidade. Essencialmente é um site que mostra todo o seu conteúdo em uma única página, ao longo da qual o visitante vai rolando. Ao invés de diferenciar a página inicial das outras páginas, o conteúdo é dividido em diferentes seções usando faixas. Neste caso, os itens do menu têm um link para cada uma dessas seções em vez de páginas separadas.


Mais e mais designers estão seguindo a tendência de uma só página ao criar um site. Por quê? Porque é simples, clara e oferece um design impressionante. Neste guia vamos explicar o porquê e como criar um site de página única para o seu negócio:


  1. Decida se é adequado para o seu negócio

  2. Crie um plano para seu conteúdo

  3. Escolha um template

  4. Divida seu conteúdo em seções

  5. Adicione o atrativo dos efeitos parallax

  6. Crie um menu com âncoras para fazer o link de cada seção

  7. Facilite as coisas para os usuários poderem rolar pelo seu site

  8. Implemente uma poderosa CTA

  9. Adicione todas as informações no rodapé

  10. Incorpore suas contas nas redes sociais

  11. Tenha em mente o SEO

  12. Otimize seu site para ser amigável a mobile



01. Decida se é adequado para o seu negócio


Há duas principais escolas de design: a da página única e a clássica. Dependendo do seu tipo de negócio, e das características e prioridades que você necessita para seu site, uma pode ser mais adequada do que a outra - vale a pena pesar as suas opções. O site de página única tem um design marcante, ao mesmo tempo minimalista e organizado. É basicamente mais forte em imagens acompanhadas por pouco texto. O design geral de rolagem longa facilita o uso da criatividade, pois cria uma história onde você tem total controle sobre a ordem em que seus visitantes visualizam seu conteúdo. O layout melhora a experiência de usuário permitindo que os visitantes “consumam” seu conteúdo de forma linear, em vez de ficarem perdidos com múltiplas páginas. E o formato também se adapta muito bem às telas de smartphones e tablets. Um site de página única também é fácil de manter e requer menos recursos que um site clássico. Por isso, depois de ler tudo sobre esta tendência para site, provavelmente você já está imaginando o seu nesse formato grandioso. Mas primeiro você precisa se perguntar, “será que é adequado especificamente para o meu negócio?”. Este formato tem o potencial de ter uma aparência incrível, seja para as empresas mais criativas ou para as mais tradicionais. Se você tem um formato de conteúdo pequeno, como uma página de entrada (landing page), site de um freelancer, site de fotografia, site de casamento ou qualquer outro site relacionado a eventos, então vale a pena levar em consideração.


Um site clássico é o que a maioria das pessoas pensa quando imaginam um site - uma página inicial acompanhada de outras páginas como contato, serviços e uma página FAQ respondendo às perguntas mais frequentes. Em poucas palavras, a principal razão para escolher este formato de design é se você tem toneladas de conteúdo que seja absolutamente necessário incluir no seu site - como, por exemplo, um site que requer múltiplas páginas para vender uma grande variedade de produtos e serviços. Isto se deve ao fato de você precisar organizar cada tipo de conteúdo em sua respectiva página, e ter descrições longas e minuciosas. Por exemplo, se você tem um blog, é sensato usar isso para que seu visitante possa facilmente navegar através dos seus artigos individualmente.



02. Crie um plano para seu conteúdo


Se você decidiu que este formato é perfeito para você, então comece a elaborar seu lindo site de página única. Primeiramente, é necessário mostrar todo o seu conteúdo de forma estratégica. Criar um site de página única é a oportunidade perfeita para controlar a ordem em que seu site vai ser visualizado, por isso certifique-se de que seja lógica e intuitiva. Comece com uma hierarquia onde você imagina a jornada dos seus visitantes através do seu site. Eles primeiro precisam ser seduzidos pela mensagem principal que você quer transmitir desde o início - em outras palavras, o que você quer colocar “acima da dobra” (ou seja, o que o visitante vê antes de começar a rolar pelo seu site). Para cada site, você precisa uma seção “Sobre” e uma área dedicada às suas informações de contato. Entre essas duas você pode incluir o que está oferecendo, uma CTA, um “conheça a equipe”, serviços e produtos, depoimentos, seção FAQ e uma galeria de fotos - dependendo da informação que você quer e precisa fornecer. Priorize a ordem do seu conteúdo, pois isso vai ser extremamente importante mais adiante. Da mesma forma, retire qualquer informação desnecessária - pensando em termos de um design poderoso, menos é mais em relação às palavras. De uma forma geral, seu plano deve ser manter tudo o mais organizado e simples possível.



03. Escolha um template


Uma vez estabelecido o plano do seu conteúdo, você vai precisar de um template para começar com o pé direito, incluindo todos os elementos que um site de página única necessita, como um menu âncora, faixas, colunas, barra de redes sociais, um rodapé com todas as informações e mais. Há centenas de templates para sites criados pelos nossos designers e disponíveis para qualquer tipo de negócio. A coisa mais fantástica sobre estes templates é que você pode mudar tudo, desde o cabeçalho até o rodapé, pode personalizar e fazer tudo para ficar absolutamente seu. Deixe florescer sua imaginação criativa com essas infinitas possibilidades!



04. Divida seu conteúdo em seções


Agora você vai precisar pegar todo o seu conteúdo organizado e mostrá-lo no seu site usando faixas. Para adicionar uma faixa ao seu site:


1. Abra o Editor Wix


2. Clique em “Adicionar” no menu principal


3. Selecione “Faixa”. Aqui você vai encontrar opções projetadas por nossos designers, totalmente personalizáveis à sua escolha. Em cada faixa, você pode adicionar texto, vídeos, imagens, um formulário de contato, depoimentos e outros. Adicione quantas faixas você precisar e depois organize-as na forma que quiser apresentar seu conteúdo. Normalmente começa-se pela seção “Sobre” e vai indo até chegar no rodapé que funciona como a sua seção “Contato”.



05. Adicione os atrativos efeitos parallax


Rolagem parallax é uma tendência muito popular do web design que é atraente e alavanca o engajamento. Este é um efeito que cria uma ilusão 3D em seu site, com as diferentes faixas que você adicionou no passo anterior. Isso é feito movimentando em ritmo diferente as camadas ao fundo e no plano principal à medida que o usuário vai rolando pelo seu site. Como os sites de página única podem parecer um pouco unidimensionais, adicionar um efeito como a rolagem parallax dá ao seu site esse empurrão a mais. Para criar efeitos parallax no editor, você pode adicionar animações sutis às suas faixas, como zoom-in, surgir e aparecer. Esta é uma forma infalível para fazer seus visitantes rolarem até o final do site.



06. Crie um menu com âncoras para direcionar a cada seção


Você já ouviu falar de menus de site, mas este é ligeiramente diferente do que você conhece. No menu de sites de página única, cada item (que está ancorado) tem um link para uma seção diferente da mesma página, ao invés de ter um link para a sua respectiva página. Mas primeiro você precisa definir estas seções implantando o que chamamos de “âncoras” exatamente onde você as quer. Há três passos obrigatórios e importantes para criar um menu âncora e conseguir criar um design organizado de uma só página:


  • Adicionar uma âncora. Facilita para os usuários navegarem em diferentes partes de um site de página única, permitindo que se direcionem diretamente a uma seção específica. Muitos templates já têm âncoras incorporadas, mas você pode renomeá-las, movê-las ou deletá-las a qualquer momento.

  • Faça o link da âncora ao menu do seu site. Permite que os usuários direcionem-se a uma seção em particular da sua página, a partir do menu. Quando preparar as âncoras, você deve selecionar a seção correspondente à qual vai direcionar o link da âncora. Em outras palavras, o título que você escolhe para dar a cada âncora vai aparecer na sua lista do menu e portanto tem um papel muito importante para uma navegação suave e tranquila.

  • Crie uma ordem no seu menu. A ordem no seu menu precisa corresponder à ordem das suas seções para uma navegação amigável e facilidade da rolagem. Por exemplo, se você tem um menu horizontal, o primeiro item no menu (“Sobre”) deve estar alinhado com a primeira seção (também “Sobre”) e assim por diante. Uma vez que sites de página única envolvem uma rolagem longa, você deve ter seu menu visível no seu site o tempo todo e isso pode ser feito congelando o menu. Você pode criar um menu âncora flutuante ou, se o seu menu está no cabeçalho, você pode ativar o botão de “Congelar Cabeçalho” e grudá-lo no topo.





07. Facilite as coisas para os usuários poderem rolar pelo seu site


Nesse formato longo do site de página única, os usuários podem ficar tão desgastados com seu site que há a possibilidade de ficarem rolando sem parar consumindo todo o seu atraente conteúdo nesse caminho. Para proporcionar aos visitantes do seu site uma experiência descomplicada, simplesmente adicione um botão de "volta ao topo" para que eles possam retornar ao início do seu site com apenas um clique, em vez de ficar rolando para cima eternamente. Este botão fica numa posição fixa no seu site, visível mesmo quando o visitante rolar até o final da página.



08. Implemente uma poderosa CTA


Já que todo o seu conteúdo é apresentado em um só lugar, precisa haver algo para atrair a atenção do usuário para sua principal prioridade - assinar a sua newsletter, pedir um orçamento ou agendar seus serviços. É aqui que entra a CTA (Chamada de ação). É uma frase curta que estimula o público a tomar uma ação de imediato. Deve ser colocada no seu site acima da dobra, para ter a melhor visibilidade, sendo essa uma excelente oportunidade para direcionar os visitantes para uma seção de alta prioridade mais adiante. Para isso, você precisa fixar seu botão de CTA de forma semelhante ao que foi feito com os links para diferentes seções no passo seis. Depois de entrar no editor e adicionar um botão, conecte sua CTA a uma âncora para permitir que os visitantes naveguem para uma seção específica. Por exemplo, se a CTA diz “Entre em Contato” então você pode ancorá-la à sua seção “Contato”.



09. Adicione todas as informações no rodapé


O rodapé é a área ao final do seu site. A maioria das pessoas navega até o rodapé quando procura por informações importantes - por exemplo, como entrar em contato com a empresa. É por isso que é crucial que o seu rodapé inclua informações de contato atualizadas, links para suas páginas nas redes sociais, horário de funcionamento, política de privacidade, além de seus termos e condições. Se você tem uma localização física, você também pode adicionar um mapa ao rodapé.





10. Incorpore suas contas nas redes sociais


É importante conectar perfeitamente todos os aspectos da sua presença online. Uma maneira de fazer isso é conectar seus perfis de Facebook, Linkedin e Instagram ao seu site. Por quê? Para atrair o máximo possível de acessos ao seu site. Há algumas formas de incorporar suas redes sociais ao seu site de maneira a conseguir mais cliques e fazer seu site se destacar:


  • Adicione uma barra de redes sociais ao seu site. Este é o local onde ficam os ícones de todas as contas que sua empresa tem nas redes sociais. Quando você cria uma barra de redes sociais com Wix, pode escolher entre diversas opções de design para os ícones das redes sociais. Tudo o que precisa fazer é escolher as opções e adicionar links para suas respectivas páginas. Para garantir que os usuários sempre verão este elemento à medida que rolam através do seu site, clique com o botão direito no elemento no Editor e selecione “Fixar Posição”.

  • Adicione seu Feed do Instagram. Dê ainda mais exposição ao seu perfil do Instagram incorporando-o ao seu site. Também é uma boa forma de mostrar aos usuários fotos atuais da sua empresa e as principais novidades. Quando você adiciona um feed do Instagram, pode configurar o design de acordo com o que você gosta, escolhendo um entre os muitos layouts personalizáveis para mostrar esta informação.





11. Tenha em mente o SEO


Otimização para motores de busca (SEO) é um importante elemento em qualquer site que deseje ser encontrado na internet. Consiste na prática de otimizar seu site para que sua página tenha um posicionamento elevado nos resultados das buscas por palavras-chave específicas - e portanto, direcionar mais tráfego e potenciais clientes para seu site. Comece por confirmar que seu site foi indexado pelo Google (ou em outras palavras, incluído em seu banco de dados). Felizmente, seu site Wix já é visível no Google poucos segundos depois de criá-lo. Depois de indexar seu site, faça ele se destacar focando nas palavras-chave corretas. Se você tem um site Wix, seu trabalho ficou muito mais fácil a partir de agora! O Wix SEO Wiz orienta ao longo de todo o processo, indicando o que você precisa fazer através de um checklist, que inclui desde oferecer recomendações para palavras-chave até um plano completo e personalizado para o SEO.



12. Otimize seu site para ser amigável a mobile


Navegar na internet em um smartphone ao invés de um computador está se tornando o padrão dos dias atuais. É também por este motivo que os sites agora estão sendo classificados em termos de SEO primeiramente pela sua versão mobile (veja o Mobile-first index do Google). O quê isto significa para o seu site? Colocado de maneira bem simples, o site precisa ter uma aparência tão bonita e ser tão funcional na versão mobile como na sua versão para desktop. Levando em consideração o fato de que a navegação e a legibilidade são importantes neste processo, você já está no caminho certo escolhendo o formato de página única para seu site. Agora, se você tem um site Wix, é mais sortudo ainda, pois uma versão mobile do seu site é produzida automaticamente e tem uma aparência incrível em qualquer dispositivo. É só entrar no Editor, trocar para o editor mobile e pré-visualizar seu site mobile. Um dica para fazer seu site mobile ficar ainda mais fácil de navegar é instalar uma barra de ações rápidas. Como a barra de redes sociais não aparece nos sites mobile, a barra de ações rápidas funciona como uma excelente alternativa para fazer seus leitores procurarem qualquer informação que necessitem, como os seus canais de contato.



Exemplos de sites de uma só página para você se inspirar:


Se você está imaginando como é a aparência final de um site intuitivo de uma só página, basta olhar os sites destes três usuários Wix. Não falta inspiração para você usar quando for criar o seu site.



Brave Women’s Conference




Mutiny Creative Agency




Lena Steinküler




Pronto para criar a história do seu site com o design mais moderno e requintado? Crie um site com Wix hoje!



#CrieSeuPróprioSite #SiteDePáginaÚnica #TendênciasDeWebDesign

pt03.png