Elementor breadcrumbs: cosa sono, perché usarli e come aggiungerli nel tuo sito

Quando un utente visita una pagina interna del tuo sito – che sia un post del blog, una scheda prodotto o una pagina di approfondimento – è fondamentale che sappia sempre dove si trova. Non solo per orientarsi, ma anche per tornare indietro rapidamente e approfondire altri contenuti. È qui che entrano in gioco gli Elementor breadcrumbs, breadcrumbs che letteralmente significano “briciole di pane”.

In questo articolo ti spieghiamo cosa sono i breadcrumbs, perché dovresti sempre usarli, e soprattutto come implementarli in un sito creato con Elementor – anche se Elementor non offre un widget dedicato.

Scoprirai diverse soluzioni: dai plugin SEO agli shortcode, fino a un metodo per costruire breadcrumbs personalizzati all’interno di un template.

Se vuoi, prima di iniziare con la lettura dell’articolo, ti lasciamo il link ad una risorsa direttamente dalla documentazione ufficiale di Elementor:

• How to Add Breadcrumbs to Your WordPress site

Cosa sono i breadcrumbs e perché sono importanti

I breadcrumbs (o “briciole di pane, di navigazione”) sono un percorso cliccabile che mostra all’utente la posizione corrente all’interno della struttura del sito.

Un esempio classico, nel caso ti stessi trovando a leggere un determinato articolo:

Home > Blog > Categoria Articolo > Titolo dell’articolo

A cosa servono?

• Orientano l’utente: rendono chiaro dove si trova nel sito, soprattutto su contenuti nidificati.
• Migliorano la navigazione: permettono di tornare facilmente a una categoria o a una pagina superiore.
• Aiutano la SEO: Google li riconosce come rich snippet strutturati, migliorando il modo in cui il sito appare nei risultati di ricerca.
• Riducono la frequenza di rimbalzo: offrendo un’alternativa al “torna indietro”, l’utente è incentivato a visitare più pagine.

Elementor ha un widget breadcrumbs integrato?

Attualmente, e sfortunatamente, Elementor non include un widget breadcrumb nativo, nemmeno nella versione Pro. Questo significa che, per inserire i breadcrumbs all’interno di una pagina o di un template Elementor, è necessario appoggiarsi a:

• un plugin SEO che li generi automaticamente (sicuramente avrai già sentito parlare o utilizzato plugin come Yoast o Rank Math);
• oppure a un plugin esterno compatibile;
• o, come vedremo più avanti, a una struttura personalizzata fatta con widget dinamici, che puoi creare nativamente con i widget disponibili su Elementor e Elementor PRO.

I principali metodi per aggiungere Elementor breadcrumbs

Usare Yoast SEO + shortcode

Yoast SEO genera breadcrumbs compatibili con i rich snippet di Google e ti permette di inserirli via shortcode.

Attivare i breadcrumbs in Yoast è semplice ed intuitivo:

1. Vai su Yoast SEO > Impostazioni > Avanzate > Breadcrumb
2. In fondo alla schermata clicca su “Abilita i breadcrumb per il tuo tema”
3. Salva le modifiche

Altrettanto semplice è l’inserimento in Elementor:

1. Aggiungi un widget Shortcode dove vuoi far comparire i breadcrumbs e incolla il seguente shortcode: Home > Elementor Academy > Elementor breadcrumbs: cosa sono, perché usarli e come aggiungerli nel tuo sito;
2. Oppure utilizza il widget Breadcrumbs, che trovi tra i widget disponibili se hai installato e attivato il plugin di Yoast.

Puoi modificarne lo stile poi direttamente tramite lo stile del widget oppure con del CSS personalizzato.

📌 Pro: Ottima compatibilità SEO, struttura semplice
📌 Contro: Personalizzazione un pò limitata senza CSS

Usare Rank Math SEO

Rank Math offre una gestione ancora più flessibile dei breadcrumb.

Vantaggi:

• Include un widget “Rank Math: Breadcrumbs” compatibile con Elementor;
• Puoi configurarne l’aspetto, il separatore, la profondità e la presenza della homepage;
• Supporta i rich snippet di Google in automatico.

Come usarli in Elementor:

1. Installa e attiva Rank Math;
2. Vai su Rank Math > Impostazioni generali > Breadcrumbs;
3. Attiva i breadcrumbs e personalizza le opzioni;
4. In Elementor, aggiungi il widget “Rank Math Breadcrumbs” dove desideri.

