det ligner dig're using IE11…

Hvis dette er din første gang at høre om udtrykket “breadcrumb”, der bruges i internetdesign, så lad mig vise dig, hvordan det ser ud:

Jeg er temmelig sikker på, at du har stødt på det på de hjemmesider, du har besøgt. Lad os nu tilføje en på din website.To Tilføj brødkrummeelementet, Søg blot efter” brødkrumme ” på panelet Elementer og træk Brødkrummeelementet til indholdsruden.

Du kan se noget som dette:

nu er den tekst, du ser i bygherren eller i Cornerstone, ikke den faktiske tekst, der vises på forsiden af din side. Det er bare en pladsholder. På forsiden kan du se hierarkiet på siderne, der starter med linket til hjemmet til venstre for det meste og derefter flytter et barn længere til højre.

i dette tilfælde, da den side, vi opretter, er virksomhedsprofilen, som i dette eksempel er et barn på siden OM OS, er strukturen: hjem >om os > Firmaprofil.

under gruppen Setup field ser du følgende felter:

Home Label Type

Du kan vælge, om du vil bruge en almindelig tekst (f.eks.

Home Label

Hvis du valgte tekst i feltet Home Label Type ovenfor, kan du ændre teksten fra at sige “Home” til noget andet (f.eks. Blog, Nyheder).

Hvis du vælger ikon, får du mulighed for at vælge det ikon, der skal bruges.

bredde& maks bredde

Du kan indstille standardbredden på Brødkrummeelementet. Du kan også indstille dens maksimale bredde, så den ikke kan gå ud over denne bredde.

begrundelse & retning

dette giver dig mulighed for at ændre indstillingen af Brødkrummeelementets fleksible CSS-egenskaber. Hvis du ikke er bekendt med Fleksboks, er der en nyttig introduktion her.

baggrund

Du kan tilføje en baggrundsfarve til elementet.

Du kan indstille breadcrumb elementets skrifttyper, margener, paddings, boks-skygger, grænser og grænse radius. Du kan se disse meget egenskaber på kontrolpanelet:

bemærk, at disse nævnte egenskaber, når de er konfigureret, er for hele brødkrummeelementet og ikke for individuelle links inde i det nævnte element. Det betyder, at hvis du indstiller padderne, gælder det for hele elementet.

senere diskuterer vi, hvordan du konfigurerer individuelle links inde i breadcrumb.

i brødkrummer er “afgrænsere” separatorerne for hvert link.

standardafgrænseren er en pil, men vi kan ændre det og endda fjerne det helt. Indstillingerne kan findes i Feltgruppen Delimeter Setup.

lad os nu diskutere de enkelte indstillinger.

aktiver

som standard er afgrænsere tændt, men du kan slukke for det og dermed fjerne enhver afgrænser.

Afgrænsningstype

ligesom i Hjemmetikettypen under den tidligere diskuterede Konfigurationsfeltgruppe kan du vælge, om du vil bruge tekst eller ikon til Afgrænsningstypen. Når vi siger “tekst”, betyder det ikke nødvendigvis ord, selvom ord er tilladt. Hvad der generelt bruges, er ASCII-koder. Standardafgrænseren, → er en ASCII-kode, der genererer pilen.

Hvis du vælger ikon som Afgrænsningstype, vises feltet ikonvælger for at vælge ikoner, du vil bruge.

LTR & RTL-afgrænser

LTR betyder “venstre mod højre”, mens RTL betyder “højre mod venstre”. Disse betyder dybest set retningen i, hvordan vi læser bogstaver. For eksempel læser du denne artikel fra venstre til højre, således er dette LTR. Sprog som arabisk og hebraisk læser deres karakterer og ord fra højre til venstre.

nogle hjemmesider understøtter flere sprog, hvor både LTR og RTL understøttes. Denne indstilling gør din breadcrumb-afgrænser klar ved at lade dig indstille ikke kun LTR-afgrænseren, men også hvad du skal bruge, når RTL er aktiveret.

afstand

den værdi, du lægger her, indstilles som afstanden på både venstre og højre side af afgrænseren. Så hvis du indstiller 10ph som værdien, vil hver afgrænser have et mellemrum på 10ph til venstre og en anden 10ph til højre.

Links indstillinger er stort set de samme som Setup og Design indstillinger kombineret. Hovedforskellen er, at Linksindstillinger er specifikke for de enkelte links, mens de to første anvendes på selve brødkrummeelementet.

Linkopsætningen giver dig mulighed for også at indstille tekstfarven og baggrundsfarven på alle links inde i brødkrummeren musen svæver på et link.

Tilpas

tilpas sektionen består af kontroller til at tilpasse elementet, hvis du er i HTML, CSS og Javascript.

• ID – Brug denne indstilling til at indstille et HTML-ID for elementet. ID ‘ et skal være unikt på siden.
• klasse-Brug denne indstilling til at indstille en HTML-klasse for elementet. Du kan bruge klassen til din brugerdefinerede CSS-kode.
• Element CSS-Brug denne indstilling til at få bedre kontrol over elementet for at få adgang til elementets indre tags ved hjælp af $el som CSS-valg. Klik her for mere detaljerede oplysninger.
• skjul under Breakpoint – brug denne indstilling til at skjule elementet på forskellige enhedsstørrelser. Klik her for mere information.
• brugerdefinerede attributter – Brug denne indstilling til at tilføje brugerdefinerede attributter til elementets HTML-tag. Såsom data-info=123. Du kan bruge indstillingen til at injicere brugerdefinerede oplysninger i det element, der skal bruges på din tilpasningskode.

Demo

for at se en live demo af Brødkrummeelementet Klik her.

oversigt

på få minutter har du lært, hvordan du tilføjer og opsætter brødkrummer til Cornerstone / Content Builder. Du har lært at designe brødkrummeelementet såvel som dets individuelle links. Endelig har du også lært, hvordan du konfigurerer afgrænseren til din smag.