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

Ultima atualização 28 de Junho de 2024

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 é para as Páginas de Índice na versão 7.0. Para adicionar links âncora na versão 7.1 ou em outros tipos de páginas na versão 7.0, acesse criação de links âncora.

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.

Dica

alguns índices em grade aceitam um recurso semelhante. Você também pode usar um código personalizado para adicionar links de âncora simples 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.

Dica

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 o visitante deve clicar. Estas etapas usam um link de texto como exemplo, mas pode ser de qualquer tipo. No bloco de texto, destaque o texto e clique no ícone de link, na barra de ferramentas do bloco de texto.

Dica

o índice de cada template tem opções exclusivas. Para saber mais, veja o 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ê adicionou o link no Step 2 a uma seção dentro do mesmo Índice, pode pular este step.

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. Abra o editor de links novamente.
  3. Adicione o slug da página antes do link de âncora entre dois símbolos de /, desta forma:
https://siteexemplo.com/indexslug/#pageslug
  1. Pressione Enter.

Anotação

se o seu domínio principal incluir www. antes do nome de domínio, inclua isso também no URL do link de âncora.

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 funcionalidade 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.
  • Se você está tendo problemas em dispositivos móveis e seu template for da família Brine, tente desativar o Ajax temporariamente para ver se isso é a causa do problema.
  • 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