Como a Divi pode ajudá-lo a orientar os visitantes por meio de longas páginas da Web

Publicados: 2017-04-14

Não é segredo que a criação de um ótimo conteúdo de formato longo contribui para melhores classificações nos mecanismos de pesquisa. No entanto, essa estratégia pode facilmente sair pela culatra se o material for difícil de consumir ou navegar, criando uma experiência ruim para o usuário. É aí que entra a navegação in-page. Felizmente, o Divi vem com um conjunto de recursos e módulos nativos para ajudá-lo a guiar seus leitores por esse conteúdo.

Neste artigo, vamos primeiro explicar por que você deve considerar o uso de navegação in-page e, em seguida, mostrar três maneiras de implementá-la usando Divi. Vamos começar!

Por que você deve considerar o uso de navegação in-page

exemplo de navegação na página

As guias superiores são um exemplo de navegação na página. Cada guia representa um link para uma seção específica da página.

A navegação na página é essencial em dois cenários principais: conteúdo longo em geral e sites de uma página em particular. Como o cenário mudou para um conteúdo de formato longo nos últimos anos, a estruturação e a organização adequadas desse conteúdo tornaram-se mais importantes do que nunca. A capacidade de atenção está diminuindo e, se as pessoas tiverem que passar por muitas informações para chegar ao que procuram, é provável que você os perca.

A navegação in-page permite que você apresente seu conteúdo de uma forma muito mais digerível, aumentando a probabilidade de seu visitante explorar mais seu conteúdo. Isso pode ajudar a melhorar a experiência geral do usuário, reduzir as taxas de rejeição e, com sorte, resultar em um número maior de conversões.

3 maneiras de oferecer navegação in-page usando Divi

Um método popular de navegação in-page (que abordamos extensivamente em uma postagem anterior) é usar hiperlinks de texto âncora que vinculam a elementos internos na mesma página. No entanto, Divi oferece várias outras maneiras excelentes de ajudar a guiar seus usuários através do seu conteúdo de formato longo. Apresentaremos três dessas opções e mostraremos como implementá-las.

1. Habilite a navegação de pontos

Um exemplo de navegação de pontos

Como você pode ver no exemplo de imagem acima, uma vez ativado, o recurso de navegação por pontos aparece na forma de um menu pontilhado na lateral da sua página. Cada ponto representa uma seção naquela página específica, o que significa que seu visitante está constantemente ciente de qual ponto ele está. Também torna mais fácil pular para qualquer seção clicando no ponto correspondente, eliminando a necessidade de rolar por montes de conteúdo.

Você pode habilitar facilmente a navegação de pontos em qualquer postagem ou página. Primeiro, certifique-se de que está usando o Divi Builder e, se não estiver, habilite-o clicando no botão roxo Usar o Divi Builder .

Use o botão Divi Builder

No canto superior direito, em Divi Post Settings ( ou Divi Page Settings se você estiver em uma página ) , abra o menu suspenso Dot Navigation e escolha On .

Menu Divi Post Settings

Tudo pronto! A navegação por pontos agora deve aparecer em sua postagem quando você a visualiza. Conforme você adiciona mais seções, os pontos correspondentes são adicionados automaticamente ao menu.

Depois de habilitar a navegação de pontos, você pode conferir este vídeo com dicas para estilizar seu menu.

2. Separe o conteúdo usando o módulo de guias

Um exemplo de abas

Usar guias pode ser uma ótima maneira de separar pedaços de conteúdo, e você pode criá-los usando o módulo Divi Tabs. Apenas o conteúdo em uma guia ativa (a guia na qual eles acabaram de clicar) ficará visível para seus visitantes. Isso minimiza a chance de os visitantes ficarem sobrecarregados com a quantidade de material e permite que eles explorem em seu próprio ritmo, clicando em cada guia e consumindo seu conteúdo separadamente.

Um exemplo de um bom uso para guias é quando você deseja exibir serviços diferentes na mesma página. Por exemplo, se você é uma agência digital que oferece serviços de web design, marketing digital e branding, pode criar uma guia para cada um. Isso elimina a necessidade de o usuário rolar para baixo até o serviço relevante, oferecendo uma experiência geral aprimorada.

