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.
Este guia aborda a inclusão de um link de âncora com um bloco de código a uma seção de bloco no seu site.
Assista a este vídeo
Passo 1 - adicione um bloco de código
No editor da página, role até a seção de destino do link e adicione um bloco de código. Você pode adicioná-lo a qualquer seção de blocos, mas não a outros tipos de seção, como seção de galeria ou layout automático, pois não é possível adicionar blocos a essas seções.
No campo do código, adicione:
<p id="unique-id">O link saltará para cá</p>
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 aqui.
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:
- Em um bloco de texto, digite o texto desejado, destaque-o e clique no ícone do Criar link na barra de ferramentas do bloco de texto.
- No campo de endereço da web, adicione o URL completo da página (ainda que seja a mesma página) e uma barra adicional. A aparência deve ser a seguinte:
https://sitedeexemplo.com/slugdepagina/
- 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
- Se você quiser que o link seja aberto em uma nova aba, clique em
e ative Abrir em uma nova janela.
- Clique em Salvar e depois em Aplicar para salvar o link.
e ative Abrir em uma nova janela.
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 um corpo de texto como link de âncora no Passo 2, mas você pode usar qualquer tipo de link, incluindo botões e clickthrough de imagem. Confira Adição de links ao site para conhecer as diferentes opções de links.
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 corpo do texto, altere as tags <p> e </p> no Passo 1. Se você não estiver familiarizado com HTML, use as tags do Título 1: <h1> </h1>
Ao usar tags diferentes, adicione o ID exclusivo ao código da maneira que você fez na Passo 1:
<h id="unique-id">O link saltará para</h>
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:
<p id="unique-id"></p>
Slug de página e link de âncora
Na maioria dos casos, recomendamos adicionar o URL e o slug 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 sem o URL nem o slug da página.
Dica: o painel Análise de dados de tráfego mostra qual browser seus visitantes usam.
Link para o topo da página
Para criar um link para o topo da página, vincule o cabeçalho com a injeção de código. A injeção de código é um recurso premium.
- 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 ou barra diagonal (/) antes do ID exclusivo. Se quiser, use Voltar ao topo como texto e #top como seu ID exclusivo.
- No Menu inicial, clique em Configurações, clique em Avançado e depois em Injeção de código.
- No campo Cabeçalho, adicione o código <a id="top"></a>. Se você usou um ID exclusivo diferente de #top ao configurar o link, troque-o na primeira tag <a>.
- 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.
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.
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 que os visitantes verão o ID no fim do URL.
A seção 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 <p> com espaços rígidos à cópia de texto de destino. Em HTML, espaço rígido é
Cada conjunto de tags <p> </p> que você adiciona antes do texto acrescenta uma quebra de linha. Veja as imagens abaixo para referência.
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
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.
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 como ele aparece 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 para auxiliar você:
- Confira as melhores práticas 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 formatos alternativos, 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.
Links de âncora na versão 7.0
Na versão 7.0, há algumas considerações especiais ao configurar um link de âncora.
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
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.