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

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.

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.

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.

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.

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”.

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.

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.