Para inserir um módulo de guias, no Divi Builder, selecione Inserir coluna (s) e escolha quantas colunas deseja adicionar. (Observe que você só precisa de um módulo de guias para criar um conjunto de guias lado a lado.)

O botão Inserir coluna (s)

Agora clique em Inserir Módulo (s) e escolha Guias .

A tela Inserir Módulo com o botão Abas destacado

Você chegará à tela de configurações do módulo, onde poderá clicar em Adicionar nova guia .

A tela de configurações do módulo de guia

Isso o levará à tela de configurações de guias individuais. Aqui você deve inserir seu título e conteúdo e clicar em Salvar .

A tela Configurações da guia

Você acabou de criar sua primeira guia. Você pode repetir esse processo até adicionar todas as guias necessárias e seu conteúdo.

3. Insira acordeões ou alternadores

Um exemplo de acordeão

Os acordeões são muito semelhantes às guias, com a principal diferença de que o conteúdo aparece em uma lista vertical. Sempre que você clica em um elemento de acordeão, qualquer outro elemento expandido é recolhido e o conteúdo do elemento clicado é exibido.

Os alternadores também são de natureza semelhante, exceto que clicar em um elemento de alternância não irá recolher os outros. Em vez disso, o conteúdo de todos os alternadores selecionados será exibido simultaneamente.

Um lugar popular para usar esses elementos é nas páginas de perguntas frequentes. Eles são convenientes porque as pessoas podem ver todas as perguntas de uma vez e apenas expandir as respostas relevantes para elas. Tanto os acordeões quanto os botões de alternância podem ser facilmente adicionados no Divi usando o módulo de acordeão e o módulo de alternância, respectivamente.

Inserir um acordeão no Divi é semelhante a adicionar guias, pois você pode adicionar vários itens em cada módulo. Siga as etapas para inserir um módulo acima, mas desta vez, selecione Acordeão em vez de Guias .

A tela Inserir Módulo com o botão Accordian destacado

Na tela de configurações resultante, clique em Adicionar Novo Item .

A tela de Configurações do Módulo Accordian

Na tela seguinte, insira seu título e conteúdo e clique em Salvar . Você pode então repetir isso para cada item em seu acordeão.

A tela de configurações de itens de Accordian

Criar um conjunto de alternadores em Divi também é semelhante a adicionar guias, mas a principal diferença aqui é que você criará um novo módulo Alternar para cada linha de conteúdo. Para inserir a primeira alternância, após clicar em Inserir Módulo (s) , selecione Alternar .

A tela Inserir Módulo com o botão Alternar destacado

Agora você verá a tela de configurações do módulo, onde pode adicionar o título, escolher um estado padrão (se a alternância deve ser aberta ou fechada por padrão quando o visitante chega pela primeira vez em sua página) e inserir seu conteúdo. Quando terminar, clique em Salvar e sair .

A tela Alternar configurações do módulo

Para adicionar o próximo módulo, clique em Inserir Módulo (s) abaixo do primeiro e novamente selecione Alternar e insira os detalhes apropriados. Continue adicionando módulos até que seu conjunto de alternadores esteja completo.

Conclusão

Pesquisar e escrever conteúdo de formato longo que agregue valor ao leitor costuma ser uma tarefa que consome muitos recursos. Consequentemente, é muito frustrante colocar todo esse esforço apenas para ter seu conteúdo abandonado na metade devido à estrutura e usabilidade inadequadas.

Neste artigo, abordamos por que você pode querer considerar a navegação in-page para seu conteúdo e oferecemos três maneiras diferentes de abordá-la usando Divi. Vamos recapitular esses métodos rapidamente:

  1. Habilite a navegação de pontos em seus posts e páginas.
  2. Separe o conteúdo usando o módulo Guias.
  3. Insira acordeões ou alterna usando o módulo Acordeão ou o módulo Alternar.

Você tem alguma dica para guiar os visitantes em longas páginas da web? Compartilhe-os conosco na seção de comentários abaixo!

Imagem em miniatura do artigo por Graphic farm / shutterstock.com