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.

Etapa 1 – Crie um link

Adicione o link no qual os visitantes devem clicar. Este exemplo mostra um link de texto, mas é possível usar qualquer tipo.

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.

Step 2 - adicione a URL e o slug da página

Em alguns links de âncora, este step é opcional, mas recomendável na maioria dos links.

No campo Endereço da web, adicione:

1. A URL do seu site
2. O slug da página que será vinculada (mesmo se for a mesma página)
3. Outra barra diagonal (/)

Deve ficar assim:

https://examplesite.com/pageslug/

Para que o visitante permaneça na mesma página, clique em e veja se a opção Abrir em nova janela está desativada.

Dica: se você alterar o domínio principal ou o slug da página no futuro, modifique também o link de âncora.

Step 3 - crie uma ID exclusiva

Após o slug da página, digite uma hashtag (#), seguida de um texto. Esse texto será seu ID exclusivo.

• 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. Consulte nossas dicas de melhores práticas para saber mais.

Depois de adicionar o ID exclusivo, o URL deve ficar assim:

https://examplesite.com/pageslug/#unique-id

Clique em  Aplicar para salvar seu link.

Etapa 4 - Vincule o ID exclusivo a uma seção na sua página.

No editor de página, role até a seção para onde você deseja que o link leve os visitantes e adicione um Bloco de código.

Substitua as palavras Olá, Mundo! pelo texto desejado na página. Em seguida, adicione

id="unique-id"

dentro da primeira tag, inserindo seu próprio ID exclusivo entre as aspas, assim:

<p id="unique-id">O link saltará para cá</p>

Dica: Não inclua o slug de página ou hashtag a partir do link âncora.

Clique em Aplicar.

Passo 5 - Salve

Passe o cursor sobre Concluído e clique em Salvar. O link criado no Passo 1 agora direciona os visitantes para o texto elaborado no Passo 4.

Use diferentes tipos de links

O exemplo acima usa um corpo de texto como link de âncora no Step 1, mas você pode usar qualquer tipo de link, inclusive botões e clickthrough de imagem. Acesse Adição de links ao site para conhecer as diferentes opções de links.

Para todos os tipos de link, adicione o URL e crie o ID exclusivo, conforme mostrado na Etapas 2 e na Etapa 3 acima, com este formato:

https://examplesite.com/pageslug/#unique-id

Formate o texto de entrada

Para formatar o texto de entrada de forma diferente do corpo de texto, altere as tags <p> e </p> no Passo 4. Caso não esteja familiarizado com HTML, use as tags de título 1: <h1> </h1>

Ao usar tags diferentes, adicione um ID exclusivo da mesma forma que você fez no Step 4:

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 URL slugs.

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 browser seu visitantes usam pelo painel Métricas de Tráfego. 

Link para o início

Para criar um link para o topo da página, link o cabeçalho usando a Injeção de Código. A Injeção de Código é um recurso premium.

1. Adicione texto e um link de âncora à parte inferior ou ao rodapé da página, conforme descrito da Etapa 1 à Etapa 3, mas não inclua o URL do site ou uma barra (/) antes do ID exclusivo. Você pode querer usar Voltar ao início como texto e #top como ID exclusivo.
2. No Menu Inicial, clique em Configurações, depois em Avançado e finalmente em Injeção de código.
3. No campo Título, 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 <p>.
4. Clique em Save (Salvar).

Este método torna possível o vínculo ao 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 você não quiser que seu texto seja exibido no topo da janela do navegador, crie espaços antes do texto adicionando as tags <p> com espaços rígidos à cópia do texto da landing. Em HTML, um espaço rígido é um &nbsp; 

Cada conjunto de tags <p>&nbsp;</p> inserido antes do texto adiciona uma quebra de linha extra. Confira as imagens abaixo para ter uma referência.

Resolução de problemas

Se um link âncora não estiver funcionando, confira:

• Você adicionou um slug de página, conforme descrito no Step 3, incluindo os dois símbolos /. Isso é importante principalmente nos links de navegação, nos 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ê deve 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.

O link de âncora não vai funcionar mesmo se todas as configurações estiverem corretas nos seguintes casos:

• Se ele usar o domínio integrado do seu site, e você fizer o teste enquanto estiver conectado. Em vez disso, faça o teste em um navegador anônimo.
• Se a página já utiliza esse ID. Tente usar um outro ID ou alterar a combinação de maiúsculas e minúsculas.

Atenção: a equipe de Suporte ao cliente do Squarespace pode ajudar nos steps deste guia, mas não dá instruções relativas a outras modificações de código. Veja mais ajuda no Fórum Squarespace ou a nossa lista de recursos de ajuda com códigos personalizados.

Ajax e links de âncora (versão 7.0)

Na versão 7.0, o Ajax é um método especial para o carregamento do site que torna as páginas pesadas muito mais rápidas e ágeis. No entanto, ele pode interferir no funcionamento do link de âncora, especialmente em dispositivos móveis.

Se as etapas de solução de problemas acima não estiverem funcionando e seu modelo for compatível com Ajax, desabilite-o temporariamente nos Estilos do Site para ver se isso está causando o problema. O Ajax está disponível nestas famílias de modelos:

• Brine
• Farro
• Tremont
• York

Links de âncora de páginas índice (versão 7.0)

Na versão 7.0, as páginas índice empilhadas têm uma maneira alternativa de adicionar links de âncora que não exigem código. Para saber mais, acesse Como adicionar links de âncora de página de índice.