Információs doboz körhinta: Lottie-ikon, csúszó szolgáltatásdobozok és távirányító

Hat szolgáltatás nem fér el kényelmesen egy sorban. A körhinta egyszerre kettőt vagy hármat mutat, a többit lapozni lehet, az oldal pedig nem lesz hosszabb. Az Információs doboz widget Körhinta elrendezése az összes dobozt egyetlen widgetben tartja, így egy helyen szerkesztheted őket. Az alap felépítést lásd az Információs doboz widget fejezetben.

Előkészületek

• A Körhinta elrendezés és a Távoli carousel widget a Pro kiadás része. Az ingyenes bővítményben a lehetőség ott van a panelen, de csak Pro-ra való figyelmeztetést mutat, és nem működik.
• Kapcsold be a The Plus Addons → Widgets oldalon az Info Box widgetet, a távirányításhoz pedig a Carousel Remote widgetet is.
• Több dobozra van szükséged, mint ahány oszlop látszik egyszerre. Négy doboz négy oszlopban nem csúszik sehova.

Átváltás Körhinta elrendezésre

1. Add hozzá az Információs doboz widgetet az oldalhoz.
2. A Tartalom fülön állítsd az Elrendezés kiválasztása mezőt Körhinta értékre.
3. Megjelenik a Carousel információs doboz lista, alapból négy elemmel.

A dobozok kitöltése

A Carousel információs doboz egy sorát megnyitva az adott dobozt szerkeszted. Minden sornak saját mezői vannak:

• cím és Leírás;
• a cím Link mezője;
• Ikon kiválasztása, alatta az Ikonbetűkészlet és az ikonkönyvtár, vagy a Kép használata ikonként, ha Kép értéket választasz;
• Gomb szövege és Gomb hivatkozása;
• Háttérkép normál és rámutatáskor megjelenő állapotban: kép a doboz mögé;
• Teljes információs dobozra kiterjedő link: az adott doboz egészét kattinthatóvá teszi.

Új dobozt az Elem hozzáadása gombbal veszel fel, a sorrendet a sor bal oldali fogantyújának húzásával változtathatod.

https://minta-bolt.hu/wp-admin/post.php?post=128&action=elementor

A képen az első sor kinyitva látszik: Cím, Leírás, Link, Ikon kiválasztása és az ikonkönyvtár.

Ebben az elrendezésben két Ikon kiválasztása lista van. A főszakaszban lévő az egész körhinta ikontípusát állítja egyszerre, a sorban lévő csak az adott dobozét. Állítsd azt, amelyik megfelel, és utána töltsd ki a hozzá tartozó mezőket (ikon, kép vagy Lottie URL). Ha a dobozaid mind egyforma ikont kapnak, pedig különbözőt szeretnél, a közös listát állítottad be: állítsd soronként.

Minden doboz ugyanazt az Információs doboz stílusa értéket használja: az 1. stílus és a 3. stílus nem keverhető egy widgeten belül.

A csúsztatás beállításai

A léptető vezérlők a Stílus fülön vannak, a Carousel beállításai alatt.

https://minta-bolt.hu/wp-admin/post.php?post=128&action=elementor

A képen az Egyedi carousel-ID, a Diavetítés módja, a Dia sebessége, az Asztali oszlopok és az Automatikus lejátszás mezők látszanak.

Beállítás	Mit csinál	Alapérték
Asztali oszlopok	Hány doboz látszik egyszerre. A Tablet és a Mobil fül külön értéket kap, így tableten kettő, telefonon egy dobozt mutathatsz.	4 oszlop
Pontok megjelenítése	A pontok sora a körhinta alatt.	be
Nyilak megjelenítése	Az előző és a következő nyíl.	ki
Automatikus lejátszás	A körhinta magától lép.	be
Dia sebessége	Egy váltás hossza ezredmásodpercben.	1300
Automatikus lejátszás sebessége	Mennyi idő telik két automatikus lépés között.	3000
Következő/előző	Hány oszlopot lép egy kattintás.

Ha semmi nem csúszik, innen indulj: a kezdeti négy elem és négy asztali oszlop mellett minden doboz már látszik, így nincs mit lapozni, és a nyilak és pontok sem jelennek meg, akkor sem, ha bekapcsolod őket. Adj hozzá dobozt, vagy csökkentsd az Asztali oszlopok számát, és a vezérlők azonnal megjelennek.

https://minta-bolt.hu/tp-d6-korhinta/

A képen hat elemből kettő látszik, a nyilak és a hat pont alatta.

Működés:

