TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere i breadcrumb nel sito Weebly?

7

La struttura interna del sito è uno dei fattori SEO importanti che aiutano Google e altri motori di ricerca a comprendere facilmente il tuo sito. Oltre a collegare altre pagine del tuo sito, l’aggiunta di breadcrumb può aiutare gli utenti a navigare in diverse sezioni. Se non conosci il breadcrumb, si tratta di un collegamento di navigazione aggiuntivo, generalmente visualizzato nella parte superiore della pagina Web contenente la struttura. Aiuta gli utenti a navigare facilmente nelle categorie o sezioni di livello superiore del sito dalla pagina corrente.

Correlati: come aggiungere breadcrumb nel sito WordPress?

Esempi di pangrattato

Di seguito è riportato un esempio di come appariranno i breadcrumb orizzontali e verticali.

Come aggiungere i breadcrumb nel sito Weebly?

Esempi di pangrattato

Come puoi vedere, fornisce la posizione relativa della pagina corrente nell’intero sito come una bacheca "Sei qui!" nella mappa.

Weebly e pangrattato

Weebly non offre un elemento breadcrumb predefinito per aggiungerlo al tuo sito. Tuttavia, puoi utilizzare CSS/HTML personalizzato e inserire manualmente il breadcrumb su ogni pagina. Qui ti mostreremo sei diversi breadcrumb di stili CSS che puoi aggiungere nel tuo sito Weebly.

Nota: ricorda, questi sono breadcrumb semplici e manuali. Non fa parte dello schema e quindi i motori di ricerca non li mostreranno nei risultati di ricerca come i siti Web WordPress.

Prima di iniziare, il prerequisito per un breadcrumb è mantenere le pagine in modo strutturato. Sebbene non sia necessario disporre le pagine secondo il breadcrumb, consigliamo vivamente di mantenere la gerarchia necessaria nella scheda "Pagine" e di allineare la navigazione di conseguenza. Spiegheremo con una struttura di esempio come "Home > Site Building > Weebly > Weebly Tips & Tricks > Questa pagina". Sono necessari cinque blocchi con i collegamenti corrispondenti per creare un breadcrumb.

I breadcrumb utilizzano un semplice codice CSS e HTML, quindi il codice CSS deve essere aggiunto al foglio di stile e il codice HTML deve essere incorporato nella pagina richiesta. Poiché potrebbe essere necessario posizionare i breadcrumb su più di una pagina, si consiglia di aggiungere il codice CSS in "Tema > Modifica HTML / CSS > Stili > main.less" come mostrato di seguito:

Come aggiungere i breadcrumb nel sito Weebly?

Modifica del file CSS principale in Weebly

Il codice HTML deve essere inserito in una pagina utilizzando l’ elemento " Embed Code " sopra il contenuto.

Stile 1 e 2

I breadcrumb sotto lo stile 1 e 2 condividono una classe CSS comune con un’aggiunta minore di codice per il secondo stile.

Stile CSS breadcrumb 1

Stile CSS Pangrattato 2

Stile 3, 4, 5 e Bonus 6

Stile CSS Breadcrumb 3

Stile Pangrattato CSS 4

Stile CSS breadcrumb 5

Bonus CSS Breadcrumb Style 6

Fare clic sul pulsante in basso per ottenere il codice CSS/HTML per tutti i breadcrumb di cui sopra e il codice CSS viene evidenziato per ogni stile.

Sono necessarie quattro immagini per questi breadcrumb che puoi scaricare di seguito e caricarle sul tuo sito Weebly. Non dimenticare di sostituire gli URL delle immagini all’interno dei CSS con i tuoi URL.

Nota: gli stili di breadcrumb 1, 2, 3 e 4 nel CSS scaricato rappresentano rispettivamente gli esempi 3, 4, 5 e 6 come mostrato sopra. Non dimenticare di sostituire i link delle immagini con i tuoi URL.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More