Fülek widget beágyazott elemekkel

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.

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? 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

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

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

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ó

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ó

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ó

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

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). Ennél a widgetnél a widget szintű CSS ID nem használható: a CSS ID-t a fültételeknél add meg.