dacă este prima dată când auziți despre termenul „breadcrumb” folosit în designul web, permiteți-mi să vă arăt cum arată:
sunt destul de sigur că l-ați întâlnit pe site-urile pe care le-ați vizitat. Acum, să adăugăm unul pe website.To adăugați elementul breadcrumb, pur și simplu căutați „breadcrumb” pe panoul Elemente și trageți elementul Breadcrumb în panoul Conținut.
veți putea vedea ceva de genul acesta:
acum, textul pe care îl vedeți în constructor sau în Cornerstone nu este textul real care va apărea pe front-end-ul site-ului dvs. Acesta este doar un substituent. Pe front-end, veți vedea ierarhia paginilor web începând cu linkul către casa din partea stângă-cea mai mare parte, apoi mutând un copil mai departe în dreapta.
în acest caz, deoarece pagina pe care o creăm este Profilul Companiei, care în acest exemplu este un copil al paginii Despre noi, structura este: acasă > Despre noi > Profilul Companiei.
în grupul de câmpuri de configurare, veți vedea următoarele câmpuri:
Home Label Type
puteți alege dacă să utilizați un text simplu (de exemplu, acasă) pentru linkul paginii de pornire sau să utilizați în schimb o pictogramă.
Home Label
Dacă ați selectat textul din câmpul Home Label Type de mai sus, puteți schimba textul de la a spune „Home” la altceva (de exemplu, Blog, știri).
dacă ați ales pictograma, vi se va oferi opțiunea de a alege pictograma de utilizat.
Width& Max Width
puteți seta lățimea implicită a elementului Breadcrumb. De asemenea, puteți seta lățimea maximă astfel încât să nu poată depăși această lățime.
justificare& direcție
aceasta vă permite să modificați setați proprietățile Flex CSS ale elementului Breadcrumb. Dacă nu sunteți familiarizat cu Flexbox, există o introducere utilă aici.
fundal
puteți adăuga o culoare de fundal elementului.
puteți seta fonturile, marginile, garniturile, umbrele de cutie, marginile și raza de frontieră a elementului breadcrumb. Veți vedea aceste proprietăți în panoul de control:
rețineți că aceste proprietăți menționate, atunci când sunt configurate, sunt pentru întregul element de pesmet și nu pentru legăturile individuale din interiorul elementului menționat. Asta înseamnă că, dacă setați garniturile, se va aplica întregului element.
mai târziu vom discuta despre cum să configurați link-uri individuale în interiorul breadcrumb.
în pesmet, „delimitatorii” sunt separatorii fiecărei verigi.
delimitatorul implicit este o săgeată, dar putem schimba asta și chiar elimina asta cu totul. Setările pot fi găsite în grupul de câmpuri de configurare a Delimetrului.
acum să discutăm setările individuale.
Enable
în mod implicit, delimitatorii sunt activați, dar îl puteți dezactiva, eliminând astfel orice delimitator.
Delimitator Type
la fel ca în tipul de etichetă de pornire din grupul de câmpuri de configurare discutat anterior, puteți alege dacă să utilizați Text sau pictogramă pentru tipul Delimitatorului. Când spunem „Text”, nu înseamnă neapărat cuvinte, deși cuvintele sunt permise. Ceea ce se utilizează în general sunt codurile ASCII. Delimitatorul implicit, & rarr; este un cod ASCII care generează săgeata.
dacă alegeți pictograma ca tip de Delimitator, vi se va afișa câmpul selector de pictograme pentru a alege pictogramele pe care doriți să le utilizați.
LTR& Delimitator RTL
LTR înseamnă „de la stânga la dreapta”, în timp ce RTL înseamnă „de la dreapta la stânga”. Acestea înseamnă practic direcția în modul în care citim scrisorile. De exemplu, citiți acest articol începând de la stânga la dreapta, astfel, acesta este LTR. Limbi precum araba și ebraica își citesc personajele și cuvintele începând de la dreapta la stânga.
unele site-uri web acceptă mai multe limbi în care sunt acceptate atât LTR, cât și RTL. Această setare vă pregătește delimitatorul de pesmet, permițându-vă să setați nu numai delimitatorul LTR, ci și ce să utilizați atunci când RTL este activat.
spațiere
valoarea pe care o puneți aici va fi setată ca distanță atât pe partea stângă, cât și pe partea dreaptă a delimitatorului. Deci, dacă setați 10px ca valoare, fiecare delimitator va avea un spațiu de 10px în stânga și un alt 10px în dreapta.
setările legăturilor sunt practic aceleași cu setările de configurare și proiectare combinate. Principala diferență este că setările legăturilor sunt specifice legăturilor individuale, în timp ce primele două sunt aplicate elementului breadcrumb în sine.
Configurarea legăturilor vă permite să setați, de asemenea, culoarea textului și culoarea de fundal a tuturor legăturilor din interiorul breadcrumbului mouse-ul se deplasează pe un link.
Customize
secțiunea customize constă din controale pentru a personaliza elementul dacă sunteți în HTML, CSS și Javascript.
- ID – utilizați această opțiune pentru a seta un ID HTML pentru element. ID-ul trebuie să fie unic pe pagină.
- Class-utilizați această opțiune pentru a seta o clasă HTML pentru element. Puteți utiliza clasa pentru codul CSS personalizat.
- element CSS-utilizați această opțiune pentru a avea un control mai bun asupra elementului pentru a accesa etichetele interioare ale elementului folosind
$elca selecție CSS. Click aici pentru informații mai detaliate. - ascunde în timpul Breakpoint – utilizați această opțiune pentru a ascunde elementul pe diferite dimensiuni de dispozitiv. Click aici pentru mai multe informații.
- atribute personalizate – Utilizați această opțiune pentru a adăuga atribute personalizate la eticheta HTML a elementului. Cum ar fi
data-info=123. Puteți utiliza opțiunea de a injecta informații personalizate în elementul de utilizat pe codul de personalizare.
Demo
pentru a vedea o demonstrație live a elementului pesmet click aici.
rezumat
în doar câteva minute, ați învățat cum să adăugați și să configurați pesmetul la Cornerstone / Content Builder. Ați învățat cum să proiectați elementul breadcrumb, precum și legăturile sale individuale. În cele din urmă, ați învățat cum să configurați delimitatorul după bunul plac.
vezi ceva inexact? Spune-ne