📌 Pro: Widget nativo, stile facile da modificare
📌 Contro: Richiede l’uso di Rank Math (ma è un ottimo plugin SEO)

Usare un plugin dedicato (es. Breadcrumb NavXT)

Breadcrumb NavXT è uno dei plugin breadcrumb più flessibili:

• Puoi creare strutture personalizzate;
• Supporta tassonomie, CPT e percorsi complessi;
• Compatibile con Elementor via shortcode (un po’ come una delle due opzioni per l’utilizzo dei bradcrumbs di Yoast).

📌 Pro: Altissimo livello di controllo
📌 Contro: Richiede configurazione iniziale avanzata

Dove inserire i breadcrumbs all’interno del sito

Ora che abbiamo visto come creare i nostri Elementor breadcrumbs, nonostante Elementor non metta a disposizione un widget nativo, andiamo a vedere dopo posizionarli. Perché la posizione è fondamentale:

• ✅ Subito sotto l’header o il menu di navigazione
• ✅ All’interno di una sezione hero, con sfondo neutro
• ✅ Nel template singolo per post, pagine o prodotti, o qualsiasi tipo di post personalizzato
• ❌ Mai sulla homepage
• ❌ Mai in fondo alla pagina (sono una guida, non una chiusura)

In Elementor, ti consigliamo di creare una sezione globale per i breadcrumbs che puoi riutilizzare nei diversi template dinamici. Oppure utilizzare il Theme Builder per creare template ad hoc per i tuoi tipi di contenuto, e lì andare a posizionare i breadcrumbs.

Come personalizzare l’aspetto degli Elementor breadcrumbs

Se usi uno shortcode (come quello di Yoast o NavXT), puoi:

• inserire il widget Shortcode o HTML;
• aggiungere una classe CSS come .breadcrumbs (questa la puoi mettere nella sezione Avanzate del widget shortcode, nel campo Classi personalizzate);
• scrivere il tuo stile via Customizer, CSS globali o CSS nel widget.

Costruire breadcrumbs personalizzati in Elementor (senza plugin)

Ebbene sì, possiamo anche replicare la struttura e i comportamenti dei breadcrumbs senza dover necessariamente utilizzare plugin o shortcode esterni.

Se da un lato questi semplificano un po’ la creazione del tutto, dall’altro, la soluzione che andiamo a vedere, crea massima libertà, flessibilità e personalizzazione.

Esempio di struttura per un CPT “Evento”:

1. Aggiungi una sezione breadcrumb nel template singolo.
2. Inserisci una serie di widget Testo o Icona + Testo. Puoi usare un container, dove imposti la direzione su Row, e un allineamento verticale centrato
3. Usa link dinamici come:
   1. Home → statico
   2. Eventi → collegato alla pagina archivio del CPT
   3. Titolo evento → dinamico, collegato al campo Post Title (che magari potrebbe anche non essere un link per ché ci troviamo in quella pagina, ma potrebbe essere visivamente più evidente rispetto alle voci che lo precedono)

Best practice per usare correttamente i breadcrumbs

Alcuni consigli sempre utili, e che invitiamo a seguire, per posizionare ed utilizzare correttamente gli Elementor breadcrumbs:

• Mostra i breadcrumb solo dove servono (pagine interne, articoli, CPT, assolutamente no nella homepage, oppure in una landing page utilizzata per la lead generation);
• Usa separatori chiari e coerenti (es. >, /, >>), ogni pagina navigabile deve essere facilmente identificabile;
• Mantieni il percorso più corto possibile, se necessario abbrevia il nome di alcune pagine inserendo dei […];
• Non duplicare breadcrumb e menu;
• Verifica che tutti i link siano funzionanti e accessibili, una volta che ne hai realizzato lo stile.

Conclusione

I breadcrumbs non sono solo un dettaglio estetico. Offrono orientamento all’utente, struttura ai contenuti e visibilità nei motori di ricerca. Elementor non offre un widget nativo, ma le alternative non mancano: puoi usarli con Yoast, Rank Math o costruirli manualmente nei tuoi template.

Con un po’ di attenzione alla posizione e allo stile, aggiungere i breadcrumbs può fare davvero la differenza nell’usabilità del tuo sito.E se riscontri difficoltà nel creare i tuoi Elementor breadcrumbs, ricorda che puoi sempre fare affidamento sul nostro servizio di Assistenza Elementor.