# Breadcrumb sáv widget: morzsa-útvonal az oldalakhoz

> A Breadcrumb sáv widget beállításai: két stílus, kezdőlap-felirat, elválasztó ikon, karakterkorlát, a morzsa részeinek ki- és bekapcsolása.

A morzsa-útvonal (breadcrumb) megmutatja a látogatónak, hol jár az oldalon, és egy kattintással visszavezeti a felettes szintre. A **Breadcrumb sáv** widget az útvonalat magától építi fel abból az oldalból, amelyet éppen nézel, és minden részét formázhatod. A widget az ingyenes bővítményben is megvan, és ott is ugyanazt az útvonalat építi.

A widgetet a **The Plus Addons → Widgets** oldalon kell bekapcsolni (keresd a **Breadcrumb sáv** nevet, angolul Breadcrumbs Bar), utána az Elementor panelen találod meg.

## Hová tedd

A widget helye a sablon, amelyik az érintett oldalakat adja:

- fejléc-sablonba téve minden oldalon megjelenik, mert a morzsa a nézett oldalból épül;
- egyedi (single) vagy archívum-sablonba téve csak azokon az oldalakon látszik.

A widget **Használat a Theme Builderrel** szakasza is segít a sablon létrehozásában.

Az útvonalon a kezdőlap és az elválasztó ikon Font Awesome ikon, de a widget maga nem tölti be a Font Awesome-ot. Ha az oldalon más elem sem tölti be, mindkét ikon üresen jelenik meg. Ilyenkor az **Ikonbetűkészlet** listában válaszd a képes ikont, vagy tegyél az oldalra olyan elemet, amely betölti az ikonbetűkészletet.

## Szakaszok

![A Breadcrumb sáv widget Elrendezés szakasza](./kepek/karuszell-navigacio-3-morzsa-panel.webp)

*A Breadcrumb sáv widget Elrendezés szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen az **Elrendezés** szakasz látszik: a két **Breadcrumb stílusa** csempe, a **Breadcrumb teljes szélessége** kapcsoló és az **Igazítás**. Alatta a **Tartalom**, az **Elválasztó ikon**, a **Speciális opció** és az **Egyéb opció** szakasz következik.

### Elrendezés

A **Breadcrumb stílusa** két képes csempe. Az első (lekerekített sáv, ez az alap) egy lekerekített „tablettát” ad. A második minden lépést nyílszerű csempeként rajzol ki.

![Második stílus: nyíl alakú csempék](./kepek/karuszell-navigacio-3-morzsa-stilus2.webp)

