Adicionando um link de âncora para a página índice na versão 7.0

Ultima atualização 13 de fevereiro de 2025

Na versão 7.0, o URL das páginas índice empilhadas tem estrutura exclusiva, que você pode usar para criar um link de âncora (ou "salto na página") sem código personalizado. Esse link de âncora leva você a um lugar específico na página índice. 

Por exemplo: ao se clicar no botão Veja nossos trabalhos no site demo do template Hayden, ele rola a página até a seção "Moreau".

Acessando o recurso

Este guia cobra as páginas índice na versão 7.0. Para adicionar um link de âncora na versão 7.1, consulte "Criando um link de âncora". Para adicionar um link de âncora em uma página de layout na versão 7.0, consulte "Criando manualmente um link de âncora na versão 7.0".

Templates suportados

Os links de âncora da página índice funcionam melhor em templates com a página índice empilhada. Nas seguintes famílias de templates, um clique no link de âncora leva para essa seção na página índice.

alguns índices em grade aceitam um recurso semelhante. Você também pode usar um código personalizado para adicionar manualmente um link de âncora em qualquer template.

Step 1 - Encontre o slug

No painel Páginas, passe o mouse sobre a seção do Índice para a qual o link será criado. Clique em o ícone de engrenagem para abrir as Configurações de Página dessa seção.

Copie o slug do campo Slug do URL. Use esse slug para criar um link de âncora.

o slug pode aparecer na barra do browser quando visitantes acessam essa seção. Para alterar o slug, digite um novo texto no campo.

Adding_Index_Page_anchor_links.png

Adicione o link no qual os visitantes devem clicar. Você pode usar qualquer tipo de link; no exemplo, usamos um link de texto.

Em um bloco de texto, destaque o texto e clique no ícone de link na barra de ferramentas do bloco de texto.

o índice de cada template tem opções exclusivas. Saiba mais no guia da família do seu template: Bedford, Brine ou Pacific.

Etapa 3 - Adicione o slug da página

Em seguida, siga estes steps:

  1. No campo URL, cole o slug que você copiou no Passo 1.
  2. Adicione um símbolo de hashtag (#) no início do slug para completar o link. O link de âncora neste exemplo é #hours-and-location.
  3. Desative a opção Abrir link em uma nova guia.
  4. Nos templates Pacific, Charlotte, Horizon e Naomi, adicione -section ao fim do link de âncora, da seguinte forma: #hours-and-location-section
  5. Pressione Enter.

Step 4 - Adicione o slug do Índice

Se você criou o link no Passo 2 em uma seção na mesma página índice, pode pular essa etapa.

Para qualquer outro link, como links de navegação ou links em outras páginas, inclua o slug da Página Índice antes do link âncora. Isso garantirá que seus links funcionem a partir de:

  • Outra página.
  • Da navegação do seu site.
  • O URL direto de uma subpágina.

Para adicionar isso:

  1. Copie o slug para sua Página Índice a partir de suas Configurações de Página.
  2. Reabra o editor do link.
  3. Adicione o slug da página antes do link de âncora entre dois símbolos de /, desta forma:
/indexslug/#pageslug
  1. Pressione Enter.

Exemplos

Adicione links de âncora a várias seções para ajudar os visitantes a navegarem em sua Página Índice. Este exemplo usa o template Brine e três tipos de links diferentes: Bloco de Botões, link de texto e imagem de URL de clickthrough.

Exemplos de links de âncora do template Brine usando um Bloco de Botão, um link de texto e uma URL de clickthrough de imagem.

Para criar uma navegação, organize os links de âncora lado a lado. Este exemplo usa o template Bedford com os correspondentes links de texto.

Exemplos de links de âncora do template Bedford dispostos lado a lado.

As seguintes famílias de template com página índice em grade aceitam uma opção integrada semelhante:

  • Avenue
  • Flatiron
  • Montauk

Você pode criar um link de âncora da Página Índice nesses templates usando o seguinte formato de URL:

/index-page-slug/#/page-slug

Essa é uma boa opção para vincular a navegação ou outras páginas do seu site ao índice. A página se abre com uma formatação específica do índice, da mesma forma que seria ao clicar na imagem em destaque dela no índice.

Este exemplo usa o template Avenue.

Exemplo de comportamento do link de âncora em uma grade da Página Índice.

Resolução de problemas

Se um link âncora não está funcionando, estas dicas podem ajudar:

  • Se necessário, veja se você adicionou o slug da página índice conforme descrito no Passo 4, incluindo os dois símbolos /. Isso é exigido nos links de navegação e de outras páginas.
  • Nos templates da família Brine, se você notar algum problema na versão móvel, tente desativar o Ajax temporariamente para ver se ele é a causa.
  • Veja se o slug da página índice e o slug da página de seção estão corretos. Se você alterou um deles, será necessário atualizar manualmente o link de âncora.
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Adicionando um link de âncora para a página índice na versão 7.0