Breadcrumbs

Link in evidenza

1. Documentazione Shopify sull’editor del tema
2. Documentazione Company XYZ sul blocco Breadcrumbs
3. Documentazione Company XYZ sulle icone
4. Documentazione Company XYZ sulle impostazioni di padding della sezione
5. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
6. Documentazione Company XYZ sulle impostazioni dei separatori
7. Documentazione Company XYZ sulle impostazioni di visibilità
8. Documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usate Breadcrumbs per mostrare un percorso di navigazione chiaro verso le pagine di livello superiore. Funzionano meglio vicino alla parte superiore di una pagina, dove possono supportare la navigazione senza entrare in competizione con il contenuto principale. Per un contesto più ampio sulla configurazione del tema, consultate la documentazione Shopify sull’editor del tema

Impostazioni principali

Le impostazioni principali controllano le icone usate nel percorso breadcrumb. Potete usare un’icona home per il primo elemento e scegliere un’icona separatrice tra i link breadcrumb. Per le icone separatrici, potete inserire un emoji o un nome di icona, oppure lasciare il campo vuoto per un aspetto più pulito senza separatore visualizzato. Per assistenza sulle icone, consultate la guida alle icone.

Mantenete lo stile dei breadcrumbs semplice quando la pagina ha già elementi visivi forti nelle vicinanze. Un separatore minimale spesso risulta più pulito ed è più facile da leggere su schermi più piccoli.

Impostazioni di allineamento

Queste impostazioni controllano l’allineamento orizzontale separatamente per desktop e mobile. Questo è utile quando i breadcrumbs devono allinearsi con il contenuto circostante su schermi più grandi, ma devono avere una posizione diversa su schermi più piccoli.

L’allineamento a sinistra è di solito il più facile da leggere, soprattutto quando i percorsi breadcrumb sono più lunghi. Se il percorso risulta troppo compresso su mobile, semplificate le icone o accorciate le etichette prima di forzare un allineamento più decorativo.

Impostazioni di colore

Queste impostazioni sostituiscono i colori del tema più ampi per questa sezione. Sono particolarmente utili quando il percorso breadcrumb si trova su uno sfondo personalizzato o necessita di un trattamento più chiaro o più scuro rispetto al resto della pagina.

Cercate di mantenere i breadcrumbs visivamente secondari, ma comunque leggibili e chiaramente interattivi. I colori del testo e delle icone dovrebbero avere un contrasto sufficiente per rimanere facili da individuare senza sembrare chiamate all’azione principali.

I breadcrumbs dovrebbero rimanere discreti, ma i clienti devono comunque riconoscerli come navigazione.

Tipi di blocco supportati

1. Breadcrumb

Breadcrumb

Usate questo blocco per aggiungere un link padre statico al percorso breadcrumb. È utile quando volete inserire un passaggio manuale per landing page, percorsi di contenuto personalizzati o flussi di navigazione speciali. Per i dettagli sulla configurazione del blocco, consultate la documentazione di Company XYZ sul blocco Breadcrumb.

1. Mantenete il testo del blocco breve, in modo che l’intero percorso resti leggibile.
2. Usate l’impostazione del link per destinazioni padre reali, non per link decorativi o ripetuti.
3. Usate l’impostazione di visibilità del blocco quando un link padre manuale è utile solo su desktop o solo su mobile.

Nota

I link breadcrumb di solito funzionano meglio nella stessa scheda, poiché fanno parte della normale navigazione della pagina.

Impostazioni standard della sezione

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto il percorso breadcrumb su desktop e mobile. In questa sezione, vi aiutano a creare una separazione confortevole dall’header e dal contenuto della pagina.

Poiché i breadcrumbs sono compatti, in genere uno spaziamento più leggero è la scelta migliore. Aggiungete più padding solo quando la sezione deve distinguersi visivamente o include un trattamento di sfondo.

Impostazioni dello sfondo della sezione

Impostazioni dello sfondo della sezione vi permettono di collocare il percorso breadcrumb sopra un colore, un gradiente, un’immagine o un video. Questo può aiutare la sezione a risultare distinta, soprattutto nei layout di pagina più personalizzati.

Usate con cautela i trattamenti di sfondo qui, perché i breadcrumbs sono piccoli e facili da mettere in ombra. I controlli dell’overlay possono aiutare a mantenere la leggibilità quando usate immagini o video.

Attenzione

Un media di sfondo troppo forte può rendere più difficile leggere i link breadcrumb, soprattutto su mobile.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea opzionale sopra o sotto la sezione. Sono utili quando volete separare l’area breadcrumb dal contenuto circostante senza aggiungere molto spazio extra.

Un separatore superiore può funzionare bene sotto un header, mentre un separatore inferiore può aiutare a definire l’inizio del contenuto principale della pagina. Se lasciate trasparente il colore del separatore, viene usato il colore del bordo standard.

Impostazioni di visibilità

Impostazioni di visibilità controllano se l’intera sezione breadcrumb appare su desktop, mobile o entrambi. Questo è utile quando volete un layout più semplice su una determinata dimensione del dispositivo.

Usate la visibilità della sezione per decisioni generali sul layout. Se la sezione è nascosta su una dimensione del dispositivo, anche eventuali scelte di visibilità a livello di blocco al suo interno non verranno visualizzate lì.

Impostazioni di larghezza

Impostazioni di larghezza controllano sia la larghezza del contenuto del percorso breadcrumb sia la larghezza del wrapper della sezione. Questo vi aiuta ad allineare i breadcrumbs con il contenuto vicino o a estendere ulteriormente un trattamento di sfondo sulla pagina.

Far coincidere la larghezza del contenuto con il layout circostante di solito crea il risultato più pulito. Quando modificate le impostazioni di larghezza, visualizzate l’anteprima sia della pagina live sia della vista dell’editor, poiché le modifiche di layout possono risultare diverse nelle due viste.

Note sull’uso

1. Mantenete concise le etichette. Nomi breadcrumb brevi sono più facili da leggere e hanno meno probabilità di andare a capo in modo scomodo su mobile.
2. Usate i link manuali solo quando sono utili. Aggiungete i blocchi Breadcrumb quando chiariscono il percorso, non quando ripetono una navigazione ovvia.
3. Fate attenzione alle modifiche guidate dai blocchi. Breadcrumb aggiuntivi possono modificare il percorso più di quanto facciano le impostazioni a livello di sezione, quindi rivedete l’intero percorso dopo aver aggiunto o rimosso blocchi.
4. Allineate le scelte di layout vicine. Allineate larghezza, spaziatura e posizione con la pagina circostante, così il percorso risulta intenzionale.
5. Verificate la leggibilità su sfondi personalizzati. Controllate il contrasto di testo, icone e separatori ogni volta che aggiungete colore, immagini, gradienti o video.
6. Testate entrambe le dimensioni del dispositivo. I breadcrumbs possono comportarsi in modo diverso su desktop e mobile, quindi verificate allineamento, visibilità ed eventuali trattamenti multimediali in entrambe le viste.