# Fülek widget beágyazott elemekkel

> A Fülek widget hozzáadása, a fülek és a beágyazott elemek szerkesztése, valamint a Tartalom, Stílus és Haladó beállítások.

A beágyazott elemekkel működő **Fülek** widgetben minden fül saját konténert kap, ebbe widgeteket és más elemeket (szöveget, képet, gombot, akár újabb widgetet) helyezhetsz. Így a tartalmat füleken rendezheted, és minden fülön belül külön szakaszokban, részletesebben mutathatod be az adott téma anyagát.

## Mire jó?

Egy újonnan nyílt bútorbolt „Rólunk” oldalán például négy fület hozhatsz létre: **Műhelyeink**, **Időpontok**, **Mit kapsz** és **Árak**. Az első fülön a műhelyek leírása és képei állnak, a másodikon a gyakoriság és egy **Tudj meg többet** gomb, a harmadikon a részvétel hozadéka, a negyediken az árazási táblák. További ötletek:

- ingatlanhirdetések fülönként: jellemzők, elhelyezkedés, ár, virtuális séta és érdeklődő űrlap;
- rendezvénycsomagok: helyszínek, étlap, szórakoztatás és kiegészítők;
- cikkek témák szerint (táplálkozás, fitnesz, lelki egészség), fülönként cikkekkel, ábrákkal, videókkal és ajánlott forrásokkal.

## Mi változik a beágyazott elemekkel?

Ha a konténer és a beágyazott elemek funkció aktív, a **Fülek** widget három ponton lett erősebb:

- **Beágyazott elemek:** a fülek widgeteket és más elemeket is tartalmazhatnak, így egy fülön belül összetett elrendezést építhetsz.
- **Jobb stílusozás:** a fülek elrendezése, pozíciója és stílusa állítható, és ikonokat is használhatsz bennük.
- **Jobb reszponzív beállítások:** kiválaszthatod, melyik töréspontnál váltson a megjelenítés harmonika jellegű (függőleges) elrendezésre.

A weboldalad meglévő, régi Fülek widgetjeit ez nem érinti: a korábbi beállításokkal szerkeszthetők, és úgy működnek tovább.

## Widget hozzáadása

1. Kattints az Elementor szerkesztőben a **+** jelre: megjelenik az összes elérhető widget.
2. Kattints a **Fülek** widgetre, vagy húzd a vászonra.

Alapból három fül jön létre, mindegyikben egy beépített, üres konténerrel, amelyet te töltesz fel.

![A Fülek widget három füllel a vásznon és a Tartalom fül a bal oldali panelen](./kepek/kontenerek-fulek-vaszon.webp)

*A Fülek widget három füllel a vásznon és a Tartalom fül a bal oldali panelen* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

A képen a három fül a vásznon látszik, a bal oldali panelen pedig a **Fültételek** listája.

### Fülek létrehozása

1. Add hozzá a **Fülek** widgetet a vászonhoz.
2. A **Tartalom** fül **Fülek** szekciójában kattints a szerkesztendő tételre.
3. A **Cím** mezőbe írd be a fül nevét, és ha kell, adj neki **CSS ID** azonosítót.
4. Az **Ikon** mezőben válassz ikont a fülhöz: **Nincs**, **SVG feltöltése** (saját SVG-fájl) vagy **Ikonkönyvtár**.
5. Az **Aktív ikon** mezőben azt az ikont add meg, amely az éppen kijelölt fülön jelenik meg.
6. Új fület a **Fül hozzáadása** gombbal veszel fel.

### Beágyazott elemek használata a fülben

1. Jelölj ki egy elemet vagy widgetet, és húzd a fül konténerébe. Például tegyél egy **Szövegszerkesztő** widgetet az első fülbe.
2. Összetett elrendezést is építhetsz. Például a második fülbe húzz egy konténert, a konténer beállításai között állítsd az irányt sorra, majd húzz bele egy **Címsor**, egy **Ikondoboz** és egy **Visszaszámláló** widgetet: így egy sorban jelennek meg.
3. Szükség esetén méretezd át a widgeteket, hogy szépen elférjenek.

Az oldalon lévő konténerek számáról a [Hány konténer legyen az oldalon?](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-hany-kontener/) fejezet ad tanácsot.

## Tartalom fül

A **Tartalom** fülön a fülek elrendezését és tartalmát állítod.

### Fültételek

Minden fül egy tétel. Egy tételre kattintva szerkesztheted:

- **Cím:** a fül neve.
- **Ikon:** a fül címe mellett megjelenő ikon. Három lehetőség van: nincs ikon, saját SVG-fájl (ehhez be kell kapcsolni az SVG-támogatást) vagy ikon az ikonkönyvtárból.
- **Aktív ikon:** az éppen aktív fülön megjelenő ikon.
- **CSS ID:** azonosító, amellyel az adott elemre hivatkozni lehet.

A tételeket duplikálhatod vagy törölheted a sor mellett lévő ikonokkal.

### Irány, Sorkizárt, Cím igazítása

![A Fülek widget Tartalom füle: a Fültételek, az Irány, a Sorkizárt és a Cím igazítása](./kepek/kontenerek-fulek-tartalom.webp)

*A Fülek widget Tartalom füle: a Fültételek, az Irány, a Sorkizárt és a Cím igazítása* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

