# Stíluslisták widget: tételek és beállítások

> A Stíluslisták widget panelje: tételenkénti link, rögzítési jelzés (címke), számozás és a Tartalom, valamint a Stílus fül szakaszai.

A **Stíluslisták** (Style Lists) widget ikonos listát épít, amelyben minden tétel külön állítható: saját szövege, ikonja, linkje, címkéje és rámutatáskor megjelenő háttere van. Az ingyenes bővítmény része. A **The Plus Addons → Widgets** oldalon a kártyája **Stylish List** néven látszik, a szerkesztő panelen **Stíluslisták** a neve. Kapcsold be, mielőtt használod.

Ikonnak a Font Awesome-ot használja, de a stíluslapját nem tölti be. A Font Awesome 5 ikonok beágyazott SVG-ként mindig megjelennek. A Font Awesome 4 ikonok (a három alapértelmezett tétel is ilyen) üresen maradnak, ha az oldalon más elem nem tölti be a Font Awesome-ot. Ha hiányzik az ikon, nyisd meg a tételt, válaszd az **Ikonbetűkészlet** mezőben a **Font Awesome 5** értéket, és válaszd ki újra az ikont.

## A panel felépítése

Húzd a **Stíluslisták** widgetet az oldalra. A **Tartalom** fülön három szakasz van, a többi beállítás a **Stílus** fülön.

![A Stíluslisták Tartalom füle: egy tétel nyitott beállításaival, a Leírás, az ikon, a Link, a Rögzítési jelzés és az Interaktív háttérstílus kapcsolóival](./kepek/szovegek-adatok-4-lista-elem-panel.webp)

