# Animált szolgáltatásdobozok: képes harmonika, csúszó dobozok, cikkdoboz és információs banner

> Négy rámutatásra reagáló elrendezés lépésről lépésre: kinyíló képcsíkok, kiszélesedő doboz, kártyasor és megforduló banner.

Ez a fejezet az **Animált szolgáltatásdobozok** widget négy elrendezését írja le. Az általános beállítások, az elemlista és az oszlopok az [áttekintő fejezetben](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok/) vannak.

Mindegyik elrendezéshez ugyanaz kell:

- A Pro kiadás a widgethez (Pro nélkül a widget meg sem jelenik).
- Bekapcsolt widget a **The Plus Addons → Widgets** oldalon (**Animated Service Boxes**).
- A képek a Médiatárban. Minden elemnek saját **Kiemelt kép** mezője van.

## Képes harmonika

A képes harmonika több képet mutat keskeny csíkokban, és a fölé vitt egérnél kinyitja azt, amelyik fölött az egér áll, hogy a képe és a szövege több helyet kapjon. Függőleges és vízszintes irányban is elkészíthető.

1. Szerkeszd az oldalt Elementorral, és húzd rá az **Animált szolgáltatásdobozok** widgetet.
2. A **Tartalom → Animált szolgáltatásdobozok** alatt állítsd a **Fő stílus** értékét **Képes harmonika**-ra. Megjelenik a **Stílus** választó két képpel (**Stílus 1**, **Stílus 2**), alapból a **Stílus 1**.
3. A **Tájolás** legyen **Függőleges** (az alapérték, egymás mellett álló csíkok) vagy **Vízszintes** (egymás alá rakott csíkok).
4. Az **Aktív dia** mondja meg, melyik dia legyen nyitva az oldal betöltésekor. Az első érték az **All Equal**, utána 1-től 20-ig számok. Az alapérték az 1. Az **All Equal** esetén egyik dia sem nyitott.
5. Az **Aktív dia szélessége (0-15)** állítja, mennyire szélesedik ki a nyitott dia. Az alapérték 7,5: a nyitott dia 7,5-szer olyan széles, mint egy zárt. Egy 1120 képpontos sorban ez 884 képpont a 118 mellett. A legkisebb érték 1, lépésköz 0,5.
6. Nyisd meg a listát (három elemmel indul), és minden elemhez add meg a **Kiemelt kép**et, valamint kívánság szerint a **Cím**et, az **Alcím**et és a **Leírás**t.
7. Ha gombot is szeretnél, kapcsold be a **Gomb** kapcsolót, válassz **Gomb stílusa** értéket, és töltsd ki az elemenként a **Gomb szövege** és **Gomb hivatkozása** mezőt. A kapcsoló nélkül ez a két mező nem csinál semmit.

![Függőleges képes harmonika: a harmadik dia nyitva, a másik kettő összeszűkült](./kepek/dobozok-gombok-5-asb-accordion.webp)

