Det ser ut som du'bruker IE11 …

hvis dette er første gang du hører om begrepet «brødsmule» som brukes i webdesign, la meg vise deg hvordan det ser ut:

jeg er ganske sikker På at du har møtt Det på nettstedene du har besøkt. Nå, la oss legge til en på din website.To legg til breadcrumb-elementet, bare søk etter «breadcrumb» på elementpanelet og dra Breadcrumb-elementet til innholdsruten.

du kan se noe slikt:

nå er teksten du ser i byggeren eller I Hjørnesteinen ikke den faktiske teksten som vises på forsiden av nettstedet ditt. Det er bare en plassholder. På forsiden ser du hierarkiet til nettsidene som starter med lenken Til Hjemmet til venstre, og deretter flytter ett barn videre til høyre.

I dette tilfellet, siden Siden vi oppretter Er Firmaprofilen, som i dette eksemplet er et barn Av Siden Om Oss, er strukturen: Hjem > Om oss> Firmaprofil.

under Oppsett-feltgruppen ser du følgende felt:

Hjemetikettype

du kan velge om du vil bruke en ren tekst (F. Eks. Hjem) for lenken til hjemmesiden eller bruke et ikon i stedet.

Home Label

hvis Du valgte Tekst i Feltet Home Label Type ovenfor, kan du endre teksten fra å si «Home» til noe annet (F.Eks. Blogg, Nyheter).

hvis Du velger Ikon, får du muligheten til å velge ikonet du vil bruke.

Bredde & Maks Bredde

du kan angi standardbredden på Brødsmuleelementet. Du kan også angi maksimal bredde slik at den ikke kan gå utover den bredden.

Begrunnelse & Retning

dette lar deg endre angi Flex CSS-egenskapene Til Brødsmuleelementet. Hvis Du ikke er kjent Med Flexbox, er det en nyttig introduksjon her.

Bakgrunn

du kan legge til en bakgrunnsfarge til elementet.

du kan angi brødsmule element fonter, marginer, paddings, box-skygger, grenser og kantradius. Du ser disse svært egenskapene på kontrollpanelet:

Gjør oppmerksom på at disse egenskapene nevnt, når de er konfigurert, er for hele breadcrumb-elementet og ikke for individuelle koblinger inne i nevnte element. Det betyr, hvis du setter Paddings, vil det gjelde for hele elementet.

senere vil vi diskutere hvordan du konfigurerer individuelle koblinger inne i brødsmule.

i brødsmuler er» avgrensere » separatorene til hver lenke.

standardavgrenseren er en pil, men vi kan endre det og til og med fjerne det helt. Innstillingene finner du i Feltgruppen Delimeter Setup.

la Oss nå diskutere de enkelte innstillingene.

Aktiver

som standard er skilletegn slått på, men du kan slå den av, og dermed fjerne noen skilletegn.

Skilletegn

på samme måte som I Hjemetikettypen under Oppsett-feltgruppen som ble diskutert tidligere, kan Du velge Om Du vil bruke Tekst eller Ikon for Skilletegn-Typen. Når vi sier «Tekst», betyr det ikke nødvendigvis ord, selv om ord er tillatt. DET som vanligvis brukes er ASCII-koder. Standard skilletegn, → er EN ASCII-kode som genererer pilen.

hvis Du velger Ikon Som Skilletegn, vises ikonvelger-feltet for å velge ikoner du vil bruke.

LTR& RTL-Skilletegn

LTR betyr » Venstre Til Høyre «MENS RTL betyr»Høyre Til Venstre». Disse betyr i utgangspunktet retningen i hvordan vi leser bokstaver. For eksempel leser du denne artikkelen fra venstre til høyre, og dermed ER DETTE LTR. Språk som arabisk og hebraisk leser deres tegn og ord fra høyre til venstre.

Noen nettsteder støtter flere språk der BÅDE LTR og RTL støttes. Denne innstillingen gjør breadcrumb skilletegn klar ved at du kan angi IKKE BARE LTR skilletegn, men også hva du skal bruke NÅR RTL er aktivert.

Spacing

verdien du legger her vil bli satt som avstanden på både venstre og høyre side av skilletegnet. Så hvis du setter 10px som verdi, vil hver avgrensning ha en plass på 10px til venstre og en annen 10px til høyre.

Lenkeinnstillingene er tilnærmet de samme Som Innstillingene For Oppsett og Utforming kombinert. Hovedforskjellen er At Lenkeinnstillingene er spesifikke for de enkelte koblingene, mens de to første brukes på selve brødsmuleelementet.

Links Setup lar deg også sette tekstfarge og bakgrunnsfarge på alle koblinger inne i brødsmule musen svever på en kobling.

Tilpass

tilpass-delen består av kontroller for å tilpasse elementet hvis DU er I HTML, CSS og Javascript.

• ID-Bruk dette alternativet til å angi EN HTML-ID for elementet. ID-EN skal være unik på siden.
• Klasse-Bruk dette alternativet til å angi EN HTML-Klasse for elementet. Du kan bruke klassen for din egendefinerte CSS-kode.
• ELEMENT CSS-Bruk dette alternativet for å få bedre kontroll over elementet for å få tilgang til de indre kodene til elementet ved å bruke $el SOM CSS-valg. Klikk her for mer detaljert informasjon.
• Skjul Under Stoppunkt – bruk dette alternativet til å skjule elementet på forskjellige enhetsstørrelser. Klikk her for mer informasjon.
• Egendefinerte Attributter-Bruk dette alternativet til å legge til egendefinerte attributter I html-koden for elementet. For eksempel data-info=123. Du kan bruke alternativet til å injisere tilpasset informasjon i elementet som skal brukes på tilpasningskoden.

Demo

for å se en live demo Av Brødsmuler Element klikk her.

Sammendrag

På bare noen få minutter har du lært hvordan du legger til og konfigurerer brødsmuler Til Cornerstone / Content Builder. Du har lært å designe breadcrumb-elementet, så vel som de enkelte koblingene. Til slutt har du også lært hvordan du konfigurerer avgrenseren til din smak.