Como criar Âncoras e função “Voltar ao topo” numa página Wix

Faz algum tempo que recebi o email de um usuário Wix, perguntando se haveria como adicionar âncoras em seu site e o respondi dizendo que não, pois para se adicionar uma âncora era necessário ter acesso aos códigos fonte do site, o que não seria possível.

Pois bem, recentemente o Wix lançou o recurso “âncora” de forma primorosa, prática e simples, permitindo a criação de links em ‘âncora’ de uma maneira super fácil.

E o que é uma ‘âncora’?

Âncora nada mais é do que um link que direciona para uma parte específica de uma página. Essa “parte específica” pode estar na mesma página ou em outra página de um site Wix.

Para entender melhor, confira neste exemplo que criei, o funcionamento de um site Wix com âncoras na mesma página e em outras páginas do site.

Confira também neste link, um exemplo de Menu e Design que podem ser criados com o uso de âncoras (use o Menu para ver o efeito).

E qual a utilidade das âncoras?

Existem uma infinidade de situações as quais as âncoras podem ser úteis, são criadas geralmente em páginas que possuem um conteúdo muito extenso e que se queira dividir sua navegação, criando atalhos para pontos específicos da mesma.

Não é comum a utilização de âncoras em sites institucionais. Contudo, há projetos que essa funcionalidade ‘cai como uma luva‘ e se faz perfeitamente apropriada.

Como adicionar?

No formato tradicional, em HTML, a criação de um âncora se dá assim:

“<a name=”nome_da_ancora”></a>
<a href=”#nome_da_ancora”>Parte específica</a>”

No Wix, esse processo é mais fácil, contudo, segue a mesma estrutura de “nome” e um “link” que levará até a âncora. Confira abaixo um tutorial de como criar âncoras no Wix.

Siga os passos:

1. Primeiro selecione a página a qual deseja adicionar âncoras, abrindo-a em seu editor.

2. Você pode adicionar âncoras, a partir de um menu de âncoras que ficará visível ao internauta e ele poderá selecionar a âncora. Ou você pode inserir âncoras individuais pelo site.

Vamos trabalhar com a opção ‘menu de âncoras‘. Para isso, clique no botão “Adicionar>>Menu>>Âncoras“:

3. Em seguida, selecione um tipo de modelo de ‘menu de âncora’:

4. Feito isso, surgirá uma linha azul com o nome “Âncora 1“, além do ‘menu de âncoras estará na lateral do site:

Posicionando a âncora

5. Agora você deve arrastar a âncora (para cima ou para baixo) para a parte da página onde deseja que a âncora seja direcionada.

Por exemplo, a partir do site de exemplo que eu deixei acima, vamos supor que eu queria criar uma âncora para a modalidade “Ginástica“, dentre várias outras modalidades.

Para isso, eu adiciono a âncora e arrasto-a até a parte superior da modalidade Ginástica, veja:

Isso fará com que a página da âncora comece da linha azul pra baixo. Você deve fazer isso para todas as outras âncoras, sempre posicionando a linha azul acima do local onde queira mostrar a âncora.

Basta clicar sobre a âncora e arrastá-la até o local.

Nomeando uma âncora

Ao posicionar sua âncora no local desejado, você precisa dar um nome a ela, para que fique mais fácil de o sistema identificá-la e assim criar um link.

6. Acesse as configurações da âncora, clicando em ‘Renomear’ ou selecionando “configurações“. Adicione um nome para sua âncora:

7. Vá inserindo nomes para cada âncora da página, ex. Seção 2, Seção 3. Ou coloque o nome do Menu presente em seu site:

Adicionando o link da âncora

Para finalizar o processo, você só precisa adicionar a âncora em algum link de texto ou botão. É importante que você reconheça o nome que deu à âncora.

8. Selecione o texto (ou imagem, botão), no Gerenciador de Links:

9. Clique em “Âncora“. Selecione a página em que se encontra sua(s) âncora(s). O sistema irá mostrar a sua página atual, dizendo o nome da página e o aviso “Você está aqui“:

10. Se a página que você selecionar tiver âncoras, o sistema irá mostrar as âncoras disponíveis naquela página:

Agora basta clicar em OK para concluir. Repita esse mesmo procedimento para adicionar várias links de âncoras numa página.

Esse processo vale tanto para as situações em que a âncora esteja na mesma página ou em outras páginas do site.

OBS: As âncoras feitas no Wix, não criam links independentes, do tipo “ww.seusite.com.br/#!pagina/c132/nome_da_ancora“. As ligações das âncoras só servem para páginas dentro do site Wix.

Voltar ao topo

Juntamente com este novo recurso de ãncoras, o Wix lançou a opção “Voltar ao topo“, uma funcionalidade muito usual nos sites em geral, que pode ser útil em página compridas e até mesmo em páginas que contenham muitas âncoras.

11. Para adicionar, é muito simples, basta selecionar o texto, imagem ou botão ao qual deseja dar essa função e escolher a opção “Topo da Página“, no gerenciador de links:

12. Agora basta dar “OK” e nenhuma outra configuração será necessária. A função “Topo da Página” já estará funcionando.

O Wix ainda trouxe a novidade “Final da Página“, que leva a navegação para a parte final de uma página. Apesar de ser pouco usual, para aplicar essa função, basta seguir o mesmo procedimento usado para adicionar o recurso “Topo da Página“.

E é isso! Estes foram novos recursos que podem ser interessantes para seu projeto, vale a pena estudar as possibilidades.

Se tiver dúvidas ou dificuldades, comente abaixo.

6 comentários em “Como criar Âncoras e função “Voltar ao topo” numa página Wix”

  1. Olá, Gabriel, tudo bem?
    Estou construindo um site sobre a plataforma WIX, com navegação em âncoras. Minha dúvida é a seguinte: dividi a página inicial do site em seções, atribuindo uma âncora para cada. Para a seção ‘fotos’, criei uma subpágina. Gostaria que na transição entre e essa subpágina e a página inicial (com as âncoras) a navegação não retornasse ao topo da página inicial para depois rolar para a seção ‘fotos’ novamente. A princípio, esse recurso parece não ser possível no WIX, porém pesquisando, cheguei a este site, com estrutura bastante similar a do meu e ele tem exatamente essa navegação (seção galerias – subpágina):
    Sabe me dizer como foi feito?
    Muito obrigada!

    Responder
    • Olá Fernanda,
      Deixa eu ver se entendi: você quer que a navegação seja semelhante ao site, certo? E que os visitantes, quando estiverem na subpágina e clicarem para voltar à página anterior, não aconteça de ela retornar ao topo e depois role novamente para a seção anterior. Resumindo, você quer que o visitante retorne para a seção anterior quando estiver na subpágina.
      Então, se é isso mesmo, você só precisa inserir o link da âncora referente àquela seção.
      Crie um link em texto e insira a URL da âncora daquela seção.
      Eu fiz este exemplo para que você entenda. Na página inicial, clique no menu SERVIÇOS e depois no link ‘página’ (está vermelho), ao entrar, clique no link ‘Voltar à home’ e veja que a página retornará para a seção que estava (Serviços).

      Lembre-se, crie o link referente a âncora da seção.

      Se tiver dificuldade em fazer, comente de novo.
      Abraço.

      Responder

Deixe um comentário