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

Como adicionar links de âncora na Página Índice

Link de âncora (ou "desvio de página") é uma URL especial que direciona você para um lugar específico na página. Páginas Índice empilhadas têm uma estrutura de URL específica, usada para criar links de âncora sem um código personalizado.

Por exemplo, se você clicar no botão Exibir nosso trabalho no site de demonstração do modelo Hayden, ele rolará a página para baixo até a seção "Moreau".

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 template, um clique no link de âncora leva para essa seção na Página Índice.

Dica: alguns Índices de grade são compatíveis com um recurso semelhante. Você também usar também 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 navegador quando os visitantes acessarem a seção. Você pode alterar o slug digitando outro texto no campo.

Adding_Index_Page_anchor_links.png

Step 2 - Crie o link

Adicione o link no qual o visitante deve clicar. Estes steps usam um link de texto como exemplo, mas pode ser de qualquer tipo. Em um 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 Link, cole o slug copiado na etapa 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. Clique em o ícone de engrenagem para abrir as configurações e veja se a opção Abrir em nova janela está desativada.
  4. Nos templates Pacific, Charlotte, Fulton, Horizon e Naomi, adicione -section ao fim do link de âncora, da seguinte forma: # hours-and-location-section
  5. Clique em Salvar.

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.
  • URL direta de uma subpágina.
  • Do Internet Explorer.

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. Clique em Salvar.
Observaçã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.

Organize os links de âncora lado a lado para criar uma navegação. Este exemplo usa o template Bedford e links de texto. 

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

Páginas Índice de grade e links de âncora

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 miniatura 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 Step 4, incluindo os dois símbolos /. Isso é exigido nos links de navegação, links de outras páginas e no Internet Explorer.
  • 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.
  • Verifique se o slug da Página Índice e o slug de página da seção estão corretos. Se você alterou qualquer um deles, será necessário atualizar o link de âncora manualmente.
Este artigo foi útil?
Utilizadores que acharam útil: 44 de 152
Como adicionar links de âncora na Página Índice