A képen a fültételek listája és az elrendezési beállítások láthatók.

- **Irány:** a fülek iránya, négy értékkel. Ha az irány sor (vízszintes), megjelenik egy csúszka, amellyel a fülek szélességét állíthatod PX-ben vagy %-ban.
- **Sorkizárt:** a fülek közötti térközt és a fülek távolságát határozza meg a konténer szélétől.
- **Cím igazítása:** a fül címe a fülön belül balra, középre vagy jobbra kerül.

### További beállítások

![A További beállítások szekció: Vízszintes görgetés és Töréspont](./kepek/kontenerek-fulek-tovabbi.webp)

*A További beállítások szekció: Vízszintes görgetés és Töréspont* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

- **Vízszintes görgetés:** ha több fület veszel fel, mint amennyi elfér a képernyőn, az újak alapból az előzők alatt jelennek meg. Bekapcsolva a további fülek az eddigiek mellett maradnak, és a látogatónak vízszintesen kell görgetnie, hogy elérje őket. A beállítás alapértéke **Kikapcsolás**.
- **Töréspont:** mobilon és táblagépen, kisebb képernyőn a fülek alapból automatikusan függőleges, harmonika jellegű elrendezésre váltanak. A menüben azt a töréspontot választhatod ki, amelynél ez megtörténik: mobil (767 képpontnál keskenyebb képernyő) vagy táblagép (1024 képpontnál keskenyebb képernyő). A **Nincs** érték kikapcsolja a váltást, ilyenkor a látogatók vízszintesen görgetve látják az összes fület (ezt nem ajánljuk).

## Stílus fül

![A Fülek widget Stílus füle: Fülek közötti hézag, Távolság a tartalomtól és a háttér, szegély, árnyék beállításai](./kepek/kontenerek-fulek-stilus.webp)

*A Fülek widget Stílus füle: Fülek közötti hézag, Távolság a tartalomtól és a háttér, szegély, árnyék beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

### Fülek szekció

- **Fülek közötti hézag:** a fülek közötti távolság, csúszkával vagy számmal.
- **Távolság a tartalomtól:** a fül címe és a fül tartalma közötti hely.
- **Háttér típusa:** klasszikus vagy színátmenet, a **Normál** (alapállapot), **Rámutatás** (amikor a látogató egérrel a fül fölé megy) és **Aktív** (a kinyitott fül) füleken külön. A **Rámutatás** fülön megjelenik az **Átmenet időtartama** beállítás is: ennyi idő alatt változik fokozatosan a fül színe.
- **Szegély típusa:** a szegély típusa, ugyancsak a három állapotban.
- **Dobozárnyék:** árnyék a füleknek.
- **Sarkok lekerekítése:** a négy sarokra külön.
- **Padding:** a tartalom széle és a fülek széle közötti belső hely.

### Címek szekció

![A Címek szekció: tipográfia, szín, szövegárnyék és szöveg körvonala](./kepek/kontenerek-fulek-cimek.webp)

*A Címek szekció: tipográfia, szín, szövegárnyék és szöveg körvonala* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

- **Tipográfia:** a cím megjelenése (betűtípus, méret, vastagság és így tovább).
- **Szín:** a cím színe a **Normál**, **Rámutatás** és **Aktív** állapotra; színválasztóval vagy globális színnel.
- **Szövegárnyék:** árnyék a cím szövegének.
- **Szöveg körvonala:** körvonal a cím betűinek.

### Ikon szekció

![Az Ikon szekció: Pozíció, Méret, Térközök és Szín](./kepek/kontenerek-fulek-ikon.webp)

*Az Ikon szekció: Pozíció, Méret, Térközök és Szín* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

- **Pozíció:** az ikon a fül címe fölött, mellette (jobbra vagy balra) vagy alatta jelenik meg.
- **Méret:** a címek melletti ikon mérete csúszkával.
- **Térközök:** a fül címe és az ikon közötti hely.
- **Szín:** az ikon színe a **Normál**, **Rámutatás** és **Aktív** állapotra.

### Tartalom szekció

![A Tartalom szekció: háttér, szegély, sarkok lekerekítése és padding](./kepek/kontenerek-fulek-tartalom-stilus.webp)

*A Tartalom szekció: háttér, szegély, sarkok lekerekítése és padding* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

- **Háttér típusa:** a fül tartalmi részének háttere (klasszikus vagy színátmenet).
- **Szegély típusa:** a tartalom szegélye.
- **Sarkok lekerekítése:** a tartalom sarkainak kerekítése.
- **Padding:** a tartalom széle és az egyes fülek széle közötti belső hely.

## Haladó fül

![A Fülek widget Haladó füle: Margó, Padding, Szélesség és Pozíció](./kepek/kontenerek-fulek-halado.webp)

*A Fülek widget Haladó füle: Margó, Padding, Szélesség és Pozíció* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

A **Haladó** fül a widget pozícióját, térközét, egyedi kódját és más beállításait tartalmazza, ugyanúgy, mint más widgeteknél (lásd a [Haladó beállításokat](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-halado-beallitasai/)). Ennél a widgetnél a widget szintű **CSS ID** nem használható: a CSS ID-t a fültételeknél add meg.