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

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.

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.

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.

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.

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.

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.