# Fülek elem (v4)

> Fülek építése a v4 szerkesztő Fülek elemével: fülek átnevezése, tartalom, háttér és állapotok osztályokkal, elrendezés.

A **Fülek** elem a v4 szerkesztőben olyan oldalrészt készít, amelyen a látogatók füleken át válthatnak a különböző tartalmak között, így kevesebb helyen több tartalmat mutathatsz. Tipikus felhasználás: GYIK, hírportál kategóriánkénti füleken, vagy az oldal szakaszait leíró és azokra mutató fülek. Egy kávézólánc oldalán például minden fiókhoz külön fül tartozhat.

A v3 szerkesztő beágyazott elemekkel működő változatáról lásd: [Fülek widget beágyazott elemekkel](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-fulek-beagyazott-elemekkel/).

## Az elem hozzáadása és törlése

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjenek az elemek.
2. Kattints a **Fülek** elemre, vagy húzd a vászonra. Lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

Törléshez jelöld ki az elemet, és nyomd meg a Delete gombot. Lásd: [Elemek törlése és mozgatása](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-torlese-es-mozgatasa/).

## Példa: egy kávézólánc három fiókja

A **Fülek** elem alapból három fület tartalmaz. A példában a fülek a belvárosi, az egyetemi és a nyugati fiók.

1. Add a vászonhoz a **Fülek** elemet. A bal oldali panelen a **Menüpontok** között megjelenik a három fül.
2. A navigáció megkönnyítéséhez nevezd át a fül-indítókat (ez nem a látogatóknak megjelenő felirat). Kattints az első indítóra, és írd át a nevét „Egyetem”-re. Itt az **Alapértelmezett** kapcsolóval megadhatod azt is, melyik fül legyen nyitva az oldal első megtekintésekor.
3. Nevezd át a másik kettőt „Belváros” és „Nyugati fiók” névre.
4. Kattints az első fül közepére: ez egy bekezdéselemet nyit a fülön belül. Írd be a fül szövegét. A fülek közti navigációt megkönnyíti a [Szerkezet ablak](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szerkezet-ablak/).
5. Ismételd meg a többi fülnél is.
6. Ha minden fülnek saját hátteret adsz, jelöld ki a fület (rámutatva és az ikonra kattintva, vagy a Szerkezet ablakban), nyisd meg a **Stílus** fület, és a **Háttér** szekcióban adj meg képet. Lásd: [Háttér](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/).
7. A fül tartalmához jelöld ki a fül tartalmi területét a Szerkezet ablakból, és tegyél bele **Bekezdés** elemet. Lásd: [Bekezdés elem (v4)](https://hub.hellowp.io/hu/plugins/elementor/widgetek-bekezdes-elem/). A tartalmi területre címsort, képet és bármilyen más elemet is tehetsz.
8. Ismételd meg a többi fülnél.

### Hatások a fül-indítókon

A navigáció és a használhatóság javítására hatásokat adhatsz a fül-indítóknak.

1. Jelöld ki az egyik fül-indítót, és töröld a háttérképét, mert az zavarná a hatásokat.
2. Hozz létre egy `tab_colors` nevű osztályt a következő állapotokkal: **Hover**: piros háttér; **Aktív**: világoskék háttér; **Kijelölt**: sárga háttér. Lásd: [Osztályok](https://hub.hellowp.io/hu/plugins/elementor/stilus-osztalyok/) és [Elemállapotok](https://hub.hellowp.io/hu/plugins/elementor/stilus-elemallapotok/).
3. Add a `tab_colors` osztályt az összes fül-indítóhoz.

Ezután a fül fölé gördülve, illetve kijelölve a fülek színt váltanak. Az **Aktív** szín nehezen vehető észre, mert csak a kattintás pillanatában érvényes.

### Függőleges elrendezés

1. Jelöld ki a **Fülek** elemet, és nyisd meg a **Stílus** fület.
2. Nyisd meg az **Elrendezés** szekciót.
3. Állítsd a fülek elrendezését **Sor** értékre (a fülek és a tartalom egymás mellett állnak).
4. Jelöld ki a **Fülek menü** elemet, és állítsd **Oszlop** értékre: így a fülek függőleges, harmonikaszerű listát alkotnak.

![A Fülek elem Általános füle: a három fül-indító, az Alapértelmezett jelölés, ID, Attribútumok és Megjelenítési feltételek](./kepek/widgetek-fulek-elem-tartalom.webp)

*A Fülek elem Általános füle: a három fül-indító, az Alapértelmezett jelölés, ID, Attribútumok és Megjelenítési feltételek* (https://minta-bolt.hu/wp-admin/post.php?post=73&action=elementor)

A képen a **Menüpontok** között három fül-indító áll, az elsőn az **Alapértelmezett** jelöléssel. Az indítók felirata ezen a webhelyen angolul („Tab 1 trigger”) látszik.

## Általános fül

| Beállítás | Mit csinál |
|---|---|
| **Menüpontok** | A plusz jellel új fület adsz hozzá. Egy indítóra kattintva átnevezheted, és az **Alapértelmezett** kapcsolóval megadhatod, hogy melyik fül legyen nyitva az oldal első megtekintésekor |
| **ID** | Egyedi azonosító, amellyel egyedi kóddal célozhatod az elemet |
| **Attribútumok** | Fejlesztőknek: attribútumok az elem testre szabásához |
| **Megjelenítési feltételek** | Az elem megjelenítése vagy elrejtése feltételek alapján |

## Stílus fül

A **Stílus** fülön az **Elrendezés**, **Térközök**, **Méret**, **Pozíció**, **Tipográfia**, **Háttér**, **Szegély** és **Hatások** szekciók állnak. Ezekről lásd: [Méret](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-meret/), [Pozíció](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-pozicio/), [Tipográfia](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-tipografia/), [Háttér](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/), [Hatások](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatasok/) és [Szegély és lekerekítés](https://hub.hellowp.io/hu/plugins/elementor/stilus-szegely-es-lekerekites/).