Divi Plugin Highlight – Modulo Divi Breadcrumbs

Quando sto navigando in un sito web, uno degli strumenti di navigazione che cerco sono i breadcrumb. Sono ottimi per mostrarti dove ti trovi all'interno della gerarchia di navigazione e per facilitare la ricerca di altri articoli all'interno della struttura. I breadcrumb possono essere aggiunti a Divi con un plugin chiamato Divi Breadcrumbs Module.

Divi Breadcrumbs Module è un plug-in di terze parti di CodeCrater che crea breadcrumb basati sulla posizione. In altre parole, ti mostra la gerarchia delle categorie della pagina che stai leggendo. Fornisce anche collegamenti per ogni elemento nella gerarchia in modo da poter vedere facilmente gli ultimi post per ciascuna delle categorie. I breadcrumb sono altamente personalizzabili.

Utilizzando il modulo Breadcrumb puoi inserire breadcrumb su singole pagine e post che utilizzano Divi Builder. Funziona anche con Extra e il plugin Divi Builder. In questo punto saliente del plugin daremo un'occhiata al plugin sia in Divi che in Extra e vedremo alcuni dei modi in cui può essere personalizzato.

Perché usare il pangrattato?

I breadcrumb lasciano una traccia che mostra la gerarchia delle categorie ed è un ottimo modo per migliorare la navigazione. Non occupano molto spazio e possono ridurre e semplificare il numero di azioni che un utente deve intraprendere per navigare nei tuoi contenuti. Questo è particolarmente importante se hai molte categorie incorporate.

Divi Breadcrumbs Module migliora la SEO fornendo a Google informazioni sulla gerarchia sul tuo sito web. Ciò significa che dovresti scegliere le parole chiave per le tue categorie per le quali desideri classificare. Ciò costringe anche i progettisti a utilizzare nomi di categoria più facili da capire.

I breadcrumb migliorano sia UX che UI. Non dovrebbero sostituire la navigazione standard del menu, ma possono creare interesse e mantenere i visitatori sul tuo sito più a lungo.

Modulo Divi Breadcrumb

Carica e attiva il plugin normalmente. Il modulo apparirà in un rosso brillante chiamato Hollywood Cerise. Molti plugin breadcrumb richiedono Yoast perché stanno estraendo i breadcrumb dal plugin Yoast, ma Divi Breadcrumbs Module non richiede Yoast. Invece, crea i propri breadcrumb. Quindi non sono necessari altri plugin.

Le impostazioni del contenuto includono nascondere il breadcrumb della casa, aggiungere il proprio testo breadcrumb della casa, scegliere l'icona del separatore (tra 12 scelte), nascondere la pagina corrente, le impostazioni dello sfondo e l'etichetta dell'amministratore. Le impostazioni di progettazione includono lo stile per le icone, il testo e i collegamenti e le opzioni di spaziatura standard.

Esempi di moduli Divi Breadcrumb

Questo è un layout di un articolo di base con il modulo del titolo del post con immagine, il modulo breadcrumb e il modulo di testo degli articoli. Ho lasciato le impostazioni breadcrumb ai valori predefiniti.

Ecco come appare il modulo con le impostazioni predefinite. I collegamenti per Casa e Scherma sono in blu per mostrare che sono cliccabili. Il pangrattato può essere posizionato a sinistra, al centro o a destra.

In questo esempio ho posizionato i breadcrumb al centro e aggiunto uno sfondo sfumato e aumentato le dimensioni dei caratteri sia per il titolo dell'articolo (14 punti) che per i collegamenti (12 punti). Il testo è bianco. Dato che sono stampati su un gradiente, li ho resi dello stesso colore. Ho anche cambiato il separatore di riga. In un post normale non attirerei l'attenzione sui breadcrumb con uno sfondo sfumato, ma questo mostra cosa puoi fare con esso.

Aggiunta di pangrattato in un menu a tutta larghezza

Il posto migliore per aggiungere i breadcrumb è nella parte superiore della pagina. In questo esempio ho creato un post utilizzando un menu a larghezza intera e ho impostato il riempimento e i margini su 0 sia per la sezione a larghezza intera che per la sezione standard. Ho incorporato le categorie per mostrare la gerarchia.

