Links âncora

Os links âncora são usados ​​para navegar para conteúdo específico em uma página, e não simplesmente entre as próprias páginas.

Existem muitos usos para links âncora, como sites de uma página e vendas e páginas de entrada.

Por exemplo, se você tiver uma página de vendas de formulário longo descrevendo seu produto, poderá colocar um botão ‘Comprar’ em vários locais da página, todos com link para a parte inferior da página onde o usuário pode realmente comprar seu produto.

Dominar links de âncora no Divi é realmente muito simples.

]Use os links de ancoragem abaixo para navegar até a seção necessária

 ÂNCORAS DO MENU PRINCIPAL   | ÂNCORAS DE BOTÃO   | ÂNCORAS DE TEXTO

Então vamos cozinhar!

ÂNCORA DO MENU PRINCIPAL.

Começaremos com um link de âncora no menu principal.

Em Aparência> Menus , selecione o menu ao qual você deseja adicionar o link âncora e clique no menu suspenso Links personalizados, à esquerda. Decida um nome exclusivo para o seu link de âncora (as âncoras usam IDs e, ao contrário das classes, os IDs devem aparecer apenas uma vez por página) e, em seguida, coloque-o no campo URL do link personalizado e o preceda com um hash ( # ). Aqui você pode ver que eu usei #myanchor . Adicione o título que você deseja exibir ao seu link no campo Texto do Link e clique em Adicionar ao Menu .

Você verá o novo item adicionado ao seu menu com o URL como âncora.

Em seguida, selecione a seção, linha ou módulo para o qual você deseja que o seu link de âncora role quando clicado, clique na guia Avançado e, na seção ID do CSS , insira a âncora exclusiva que você escolheu sem o hash anterior ( # ).

Agora que você salvar e atualizar sua página, sua nova âncora será vinculada à seção, linha ou módulo que você definiu.

ANCORAR EM UM BOTÃO

Agora vamos dar uma olhada na criação de uma âncora em um botão.

O princípio é o mesmo, mas adicionamos a âncora ao campo URL do botão com o hash anterior (#)

Em seguida, adicionamos a âncora ao campo ID do CSS na guia Avançado da seção, linha ou módulo ao qual queremos vincular.

Agora que você salvar e atualizar sua página, seu novo botão será vinculado à seção, linha ou módulo que você definiu.

ÂNCORA DE LINK DE TEXTO

Por fim, veremos uma âncora de link de texto simples.

Supondo que queremos vincular a partir de algum texto em um parágrafo, nosso HTML se pareceria com isso, você pode ver que substituímos o URL por nossa âncora exclusiva, precedida por um hash (#).

Novamente, podemos adicionar nossa âncora ao campo CSS ID de qualquer seção, linha ou módulo, mas também podemos adicioná-lo a outro texto, para que a âncora sirva apenas para vincular frases ou parágrafos. Por exemplo, aqui vinculamos a um cabeçalho:

Aqui, temos um link para o início de um parágrafo:

E podemos até vincular uma palavra ou sentença específica dentro de um bloco de texto usando uma tag span como esta:

Essas soluções funcionam para vincular ao conteúdo na mesma página, mas e se você desejar vincular a uma âncora em outra página?

Nesse caso, você precisa adicionar o nome da página antes da âncora; portanto, em seu botão, item de menu personalizado ou link de texto, você adicionaria sua âncora assim:

/ pagename / # myanchor

ao invés de apenas

#myanchor

Se você tiver um cenário em que deseja vincular novamente a uma âncora na página inicial a partir de qualquer outra página, por exemplo, se você tiver um site de uma página que também tenha um blog, e em postagens únicas, será possível vincular novamente para uma âncora na página inicial, basta usar uma barra anterior como esta:

/ # myanchor

E é isso, muito simples né?