# Fülek

> A Fülek widget tételei, beállításai, sablonok elhelyezése a fülekben.

A **Fülek** widget a tartalmat több fülre bontja. A fülek tartalma lehet szerkesztővel írt szöveg vagy egy korábban elkészített Elementor-sablon.

## Sablon előkészítése a fülekhez

Ha egy fül tartalmát sablonból szeretnéd megjeleníteni, előbb hozd létre a sablont:

1. Hozz létre egy új oldalt, és nyisd meg az Elementorral.
2. Építsd fel a tartalmat tetszőleges widgetekkel, például a Képek elrendezése widgettel.
3. Kattints a **Közzététel** gomb melletti nyílra, és mentsd el az oldalt sablonként.
4. Adj címet a sablonnak, és mentsd el.

Így annyi sablont készíthetsz, ahány fülhöz szükséged van.

## A widget felvétele

1. Nyisd meg azt az oldalt az Elementorral, ahová a füleket szánod.
2. Húzd a **Fülek** widgetet az oldalra.
3. A **Tartalom** fülön a **Tételek** részben alapból három fül van. Szerkesztheted, másolhatod (a másolás ikonnal), törölheted (az X-szel), vagy az **Elem hozzáadása** gombbal újat vehetsz fel.

![A Fülek widget egyik tétele megnyitva](./kepek/tabs-tetel.webp)

*A Fülek widget egyik tétele megnyitva* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

A képen az első fül beállításai látszanak, a tartalma sablon.

## Egy tétel beállításai

| Beállítás | Mit csinál |
|---|---|
| **Aktív** | Az oldal megnyitásakor ez a fül lesz nyitva. |
| **Disable Tab** | A fület letiltja. |
| **Restrict by User Role** | Szerepkörhöz köti a fül megjelenését. |
| **Kép használata?** | Bekapcsolva a fül címe mellé ikon helyett képet tehetsz. |
| **Ikon** | A fül címe mellett megjelenő ikon. Kikapcsolható, képre cserélhető. |
| **Kép** | A fül címe mellett megjelenő kép (ha a **Kép használata?** be van kapcsolva). |
| **Címke** | A fül felirata. |
| **Tartalomtípus** | **Sablon** vagy **Szerkesztő**. |
| **Sablonminta kiválasztása** | **Sablon** típusnál a fül tartalmául szolgáló sablon. A mellette lévő **Sablon szerkesztése** gombbal közvetlenül módosíthatod. |
| **Tartalom** | **Szerkesztő** típusnál a fülben megjelenő szöveg. |
| **Custom Style** | Egyedi stílus az adott fülhöz. |
| **Vezérlő CSS ID** | Egyedi azonosítót ad a fül vezérlőjének (lásd [Hivatkozás egy fülre](https://hub.hellowp.io/hu/plugins/jet-tabs/fulek-hivatkozas-menubol/)). |
| **Add item ID to URL** | A kiválasztott fül azonosítója bekerül az oldal címébe. |

Ha a **Dynamic data** kiegészítő telepítve és aktív, a tételeknél megjelenik a **Dinamikus beállítások** rész is, ennek leírása a [Dinamikus adatok](https://hub.hellowp.io/hu/plugins/jet-tabs/dinamikus-tartalom-dynamic-data/) fejezetben van. Ha a JetEngine is aktív, a **Tételek** szakaszban megjelenik egy kapcsoló, amellyel a JetEngine Query Builderében készített lekérdezést rendelheted a fülekhez.

## A widget beállításai

A **Tartalom** fül **Beállítások** szakaszában a következők állíthatók:

![A Fülek widget beállításai](./kepek/tabs-beallitasok.webp)

*A Fülek widget beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Elem feliratának HTML-címkéje** | A fülek feliratának HTML-címkéje (**H1** és **H6** között, **div**, **span**, **p**). |
| **Fülek pozíciója** | Hol legyenek a fülek: **Bal**, **Felül**, **Jobb**, **Alul**. Alapból **Felül**. |
| **Display Mode** | **Fülek** vagy **Accordion** megjelenítés. |
| **Megjelenítési effektus** | A tartalom megjelenésének effektusa: **Nincs**, **Áttűnés**, **Nagyítás**, **Kicsinyítés**, **Felfelé mozgatás**, **Perspektivikus esés**. |
| **Fülek eseménye** | A váltást **Kattintás** vagy **Rámutatás** indítja. |
| **Automatikus váltás** | Bekapcsolva a fülek maguktól váltanak. Megjelenik a késleltetés mezője (alapból 3000 ms). |
| **Nincs aktív fül** | Bekapcsolva alapból egyik fül sincs nyitva. |
| **AJAX-betöltés használata a sablonhoz** | A sablonok betöltése AJAX-szal történik. Dinamikus adatokat tartalmazó sablonnál az **Ajax-kérés típusát** állítsd **Saját (aktuális oldal)** értékre ([Beállítások](https://hub.hellowp.io/hu/plugins/jet-tabs/beallitasok/)). |
| **Görgetés a tartalomhoz** | Fülváltás után az oldal a tartalomhoz görget. Bekapcsolva megadhatod a görgetés eltolását pixelben. |
| **Görgethető fülnavigáció** | Sok fül esetén hasznos. Alapból a fülek sorokba rendeződnek; ezzel vagy **Plain** (vízszintes görgetősáv), vagy **Slider** (húzással lapozható) megjelenítést kapsz. **Slider** esetén külön kapcsolókkal állítható a fix csúszkaszélesség, a középre igazítás, a végtelenített lapozás és a navigációs nyilak. |
| **Exclude from Hide Empty Items** | Az üres tételek elrejtése alól kivételt tesz. |

## Az eredmény

Mentsd el az oldalt, és nézd meg a nyilvános oldalon. A látogató a fülekre kattintva (vagy rájuk mutatva) vált a tartalmak között.

![A fülek az oldalon, vendégként nézve](./kepek/tabs-frontend.webp)

*A fülek az oldalon, vendégként nézve* (https://minta-bolt.hu/jettabs-bemutato/)

A kép az első, aktív fület mutatja a hozzá tartozó sablonnal.