• Az automatikus lejátszás alapból be van kapcsolva, ezért a megfelelően méretezett körhinta az oldal betöltése után magától mozogni kezd.
• A pontok a pozíciókat számolják, nem a dobozokat: hat doboz kettesével hat pontot ad, mindegyik eggyel tolja a párost.
• A körhinta csak a publikált oldalon csúszik, a szerkesztő vásznán állóképet látsz.
• A Következő/előző és a Pontok megjelenítése nem hat, ha nincs mit lapozni, és a szerkesztő nem szól, miért.
• A sorok átrendezése a dia sorrendjét változtatja, a távirányító pontjainak feliratát nem: azokat külön állítod.
• Ingyenes bővítményben a Körhinta lehetőség ott van, de a lista nincs, és az így mentett oldal egyetlen diát sem rajzol.

Lottie-animáció az ikon helyén

A kis ismétlődő animáció jobban feltűnik, mint egy álló ikon, a Lottie fájl pedig néhány kilobájtnyi JSON, nem videó. Az Információs doboz az ikon helyett használhat ilyet. Ez Pro funkció: ingyenesen az Ikon kiválasztása listában a Lottie nincs is ott.

Az animáció URL-jének beszerzése

A widget csak URL-t fogad, feltöltést nem. A .json fájlt vagy te hosztolod, vagy egy szolgáltatástól (például a LottieFilestól) másolod az eszközlinket.

1. Nyisd meg a Lottie-forrást, és válaszd ki az animációt.
2. Keresd a megosztás vagy beágyazás lehetőséget, és másold ki az eszközlinket, vagyis a .json-ra végződő URL-t.
3. Ellenőrizd, hogy a böngészőben megnyílik, és JSON-t mutat. Ha bejelentkezést kér, vagy hibát ad, a widget sem fogja tudni használni.

Használat az Információs dobozban

1. Add hozzá az Információs doboz widgetet, és állítsd be az Információs doboz stílusát, a címet és a leírást.
2. Az Ikon kiválasztása értéke legyen Lottie.
3. A megjelenő Lottie URL mezőbe illeszd be a linket.

A lejátszást két kapcsoló szabályozza:

Beállítás	Mit csinál	Alapérték
Animáció ismétlése	Folyamatosan ismétli az animációt.	be
Rámutatáskor megjelenő animáció	Csak akkor játszik, amikor az egér a doboz fölött van.	ki

A Stílus fülön a Lottie szakaszban állítod az animáció Szélesség, Magasság és Sebesség értékét.

https://minta-bolt.hu/wp-admin/post.php?post=127&action=elementor

A képen a Lottie szakasz szélesség, magasság és sebesség mezői látszanak. Állítsd be a méretet korán: a lejátszó nagyjából 50 × 50 képponttal indul, ez kisebb egy átlagos ikonnál, és ezért gondolják sokan, hogy az animáció nem töltődött be.

Körhintában a közös Ikon kiválasztása lista minden dobozra egyszerre, a Carousel információs doboz soron belüli csak az adott dobozra vonatkozik. Azt állítsd, amelyik kell, és töltsd ki a hozzá tartozó Lottie URL mezőt.

Működés és korlátok:

• Az animációt a látogató böngészője tölti le a beillesztett URL-ről, ezért a fájlnak nyilvánosan elérhetőnek kell maradnia.
• Hibás URL esetén (404, 403 vagy nem érvényes Lottie JSON) a lejátszó bekerül az oldalra, de semmit nem rajzol, és sehol, a szerkesztőben és a böngészőkonzolban sem jelenik meg hibaüzenet. Az egyetlen jel az üres hely az ikon helyén.
• A szerkesztő vásznán is látszik az animáció, de a méretet és a sebességet a publikált oldalon ítéld meg.
• Feltöltőmező nincs: a helyi gépen lévő .json fájlt előbb hosztolni kell.

Távoli carousel: az Információs doboz körhinta távirányítója

Néha a nyilaknak máshol van a helyük: egy címsor mellett, a szomszéd oszlopban vagy a szakasz fölött. A Távoli carousel önmagában nem csinál semmit: ugyanazt az azonosítót kapja, mint az Információs doboz körhinta, és átveszi a lapozást, bárhová teszed az oldalon. A widget általános leírását lásd a Kapcsoló és a Forgó doboz fejezetben.

Azonosító megadása a körhintának

1. Jelöld ki az Információs doboz widgetet, amely már Körhinta elrendezésű.
2. Nyisd meg a Stílus fület, és bontsd ki a Carousel beállításai szakaszt.
3. Az Egyedi carousel-ID mezőbe írj rövid, egyedi nevet, például szolgaltatasok. Használj betűket, számokat és kötőjelet.

Minden körhintának más azonosító kell az oldalon. Ha két körhinta ugyanazt az azonosítót kapja, mindkettő ugyanarra a távirányítóra válaszol.

A távirányító hozzáadása

1. Húzd a Távoli carousel widgetet az oldalra, ahová a vezérlőket szeretnéd.
2. A Tartalom fülön az Egyedi kapcsolati ID mezőbe írd ugyanazt az értéket.
3. A Távoli vezérlés típusa maradjon Körhinta.

https://minta-bolt.hu/wp-admin/post.php?post=129&action=elementor

