# Stíluslisták widget: hatások és kibontás

> A Stíluslisták (Style Lists) widget rámutatásos hatásai és bővebben kapcsolója: halványító effektus több listán át, háttérváltás, rövidített lista.

A **Stíluslisták** (Style Lists) widget ikonos, stílusos listát épít. Az ingyenes bővítmény része. A widget kártyája a **The Plus Addons → Widgets** oldalon **Stylish List** néven szerepel (a magyar felületen **Stílusos lista**), a szerkesztő panelen pedig **Stíluslisták** a neve: ezt kapcsold be, mielőtt használod.

Az ikonok Font Awesome ikonok. A widget nem tölti be a Font Awesome stíluslapját: az 5-ös Font Awesome ikonok beágyazott SVG-ként mindig látszanak, a 4-es ikonok (az alapértelmezett három is) üresek maradnak, ha az oldalon nincs más Font Awesome-ot használó elem.

## Rámutatáskor halványító (inverz) effektus

A hatás elhalványítja a lista összes tételét, kivéve azt, amelyik fölött az egérmutató áll. Lábléc, oldalsáv vagy szolgáltatásmenü olvashatóbb lesz tőle, és több listára együtt is kiterjeszthető.

1. Adj hozzá egy **Stíluslisták** widgetet minden láblécoszlophoz, és töltsd ki a tételeket.
2. Nyisd meg a **Stílus** fülön az **Extra opciók** szakaszt, és kapcsold be a **Rámutatáskor alkalmazott inverz effektus** beállítást.
3. A **Nem kiválasztott tétel átlátszatlansága** csúszkával állítsd be, mennyire halványuljon el a többi tétel (0 és 1 között).
4. Ha szeretnéd, a **Nem kiválasztott tétel CSS-szűrője** mezőt állítsd egyéni értékre, és adj hozzá elmosást vagy fényerő-módosítást.

![A Stíluslisták Stílus fülének Extra opciók szakasza: bekapcsolt inverz effektus, átlátszatlanság 0,3, effektusterület](./kepek/szovegek-adatok-3-lista-halvanyitas-panel.webp)

