Link de âncora (ou "desvio de página") é uma 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 links de âncora a qualquer seção de bloco em seu site com um Bloco de código.
Assista a este vídeo
Etapa 1 - Adicione um bloco de código
No editor de página, role até a seção à qual deseja vincular e adicione um bloco de código. Você pode adicioná-lo a qualquer seção de bloco, mas não a outros tipos de seção, como seções de galeria ou layouts automáticos, pois não é possível adicionar blocos a essas seções.
No campo de código, adicione:
<p id="unique-id">O link saltará para cá</p>
Dentro da primeira tag, substitua 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.
- Os IDs exclusivos diferenciam maiúsculas de minúsculas, e só podem ser usados uma vez por página. Saiba mais nas nossas dicas de boas práticas.
Substitua Este é o lugar onde o link irá saltar por qualquer texto que você deseja exibir em seu site aqui.
Step 2 - Crie o link
Adicione o link no qual os visitantes clicam para acessar o conteúdo que você criou na etapa 1. É possível usar qualquer tipo de link, mas este exemplo usa um link de texto:
- Em um Bloco de Texto, digite o texto que deseja vincular, destaque-o e clique no ícone do 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://examplesite.com/pageslug/
- Após o slug da página, insira uma hashtag (#) seguida pelo ID exclusivo da etapa 1. A aparência deve ser a seguinte:
https://examplesite.com/pageslug/#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 Salvare, em seguida, clique em Aplicarpara salvar seu 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.
Se estiver adicionando links de âncora à sua página inicial, você não precisará incluir o slug da página. Se alterar sua página inicial, adicione o slug a qualquer link de âncora que você criou na página inicial antiga ou eles não funcionarão corretamente.
Etapa 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 links
O exemplo acima usa um corpo de texto como link â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.
Para todos os tipos de link, adicione a URL e o ID exclusivo, conforme mostrado na Etapa 2 acima, usando este formato:
https://examplesite.com/pageslug/#unique-id
Formate o texto de entrada
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 Etapa 1:
<h id="unique-id">O link saltará para</h>
Link para um espaço em branco
O link de âncora funciona mesmo sem texto visível. Se não quiser que o texto apareça no seu ponto de destino, formate o texto de destino sem nada entre as tags:
<p id="unique-id"></p>
Slugs de página e links âncora
Na maioria dos casos, recomendamos adicionar a URL e o slug da página antes do ID exclusivo. Sem o slug da página, o link de âncora não vai funcionar:
- No Internet Explorer
- Se for um link de navegação
- Se você estiver adicionando um link para outra página
Links de âncora sem o URL do site também podem ter problemas nos navegadores móveis Safari. Para encontrar o URL da sua página, acesse slugs de URL.
Se nenhum visitante usar a versão móvel do Internet Explorer ou 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 a URL nem o slug da página.
Dica: veja qual navegados seus visitantes usam pelo painel Análise de Tráfego.
Link para o início
Para criar um link para o topo da página, vincule o cabeçalho usando 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, substitua-a na primeira tag <a>.
- Clique em Save (Salvar).
Este método vincula o topo de cada página em todo o site. Você pode usar o mesmo processo para vincular a parte superior de uma única página adicionando o código às configurações avançadas da página.
Limitações e melhores práticas
Links âncora podem ser uma ferramenta poderosa para ajudar visitantes a navegar em seu site, mas é bom atentar-se a algumas coisas.
Um ID somente pode ser usado uma vez em cada página
Por exemplo, depois de usar o panda ID em sua página inicial, você não poderá adicionar panda como um ID posteriormente na sua página inicial. Você poderia usá-lo em outra página, mas não uma segunda vez na página inicial.
IDs diferenciam maiúsculas e minúsculas
Se o seu HTML indicar id="Panda", mas o link listar o ID como #panda, o link não funcionará.
O ID exclusivo se torna parte da URL após o link âncora ser clicado
Quando um visitante clica em um link âncora, o ID exclusivo é exibido no final do URL do site.
É possível usar qualquer texto para seu ID exclusivo
A criação de um ID de fácil memorização pode agilizar o processo de configuração e ajudá-lo a solucionar problemas caso algo dê errado. IDs de fácil memorização costumam ser os que fazem sentido lógico; por exemplo, usando #top para um link "Voltar ao topo".
Links âncora também podem ser uma forma de adicionar humor e personalidade ao seu site. Lembre-se que os visitantes verão o ID no final do URL.
A seção vinculada será exibida no topo do navegador.
O texto de destino é exibido no topo do navegador, ou o mais alto possível se não houver muito conteúdo abaixo.
Se não quiser que seu texto esteja no topo da janela do navegador, é possível criar espaço antes dele adicionando tags <p> com espaços rígidos à cópia de texto de destino. Em HTML, um espaço rígido é
Cada conjunto de tags <p> </p> que você adiciona antes que o texto acrescente uma quebra de linha extra. Veja as imagens abaixo para referência.
Manter os links atualizados
Se você alterar o domínio principal ou atualizar o slug da página no futuro, atualize também seus links de âncora. Os links de âncora não funcionarão corretamente se usarem URLs desatualizados.
Resolução de problemas
Se um link âncora não estiver funcionando, confira:
- Você adicionou a URL conforme descrito na Etapa 2, incluindo o slug da página e dois símbolos //. Isso é especialmente importante para links de navegação, links de outras páginas e no Internet Explorer.
- Se o ID exclusivo é exatamente o mesmo no link e no texto de destino. Caso haja qualquer diferença na ortografia ou nas maiúsculas e minúsculas, o link não funcionará.
- Se o HTML do texto de destino foi configurado corretamente. Por exemplo, se o ID exclusivo for #bamboo, o link que você adicionará ao HTML do texto de destino será id=“bamboo”
- Você adicionou www. no início do URL, se o domínio principal o contiver.
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 está logado. Em vez disso, faça o teste em um browser anônimo.
- Se 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 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 para auxiliar você:
- Conheça as práticas recomendadas para adicionar um código personalizado.
- Leia nosso guia geral sobre personalizações de terceiros.
- Visite o Fórum do Squarespace, nossa comunidade para clientes e desenvolvedores.
- Contrate um Squarespace Expert para criar um código personalizado para o seu site.
Links de âncora no celular
Dependendo do dispositivo e do navegador, o comportamento do link de âncora pode variar no celular. Por exemplo, quando seu link de âncora inclui o URL completo conforme recomendamos, o navegador pode recarregar a página no ponto de destino em vez de avançar instantaneamente para o ponto de destino.
Se preferir um comportamento diferente do link de âncora no dispositivo móvel, você pode tentar formatos alternativos para o link de âncora, como /pageslug #unique-id ou #unique-id, mas lembre-se de que esses formatos podem não funcionar para determinadas configurações ou em determinados navegadores móveis, como o navegador móvel Safari.
Para saber mais, analise os slugs de página e os links de âncora.
Links de âncora na versão 7.0
Se o seu site estiver na versão 7.0, há algumas considerações especiais a serem feitas ao configurar links de âncora.
Ajax e links âncora
O Ajax é um método especial para carregamento de sites que torna as páginas com conteúdo pesado muito mais rápidas. No entanto, ele pode interferir nos links de âncora, especialmente em dispositivos móveis.
Se as etapas acima não funcionarem e o seu template aceitar o Ajax, desative-o temporariamente nos estilos do site para ver se isso está causando o problema. O Ajax está disponível nestas famílias de templates:
- Brine
- Farro
- Tremont
- York
Links de âncora da Página Índice
As Páginas Índices empilhadas têm uma maneira alternativa de adicionar links de âncora que não exigem código. Para saber mais, acesse Adicionar links de âncora da Página Índice.