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") é um URL especial que direciona você para um lugar específico na página. Nas páginas índice empilhadas, o URL tem uma estrutura específica, usada para criar links de âncora sem código personalizado.

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

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

Step 2 - Crie o link

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 do 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, 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.
  • O URL direto 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.

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.

Página Índice de grade e links â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.
  • Se você alterou um deles, será necessário atualizar manualmente o link de âncora.
Este artigo foi útil?
Utilizadores que acharam útil: 46 de 180
Como adicionar links de âncora na Página Índice