Divi Plugin Highlight - Divi Breadcrumbs Module

Quando estou navegando em um site, uma das ferramentas de navegação que procuro é a localização atual. Eles são ótimos para mostrar onde você está na hierarquia de navegação e facilitar a localização de outros artigos dentro da estrutura. Breadcrumbs podem ser adicionados ao Divi com um plugin chamado Divi Breadcrumbs Module.

Divi Breadcrumbs Module é um plugin de terceiros da CodeCrater que cria breadcrumbs com base em localização. Em outras palavras, mostra a hierarquia das categorias da página que você está lendo no momento. O também fornece links para cada elemento na hierarquia, para que você possa ver facilmente as últimas postagens de cada uma das categorias. As migalhas de pão são altamente personalizáveis.

Usando o Módulo Breadcrumbs, você pode colocar breadcrumbs em páginas e postagens individuais que usam o Divi Builder. Ele também funciona com o Extra e o plugin Divi Builder. Neste destaque do plug-in, daremos uma olhada no plug-in no Divi e no Extra e ver algumas das maneiras como ele pode ser personalizado.

Por que usar breadcrumbs?

As migalhas de pão deixam um rastro que mostra a hierarquia da categoria e é uma ótima maneira de melhorar a navegação. Eles não ocupam muito espaço e podem reduzir e simplificar o número de ações que um usuário deve realizar para navegar no seu conteúdo. Isso é especialmente importante se você tiver muitas categorias incorporadas.

O Divi Breadcrumbs Module melhora o SEO ao fornecer ao Google informações de hierarquia sobre o seu site. Isso significa que você deve escolher palavras-chave para as categorias nas quais deseja se classificar. Isso também força os designers a usar nomes de categorias mais fáceis de entender.

Breadcrumbs melhoram UX e UI. Eles não devem substituir a navegação de menu padrão, mas podem despertar o interesse e manter os visitantes em seu site por mais tempo.

Módulo de migalhas de pão Divi

Faça upload e ative o plugin normalmente. O módulo aparecerá em um vermelho brilhante chamado Hollywood Cerise. Muitos plug-ins breadcrumbs requerem Yoast porque eles estão puxando seus breadcrumbs do plug-in Yoast, mas o Divi Breadcrumbs Module não requer Yoast. Em vez disso, ele cria suas próprias migalhas de pão. Portanto, não há outros plug-ins necessários.

As configurações de conteúdo incluem ocultar a localização atual, adicionar seu próprio texto inicial, escolher o ícone separador (entre 12 opções), ocultar a página atual, as configurações de fundo e o rótulo do administrador. As configurações de design incluem o estilo dos ícones, texto e links e as opções de espaçamento padrão.

Exemplos de Módulo de localização atual do Divi

Este é um layout básico de artigo com o módulo de título da postagem com imagem, módulo de breadcrumbs e o módulo de texto dos artigos. Eu deixei as configurações de breadcrumbs em seus padrões.

É assim que o módulo se parece com as configurações padrão. Os links para Home e Fencing estão em azul para mostrar que são clicáveis. As migalhas de pão podem ser colocadas à esquerda, centralizadas ou à direita.

Neste exemplo, coloquei as migalhas de pão no centro e adicionei um fundo gradiente e aumentei os tamanhos das fontes para o título do artigo (14 pontos) e os links (12 pontos). O texto é branco. Já que eles são impressos em um gradiente, eu os fiz da mesma cor. Eu também mudei o separador de linha. Em uma postagem normal, eu não chamaria a atenção para migalhas de pão com um fundo gradiente, mas isso mostra o que você pode fazer com isso.

Adicionando breadcrumbs em um menu de largura total

O melhor lugar para adicionar migalhas de pão é na parte superior da página. Neste exemplo, criei uma postagem usando um menu de largura total e defini o preenchimento e as margens como 0 para a seção de largura total e a seção padrão. Eu incorporei as categorias para mostrar a hierarquia.

Alterei as cores da fonte da localização atual para corresponder ao menu de largura total, mas as suavizei para que não se destaquem. Mudei o separador para uma seta e removi a página inicial e a página atual da navegação do breadcrumb.

Observe que a localização atual segue a mesma estrutura incorporada que as categorias da imagem acima. O próprio artigo também inclui essas categorias, mas não há estrutura hierárquica. Eles podem ser removidos do título se você não quiser mostrar as mesmas categorias várias vezes.

Neste exemplo, coloquei a cor do plano de fundo na linha, tornei-a na largura total, alterei a cor da fonte para que não se sobreponha ao menu e adicionei 1 pixel ao espaçamento das letras. Pequenas mudanças podem fazer uma grande diferença.

Essas são as mesmas configurações usando o plano de fundo dentro do módulo breadcrumbs em vez da linha. Eu adicionei preenchimento para reduzir a largura. Eu gosto que ele cria um pequeno elemento que parece separado, mas anexado ao menu acima dele.

Estilizando o Separador

O separador também possui recursos de estilo. Altere o estilo, o tamanho, a cor, o espaçamento e a altura da fonte. Entre as opções de separador e os recursos de estilo, você pode facilmente fazer separadores para combinar com a marca do seu site.

Este exemplo usa a fonte padrão em roxo e um tamanho de fonte de 20 para os separadores.

Aqui está o mesmo separador com uma fonte Georgia para o separador. Basta alterar a fonte do separador para dar uma nova aparência.

Aqui está o mesmo separador usando a fonte Black Ops One. É mais ousado e se destaca mais.

Este é o Droid Serif com fonte de 20 pontos com espaçamento de linha de 4 pixels. Eu fiz a fonte em vermelho escuro.

Até os pontos mudam de forma com as opções de fonte. Este é a Paixão Um com 24 pontos. Vale a pena gastar algum tempo experimentando fontes, cores e tamanhos para criar algo único. É fácil de fazer com os controles de estilo padrão.

Usando o Divi Breadcrumbs Module com Extra

O módulo Divi Breadcrumbs funciona com o Extra e o plug-in Divi Builder. Aqui está uma olhada no Extra com breadcrumbs abaixo da imagem à direita. Incluí o nome da postagem, pois a localização atual está muito longe do título na parte superior da tela. Ele usa um separador de barras.

O ideal é que a localização atual esteja no topo da página. No layout da minha página, o módulo breadcrumbs está no topo. O motivo pelo qual aparece abaixo da imagem é que estou permitindo que o Extra exiba a imagem em destaque.

Neste exemplo, coloquei a imagem dentro do layout e defini a seção para ter 0 preenchimento superior. Removi a postagem atual e tornei o separador vermelho.

Licença, atualizações, suporte

O plugin pode ser instalado em sites ilimitados para você e seus clientes. As atualizações são para a vida. Inclui seis meses de suporte.

• Clique aqui para adquirir: Divi Breadcrumbs Module

Pensamentos finais

Pão ralado é uma daquelas pequenas coisas que você percebe quando está faltando. Se projetados corretamente, eles estarão lá quando o usuário precisar deles e ficarão fora do caminho quando eles não forem necessários. O Módulo Breadcrumbs Divi é uma ótima maneira de adicioná-los às suas páginas e postagens Divi e eles podem ser facilmente estilizados para caber na marca do seu site. É simples e intuitivo.

Se você estiver interessado em adicionar breadcrumbs aos seus layouts Divi, o Divi Breadcrumbs Module pode ser o plug-in de que você precisa.

Gostaríamos de ouvir de você! Você já experimentou o Divi Breadcrumbs Module? Conte-nos sobre sua experiência nos comentários abaixo.

Imagem em destaque via Yevgenij_D / shutterstock.com