A képen az Egyedi kapcsolati ID és a Távoli vezérlés típusa mező, alattuk az Előző/következő és a Pontok szakasz látszik.

A két azonosítónak betűre pontosan egyeznie kell, a kis- és nagybetűket és a kötőjeleket is beleértve. Ez az egyetlen lépés, amely csendben hibázik: ha elírod, a távirányító normálisan megjelenik, de semmit nem csinál.

Nyilak és pontok

• Az Előző/következő szakaszban a Következő/előző gomb már be van kapcsolva, csak formázni kell. A két gomb feliratát az 1. gomb szövege és a 2. gomb szövege mező adja, az Igazítás balra, középre vagy jobbra teszi a párost, az Ikon stílusa (Nincs, Stílus 1 vagy Egyéni) a nyílikont választja.
• A Pontok szakaszban a Pontok kapcsoló kapcsolja be a navigációs pontokat. Az Elem hozzáadása gombbal vegyél fel soronként egy-egy görgetési pozíciót (1. pont, 2. pont …), és adj mindegyiknek Címke-t. Az Elrendezés vízszintes vagy függőleges pontsort ad, az Aktív pont stílusa a kiemelést, az Időtartam (ezredmásodperc) az aktív pont váltásának sebességét, a Szegélyszín a szegély színét.
• Pozícióként számolj, nem dobozonként: hat elem kettesével hat pozíciót jelent, tehát hat sor kell.

https://minta-bolt.hu/wp-admin/post.php?post=129&action=elementor

A képen a Pontok kapcsoló, a három pontsor és az Elrendezés, az Aktív pont stílusa és a Szegélyszín mező látszik.

https://minta-bolt.hu/tp-d6-tavirany/

A képen az Előző és a Következő gomb és a három pont a körhinta fölött áll, a körhinta saját nyilai és pontjai ki vannak kapcsolva.

Működés és korlátok

• A távirányító vezérli a körhintát, nem tartalmazza. Teheted fölé, mellé egy másik oszlopba vagy az oldalon lejjebb.
• Az Információs doboz körhintája megtartja a saját nyilait és pontjait, ha a Carousel beállításai alatt be vannak kapcsolva. Kapcsold ki őket, ha csak a távirányítót szeretnéd.
• A távirányító aktív pontja követi a körhintát, az automatikus lejátszás közben is.
• A szerkesztő vásznán a távirányító nem működik: nézd meg az előnézetben vagy a publikált oldalon.
• Nincs figyelmeztetés eltérő azonosítóra: ha az Egyedi carousel-ID és az Egyedi kapcsolati ID akár egy nagybetűben is eltér, a távirányító megjelenik, de nem csinál semmit.
• A pontsorokat kézzel kell felvenni. Ha a körhintának több pozíciója van, mint ahány pont, az utolsók nem érhetők el a távirányítóról, a felesleges pontok pedig nem csinálnak semmit.
• Egy távirányító egy azonosítót vezérel. Ha két körhintát együtt akarsz léptetni, adj nekik azonos azonosítót, és akkor egyszerre mozognak.
• Mindkét widget Pro: az ingyenes bővítményben a körhinta nem indul el, így nincs mit távirányítani.

Hibaelhárítás

Jelenség	Teendő
Semmi sem csúszik, nincs nyíl és pont.	Annyi az oszlop, mint az elem. Csökkentsd az Asztali oszlopok számát a Stílus → Carousel beállításai alatt, vagy adj több sort a Carousel információs doboz listához.
A Carousel információs doboz lista hiányzik.	A Körhinta elrendezés Pro. Nélküle a lista nem jelenik meg.
Minden dobozom ugyanolyan, pedig különböző ikont akartam.	A főszakasz közös Ikon kiválasztása listáját állítottad. Soronként, a Carousel információs doboz elemein belül állítsd.
A szerkesztőben nem csúszik, a publikált oldalon igen.	Ez a normális működés: nézd az előnézetet.
Üres hely van az animáció helyén.	Nyisd meg a Lottie URL-t a böngészőben. Ha nem nyers JSON-t ad (bejelentkezést kér, lejárt vagy megosztási oldal, nem eszközlink), a widget nem tudja használni.
Az animáció pici.	Ez az alapméret. Állítsd a szélességet és a magasságot a Stílus → Lottie alatt.
Az animáció egyszer lefut, és megáll.	Ellenőrizd, hogy az Animáció ismétlése be van kapcsolva, és a Rámutatáskor megjelenő animáció ki, hacsak nem akarod, hogy az egérre várjon.
A távirányító gombjai nem csinálnak semmit.	Hasonlítsd össze karakterre pontosan az Egyedi carousel-ID és az Egyedi kapcsolati ID mezőt: ez a leggyakoribb ok.
Néhány pont nem csinál semmit.	Több pontsort vettél fel, mint ahány pozíciója a körhintának van. Töröld a felesleget, vagy adj több elemet.