*Második stílus: nyíl alakú csempék* (https://minta-bolt.hu/tp-kn3-cegunk/tp-kn3-csapatunk/tp-kn3-vezetoseg2/)

A képen a második stílus látszik: a Kezdőlap, a Cégünk, a Csapatunk és az aktuális oldal egy-egy nyílszerű csempe.

- A **Breadcrumb teljes szélessége** az első stílusnál húzza a sávot a tároló teljes szélességére. A második stílus kiválasztásakor a kapcsoló nem látszik.
- Az **Igazítás** balra, középre vagy jobbra rendezi az útvonalat, eszközönként külön megadva.

### Tartalom

![A Tartalom szakasz](./kepek/karuszell-navigacio-3-morzsa-panel-tartalom.webp)

*A Tartalom szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a **Kezdőlap címe** (az első lépés szövege), az **Ikon kiválasztása** és az **Ikonbetűkészlet** látszik.

A **Kezdőlap címe** az első lépés szövege, alapból Kezdőlap. Az **Ikon kiválasztása** értéke **Nincs** vagy **Ikon**. Ikon esetén az **Ikonbetűkészlet** listában a Font Awesome, az Icons Mind (Pro) és az ikonkép közül választhatsz.

### Elválasztó ikon

Az elválasztó alapból ki van kapcsolva (az **Ikon kiválasztása** értéke **Nincs**). Állítsd **Ikon**-ra, és megjelenik a lépések között, alapból nyíl alakú ikonként.

- Az elválasztó ikon az egyes lépéseken belül, a szöveg után rajzolódik ki, nem a lépések között külön elemként.
- Az elválasztó egyedi bejegyzéstípushoz kapcsolható beállítása Pro: az egyedi bejegyzéstípus egyes oldalán a bejegyzéstípus nevét mutató lépéshez is hozzáteszi az elválasztót.

### Speciális opció

A szakasz egyetlen előugró panelt tartalmaz, a **Karakterkorlát**-ot. Kapcsold be az **Aktuális** kapcsolót, és adj meg egy számot: az útvonal utolsó lépése ennyi karakterre rövidül. A vágás karakterre, nem szóra történik, ezért szó közepén is elvághatja a címet.

### Egyéb opció

![Az Egyéb opció szakasz](./kepek/karuszell-navigacio-3-morzsa-panel-egyeb.webp)

*Az Egyéb opció szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A képen a **Kezdőlap**, a **Szülő** és az **Aktuális** kapcsoló látszik, mindhárom bekapcsolva.

A három kapcsoló azt dönti el, hogy az útvonal mely részei látszanak: a kezdőlap, a szülő szintek és az aktuális oldal. Alapból mind látszik.

## Beállítások összefoglalva

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Breadcrumb stílusa** | Két kinézet: lekerekített sáv vagy nyíl alakú csempék. | Az első csempe |
| **Breadcrumb teljes szélessége** | A sávot a tároló teljes szélességére nyújtja. Csak az első stílusnál. | Elrejtés |
| **Igazítás** | Balra, középre vagy jobbra, eszközönként. | Balra |
| **Kezdőlap címe** | Az első lépés szövege. | Kezdőlap |
| **Ikon kiválasztása** (Tartalom) | Ikon az első lépésen. | Ikon |
| **Ikonbetűkészlet** | Font Awesome, Icons Mind (Pro) vagy ikonkép. | Font Awesome |
| **Ikon kiválasztása** (Elválasztó ikon) | Az elválasztó ikon be- vagy kikapcsolása. | Nincs |
| Elválasztó egyedi bejegyzéstípushoz | Pro. Az elválasztó a bejegyzéstípus lépésén is. | Elrejtés |
| **Karakterkorlát → Aktuális** | Az utolsó lépést megadott karakterszámra vágja. | Elrejtés, 10 |
| **Kezdőlap**, **Szülő**, **Aktuális** | Az útvonal egyes részeinek mutatása vagy rejtése. | Megjelenítés |

## Mit mutat az útvonal az egyes oldaltípusokon

| Oldal | Útvonal |
| --- | --- |
| Címlap | Csak a kezdőlap-hivatkozás, nem útvonal |
| Oldal | Kezdőlap, majd minden szülőoldal, majd az aktuális oldal |
| Blogbejegyzés | Kezdőlap, a bejegyzés kategóriái, majd a bejegyzés címe |
| Kategória-archívum | A legfelső szintű kategória „Archívum” jellegű felirattal jelenik meg, az alkategóriánál a szülő és az alkategória neve látszik |
| Címke-archívum | Kezdőlap, majd a címke neve |
| Egyedi bejegyzéstípus egyes oldala | Kezdőlap, a bejegyzéstípus neve, majd a cím |
| WooCommerce termék | Kezdőlap, a termék kategóriái, majd a termék neve |
| Bolt és termékkategória-archívum | Kezdőlap, majd a bolt vagy a kategória neve |
| Keresési találatok | Kezdőlap, majd a keresés felirata a keresett kifejezéssel |
| 404 | Kezdőlap, majd a hibaoldal felirata |
| Archívum 2. oldala | Az útvonal, majd az oldalszám zárójelben |

Három szint mély oldalon az útvonal így néz ki:

![Morzsa három szint mély oldalon](./kepek/karuszell-navigacio-3-morzsa-oldal.webp)

*Morzsa három szint mély oldalon* (https://minta-bolt.hu/tp-kn3-cegunk/tp-kn3-csapatunk/tp-kn3-vezetoseg/)

A képen a Kezdőlap, a Cégünk, a Csapatunk és a Vezetőség egyetlen lekerekített sávban látszik.

Az egyes oldaltípusok részleteit a [Morzsa-útvonal az egyes oldaltípusokon](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/karuszell-navigacio-morzsa-oldaltipusok/) fejezet írja le.

## Formázás

A **Stílus** lap részenként csoportosít: a **Breadcrumb szöveg** a betűtípust, a színt és a keretet, a **Kezdőlap ikon** és az **Elválasztó** a két ikont, a **Tartalom háttér** és az **Elkülönített háttér** a sávot és az egyes lépéseket formázza.

## Hogyan működik

- Az útvonal a nézett oldalból épül, ezért egy fejléc-sablonban lévő widget az egész webhelyet lefedi.
- Az archívum, a keresés és a 404 lépések felirata fix, nincs rá beállítás.
- Az ingyenes és a Pro bővítményben a widget ugyanazt az útvonalat építi.
- Az Elementor szerkesztő vásznán az útvonal eltérhet a közzétett oldalétól, mert a szerkesztő előnézete nem futtatja ugyanazt az oldallekérdezést. A valódi útvonalat a közzétett oldalon ellenőrizd.

## Korlátok

- A **Kezdőlap** elrejtése a webhely címlapján nem hat, ott a kezdőlap-hivatkozás mindig látszik.
- A **Szülő** elrejtése kategória-archívumon nem hat. Oldalon, bejegyzésen és terméken működik.
- A **Karakterkorlát** szülő beállítása sehol nem hat, csak az **Aktuális** korlát működik.
- Az **Aktuális** korlát oldalakon nem érvényesül, bejegyzéseken és egyedi bejegyzéstípusokon igen.
- Az **Aktuális** elrejtése oldalon, bejegyzésen, terméken, címke- és kategória-archívumon eltünteti az utolsó lépést a látványból, de a szöveg CSS-sel elrejtve az oldal forrásában marad.
- Egyedi taxonómia archívumán a bejegyzéstípus neve látszik a kifejezés helyett, ezért ugyanannak a taxonómiának minden kifejezése ugyanazt az útvonalat kapja.
- Az útvonal sima navigációs kód, nem ad hozzá morzsa-strukturált adatot a keresőknek.

## Hibaelhárítás

- **Az ikonok üresek.** Az oldalon semmi nem tölti be a Font Awesome-ot. Használd az ikonkép lehetőséget, vagy tegyél az oldalra olyan elemet, amely betölti az ikonbetűkészletet.
- **Nincs elválasztó a lépések között.** Az **Elválasztó ikon** szakaszban állítsd az **Ikon kiválasztása** értékét **Ikon**-ra, mert alapból **Nincs**.
- **Az útvonalban csak a kezdőlap látszik.** A címlapot nézed: ott csak egy kezdőlap-hivatkozás jelenik meg, minden más oldalon teljes útvonal.
- **Nincs Breadcrumb teljes szélessége kapcsoló.** Csak az első **Breadcrumb stílusa** csempénél látszik.