I breadcrumb forniscono un’utile panoramica dell’elemento e della gerarchia preimpostata e consentono di navigare rapidamente verso determinati elementi.
All’inizio vedi sempre la pagina in cui ti trovi attualmente (qui è Home ). Se fai clic su qualsiasi elemento all’interno della tua pagina vedrai la gerarchia degli elementi nidificati. Gli elementi genitori sono sempre a sinistra. Ciò ti consente di navigare verso tutti gli elementi, anche quelli che potresti non raggiungere con un clic nell’editor perché sono sovrapposti ad altri elementi. In questo esempio, abbiamo cliccato su un’immagine (indicata dal suo bordo arancione ed è l’elemento più a destra nel breadcrumb).
Vedrai anche le classi collegate agli elementi in blu dopo il tipo di elemento.
Un doppio clic su un elemento aprirà le impostazioni per questo elemento. Puoi anche andare su e giù lungo i percorsi della gerarchia utilizzando i tasti [SU] e [GIÙ]. [INVIO] aprirà anche le impostazioni dell’elemento.
Ogni elemento ha il proprio ID. Puoi copiare l’ID negli appunti tramite il menu contestuale (fai clic con il pulsante destro del mouse in un punto qualsiasi dell’editor e fai clic su Copia ID elemento per recuperare l’ID dell’elemento più a destra nei breadcrumb).
Le piccole icone accanto al nome dell’elemento indicheranno alcune caratteristiche speciali di questo elemento:
- Icona della tavolozza dei colori: questo è il contenitore principale di un predefinito, ad esempio l’intestazione, il piè di pagina o qualsiasi cosa precostruita
- Icona stella: questo elemento ha un’animazione
- Icona immagine: questo elemento ha un’immagine di sfondo su questo contenitore
- Icona inchiostro collegamento: questo elemento è collegato a qualcosa
I breadcrumb sono utili anche per mantenere i layout puliti. Puoi facilmente individuare più contenitori uno dentro l’altro e determinare se sono davvero necessari tutti.