Ho cambiato i colori dei caratteri del breadcrumb in modo che corrispondano al menu a larghezza intera, ma poi li ho ammorbiditi in modo che non risaltino. Ho cambiato il separatore in una freccia e ho rimosso Home e la pagina corrente dalla navigazione del breadcrumb.

Notare che i breadcrumb seguono la stessa struttura incorporata delle categorie nell'immagine sopra. L'articolo stesso include anche queste categorie, ma non esiste una struttura gerarchica. Possono essere rimossi dal titolo se non vuoi mostrare le stesse categorie più volte.

In questo esempio ho posizionato il colore di sfondo nella riga, l'ho reso a tutta larghezza, ho cambiato il colore del carattere in modo che non sovrastasse il menu e ho aggiunto 1 pixel alla spaziatura delle lettere. Piccoli cambiamenti possono fare una grande differenza.

Queste sono le stesse impostazioni che utilizzano lo sfondo all'interno del modulo breadcrumb invece della riga. Ho aggiunto un'imbottitura per ridurre la larghezza. Mi piace che crei un piccolo elemento che sembra separato ma attaccato al menu sopra di esso.

Disegnare il separatore

Il separatore ha anche caratteristiche di stile. Modifica lo stile, la dimensione, il colore, la spaziatura e l'altezza del carattere. Tra le opzioni del separatore e le caratteristiche di stile puoi facilmente creare separatori per abbinare il marchio del tuo sito web.

Questo esempio utilizza il carattere predefinito in viola e una dimensione del carattere di 20 per i separatori.

Ecco lo stesso separatore con un carattere Georgia per il separatore. Basta cambiare il carattere del separatore per dargli un nuovo aspetto.

Ecco lo stesso separatore che utilizza il carattere Black Ops One. È più audace e si distingue di più.

Questo è Droid Serif a 20 punti di carattere con un'interlinea di 4 pixel. Ho reso il carattere un rosso scuro.

Anche i punti cambiano forma con le scelte dei caratteri. Questo è Passion One a 24 punti. Vale la pena dedicare del tempo a sperimentare con caratteri, colori e dimensioni per creare qualcosa di unico. È facile da fare con i controlli di stile standard.

Utilizzo del modulo Divi Breadcrumb con Extra

Divi Breadcrumbs Module funziona con Extra e il plugin Divi Builder. Ecco uno sguardo a Extra con pangrattato sotto l'immagine a destra. Ho incluso il nome del post poiché i breadcrumb sono così lontani dal titolo nella parte superiore dello schermo. Utilizza un separatore di barre.

Idealmente le briciole di pane dovrebbero essere nella parte superiore della pagina. Nel mio layout di pagina il modulo breadcrumb è in alto. Il motivo per cui viene mostrato sotto l'immagine è che sto consentendo a Extra di visualizzare l'immagine in primo piano.

In questo esempio ho posizionato l'immagine all'interno del layout e ho impostato la sezione in modo che abbia 0 padding superiore. Ho rimosso il post corrente e reso rosso il separatore.

Licenza, aggiornamenti, supporto

Il plug-in può essere installato su siti Web illimitati per te e i tuoi clienti. Gli aggiornamenti sono per la vita. Include sei mesi di supporto.

• Clicca qui per acquistare: Modulo Divi Breadcrumbs

Pensieri finali

Il pangrattato è una di quelle piccole cose che ti accorgi quando manca. Se progettati correttamente, saranno presenti quando l'utente ne avrà bisogno e rimarranno fuori mano quando non lo faranno. Il modulo Divi Breadcrumbs è un ottimo modo per aggiungerli alle tue pagine e ai tuoi post Divi e possono essere facilmente adattati per adattarsi al marchio del tuo sito. È semplice e intuitivo.

Se sei interessato ad aggiungere breadcrumb ai tuoi layout Divi, Divi Breadcrumbs Module potrebbe essere il plugin di cui hai bisogno.

Ci piacerebbe sentire da voi! Hai provato il modulo Divi Breadcrumbs? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in primo piano tramite Yevgenij_D / shutterstock.com