det ser ut som om du'använder IE11…

om det här är första gången du hör om termen” breadcrumb”som används i webbdesign, låt mig visa dig hur det ser ut:

Jag är ganska säker på att du har stött på det på de webbplatser du har besökt. Låt oss nu lägga till en på din website.To Lägg till breadcrumb-elementet, Sök bara efter” breadcrumb ” på elementpanelen och dra Breadcrumb-elementet till innehållsfönstret.

Du kan se något så här:

nu är texten du ser i byggaren eller i Cornerstone inte den faktiska texten som kommer att visas på framsidan av din webbplats. Det är bara en platshållare. På framsidan ser du hierarkin på webbsidorna som börjar med länken till hemmet till vänster, och flyttar sedan ett barn längre till höger.

i det här fallet, eftersom sidan vi skapar är företagsprofilen, som i det här exemplet är ett barn på sidan Om oss, är strukturen: hem > Om oss > företagsprofil.

under gruppen Setup field ser du följande fält:

Home Label Type

Du kan välja om du vill använda en vanlig text (t.ex. Home) för startsidans länk eller om du vill använda en ikon istället.

Home Label

om du markerade Text i fältet Home Label Type ovan kan du ändra texten från att säga” Home ” till något annat (t.ex. blogg, nyheter).

om du väljer ikon får du möjlighet att välja ikonen som ska användas.

Width & Max Width

Du kan ställa in standardbredden för Breadcrumb-elementet. Du kan också ställa in dess maximala bredd så att den inte kan gå utöver den bredden.

motivering & riktning

detta låter dig ändra ange Flex CSS-egenskaper för Brödsmulelementet. Om du inte är bekant med Flexbox finns det en bra introduktion här.

Bakgrund

Du kan lägga till en bakgrundsfärg i elementet.

Du kan ställa in breadcrumb-elementets teckensnitt, marginaler, paddlingar, box-shadows, borders och border radius. Du ser just dessa egenskaper på kontrollpanelen:

Observera att dessa egenskaper som nämns, när de konfigureras, är för hela brödsmulelementet och inte för enskilda länkar inuti nämnda element. Det betyder att om du ställer in Paddlingarna kommer det att gälla för hela elementet.

senare diskuterar vi hur du konfigurerar enskilda länkar i brödsmulan.

i brödsmulor är” avgränsare ” separatorerna för varje länk.

standardavgränsaren är en pil men vi kan ändra det och till och med ta bort det helt och hållet. Inställningarna finns i fältet Delimeter Setup.

låt oss nu diskutera de enskilda inställningarna.

aktivera

som standard är avgränsare aktiverade men du kan stänga av den och därmed ta bort alla avgränsare.

Avgränsningstyp

precis som i Hemetiketttypen under gruppen Setup field som diskuterats tidigare kan du välja om du vill använda Text eller ikon för Avgränsningstypen. När vi säger ”Text” betyder det inte nödvändigtvis ord, även om ord är tillåtna. Det som vanligtvis används är ASCII-koder. Standardavgränsaren, → är en ASCII-kod som genererar pilen.

om du väljer ikon som Avgränsartyp visas ikonväljarfältet för att välja ikoner du vill använda.

LTR & RTL-avgränsare

LTR betyder” vänster till höger ”medan RTL betyder”höger till vänster”. Dessa betyder i princip riktningen i hur vi läser bokstäver. Till exempel läser du den här artikeln från vänster till höger, så det här är LTR. Språk som arabiska och hebreiska läser deras karaktärer och ord från höger till vänster.

vissa webbplatser stöder flera språk där både LTR och RTL stöds. Den här inställningen gör din breadcrumb-avgränsare klar genom att du inte bara kan ställa in LTR-avgränsaren utan också vad du ska använda när RTL är aktiverat.

avstånd

värdet du lägger här kommer att ställas in som avståndet på både vänster och höger sida av avgränsaren. Så om du ställer in 10px som värde, kommer varje avgränsare att ha ett utrymme på 10px till vänster och ytterligare 10px till höger.

Länkinställningarna är i stort sett desamma som inställningarna för inställningar och Design kombinerat. Huvudskillnaden är att Länkinställningarna är specifika för de enskilda länkarna medan de två första tillämpas på själva brödsmulelementet.

Med Links Setup kan du också ställa in textfärg och bakgrundsfärg för alla länkar inuti brödsmulan som musen svävar på en länk.

anpassa

avsnittet Anpassa består av kontroller för att anpassa elementet om du är i HTML, CSS och Javascript.

• ID – använd det här alternativet för att ställa in ett HTML-ID för elementet. ID: t ska vara unikt på sidan.
• klass-använd det här alternativet för att ange en HTML-klass för elementet. Du kan använda klassen för din anpassade CSS-kod.
• element CSS-använd det här alternativet för att få bättre kontroll över elementet för att komma åt elementets inre taggar med $el som CSS-val. Klicka här för mer detaljerad information.
• Dölj under Brytpunkt – använd det här alternativet för att dölja elementet på olika enhetsstorlekar. Klicka här för mer information.
• anpassade attribut-använd det här alternativet för att lägga till anpassade attribut i elementets wrapper HTML-tagg. Såsom data-info=123. Du kan använda alternativet för att injicera anpassad information i elementet som ska användas på din anpassningskod.

Demo

för att se en live demo av Breadcrumbs-elementet klicka här.

sammanfattning

på bara några minuter har du lärt dig hur du lägger till och ställer in brödsmulor till Cornerstone / Content Builder. Du har lärt dig hur du utformar brödsmulelementet såväl som dess enskilda länkar. Slutligen har du också lärt dig hur du konfigurerar avgränsaren efter eget tycke.