*A Stíluslisták Stílus fülének Extra opciók szakasza: bekapcsolt inverz effektus, átlátszatlanság 0,3, effektusterület* (https://minta-bolt.hu/wp-admin/post.php?post=43&action=elementor)

A képen az inverz effektus be van kapcsolva, az átlátszatlanság 0,3, az **Effektusterület** pedig **Egyéni**.

![Három tételes lista, amelyben az egérmutató alatti tétel teljes erővel látszik, a másik kettő halvány](./kepek/szovegek-adatok-3-lista-halvanyitas.webp)

*Három tételes lista, amelyben az egérmutató alatti tétel teljes erővel látszik, a másik kettő halvány* (https://minta-bolt.hu/tp-lista-inverz/)

A képen a középső tétel fölött áll az egér: az marad éles, a többi elhalványul.

### Több lista összekapcsolása

Alapból a hatás megáll annál a widgetnél, amelyiken be van kapcsolva. Hogy egy láblécoszlop a többit is elhalványítsa:

1. Állítsd az **Effektusterület** értékét **Globális**-ra.
2. A **Globális listakapcsolati ID** mezőbe minden összekapcsolandó listánál ugyanazt a szót írd, például `footer-links`.
3. Minden összekapcsolt listának add ugyanazt az átlátszatlanságot és CSS-szűrőt, mert minden lista a saját értékeit használja.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Rámutatáskor alkalmazott inverz effektus** | Bekapcsolja a hatást ennél a listánál | Elrejtés |
| **Nem kiválasztott tétel átlátszatlansága** | A többi tétel átlátszatlansága (0 és 1 között) | 0,6 |
| **Nem kiválasztott tétel CSS-szűrője** | Elmosás, fényerő, kontraszt, telítettség és árnyalat a halvány tételekre. Csak akkor érvényes, ha egyéni értékre állítod | ki |
| **Effektusterület** | **Egyéni**: a hatás ezen a listán belül marad; **Globális**: közös az azonos azonosítójú listákkal | Egyéni |
| **Globális listakapcsolati ID** | A listákat összekötő szó. Csak **Globális** területnél látszik | üres |

- Csak a lista fölött álló egér hatására halványul el bármi: amíg nincs kurzor a tételei fölött, semmi nem történik.
- A kiemelt tétel teljesen átlátszatlan és éles marad, a többi a beállított átlátszatlanságot és szűrőt kapja. Globális területnél az azonos azonosítójú összes lista minden tétele halványul.
- A hatás tiszta rámutatás, ezért a tétel egészére (link, ikon, szöveg) együtt hat.
- Érintőképernyőn nincs rámutatás, így telefonon és tableten nem történik semmi.
- A kapcsolat azonosítója sima szövegmező: egy elgépelés csendben kihagyja a listát a csoportból.
- Ha semmi sem halványul, az effektus kapcsolója a **Stílus** fülön van, nem a **Tartalom** fülön. Ha csak egy oszlop reagál, mindegyiknél állítsd **Globális**-ra az **Effektusterületet**, és írd be pontosan ugyanazt az azonosítót.
- Ha az elmosás nem látszik, a **Nem kiválasztott tétel CSS-szűrője** mezőben előbb válaszd az egyéni beállítást, utána húzd a csúszkákat.

## Háttér váltása rámutatáskor

A lista mögötti háttér a mutató mozgásával változik, tételenként más színnel vagy képpel. Két kapcsolóra van szükség: a tételenkénti háttér magában nem csinál semmit, az **Interaktív linkek** teszi fel az oldalra a háttérréteget.

1. Add hozzá a **Stíluslisták** widgetet, és töltsd ki a tételeket a **Tartalom** szakaszban.
2. A **Tartalom** fülön az **Extra opciók** szakaszban kapcsold be az **Interaktív linkek** beállítást.
3. Nyisd meg az első tételt, és kapcsold be az **Interaktív háttérstílus rámutatáskor** beállítást.
4. A **Háttér típusa** értékét állítsd színre, színátmenetre vagy képre.
5. Ismételd meg minden tételnél, hogy bármelyiken áll a látogató, változzon a háttér.

![A Stíluslisták egyik tétele fölött áll az egér: a lista mögött zöld háttér látszik](./kepek/szovegek-adatok-3-lista-hatter.webp)

*A Stíluslisták egyik tétele fölött áll az egér: a lista mögött zöld háttér látszik* (https://minta-bolt.hu/tp-lista-hatter/)

A képen a második tétel fölött áll az egér, a lista mögötti réteg a tételhez beállított zöldre váltott.

- A réteg a teljes widget mögött fekszik és kitölti azt, ezért adj a widget konténerének elég magasságot.
- Az első tétel háttere már az oldal betöltésekor látszik, mielőtt bármi fölé vinnéd az egeret.
- A hátterek kb. fél másodperc alatt úsznak át és nagyítódnak be.
- A háttér nélküli tétel nem mutat semmit, az előző szín egyszerűen eltűnik, ha a látogató odaér, ezért minden tételnek állíts be egyet.
- Szokásos színek, színátmenetek és képek is használhatók, mert Elementor szabványos háttérvezérlője.
- A szerkesztőben semmi nem figyelmeztet, hogy az **Interaktív linkek** kell hozzá, ezért egy önmagában beállított tételháttér hibának tűnik.
- Tételenként egy háttér van, külön normál állapot nincs: az első tétel háttere az alapállapot.
- A réteg a widgetre vágott: a mögötte lévő egész szakaszt csak akkor tölti ki, ha a widget maga tölti ki.
- Érintőképernyőn, mutató nélkül a háttér az első tételén marad.
- Ha nem történik semmi: kapcsold be az **Interaktív linkek** beállítást az **Extra opciók** alatt. Ha csak vékony sávot tölt ki, adj a konténernek minimális magasságot vagy a widgetnek belső margót. Ha egy tételnél nincs háttér, nyisd meg, és ellenőrizd az **Interaktív háttérstílus rámutatáskor** és a **Háttér típusa** beállítást: a beállítás tételenkénti, nem másolódik.

## Bővebben kapcsoló: rövidített lista

Hosszú lista sokat tol le az oldalból. A **Bővebben kapcsoló** csak az első néhány tételt mutatja, a többi egy linkre kattintva nyílik ki.

1. A **Tartalom** fülön nyisd meg a **Bővebben kapcsoló** szakaszt, és kapcsold be a **Bővebben kapcsoló** beállítást.
2. Az **Alapértelmezés szerint megjelenő listaelemek száma** mezőben add meg, hány tétel látsszon kattintás előtt.
3. Szükség esetén írd át a **Szakasz kibontásának címe** és a **Szakasz összecsukásának címe** szöveget.

![A Stíluslisták Bővebben kapcsoló szakasza: bekapcsolt kapcsoló, három látható tétel, a kibontás és összecsukás szövege](./kepek/szovegek-adatok-3-lista-tovabb-panel.webp)

*A Stíluslisták Bővebben kapcsoló szakasza: bekapcsolt kapcsoló, három látható tétel, a kibontás és összecsukás szövege* (https://minta-bolt.hu/wp-admin/post.php?post=41&action=elementor)

A képen a **Bővebben kapcsoló** be van kapcsolva, az **Alapértelmezés szerint megjelenő listaelemek száma** 3.

![Ötelemes lista a nyilvános oldalon: három tétel látszik és a „+ összes opció megjelenítése” link](./kepek/szovegek-adatok-3-lista-tovabb.webp)

*Ötelemes lista a nyilvános oldalon: három tétel látszik és a „+ összes opció megjelenítése” link* (https://minta-bolt.hu/tp-lista-tovabb/)

A képen a lista három tételt és a kibontó linket mutatja, a link a lista mellett áll.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Bővebben kapcsoló** | Bekapcsolja a kibontó linket | Elrejtés |
| **Alapértelmezés szerint megjelenő listaelemek száma** | Hány tétel látszik kibontás előtt (0 és 100 között) | 3 |
| **Szakasz kibontásának címe** | A link szövege összecsukott listánál | + összes opció megjelenítése |
| **Szakasz összecsukásának címe** | A link szövege kibontott listánál | - Kevesebb opció |
| **Kapcsoló iránya** (Pro) | **Alapértelmezett**: a link a lista mellett; **Függőleges**: alatta | Alapértelmezett |

- Pontosan annyi tétel látszik, amennyit megadtál. A linkre kattintva az összes megjelenik, és a szöveg a másikra vált; újabb kattintásra visszazár.
- A link csak akkor létezik, ha több tétel van, mint ahány alapból látszik: hat tételnél és 6-os értéknél nincs link.
- A rejtett tételek benne vannak az oldal HTML-jében, csak CSS rejti el őket.
- Ha a **Számláló megjelenítési stílusa** is be van kapcsolva, összecsukott állapotban csak a látható tételeknek van száma.
- A link megjelenése a **Stílus** fül **Bővebben kapcsoló** szakaszában állítható.
- A 0 érték nem rejt el mindent: a link megjelenik, de semmit nem rejt, és két kattintás kell, hogy bármi történjen. Ha majdnem zárt listát szeretnél, használj 1-et.
- Nincs animáció, és nem lehet lépésenként kibontani: egy kattintás az összes maradékot megjeleníti.
- Az ingyenes bővítményben a link mindig a lista mellett áll, az alá helyezéshez a Pro **Kapcsoló iránya** beállítás kell.
- Ha nincs link: legalább eggyel több tétel kell, mint a megadott szám (alapértékkel legalább négy). Ha minden tétel látszik, ellenőrizd, hogy a szám nem 0.