*A Stíluslisták Tartalom füle: egy tétel nyitott beállításaival, a Leírás, az ikon, a Link, a Rögzítési jelzés és az Interaktív háttérstílus kapcsolóival* (https://minta-bolt.hu/wp-admin/post.php?post=44&action=elementor)

A képen az első tétel nyitott beállításai látszanak: a tétel címe a lista sorában maga a tétel szövege.

### Tartalom

A lista maga. A lista egy sora egy tétel.

- **Leírás**: teljes szerkesztő, ezért a félkövér, dőlt és a beágyazott link is működik a tételben.
- **Ikonbetűkészlet**: **Font Awesome**, **Font Awesome 5** vagy **Icons Mind**. Ha egyik sincs kiválasztva, a tétel ikon nélkül jelenik meg. Az **Icons Mind** könyvtár a Pro bővítményhez tartozik, az ingyenesben a tétel ikon nélkül jelenik meg.
- **Link**: tételenkénti hivatkozás.
- **Rögzítési jelzés**: kis címke a tételen.
- **Interaktív háttérstílus rámutatáskor**: a tétel saját háttere a rámutatásos hatáshoz (lásd a hatásokról szóló fejezetet).
- **Eszköztipp**: a tételhez tartozó buboréksúgó (Pro). Az ingyenes bővítményben a kapcsoló bekapcsolható, de semmi nem jelenik meg tőle.

### Eszköztipp egy listatételen

Az eszköztipp buborék, amely akkor jelenik meg, ha a látogató az adott tétel fölé viszi az egeret. Kiegészítő információt írhatsz bele anélkül, hogy a lista hosszabb lenne. Minden tételnek külön eszköztippje lehet. A funkció a Pro bővítményhez tartozik.

1. A **Stílusos lista** fülön nyisd meg azt a tételt, amelyhez eszköztippet szeretnél.
2. Kapcsold be a tétel **Eszköztipp** kapcsolóját.
3. A **Tartalomtípus** listából válaszd ki, mi legyen a buborékban:
   - **Tartalomszöveg**: egyszerű szöveg. A formázáshoz a HTML-címkéket kézzel kell beírnod.
   - **Vizuális tartalomszerkesztő**: a WordPress szerkesztőjében írhatod és formázhatod a tartalmat. A tartalmát az **Eszköztipp tartalma** mező adja.
   - **Sablon**: bármilyen tartalmat (videót, képet és így tovább) betehetsz egy Elementor-sablonnal. A kiválasztás után az **Elementor-sablonok** listából választod ki a sablont.
4. **Tartalomszöveg** esetén írd be a szöveget a **Leírás** mezőbe. A szöveg igazítását, a tipográfiát és a szövegszínt a tétel eszköztipp-beállításai között állíthatod.
5. Mentsd az oldalt. A tétel fölé víve az egeret megjelenik a buborék.

A buborék helyét, témáját, nyilát, indítását és animációját az egész widgetre a **Stílus** fül **Buboréksúgó opciói** szakasza adja.

### Bővebben kapcsoló

Csak az első néhány tételt mutatja, a többit egy link nyitja ki. A részletei a hatásokról szóló fejezetben vannak.

### Extra opciók

A teljes widgetre érvényes kapcsolók:

- **Interaktív linkek**: ez teszi fel az oldalra azt a háttérréteget, amelyre a tételenkénti háttér rajzol. Nélküle a tételek rámutatásos háttere semmit nem csinál.
- **Számláló megjelenítése**: számozza a tételeket. A **Számláló stílusa** mezőben hét típus közül választhatsz.
- **Asztali elrendezés**, **Táblagépes elrendezés**, **Mobil elrendezés**: eszközönként állítható, hogy a lista **Alapértelmezett** (egy tétel egy sorban) vagy vízszintes (a tételek egymás mellett futnak, és tördelődnek) legyen.

Reszponzív ikonlistához add hozzá a tételeket a **Stílusos lista** fülön, majd az **Extra opciók** fülön válaszd ki az eszközt (asztali, táblagép, mobil), és állítsd be a **Asztali elrendezés** legördülőt: **Alapértelmezett** a függőleges, **Vízszintes** az egymás melletti elrendezés. Így például asztalon vízszintes sorban, mobilon egymás alatt jelennek meg az ikonos tételek.

![A Stíluslisták Extra opciók szakasza bekapcsolt számláló megjelenítéssel, nagybetűs római számokkal és az eszközönkénti elrendezéssel](./kepek/szovegek-adatok-4-lista-szamozott-panel.webp)

*A Stíluslisták Extra opciók szakasza bekapcsolt számláló megjelenítéssel, nagybetűs római számokkal és az eszközönkénti elrendezéssel* (https://minta-bolt.hu/wp-admin/post.php?post=46&action=elementor)

A képen a **Számláló megjelenítése** be van kapcsolva, alatta a **Számláló stílusa** és az eszközönkénti elrendezés választó.

### Stílus fül

| Szakasz | Mit állíthatsz benne |
| --- | --- |
| **Lista** | Padding, elválasztó színe, térköz az elemek között, igazítás, valamint a tételek normál és rámutatásos háttere, szegélye, lekerekítése és dobozárnyéka |
| **Ikon** | Az ikon helye (a szöveg előtt vagy után), mérete, színei, valamint az SVG-ikonok kitöltő és körvonalszíne |
| **Számláló megjelenítési stílusa** | A számláló tipográfiája, színei, igazítása. Csak bekapcsolt számlálónál látszik |
| **Tartalom beállításai** | A tételek szövegének tipográfiája és színei |
| **Bővebben kapcsoló** | A kibontó link tipográfiája és színei |
| **Jelzésszöveg stílusa** | A rögzítési jelzés tipográfiája, térközei és igazítása |
| **Buboréksúgó opciói** | A buboréksúgók helye, témája, nyila, indítása és animációja (Pro) |
| **Extra opciók** | A rámutatáskor halványító hatás |
| **On Scroll View Animation** | A The Plus Addons közös, görgetésre induló animációja |

A **Térköz az elemek között**, a **Térköz**, az **Alsó térköz**, a **Minimális szélesség** és a vízszintes igazítás csak akkor látszik a **Lista** szakaszban, ha az **Asztali elrendezés** vízszintes. Akkor sem tűnnek elő, ha csak a táblagépes vagy a mobil elrendezést állítottad vízszintesre.

### Ami a Pro bővítményhez tartozik

- A tételenkénti **Eszköztipp** tartalma és a teljes **Buboréksúgó opciói** szakasz.
- Az **Icons Mind** ikonkönyvtár.
- A **Kapcsoló iránya** a **Bővebben kapcsoló** szakaszban, valamint a kibontó link igazítása és rámutatásos szövegszíne.
- A rögzítési jelzés keretsugara.

A teljes lista igazítása a Pro bővítményben a **Tartalom** fülön van, az ingyenesben a **Stílus** fül **Lista** szakaszában.

### Tudnivalók

- A widget három fájlt tölt be az oldalra: a saját stíluslapját, a saját szkriptjét és a közös Plus Extras stíluslapot.
- A vízszintes elrendezést JavaScript állítja be az aktuális eszközmód szerint, ezért a lista addig függőleges, amíg a szkript le nem fut.
- Ha nem látszik az ikon, lásd a bevezetőt. Ha a rámutatásos háttér nem változik, kapcsold be az **Interaktív linkek** beállítást az **Extra opciók** alatt. Ha a lista nem vízszintes, nézd meg az éppen előnézetben használt eszköz elrendezését.

## Saját link minden tételhez

Ha minden tétel máshová mutat, a látogató egyből a megfelelő oldalra ugorhat.

1. Add hozzá a **Stíluslisták** widgetet az oldalhoz.
2. A **Tartalom** alatt kattints a linkelendő tételre. Minden sor a saját beállításait nyitja.
3. A **Link** mezőbe írd vagy illeszd be a célt.
4. A mező melletti fogaskerékkel az **Új ablakban nyílik meg** és a **Nofollow hozzáadása** állítható.
5. Ismételd meg minden tételnél, amelynek külön célja van. Az üresen hagyott tételek sima szövegek maradnak.

![A Stíluslisták a nyilvános oldalon: az első két tétel linkelt, a harmadik sima szöveg](./kepek/szovegek-adatok-4-lista-link.webp)

*A Stíluslisták a nyilvános oldalon: az első két tétel linkelt, a harmadik sima szöveg* (https://minta-bolt.hu/tp-lista-link/)

A képen a linkelt tételek és a link nélküli tétel ugyanúgy néz ki, mert a link a tétel szövegszínét örökli.

- A link az adott tétel ikonját és szövegét együtt fogja közre, ezért az egész sor kattintható, a többi tétel nem.
- Az új ablakban nyitás `target="_blank"`, a nofollow `rel="nofollow"` jelölést ír az adott tételre.
- A **Leírás** teljes szerkesztő, így a szövegben sima, beágyazott link is elhelyezhető, ha csak a tétel egy része legyen kattintható.
- Tételenként egy link van. Egy soron belül két cél csak beágyazott linkekkel oldható meg. Ha a tételnek van linkje, és a leírásban is van link, a böngésző kiszámíthatatlanul kezeli a link a linkben szerkezetet.
- A link színe nem külön beállítás: a **Stílus** fül **Tartalom beállításai** szakaszának szövegszínét veszi át. Ha a linkelt tételeket meg akarod különböztetni, állíts be más színt, vagy tegyél melléjük ikont.
- Ha a teljes tétel nem kattintható, az adott tétel **Link** mezőjét nézd meg, nem a widgetét. Ha a link nem nyílik új lapon, a fogaskerék alatt az **Új ablakban nyílik meg** kapcsolót tételenként kell bekapcsolni.

## Címke a tételen (rögzítési jelzés)

Egy kis felirat, például „Új” vagy „Népszerű”, az egyik tétel mellett azonnal magára vonja a figyelmet. A tételenként állítható, így te választod ki, melyik sorok kapnak ilyet.

1. Add hozzá a **Stíluslisták** widgetet, és a **Tartalom** alatt nyisd meg a kiemelni kívánt tételt.
2. Kapcsold be a **Rögzítési jelzés** beállítást.
3. A **Jelzés szövege** mezőbe írd a címkét. Alapértéke „Featured” (kiemelt).
4. Állítsd be a **Szöveg színe** és a **Háttérszín** értékét.
5. A **Vízszintes eltolás** és a **Függőleges eltolás** értékkel told a helyére.

![A Stíluslisták tételén a Rögzítési jelzés, a Jelzés szövege, a Szöveg színe, a Háttérszín és az eltolások beállításai](./kepek/szovegek-adatok-4-lista-elem-panel.webp)

*A Stíluslisták tételén a Rögzítési jelzés, a Jelzés szövege, a Szöveg színe, a Háttérszín és az eltolások beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=44&action=elementor)

A fenti panelképen az első tétel **Rögzítési jelzés** kapcsolója be van kapcsolva, a jelzés szövege „Új”.

![Háromtételes lista, amelyben az első tételen zöld „Új”, a másodikon piros „Népszerű” címke látszik](./kepek/szovegek-adatok-4-lista-cimke.webp)

*Háromtételes lista, amelyben az első tételen zöld „Új”, a másodikon piros „Népszerű” címke látszik* (https://minta-bolt.hu/tp-lista-cimke/)

A képen két tételnek más színű címkéje van, a harmadiknak nincs.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Rögzítési jelzés** | Megjeleníti vagy elrejti a címkét ennél a tételnél | Elrejtés |
| **Jelzés szövege** | A címke szövege | Featured |
| **Szöveg színe** | A címke szövegének színe | fehér, a stíluslapból |
| **Háttérszín** | A címke háttere | szürke (#888), a stíluslapból |
| **Vízszintes eltolás** | A címke balra vagy jobbra mozgatása (-200 és 200 px között) | 5 |
| **Függőleges eltolás** | A címke fel vagy le mozgatása (-150 és 150 px között) | 0 |

A **Stílus** fül **Jelzésszöveg stílusa** szakaszának igazítása az összes címkére egyszerre hat. A **Balra** érték a tétel szövegének bal felső sarkához rögzíti a címkét, az alapérték a szöveg mögé teszi.

- A címke a tétel fölé van pozícionálva, nem foglal helyet a sorban. Ezért van két eltolás-csúszka, és ezért fogadnak el negatív értéket.
- A címke betűmérete alapból 9 px, a **Jelzésszöveg stílusa** szakaszban változtatható.
- A szín és a háttér tételenként állítható, így egy listában két címke különböző színű lehet.
- A lekerekített sarok a Pro bővítmény beállítása, az ingyenesben a stíluslap kis lekerekítése marad.
- Tételenként egy címke van, a szövege egysoros szövegmező.
- Mivel a címke abszolút pozíciójú, rálóghat a következő tételre vagy kilóghat egy keskeny oszlopból. Erre valók az eltolás-csúszkák.
- Ha a címke nem látszik: a **Rögzítési jelzés** tételenkénti kapcsoló, nem a widget **Extra opciók** szakaszában van. Ha a szöveg tetején ül, told jobbra a **Vízszintes eltolással**, és emeld fel a **Függőleges eltolással**. Ha a címke szürke, ellenőrizd, hogy a **Háttérszín** ugyanazon a tételen van-e beállítva.

## Számozott lista

Az Elementor saját ikonlistája nem számoz. A Stíluslisták minden tételhez számlálót ad, és számok, betűk, római számok vagy görög betűk közül választhatsz.

1. Add hozzá a **Stíluslisták** widgetet, és töltsd ki a tételeket a **Tartalom** alatt.
2. Nyisd meg a **Tartalom** fül **Extra opciók** szakaszát, és kapcsold be a **Számláló megjelenítése** beállítást.
3. Válassz a **Számláló stílusa** mezőben.

![Négytételes lista a nyilvános oldalon nagybetűs római számokkal: I., II., III., IV.](./kepek/szovegek-adatok-4-lista-szamozott.webp)

*Négytételes lista a nyilvános oldalon nagybetűs római számokkal: I., II., III., IV.* (https://minta-bolt.hu/tp-lista-szamozott/)

A képen a számláló a tétel ikonja előtt áll.

| Számláló stílusa | Mit mutat a lista |
| --- | --- |
| Normál | 1 2 3, sima számok, és ez az egyetlen típus, amelyik után nincs pont |
| Tizedes, vezető nullával | 01. 02. 03. |
| Nagybetűs ábécé | A. B. C. |
| Kisbetűs ábécé | a. b. c. |
| Kisbetűs római | i. ii. iii. |
| Nagybetűs római | I. II. III. |
| Kisbetűs görög | α. β. γ. |

Az alapérték a **Normál**.

- A számlálót CSS rajzolja a tételek alapján, ezért tétel hozzáadásakor, törlésekor vagy átrendezésekor a lista magától újraszámozódik.
- A számolás mindig 1-től indul, más kezdőértéket nem lehet megadni.
- Bekapcsolt **Bővebben kapcsoló** esetén az összecsukott lista rejtett tételeit nem számolja. Kibontáskor minden tétel sorban megkapja a számát.
- A számláló külalakját a **Stílus** fül **Számláló megjelenítési stílusa** szakaszában állítsd. Ez a szakasz csak bekapcsolt számlálónál látszik.
- Az elválasztó jel nem módosítható: a **Normál** típusnál nincs pont, a többi hatnál mindig van.
- Nincs beágyazott, többszintű számozás. Két külön Stíluslisták widget mindegyike 1-ről indul.
- Ha a számláló nem jelenik meg, a **Számláló megjelenítése** az **Extra opciók** szakaszban van a **Tartalom** fülön, nem a **Stílus** fülön. A **Számláló stílusa** mező csak bekapcsolás után tűnik fel.
- Ha kibontás után „újraindul” a számozás, valójában nem indul újra, hanem folytatódik: összecsukva csak a látható tételeknek van száma, ezért az utolsó látható szám változik.