*Függőleges képes harmonika: a harmadik dia nyitva, a másik kettő összeszűkült* (https://minta-bolt.hu/tp-asb-accordion/)

A képen a harmadik dia van kinyitva, a másik kettő keskeny csík. A kinyílt dia alján a cím, az alcím és a leírás olvasható.

Az **Elrendezés** szakasz a harmonika **Magasság**át, a **Szöveg igazítása** értékét és a szöveg **Eltolás**át adja a diákon belül.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Aktív dia** | Melyik dia nyitott betöltéskor. **All Equal**: egyik sem. | 1 |
| **Aktív dia szélessége (0-15)** | Hányszor szélesebb a nyitott dia a zártnál. Legalább 1, legfeljebb 15, 0,5-ös lépésekben. | 7,5 |
| **Tájolás** | **Függőleges**: oldalra nyílik. **Vízszintes**: lefelé nyílik. | **Függőleges** |

### Működés

- A rámutatás átviszi a nyitott állapotot. Alapértékekkel az 1. dia indul nyitva 884 képponttal, a 2. és 3. 118 képpont. A 3. dia fölé víve 118 / 118 / 884 lett, magasságok változatlanul.
- **Vízszintes** tájolásnál ugyanez a másik tengelyen történik: a három dia 474, 63 és 63 képpont magas volt, a harmadikra víve 63 / 63 / 474.
- Az 1-es szélesség kikapcsolja a harmonikát. Az **Aktív dia szélessége (0-15)** 1-en mind a három dia 373 képpont, és a rámutatás egyetlen szélességet sem változtat. Csak akkor használd, ha sima, egyenlő rácsot szeretnél.
- Az **All Equal** zárt indulást jelent: egyik dia sem nyitott, mind 373 képpont.

### Korlátok

- Az **Aktív dia szélessége (0-15)** nem állítható valóban 0-ra: a címke 0-t ír, a mező legkisebb értéke 1. 1-nél minden dia egyforma széles, és a rámutatás nem nyit meg egyet sem.
- A **Képes harmonika** nem rendelkezik **Oszlopok kezelése** szakasszal. A soronkénti elemszám az elrendezésből adódik.
- A **Kép/ikon** kapcsoló itt nem érhető el. A **Képes harmonika** és a **Csúszó dobozok** az a két elrendezés, ahol egy elem nem vihet ikont vagy Lottie-t, csak a **Kiemelt kép**et használja.

### Hibaelhárítás

- **Rámutatásra egyik dia sem nyílik ki:** nézd meg az **Aktív dia szélessége (0-15)** értékét. 1-nél minden dia ugyanolyan széles. Emeld meg, az alapérték 7,5.
- **A diák zártan indulnak, pedig egyet nyitottat akartam:** az **Aktív dia** **All Equal**-on áll. Válassz számot, az 1 az elsőt nyitja.
- **Nem találom az Oszlopok kezelése szakaszt:** ennek az elrendezésnek nincs. Nincs mit beállítani eszközönként.
- **A szöveg rossz helyen van a dián:** az **Elrendezés** szakasz **Szöveg igazítása** és **Eltolás** beállítása mozgatja vízszintesen és függőlegesen a dián belül.

## Csúszó dobozok

Egy csúszó doboz addig sima kép, amíg valaki rá nem mutat. Ekkor kiszélesedik, a kép félrehúzódik, és mellette becsúszik a szöveg. Egyedi CSS nélkül működik.

1. Szerkeszd az oldalt Elementorral, és húzd rá az **Animált szolgáltatásdobozok** widgetet.
2. A **Fő stílus** legyen **Csúszó dobozok**.
3. Állítsd be az **Aktív dia** értékét: ez a doboz lesz nyitva betöltéskor. A lehetőségek **All Equal**, majd 1-től 20-ig a számok, az alapérték 1.
4. Nyisd meg a három elemmel induló listát. Mindegyikhez add meg a **Kiemelt kép**et, a **Cím**et, az **Alcím**et és a **Leírás**t: ez a három csúszik be.
5. Kívánság szerint kapcsold be a **Gomb** kapcsolót, válassz **Gomb stílusa** értéket, és töltsd ki a **Gomb szövege** és **Gomb hivatkozása** mezőt. Kapcsoló nélkül a két mező hatástalan.
6. Az **Oszlopok kezelése** alatt állítsd be az **Oszlop táblagépen** és **Oszlop mobilon** értékét, és az **Oszlopok közötti térköz** értékét, ha a dobozok túl szorosak.

![Csúszó dobozok: a középső doboz kiszélesedik, a szöveg a kép mellé csúszik](./kepek/dobozok-gombok-5-asb-sliding.webp)

*Csúszó dobozok: a középső doboz kiszélesedik, a szöveg a kép mellé csúszik* (https://minta-bolt.hu/tp-asb-sliding/)

A képen a középső doboz van nyitva: a képe oldalra húzódott, mellette látszik a cím, az alcím, a leírás és a gomb.

Az **Elrendezés** szakaszban a szöveg **Eltolás**át és a doboz **Magasság**át állíthatod.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Aktív dia** | Melyik doboz nyitott betöltéskor. **All Equal**: egyik sem. | 1 |
| **Képfelbontás** | A **Kiemelt kép** betöltési mérete. | **Teljes** |
| **Gomb** / **Gomb stílusa** | Elemenkénti gomb, három kivitelben. | **Elrejtés** / **Stílus 1** |
| **Oszlop táblagépen** | Doboz egy sorban táblagépen, 1 és 3 között. | 2 |
| **Oszlop mobilon** | Doboz egy sorban mobilon, 1 és 3 között. | 1 |

### Működés

- A nyitott doboz elveszi a helyet a többitől. Betöltéskor a három doboz 525, 263 és 263 képpont széles volt, az 1. nyitva. A 2. fölé víve 253, 505 és 253 lett: a 2. kinyílt, a másik kettő lemondott a szélességből.
- A nyitott doboz képe kissé nagyobbra nő: az aktív kép `scale(1.1)` méretben áll, és `scale(1)`-re tér vissza, ha az egér elhagyja.
- A szöveg becsúszik, nem halványul be. A rámutatott doboz címe, alcíme és leírása a kép mellett nyíló panelen jelenik meg, a többi doboz a sajátját rejtve tartja.

### Korlátok

- A **Csúszó dobozok** nem kínál **Stílus** választót, egyetlen kivitel van. A **Képes harmonika**, a **Cikkdoboz** és társaik kivételek.
- **Oszlop asztali nézetben** beállítás nincs: az asztali sor a dobozokból adódik.
- Az **Aktív dia szélessége (0-15)** itt nem létezik, az a **Képes harmonika** mezője. A csúszó doboz kinyílásának mértéke nem állítható.
- Ikon és Lottie nincs: a **Kép/ikon** kapcsoló rejtett, minden doboz csak a **Kiemelt kép**et használhatja.

### Hibaelhárítás

- **Rámutatásra semmi sem csúszik:** a hatás a közzétett oldalon fut, a szerkesztő előnézetében nem. Mentsd, nyisd meg az éles címet, és előtte ürítsd az oldal gyorsítótárát.
- **Nem találom a Stílus legördülőt:** a **Csúszó dobozok** elrendezésnek nincs. Csak a **Képes harmonika**, a **Cikkdoboz**, az **Információs banner**, a **Szolgáltatáselem** és a **Portfólió** kínál **Stílus** választót.
- **A Gomb szövege nem érvényesül:** kapcsold be a **Gomb** kapcsolót. Kikapcsolva a **Gomb szövege** és a **Gomb hivatkozása** is hatástalan.
- **A dobozok szorosak táblagépen:** csökkentsd az **Oszlop táblagépen** értékét **1**-re, vagy adj térközt az **Oszlopok közötti térköz** beállítással.

## Cikkdoboz

A cikkdoboz kártya: kép, cím, rövid szöveg és kívánság szerint gomb. Egy sor belőle gyors útmutató néhány oldalhoz. A widget a teljes sort egyetlen elemlistából építi, így minden kártya egyforma alakú, és az egy sorba férő kártyák számát eszközönként egyszer állítod be.

1. Szerkeszd az oldalt Elementorral, és húzd rá az **Animált szolgáltatásdobozok** widgetet.
2. A **Fő stílus** legyen **Cikkdoboz**. Megjelenik a **Stílus** választó két képpel, alapból a **Stílus 1**.
3. Ha kell a gomb, kapcsold be a **Gomb** kapcsolót, és válassz **Gomb stílusa** értéket (**Stílus 1**, **Stílus 2** vagy **Stílus 3**).
4. Nyisd meg a listát (három elemmel indul), és minden elemhez add meg a **Kiemelt kép**et, a **Cím**et és a **Leírás**t. Az **Alcím**et hagyd üresen: ez az elrendezés nem rajzolja ki.
5. Töltsd ki elemenként a **Gomb szövege** és a **Gomb hivatkozása** mezőt. Csak bekapcsolt **Gomb** mellett működnek.
6. Az **Oszlopok kezelése** alatt állítsd be az **Oszlop asztali nézetben**, **Oszlop táblagépen** és **Oszlop mobilon** értékét. A választható szám a soronkénti kártyák száma, tehát az „4 oszlop” négy kártyát jelent egymás mellett. Az alapértékek: 4, 3 és 2.
7. A kártyák közé az **Oszlopok közötti térközt** adj meg (px, % vagy em, eszközönként). Alapból üres.

![Cikkdoboz sor: a középső kártya fölött az egér, megjelenik a leírása és a gombja](./kepek/dobozok-gombok-5-asb-cikk.webp)

*Cikkdoboz sor: a középső kártya fölött az egér, megjelenik a leírása és a gombja* (https://minta-bolt.hu/tp-asb-cikk/)

A képen három kártya áll egy sorban. A kártyákon a kép és a cím látszik, a középső fölé vitt egérnél pedig megjelenik a **Leírás** és a **Tovább** feliratú gomb.

Az alapértékekkel, három elemmel és egy 1200 képpontos oldalon 285 × 255 képpontos kártyák jöttek létre, négy fér egy 1120 képpontos sorba.

| Beállítás | Hol | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Stílus** | **Tartalom → Animált szolgáltatásdobozok** | Két kártyakivitel, képekkel: **Stílus 1** és **Stílus 2**. | **Stílus 1** |
| **Képfelbontás** | ugyanott | A **Kiemelt kép** betöltési mérete. | **Teljes** |
| **Gomb** | ugyanott | Mutatja az elemenkénti gombot. Nélküle a **Gomb szövege** és a **Gomb hivatkozása** nem csinál semmit. | **Elrejtés** |
| **Kép/ikon** | ugyanott | Ikont, képet vagy Lottie-t enged a kártyára az elem saját **Ikon kiválasztása** értéke mellett. | **Elrejtés** |
| **Oszlop asztali nézetben** | **Oszlopok kezelése** | Kártya egy sorban asztalin, 1 és 6 között. | 4 |
| **Oszlop táblagépen** / **Oszlop mobilon** | ugyanott | Ugyanez eszközönként. | 3 / 2 |

### Működés

- Minden kártya kirajzolja a képet, a címet és a leírást. Az alapértékekkel és három elemmel három egyforma kártyát kaptunk.
- A gomb oda visz, ahová megadtad: bekapcsolt **Gomb** mellett minden kártyában megjelent egy **Read More** feliratú gomb az elem **Gomb hivatkozása** címével.
- Az **Alcím** kimarad. Mindhárom elemben kitöltöttük, és az oldal kódjában sehol sem jelent meg alcímelem. A szöveget tedd a **Leírás** mezőbe.

### Korlátok

- A **Cikkdoboz** nem mutatja az **Alcím**et. A mező minden elemben ott van, kitölthető, de az elrendezés csak a **Cím**et, a **Leírás**t és a gombot rajzolja ki.
- A kártya mérete az oszlopszámot követi, szélességi mező nincs. Szélesebb kártyához csökkentsd az **Oszlop asztali nézetben** értékét. Kártyánkénti szélesség nincs.

### Hibaelhárítás

- **Az Alcím sosem jelenik meg:** ez az elrendezés sajátja. Tedd a szöveget a **Leírás** mezőbe, vagy válassz olyan elrendezést, amely mutatja, például a **Dekoratív dobozt**.
- **Hiányzik a gomb:** kapcsold be a **Gomb** kapcsolót a **Tartalom → Animált szolgáltatásdobozok** alatt. A **Gomb szövege** kitöltése magában nem elég.
- **Túl sok kártya zsúfolódik egy sorba:** csökkentsd az **Oszlop asztali nézetben** értékét. A választható szám a soronkénti kártyák száma: 3 oszlop három kártyát jelent.
- **A kártyák összeérnek:** állíts be **Oszlopok közötti térköz** értéket az **Oszlopok kezelése** alatt, mert alapból üres.

## Információs banner

Az információs banner rövid címet mutat, amíg valaki rá nem mutat, aztán megfordul, és a hátoldalán megjeleníti a részleteket. Egy ajánlat, egy adat vagy egy ígéret fér el benne kis helyen.

1. Szerkeszd az oldalt Elementorral, és húzd rá az **Animált szolgáltatásdobozok** widgetet.
2. A **Fő stílus** legyen **Információs banner**, majd válassz **Stílus** értéket: két kép, **Stílus 1** és **Stílus 2**, az alapérték **Stílus 1**.
3. **Stílus 1** esetén megjelenik a **Rámutatás iránya**: **Felül**, **Alul**, **Bal** vagy **Jobb**. Ez az az él, ahonnan a hátoldal bejön. Az alapérték **Bal**. **Stílus 2**-nél a vezérlő eltűnik.
4. Kapcsold be a **Kép/ikon** kapcsolót, ha a banner elején ikon, kép vagy Lottie legyen.
5. Nyisd meg a listát (három elemmel indul). Állítsd be a **Cím**et, és ha bekapcsoltad a kapcsolót, az **Ikon kiválasztása** értékét: **Nincs**, **Ikon**, **Kép** vagy **Lottie**.
6. Az **Alcím** az előlap második sora. A **Leírás** a hátoldalra kerül, ide írd a rámutatásra megjelenő szöveget.
7. Állítsd be a **Kiemelt kép**et. Ha gombot szeretnél, kapcsold be a **Gomb** kapcsolót, és töltsd ki a **Gomb szövege** és a **Gomb hivatkozása** mezőt.
8. Az **Oszlopok kezelése** alatt add meg az **Oszlop asztali nézetben**, **Oszlop táblagépen** és **Oszlop mobilon** értékét: a választott szám az egy sorba kerülő bannerek száma.

![Információs banner: a rámutatott banner a leírását mutatja, a másik kettő a címet és az alcímet](./kepek/dobozok-gombok-5-asb-info.webp)

*Információs banner: a rámutatott banner a leírását mutatja, a másik kettő a címet és az alcímet* (https://minta-bolt.hu/tp-asb-info/)

A képen az első banner van megfordítva és mutatja a leírását, a másik kettőn a cím és az alcím látszik.

Az **Elrendezés** szakaszban a banner **Magasság**át és a benne lévő tartalom **Szöveg igazítása** értékét állíthatod.

| Beállítás | Hol | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Stílus** | **Tartalom → Animált szolgáltatásdobozok** | Két bannerkivitel, képekkel. | **Stílus 1** |
| **Rámutatás iránya** | ugyanott | Melyik élről érkezik a hátoldal. Csak **Stílus 1**-nél látszik. | **Bal** |
| **Kép/ikon** | ugyanott | Elemenként az **Ikon kiválasztása** főkapcsolója. | **Elrejtés** |
| **Képfelbontás** | ugyanott | A **Kiemelt kép** betöltési mérete. | **Teljes** |
| **Oszlop asztali nézetben** / **Oszlop táblagépen** / **Oszlop mobilon** | **Oszlopok kezelése** | Bannerek száma soronként. | 4 / 3 / 2 |

### Működés

- Az előlap a **Cím**et és az **Alcím**et hordozza, a hátoldal a **Leírás**t. A widget bannerenként két egymásra rakott blokkot rajzol: az elöl lévő ikont, címet és alcímet, és a hátul lévő leírást.
- A leírás rámutatásig rejtett. Betöltéskor mindhárom leírás átlátszatlansága 0 volt. Az első banner fölé víve az övé 1 lett, a másik kettő 0 maradt.
- Csak a rámutatott banner fordul meg. A többi az előlapját mutatja, így a sor nem fordul meg egyszerre.

### Korlátok

- A **Rámutatás iránya** csak a **Stílus 1**-hez tartozik. **Stílus 2**-re váltva a vezérlő eltűnik, az irányt nem lehet kiválasztani.
- Az ikonhoz két kapcsoló kell. Az elem **Ikon kiválasztása** mezőjében az **Ikon** választás addig nem csinál semmit, amíg a **Kép/ikon** nincs bekapcsolva az egész widgeten.
- A mindig látszó szöveget ne a **Leírás** mezőbe tedd. Az a banner hátoldalán van, és rámutatásig láthatatlan, ezért érintőképernyőn sem olvasható el első pillantásra.

### Hibaelhárítás

- **Rámutatásra nem történik semmi:** nézd meg, hogy az elemeknek van-e **Leírás**uk. Üres mezővel nincs mit megmutatni a hátoldalon.
- **Nem találom a Rámutatás iránya beállítást:** **Stílus 2** van kiválasztva. Válts vissza **Stílus 1**-re.
- **Nem jelenik meg az ikonom:** kapcsold be a **Kép/ikon** kapcsolót a **Tartalom → Animált szolgáltatásdobozok** alatt, majd állítsd be az **Ikon kiválasztása** értékét az elemben.
- **A bannerek túl kicsik:** csökkentsd az **Oszlop asztali nézetben** értékét, hogy kevesebb férjen egy sorba, és növeld a **Magasság** értékét az **Elrendezés** szakaszban.