5 coisas legais que você pode fazer no Divi com links de âncora

Links de âncora podem melhorar a navegação e ajudar a organizar seu conteúdo, especialmente em um site com conteúdo longo. Um dos outros principais benefícios de usar links âncora além da navegação é o fato de que eles são fantásticos para SEO. Embora o conceito de usar links de âncora seja muito simples, pode ser difícil saber por onde começar. Na verdade, foi uma das primeiras coisas que procurei quando comecei a desenvolver sites em WordPress.

Este artigo mostra 5 coisas legais que você pode fazer no Divi com links de âncora. Para esses exemplos, tudo que você precisa é Divi e desejo de aprender.

Vamos lá!

Você aprenderá como:

1. Role até e abra uma alternância com um link âncora em Divi
2. Crie um menu de navegação de uma página
3. Saltar para uma seção da página de outra página
4. Use o Divi Dot Navigation
5. Adicionar links âncora aos seus títulos

5 coisas legais que você pode fazer no Divi com links de âncora

Inscreva-se no nosso canal no Youtube

Role até e abra uma alternância com um link âncora em Divi

Os botões de alternância são um dos elementos que podem aprimorar a experiência do usuário. Chame-me de preguiçoso (eu usaria a palavra eficiente), mas quanto mais fácil for para eu conseguir minhas informações, melhor. Sou um grande fã de alternadores para determinados tipos de conteúdo.

Um dos melhores usos que já vi para alternadores é para páginas de perguntas frequentes. Eles funcionam muito bem para revelar pequenas informações nas quais o usuário deseja se concentrar. Isso levará apenas um minuto e algumas linhas de JavaScript para ser concluído. Você também pode usar uma variação desse método para abrir abas ou acordeões e, embora isso possa parecer difícil, na verdade não é muito complexo.

Primeiro, crie uma nova página e implemente o construtor visual. Em seguida, selecione a opção “Choose a Premade Layout”. No pop-up Carregar da biblioteca, encontre o layout da página de Perguntas frequentes do contador digitando “faq” na barra de pesquisa. Em seguida, clique no layout e, na visualização que aparece, clique no botão Use This Layout para implantá-lo em sua página.

Agora você está pronto para adicionar sua funcionalidade de link de âncora. Para este exemplo, vou usar o botão na seção de cabeçalho superior como o link de âncora para que, quando clicado, a página role para um botão de alternância específico que abrirá simultaneamente de forma automática.

Para fazer isso, primeiro abra as configurações do botão e adicione o seguinte URL de link para o seu botão:

URL do link do botão: # toggle3

Eu dei a este link de âncora o id “toggle3” para ajudar a lembrar que desejo um link para o terceiro botão de alternância na página. Este nome de id será correlacionado ao ID CSS de alternância que adicionaremos mais tarde para que o botão saiba para qual alternador rolar.

Em seguida, adicione uma classe CSS exclusiva ao módulo do botão:

Classe CSS: open-toggle

Em seguida, salve suas configurações.

O nome da classe ajuda a lembrar você da ação da alternância de abertura ao clicar no botão. Usaremos essa classe em nosso jqeury personalizado para obter a funcionalidade desejada em um momento.

Em seguida, role a página para baixo até a linha que contém as duas colunas de módulos de alternância que estão sendo usados ​​para as perguntas frequentes. Abra a configuração do terceiro módulo de alternância na primeira coluna. Este é o módulo para o qual queremos rolar e abrir ao clicar no botão (ou link de âncora).

Na guia Avançar, adicione o seguinte ID CSS:

ID CSS: toggle3

É importante que isso corresponda exatamente ao URL do link do botão usado anteriormente. A única diferença aqui é que você deve deixar de fora o “#”.

A última etapa envolve adicionar algum código personalizado ao corpo de nossa página. Para fazer isso, navegue até Divi Theme Options, abra a guia Integration e cole o seguinte na seção body, conforme mostrado no GIF abaixo.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Não se esqueça de envolver o código na tag de script adequada.

Agora você pode testar sua página para ver se funciona.

Para entender um pouco o que esse código está fazendo. Vamos olhar mais de perto. Aqui está o snippet novamente:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

No código, o seletor “a.open-toggle” se refere ao botão com nossa classe personalizada. O seletor “# toggle3.et_pb_toggle_2 .et_pb_toggle_title” refere-se ao título do alternador com o id “toggle3” e a classe “et_pb_toggle_2”.

A classe “et_pb_toggle_2” é na verdade a classe associada ao terceiro alternador. Isso ocorre porque Divi dá ao primeiro alternador a classe “et-pb_toggle_0”, o segundo alternador “et-pb_toggle_1” e assim por diante.

Portanto, se você quiser saber qual é a classe de um botão de alternância específico em sua página, você pode simplesmente contar de 0 começando com o primeiro botão de alternar na página e ir descendo. Ou você pode apenas inspecionar o código html para encontrar a classe dessa maneira.

É importante saber isso para que você possa atualizar seu código de acordo. Por exemplo, se eu quisesse que meu botão abrisse o segundo botão de alternância na página, eu substituiria “# toggle3.et_pb_toggle_2 .et_pb_toggle_title” por “# toggle3.et_pb_toggle_1 .et_pb_toggle_title”.

Este trecho de código é uma variação do seguinte conceito. Tentei mantê-lo o mais simples possível.

Essa técnica bacana também funcionaria com abas e acordeões. O truque é identificar as classes css corretas para o item acordeão ou guia para que você possa usá-lo no código.

Crie um menu de navegação de uma página

Esse tipo de design de menu é popular para sites de uma página. Pode ser útil criar links no menu para pular de uma seção para outra em sua página. Isso é especialmente útil se você estiver criando um site de uma página ou uma página de destino. Você pode verificar a documentação sobre como criar sites de uma página com Divi para obter mais informações sobre este processo.

