Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o espanhol, outros guias estão disponíveis apenas em inglês.

Criar links âncora

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.

Existem dois tipos de links âncora que você pode usar em seu site:

  • Links de âncora simples - um link que o direciona para um lugar específico na Página de Layout ou áreas de blocos editáveis. Isso requer um Bloco de Código.
  • Links âncora de Página Índice - Páginas Índice Empilhadas possuem uma forma alternativa de adicionar links âncora  que não requer código.

Este guia explica como adicionar um link âncora simples.

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, destaque o texto 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

No campo Link , adicione:

  1. A URL do seu site
  2. 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/

Em alguns links de âncora, este step é opcional, mas recomendável na maioria dos links. Para que o visitante permaneça na mesma página, clique em o ícone de engrenagem 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á sua ID exclusiva.

  • 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.

Após adicionar a ID exclusiva, ela deve ficar assim:

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

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

No editor de conteúdo da página, role até a seção para qual o link deve levar o visitante e adicione um Bloco de Código.

Substitua o texto "Hello, World!" (Olá, mundo!) com o texto que deseja 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.

code-block-example.jpg

Passo 5 - Salve

Clique em Adicionar link e, em seguida, 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 âncora no Step 1, mas você pode usar qualquer tipo de link, incluindo 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, crie o ID exclusivo como mostrado na Etapa 2 e Etapa 3 acima, usando o formato:

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

Formate o texto de entrada

Para formatar o texto de landing 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 na Etapa 4:

format-text-as-h1s.jpg

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. Add text and an anchor link to the page or footer as described Step 1 through Step 3. You may want to use Back to top as the text, and #top as your unique ID. You don't have to include the URL for the page or a slash mark (/) with the unique ID.
  2. No Menu Inicial, clique em Configurações, depois em Avançado e finalmente em Injeção de código.
  3. No campo de Título, adicione este código: <a id="top"></a> 
  4. Se você usou uma ID exclusiva diferente de #top ao configurar o link, certifique-se de substituí-la na primeira tag <p>.
  5. Clique em Save (Salvar).
Dica: é possível usar o mesmo processo para linkar ao topo de páginas individuais.

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

Além disso, os links de âncora sem a URL do site podem ter problemas nas versões móveis do Safari. Para encontrar a URL da 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 a formatação #unique-id sem a URL nem o slug da página.

Dica: veja qual browser seu visitantes usam pelo painel Métricas de Tráfego

Ajax e links âncora

O Ajax é um método especial para carregar sites que torna as páginas que possuem conteúdo pesado muito mais rápidas e ágeis. No entanto, ele pode interferir com a funcionalidade link âncora, especialmente em dispositivos móveis.

Se o seu template for compatível com o Ajax, desative-o temporariamente no painel Estilos do Site para ver se isso é a causa do problema.

O Ajax está disponível nos templates das seguintes famílias:

  • Brine
  • Farro
  • Tremont
  • York

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: após usar a ID "panda" na página inicial, não é mais possível adicionar "panda" como ID na página inicial. Você pode usá-la em outra página, mas apenas uma vez na página inicial.

IDs diferenciam maiúsculas e minúsculas

Se seu HTML diz id = "Panda", mas o link lista 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.

If you don't want your text to be at the very top of the browser window, you can create space before it by adding <p> tags with non-breaking spaces to the landing text copy. In HTML a non-breaking space is &nbsp; 

Every set of <p>&nbsp;</p> tags you add before the text adds an extra line break. See the images below for reference.

Resolução de problemas

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

  • Se o Ajax está desativado.
  • Se você adicionou um slug de página, conforme descrito na Etapa 3, incluindo os dois símbolos /. Isso é muito 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 está configurado corretamente. Por exemplo, se o ID exclusivo for #bamboo, o link que você adicionará ao HTML do texto de destino será id=“bamboo”

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 o template já estiver usando esse ID. Experimente usar outro ID ou alterar as letras maiúsculas e minúsculas.
  • Páginas Índice do Squarespace costumam ter seu próprio recurso de link âncora integrado, que pode entrar em conflito com os links âncora sendo adicionados. Para saber mais, acesse Adicionar links âncora em Páginas Índice. Se links âncora não estiverem funcionando de forma adequada em sua Página Índice, tente usar um ID diferente ou alterar as letras 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.
Este artigo foi útil?
Utilizadores que acharam útil: 119 de 250