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

> Az Információs doboz Körhinta elrendezése, a Carousel információs doboz sorai, a csúsztatás beállításai, a Lottie-ikon és a Távoli carousel widget összekötése.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-infobox/) 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.

![A Carousel információs doboz sorainak szerkesztése](./kepek/dobozok-gombok-6-korhinta-elem.webp)

*A Carousel információs doboz sorainak szerkesztése* (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.

![A Carousel beállításai szakasz a Stílus fülön](./kepek/dobozok-gombok-6-korhinta-stilus.webp)

*A Carousel beállításai szakasz a Stílus fülön* (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.

![Információs doboz körhinta a publikált oldalon: hat elemből kettő látszik, nyilakkal és hat ponttal](./kepek/dobozok-gombok-6-korhinta.webp)

*Információs doboz körhinta a publikált oldalon: hat elemből kettő látszik, nyilakkal és hat ponttal* (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.

![A Lottie szakasz a Stílus fülön](./kepek/dobozok-gombok-6-lottie-stilus.webp)

*A Lottie szakasz a Stílus fülön* (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ó](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-kapcsolo/) és a [Forgó doboz](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-flipbox/) 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**.

![A Távoli carousel Tartalom panelje](./kepek/dobozok-gombok-6-tavirany-panel.webp)

*A Távoli carousel Tartalom panelje* (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.

![A Távoli carousel Pontok szakasza](./kepek/dobozok-gombok-6-tavirany-pontok.webp)

*A Távoli carousel Pontok szakasza* (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.

![Információs doboz körhinta a távirányítóval](./kepek/dobozok-gombok-6-tavirany.webp)

*Információs doboz körhinta a távirányítóval* (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. |