Aqui está uma visão geral rápida de como fazer isso.

Isso funcionará para qualquer layout predefinido, mas, para este exemplo, vou usar o Layout da página inicial do Web Freelancer. Crie uma nova página, implante o construtor visual, selecione “Choose Premade Layout” e, em seguida, implante o Layout da página inicial do Freelancer em sua página.

Agora você precisa adicionar CSS IDs a cada seção que deseja vincular (ou rolar). Encontre a seção intitulada “Meus serviços”. Abra as configurações da seção, clique na guia avançada e adicione o seguinte ID CSS:

ID CSS: serviços

Em seguida, encontre a seção "trabalho em destaque" e dê a essa seção um ID CSS da seguinte forma:

ID CSS: trabalho

E adicione também o seguinte ID CSS à seção “Sobre nós”:

ID CSS: sobre

Com essas três seções configuradas corretamente com seus IDs CSS exclusivos, podemos criar nossos links de âncora de menu.

No painel, navegue até Aparência> Menus e crie um novo menu principal . Em seguida, crie três links personalizados com o seguinte URL e Texto do Link:

Link personalizado 1
URL: #services
Texto do link: Serviços

Link personalizado 2
URL: #work
Texto do link: Trabalho

Link personalizado 3
URL: #about
Texto do link: Sobre

Não se esqueça de selecionar definir seu local de exibição para o menu principal. Em seguida, salve seu menu.

Agora, ao visitar sua página, você pode experimentar. Você pode notar que há uma rolagem suave. Isso ocorre porque o tema Divi adiciona rolagem suave automaticamente - esse recurso foi adicionado na versão 2.4 do Divi.

Para obter mais inspiração sobre a construção de sites matadores no estilo de uma página, confira estas postagens:

• Como construir uma barra lateral fixa responsiva com links de âncora
• Como criar seções de tela inteira com links de rolagem superior e inferior com Divi
• Como criar links ativos na rolagem para sites da Divi de uma página

Saltar para uma seção da página de outra página

Podemos usar o exemplo acima para demonstrar isso. Como adicionamos um CSS ID a três seções da página (serviços, trabalho, sobre), não apenas podemos pular para essas seções usando nossos links de âncora de menu, mas também podemos pular para essas seções a partir de uma página completamente diferente.

Tudo o que você precisa fazer é usar a URL do link âncora ao criar um link em uma página diferente. Se você quisesse colocar um link para a seção de serviços com o ID “serviços”, seria algo como www.yourdomain.com/page/#services .

Aqui está um exemplo de como a página carregará e rolará para a seção “Meus serviços” ao vincular a essa seção de outra página.

Isso funciona muito bem para muitos apelos à ação diferentes (ou seja, aprenda mais, obtenha Divi, vote em mim! Etc.) para os quais você pode querer pular de diferentes páginas do seu site.

Use o Divi Dot Navigation

Tecnicamente, esses são links de âncora integrados. Você não precisará adicionar seus próprios ids de seção CSS. O recurso Dot Navigation cria automaticamente links de âncora fora de suas seções. Para ativar a navegação por pontos em sua página, basta definir a opção Navegação por pontos como “LIGADA” nas Configurações da página Divi no canto superior direito da tela ao editar sua página. Assim que você ativa a navegação por pontos, o Divi adiciona automaticamente um menu transparente ao lado de sua página. Cada ponto rola para as seções em sua página quando clicado.

Para mais informações, há um ótimo post sobre como adicionar rótulos à sua navegação de pontos.

Adicionar links âncora aos seus títulos

Adicionar links de âncora aos seus títulos é sempre uma boa ideia. É uma ótima maneira de indexar páginas mais longas com muito conteúdo, permitindo que você navegue facilmente para cada título na mesma página ou crie links para esses títulos a partir de outras páginas do seu site. Também ajuda os motores de busca a rastrear o seu site.

Para adicionar um CSS ID aos seus cabeçalhos usando o Divi Builder, abra o módulo que contém o texto do cabeçalho. Certifique-se de que a guia de texto esteja aberta. Encontre a tag de cabeçalho (h1, h2, h3, etc ...) e, a seguir, insira um id entre os colchetes da tag de cabeçalho inicial. Aqui está um exemplo de um cabeçalho h3 com o id “webdesign”:

<h3 id="webdesign">Website Design</h3>

Agora posso criar um link para este cabeçalho de qualquer lugar, desde que use o URL do link de âncora correto. Que para este exemplo deve ser parecido com isto:

www.yourdomain.com/page/#webdesign

Isso também será útil para páginas ou postagens que não estão usando o Divi builder. Para adicionar links âncora aos títulos dessas páginas ou postagens, abra a guia Texto no editor de texto do WordPress. Basta localizar o título de sua escolha e adicionar o id dentro da tag do título, conforme mostrado abaixo.

Isso é exatamente o que eu fiz para este post. Os links das seções no topo desta postagem servem como um bom índice que leva aos diferentes títulos da postagem.

Coisas muito legais.

Empacotando

Links de âncora têm alguns usos práticos excelentes, mas não enlouqueça com eles, porque você deve sempre considerar primeiro seu público e seus objetivos. Lembre-se de que um bom design tem a ver com usabilidade e função, portanto, em alguns casos, os links de âncora podem ser muito úteis. Mas, em outros, significa apenas que os usuários vão e voltam nas seções de paralaxe e acabam se perdendo. Esperançosamente, você conseguiu obter algumas dicas úteis deste post.

Você tem alguma dica ou pergunta sobre links âncora? Conte-nos sobre suas experiências na seção de comentários abaixo.