Se questa è la prima volta che sento parlare del termine “breadcrumb” utilizzato nel web design, lasciate che vi mostri quello che sembra:
sono abbastanza sicuro che hai incontrato in siti web che hai visitato. Ora, aggiungiamo uno sul tuo website.To aggiungi l’elemento breadcrumb, cerca semplicemente “breadcrumb” nel pannello elementi e trascina l’elemento Breadcrumb nel riquadro contenuto.
Potrai vedere qualcosa di simile:
Ora, il testo che stai vedendo nel builder o in Cornerstone non è il testo effettivo che apparirà sul front-end del tuo sito. E ‘ solo un segnaposto. Sul front-end, vedrai la gerarchia delle pagine Web che inizia con il link alla Home nella parte più a sinistra, quindi sposta un bambino più a destra.
In questo caso, poiché la pagina che stiamo creando è il Profilo aziendale, che in questo esempio è figlio della pagina Chi siamo, la struttura è: Home >Chi siamo > Profilo aziendale.
Sotto il gruppo di campi Setup, vedrai i seguenti campi:
Home Label Type
Puoi scegliere se utilizzare un testo normale (ad esempio Home) per il link della homepage o utilizzare un’icona.
Home Label
Se hai selezionato del testo nel campo Home Label Type sopra, puoi cambiare il testo da “Home” a qualcos’altro (ad esempio Blog, News).
Se hai scelto Icon, ti verrà data la possibilità di scegliere l’icona da utilizzare.
Larghezza& Larghezza massima
È possibile impostare la larghezza predefinita dell’elemento Breadcrumb. Puoi anche impostare la sua larghezza massima in modo che non possa andare oltre quella larghezza.
Giustificazione& Direzione
Ciò consente di modificare l’impostazione delle proprietà CSS flessibili dell’elemento Breadcrumb. Se non hai familiarità con Flexbox, c’è un’utile introduzione qui.
Sfondo
È possibile aggiungere un colore di sfondo all’elemento.
È possibile impostare i caratteri dell’elemento breadcrumb, i margini, le imbottiture, le ombre, i bordi e il raggio del bordo. Vedrete queste proprietà molto sul pannello controlli:
Si noti che queste proprietà menzionate, quando configurate, sono per l’intero elemento breadcrumb e non per singoli collegamenti all’interno di detto elemento. Ciò significa che, se si impostano le imbottiture, si applicherà all’intero elemento.
Più avanti parleremo di come configurare i singoli collegamenti all’interno del breadcrumb.
Nel pangrattato, i “delimitatori” sono i separatori di ciascun collegamento.
Il delimitatore predefinito è una freccia ma possiamo cambiarlo e persino rimuoverlo del tutto. Le impostazioni possono essere trovate nel gruppo di campi Setup Delimeter.
Ora discutiamo le singole impostazioni.
Abilita
Per impostazione predefinita, i delimitatori sono attivati ma è possibile disattivarlo, rimuovendo così qualsiasi delimitatore.
Tipo di delimitatore
Proprio come nel tipo di etichetta Home nel gruppo di campi Setup discusso in precedenza, è possibile scegliere se utilizzare Testo o Icona per il tipo di Delimitatore. Quando diciamo “Testo”, non significa necessariamente parole, anche se le parole sono consentite. Ciò che viene generalmente utilizzato sono i codici ASCII. Il delimitatore predefinito, & rarr; è un codice ASCII che genera la freccia.
Se scegli Icon come Tipo di delimitatore, ti verrà mostrato il campo di selezione delle icone per scegliere le icone che desideri utilizzare.
LTR& Delimitatore RTL
LTR significa “Da sinistra a destra” mentre RTL significa “da destra a sinistra”. Questi significano fondamentalmente la direzione nel modo in cui leggiamo le lettere. Ad esempio, stai leggendo questo articolo a partire da sinistra a destra, quindi, questo è LTR. Lingue come l’arabo e l’ebraico leggono i loro personaggi e parole partendo da destra andando a sinistra.
Alcuni siti web supportano più lingue in cui sono supportati sia LTR che RTL. Questa impostazione prepara il delimitatore breadcrumb consentendo di impostare non solo il delimitatore LTR ma anche cosa usare quando RTL è abilitato.
Spaziatura
Il valore che inserisci qui verrà impostato come distanza sul lato sinistro e destro del delimitatore. Quindi se imposti 10px come valore, ogni delimitatore avrà uno spazio di 10px alla sua sinistra e un altro 10px alla sua destra.
Le impostazioni dei collegamenti sono praticamente le stesse delle impostazioni di configurazione e progettazione combinate. La differenza principale è che le impostazioni dei collegamenti sono specifiche per i singoli collegamenti mentre i primi due vengono applicati all’elemento breadcrumb stesso.
L’impostazione dei collegamenti consente di impostare anche il colore del testo e il colore di sfondo di tutti i collegamenti all’interno del breadcrumb il mouse si posiziona su un collegamento.
Personalizza
La sezione personalizza è costituita da controlli per personalizzare l’elemento se si è in HTML, CSS e Javascript.
- ID – Utilizzare questa opzione per impostare un ID HTML per l’elemento. L’ID dovrebbe essere univoco nella pagina.
- Class-Utilizzare questa opzione per impostare una classe HTML per l’elemento. Puoi usare la classe per il tuo codice CSS personalizzato.
- Elemento CSS-Utilizzare questa opzione per avere un migliore controllo sull’elemento per accedere ai tag interni dell’elemento utilizzando
$elcome selezione CSS. Clicca qui per informazioni più dettagliate. - Nascondi durante il punto di interruzione-Utilizzare questa opzione per nascondere l’elemento su diverse dimensioni del dispositivo. Clicca qui per maggiori informazioni.
- Attributi personalizzati-Utilizzare questa opzione per aggiungere attributi personalizzati al tag HTML wrapper dell’elemento. Ad esempio
data-info=123. È possibile utilizzare l’opzione per iniettare informazioni personalizzate nell’elemento da utilizzare nel codice di personalizzazione.
Demo
Per vedere una demo live dell’elemento Breadcrumbs clicca qui.
Riepilogo
In pochi minuti, hai imparato come aggiungere e configurare i breadcrumb a Cornerstone / Content Builder. Hai imparato come progettare l’elemento breadcrumb e i suoi singoli collegamenti. Infine hai anche imparato come configurare il delimitatore a proprio piacimento.
Vedi qualcosa di impreciso? Fateci sapere