Envie os visitantes para uma parte específica de uma página.

Link de âncora (ou "desvio de página") é um URL especial que direciona você para um lugar específico da página. A tabela de conteúdo deste guia, por exemplo, contém links de âncora que direcionam para um cabeçalho específico.

Nos sites da versão 7.0, para criar um link de âncora, adicione um bloco de código às áreas de conteúdo.

Este guia mostra como criar manualmente um link âncora em um site da versão 7.0. Alguns templates da versão 7.0 também têm links de âncora integrados para a página índice. Para adicionar um link âncora na versão 7.1, consulte "Criando um link de âncora".

Assista ao vídeo

Este vídeo aborda a adição manual dos links de âncora na versão 7.1, mas as etapas são as mesmas na versão 7.0.

Etapa 1 - Adicionar um bloco de código

No editor da página, role até onde o link deve levar e adicione um bloco de código. É possível adicioná-lo a qualquer área de conteúdo no bloco, mas não a páginas de coleção como blog ou galeria, pois não é possível adicionar blocos nelas.

No campo do código, adicione:

O link saltará para cá

Dentro da primeira tag, troque o ID exclusivo entre as aspas por um ID exclusivo específico para o seu link:

• Pode ser qualquer texto, mas sem espaços. Se precisar, separe as palavras com hífen.
• O ID exclusivo diferencia maiúsculas de minúsculas e só pode ser usado uma vez por página. Saiba mais nas nossas dicas de melhores práticas.

Troque O link saltará para cá pelo texto que você quer mostrar no seu site. A opção Mostrar código-fonte deve estar desativada, ou o link de âncora não funcionará.

Passo 2 - Crie o link

Adicione o link no qual os visitantes clicam para acessar o conteúdo que você criou no Passo 1. É possível usar qualquer tipo de link, mas este exemplo usa um link de texto:

1. Em um bloco de texto, digite o texto desejado, destaque-o e clique no ícone do link na barra de ferramentas do bloco de texto.
2. Em URL, adicione o URL completo da página (mesmo que seja a mesma) e uma barra extra. Fica assim:

   https://sitedeexemplo.com/slugdepagina/

