úgy néz ki, mint te'újra használja az IE11-et…

Ha ez az első alkalom, hogy hallja a webdesignban használt “breadcrumb” kifejezést, hadd mutassam meg, hogy néz ki:

biztos vagyok benne, hogy a webdesignban találkozott vele meglátogatott webhelyek. Most adjunk hozzá egyet a website.To adja hozzá a breadcrumb elemet, egyszerűen keresse meg a “breadcrumb” elemet az Elemek panelen, és húzza a Breadcrumb elemet a tartalom ablaktáblába.

valami ilyesmit láthat:

most a szöveg, amelyet az építőben vagy a Cornerstone-ban lát, nem az a tényleges szöveg, amely a webhely elején jelenik meg. Ez csak egy helyőrző. A front-end, látni fogja a hierarchia a weboldalak kezdve a linket a haza a bal oldalon-a legtöbb, majd mozog egy gyermek tovább a jobb oldalon.

ebben az esetben, mivel az általunk létrehozott oldal a vállalati profil, amely ebben a példában a Rólunk oldal gyermeke, a szerkezet a következő: Főoldal >Rólunk > vállalati profil.

a Setup field csoportban a következő mezők jelennek meg:

Home címke típusa

kiválaszthatja, hogy egyszerű szöveget (pl. Home) használ-e a kezdőlapra mutató hivatkozáshoz, vagy inkább ikont használ.

Home Label

Ha a fenti Home Label Type mezőben kiválasztott szöveget, akkor a szöveget a “Home” feliratról valami másra (pl. Blog, hírek) változtathatja.

Ha az ikon lehetőséget választotta, akkor lehetősége lesz kiválasztani a használni kívánt ikont.

Width & Max Width

beállíthatja a zsemlemorzsa elem alapértelmezett szélességét. Beállíthatja a maximális szélességét is, hogy ne lépje túl ezt a szélességet.

indokolás & irány

Ez lehetővé teszi a Breadcrumb elem Flex CSS tulajdonságainak beállítását. Ha nem ismeri a Flexbox alkalmazást, itt van egy hasznos bevezetés.

háttér

háttérszínt adhat az elemhez.

beállíthatja a breadcrumb elem betűtípusait, margóit, kitöltéseit, box-árnyékait, szegélyeit és határ sugarát. Ezeket a tulajdonságokat a Vezérlőpulton láthatja:

vegye figyelembe, hogy ezek a tulajdonságok, amikor konfigurálva vannak, a teljes breadcrumb elemre vonatkoznak, nem pedig az említett elemen belüli egyes hivatkozásokra. Ez azt jelenti, hogy ha beállítja a párnákat, akkor az az egész elemre vonatkozik.

később megvitatjuk, hogyan kell konfigurálni az egyes linkeket a breadcrumb belsejében.

a zsemlemorzsában a “határolók” az egyes linkek elválasztói.

Az alapértelmezett határoló egy nyíl, de ezt megváltoztathatjuk, sőt teljesen eltávolíthatjuk. A beállítások a Delimeter Setup field csoportban találhatók.

most beszéljük meg az egyes beállításokat.

engedélyezze

alapértelmezés szerint az elválasztók be vannak kapcsolva, de kikapcsolhatja, így eltávolítva az elválasztókat.

határoló típusa

csakúgy, mint a Home Label Type alatt a Beállítás mező csoport korábban tárgyalt, megadhatja, hogy a szöveg vagy ikon a határoló típusát. Amikor azt mondjuk, hogy “Szöveg”, ez nem feltétlenül jelent szavakat, bár a szavak megengedettek. Általában az ASCII kódokat használják. Az alapértelmezett határoló, → egy ASCII kód, amely létrehozza a nyíl.

Ha az ikont választja határoló típusként, akkor megjelenik az ikonválasztó mező a használni kívánt ikonok kiválasztásához.

LTR & RTL határoló

az LTR jelentése “balról jobbra”, míg az RTL jelentése “jobbról balra”. Ezek alapvetően azt az irányt jelentik, ahogyan a leveleket olvassuk. Például ezt a cikket balról jobbra kezdve olvassa, így ez az LTR. Az olyan nyelvek, mint az arab és a héber, jobbról balra olvassák a karaktereiket és a szavaikat.

egyes webhelyek több nyelvet támogatnak, ahol mind az LTR, mind az RTL támogatott. Ez a Beállítás elkészíti a zsemlemorzsa határolóját, lehetővé téve, hogy ne csak az LTR határolót állítsa be, hanem azt is, hogy mit használjon, ha az RTL engedélyezve van.

távolság

az itt megadott érték távolságként lesz beállítva mind a határoló bal, mind a jobb oldalán. Tehát, ha 10 képpontot állít be értékként, akkor minden határoló bal oldalán 10 képpont, jobb oldalán pedig egy másik 10 képpont lesz.

a linkek beállításai gyakorlatilag megegyeznek a beállítási és tervezési beállításokkal együtt. A fő különbség az, hogy a linkek beállításai az egyes linkekre vonatkoznak, míg az első kettő magára a breadcrumb elemre vonatkozik.

a linkek beállítása lehetővé teszi az összes link szövegének és háttérszínének beállítását is a breadcrumb belsejében, amelyet az egér egy linken lebeg.

Customize

a customize szakasz vezérlőkből áll az elem testreszabásához, ha HTML, CSS vagy Javascript.

• ID – ezzel az opcióval állíthatja be az elem HTML azonosítóját. Az azonosítónak egyedinek kell lennie az oldalon.
• Class-ezzel az opcióval állíthat be egy HTML osztályt az elemhez. Használhatja az osztályt az egyéni CSS-kódhoz.
• Element CSS-használja ezt az opciót, hogy jobban ellenőrizze az elemet az elem belső címkéinek eléréséhez a $el CSS választásként. Kattintson ide a részletes információkért.
• Elrejtés töréspont alatt – ezzel az opcióval elrejtheti az elemet különböző eszközméretekben. Kattintson ide további információkért.
• egyéni attribútumok – ezzel az opcióval egyéni attribútumokat adhat az elem burkoló HTML-címkéjéhez. Mint például data-info=123. Használhatja azt a lehetőséget, hogy egyéni információkat fecskendezzen be az elembe, amelyet a testreszabási kódhoz használ.

Demo

a Breadcrumbs elem élő bemutatójának megtekintéséhez kattintson ide.

összefoglaló

néhány perc alatt megtanultad, hogyan kell hozzáadni és beállítani a breadcrumbs-t a Cornerstone / Content Builder-hez. Megtanulta, hogyan kell megtervezni a zsemlemorzsa elemet, valamint az egyes linkeket. Végül azt is megtanulta, hogyan konfigurálhatja a határolót tetszése szerint.