3. Após o slug da página, insira uma hashtag (#) seguida pelo ID exclusivo do Passo 1. A aparência deve ser a seguinte:

   https://sitedeexemplo.com/slugdepagina/#unique-id

4. Para que o link se abra em uma nova aba, ative a opção Abrir link em uma nova aba.
5. Pressione Enter.

Para determinados links de âncora, incluir o endereço completo do site é opcional, mas nós o recomendamos para a maioria dos links.

Dica: ao adicionar um link de âncora à página inicial, você não precisa incluir o slug da página. Ao a página inicial, adicione o slug a um link de âncora criada na página inicial antiga, ou ele não funcionará.

Passo 3 - Salve e publique

Clique em Salvar para publicar as alterações. O link criado no passo 2 agora direciona os visitantes para o texto elaborado no passo 1.

Use diferentes tipos de link

O exemplo acima usa parte do texto principal como link de âncora no passo 2, mas você pode usar qualquer tipo de link, incluindo botões e clickthrough de imagem. Confira "Adicionando um link ao site" para conhecer as diferentes opções de link.

Em todos os tipos de link, adicione o URL e o ID exclusivo, conforme mostrado no passo 2 acima. Use este formato:

https://sitedeexemplo.com/slugdepagina/#unique-id

Formate o texto de destino

Para formatar o texto de destino como algo diferente do texto principal, altere as tags

e

no passo 1. Se você não estiver familiarizado com HTML, use as tags do título 1:

Ao usar tags diferentes, adicione o ID exclusivo ao código da maneira que você fez no Passo 1:

O link saltará para

Crie um link para um espaço vazio

O link de âncora funciona mesmo sem texto visível. Para que o texto não apareça no seu ponto de destino, formate o texto de destino sem nada entre as tags:

Slug de página e link de âncora

Na maioria dos casos, recomendamos adicionar o URL e o slug completo da página antes do ID exclusivo. Sem o slug da página, o link de âncora não funciona:

• Se for um link de navegação
• Ao adicionar um link para outra página

Links de âncora sem o URL do site também podem ter problemas na versão móvel do Safari. Para encontrar o URL da sua página, confira "Slugs de URL".

Se nenhum visitante usar a versão móvel do Safari, e você criar um link para outro lugar da mesma página (como um cabeçalho mais abaixo), é possível usar #unique-id no link que você criou no passo 2 sem o URL nem o slug da página. Exemplo:

#unique-id

Dica: o painel Análise de dados de tráfego mostra qual browser seus visitantes usam.

Link para o topo ou o fim de uma página

Para criar um link para o topo ou o fim da página, vincule o cabeçalho ou o rodapé com a injeção de código. A injeção de código é um recurso premium.

Link para o topo da página

O link para o topo da página é útil se o conteúdo da página for longo e você quiser disponibilizar aos visitantes um meio conveniente de retornar à navegação. Para criar um link para o topo de uma página:

1. Adicione texto e um link de âncora à parte inferior da página ou rodapé, conforme descrito no passo 2, mas não inclua o URL do seu site nem a barra diagonal (/) antes do ID exclusivo. Se quiser, use Voltar ao topo como texto e #top como seu ID exclusivo.
2. Abra o painel "Injeção de código".
3. No campo Cabeçalho, adicione o código . Se você usou um ID exclusivo diferente de #top ao configurar o link, troque-o na primeira tag .
4. Clique em Salvar.

Esse método cria um link para o topo de cada página do site. Você pode usar o mesmo processo para criar um link no topo de uma página específica, mas precisará adicionar o código às configurações avançadas da página.

Link para o fim da página

O link para o fim da página é útil para que os visitantes encontrem informações ou interajam com algo (como um bloco de newsletter) no rodapé.

Para criar um link para o fim de uma página:

1. Adicione texto e um link de âncora no conteúdo da página, conforme descrito no passo 2, mas não inclua o URL do seu site nem a barra diagonal (/) antes do ID exclusivo. Se quiser, use Voltar ao rodapé como texto e #bottom como seu ID exclusivo.
2. Abra o painel "Injeção de código".
3. No campo Rodapé, adicione o código . Se você usou um ID exclusivo diferente de #bottom ao configurar o link, troque-o na primeira tag .
4. Clique em Salvar.

Este método cria um link ao rodapé de cada página do seu site.

Limitações e melhores práticas

O link de âncora facilita para os visitantes a navegarem no site, mas lembre-se de algumas coisas.

O ID só pode ser usado uma vez em cada página

Por exemplo: após usar o ID panda na página inicial, você não poderá adicionar panda como ID depois na página inicial. Você pode usar em outra página, mas não novamente na página inicial.

O ID diferencia maiúsculas e minúsculas

Se o HTML indicar id="Panda", mas o link listar o ID como #panda, o link não funcionará.

O ID exclusivo vira parte do URL após o link de âncora ser clicado

Quando um visitante clica no link de âncora, o ID exclusivo aparece no fim do URL do site. O ID exclusivo deve ser algo que não tenha problema em ficar visível aos visitantes.

Você pode usar qualquer texto no ID exclusivo

Crie um ID fácil de memorizar para agilizar o processo de configuração e ajudar na solução de possíveis problemas. Os IDs de fácil memorização costumam fazer sentido, como #top para um link "Voltar ao topo".

O link de âncora também pode deixar o seu site com mais humor e personalidade. Lembre-se de que o ID no fim do URL aparece aos visitantes na barra de endereço do browser.

O texto de destino do link aparecerá no topo do browser

O texto de destino aparece no topo do browser ou o mais alto possível se não houver muito conteúdo abaixo.

Para que o texto não fique no topo da janela do browser, é possível criar um espaço antes dele: adicione tags

com espaços rígidos à cópia de texto de destino. Em HTML, espaço rígido é  

Cada conjunto de tags

 

que você adiciona antes do texto acrescenta uma quebra de linha. Exemplo: para ter duas quebras de linha antes do texto do cabeçalho 3, o bloco de código deve usar o seguinte código:

 
 
O link saltará para cá/h3>

Mantenha os links atualizados

Ao alterar o domínio principal ou atualizar o slug da página no futuro, atualize também os links de âncora. Eles não funcionarão corretamente se usarem um URL desatualizado.

Resolução de problemas

O link de âncora não está funcionando

Se algum link de âncora não funcionar, confira se:

• Você adicionou o URL conforme descrito no passo 2, incluindo o slug de página e dois símbolos /. Isso é importante principalmente para os links de navegação e os links de outras páginas.
• O ID exclusivo é exatamente o mesmo no link e no texto de destino. Caso haja alguma diferença na ortografia ou nas maiúsculas e minúsculas, o link não funcionará.
• O HTML do texto de destino foi configurado corretamente. Por exemplo: se o ID exclusivo for #bamboo, o link a adicionar ao HTML do texto de destino será id=“bamboo”
• As aspas no HTML do texto inicial são aspas "retas", como nos exemplos deste guia. As demais aspas não funcionam no bloco de código. O bloco de código retorna para as aspas "retas", mas talvez apareçam aspas "curvas" se você colou o código no bloco.
• Você adicionou www. no início do URL caso exista no domínio principal.
• Você não está logado ou está no modo anônimo do browser. Clicar no link de âncora enquanto estiver logado funciona em alguns casos, mas não é um teste confiável para saber como ficará para os visitantes.

Mesmo que tudo esteja configurado corretamente, o link de âncora não funcionará se:

• Ele usar o domínio integrado do seu site, e você fizer o teste enquanto estiver logado. Em vez disso, faça o teste em um browser anônimo.
• O seu site estiver como privado e você testar o link de âncora enquanto estiver logado. Crie uma senha geral para o site e teste em um browser anônimo.
• A página já usar esse ID. Use outro ID ou altere a combinação de maiúsculas e minúsculas.

Ajax e link de âncora

O Ajax é um método especial para carregar os sites, deixando mais rápidas as páginas com conteúdo pesado. No entanto, ele pode interferir nos links de âncora, principalmente na versão móvel.

Se os passos acima não funcionarem, e o seu template aceitar o Ajax, desative-o temporariamente nos estilos do site para ver se essa é a causa do problema. O Ajax está disponível nestas famílias de templates:

• Brine
• Farro
• Tremont
• York

Atenção: nosso suporte não cobre modificações no código personalizado; ou seja, não ajudamos na configuração nem na solução de problemas. Além disso, não garantimos a funcionalidade ou compatibilidade integral de nenhuma solução em código com o Squarespace. Isso inclui o funcionamento dele com nosso design responsivo, principalmente a aparência na versão móvel, e se ele funciona em todos os templates. O código personalizado também pode causar problemas de exibição nas futuras versões da nossa plataforma. Ainda assim, há muitos recursos que podem auxiliar:

• Conheça as recomendações para adicionar um código personalizado.
• Leia nosso guia geral sobre personalizações externas.
• Visite o Squarespace Forum, nossa comunidade para clientes e desenvolvedores.
• Contrate um Squarespace Expert para criar um código personalizado para o seu site.

Links de âncora na versão móvel

Dependendo do aparelho e do browser, o comportamento do link de âncora varia na versão móvel. Por exemplo: quando o link de âncora inclui o URL completo (conforme recomendamos), o browser pode recarregar a página no ponto de destino em vez de avançar para lá.

Para que o link de âncora tenha outro comportamento na versão móvel, você pode testar outros formatos, como /slugdepagina#unique-id ou #unique-id. Porém, esses formatos podem não funcionar em determinadas configurações e em determinados browsers móveis, como o Safari.

Saiba mais em Slug de página e link de âncora.

Link de âncora na página índice

As páginas índice empilhadas têm uma forma alternativa de adicionar links de âncora sem código. Saiba mais em Adição de link de âncora na página índice.