# Animált szolgáltatásdobozok: háttérváltás rámutatáskor, kinyíló szolgáltatáslista és portfólió

> Három elrendezés lépésről lépésre: a rámutatott cím képe a szakasz háttere, rámutatásra megjelenő lista, és címek oszlopa egy közös kép mellett.

Ez a fejezet az **Animált szolgáltatásdobozok** widget három másik elrendezését írja le. Az általános beállításokat, az elemlistát és az oszlopokat az [áttekintő fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok/) tartalmazza.

Mindegyik elrendezéshez ugyanaz kell:

- A Pro kiadás: Pro nélkül a widget meg sem jelenik, az ingyenes bővítményben nincs hasonló.
- 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, ha üres, az Elementor szürke helyőrzője jelenik meg.
- Más kapcsolót vagy oldalszintű beállítást nem kell bekapcsolni.

## Háttérkép váltása rámutatáskor

Egy sor egyszerű cím, mögötte egy nagy kép, amely változik, ahogy a látogató egyik címről a másikra mozog. Egyszerű hatás, de élővé teszi a szolgáltatások vagy projektek szakaszát. A **Rámutatáskor megjelenő szakasz** elrendezés minden elemnél egy címet és egy képet kér, és a rámutatott cím képét a teljes blokk mögé teszi.

### Előkészület: külön tároló

Tedd a widgetet saját tárolóba. Ez az elrendezés a háttérképet arra a tárolóra írja, amelyben a widget áll, ezért minden más, abba a tárolóba tett elem a változó kép fölé kerül.

### Beállítás

1. Szerkeszd az oldalt Elementorral, és vegyél fel egy tárolót, amelyben nincs más. A kép erre a tárolóra kerül, ezért tartsd csak a widgetnek.
2. Húzd bele az **Animált szolgáltatásdobozok** widgetet, és állítsd a **Fő stílus** értékét **Rámutatáskor megjelenő szakasz**-ra.
3. Kapcsold be a **Kép előtöltése** kapcsolót, ha azt szeretnéd, hogy a böngésző előre letöltse az összes képet, így az első váltás sem lassú. Alapból ki van kapcsolva.
4. Kapcsold be a **Kép/ikon** kapcsolót, ha minden elem mellett ikont, képet vagy Lottie-t is mutatnál.
5. Nyisd meg a listát. A három elem mindegyikében add meg a **Cím**et (ez mindig látszik) és a **Kiemelt kép**et, amelyik a szakasz mögé kerül, ha arra a címre mutatnak.
6. Az **Alcím** és a **Leírás** azt tartalmazza, amelyik csak a rámutatott elemnél jelenik meg.
7. Kívánság szerint kapcsold be a **Gomb** kapcsolót, és töltsd ki az elemenkénti **Gomb szövege** és **Gomb hivatkozása** mezőt.
8. Az **Oszlopok kezelése** alatt az **Oszlop asztali nézetben**, **Oszlop táblagépen** és **Oszlop mobilon** értékkel állítsd be, hány cím legyen egy sorban.

![Rámutatáskor megjelenő szakasz: a második cím fölé víve annak a képe kerül a háttérre](./kepek/dobozok-gombok-5-asb-hover.webp)

*Rámutatáskor megjelenő szakasz: a második cím fölé víve annak a képe kerül a háttérre* (https://minta-bolt.hu/tp-asb-hover/)

A képen a második cím van kiemelve, az **Arculat** alcíme és leírása megjelent alatta, és a zöld háttérkép az övé.

Az **Elrendezés** szakaszban a szakasz **Magasság**át és a címek **Szöveg igazítása** értékét állíthatod.

| Beállítás | Hol | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Kép előtöltése** | **Tartalom → Animált szolgáltatásdobozok** | Az összes elem képét előre betölti, az első rámutatáskor nem kell várni. | **Elrejtés** |
| **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** |
| **Gomb** / **Gomb stílusa** | ugyanott | Elemenkénti gomb, három kivitelben. | **Elrejtés** / **Stílus 1** |
| **Oszlop asztali nézetben** / **Oszlop táblagépen** / **Oszlop mobilon** | **Oszlopok kezelése** | Címek száma egy sorban. | 4 / 3 / 2 |

### Működés

- A kép tényleg változik. A widget mögötti tároló az első elem képével indult, a második cím fölé víve a másodikéra, a harmadik fölé víve a harmadikéra váltott.
- Betöltéskor az első elem képe látszik. Külön beállítás nincs hozzá, rendezd át az elemeket, ha más képpel akarsz indulni.
- A rámutatott elem kiegészítő szövege megjelenik. Az **Alcím** és a **Leírás** a rámutatott címnél átlátszatlanná vált, a többi elemnél csak a cím maradt.
- A váltás átúsztatás a tárolón. A widget fél másodperces átmenetet és az egész felületre kiterjedő színes fedvényt is ad a tárolónak, hogy a szöveg bármilyen képen olvasható maradjon.

### Korlátok

- A **Rámutatáskor megjelenő szakasz** a tároló hátterét változtatja, nem a widgetét. A kép a legközelebbi Elementor-tárolóra vagy szakaszra kerül, ezért az ott beállított háttér a widget megjelenése alatt felülíródik, és az ugyanabban a tárolóban lévő többi widget a változó kép fölé kerül.
- Ennek az elrendezésnek nincs **Stílus** vezérlője. Egyetlen kivitel van, nincs **Stílus 1** / **Stílus 2** választó.
- A **Kép előtöltése** nem változtat semmi láthatón. Bekapcsolva a képek korábban kerültek az oldalra, az elrendezés, a fedvény és a váltás ugyanúgy nézett ki. Lassú kapcsolaton az első rámutatás késése ellen használd, nem megjelenés miatt.
- A rámutatás egérre való. Érintőképernyőn nincs mire rámutatni, ezért számolj azzal, hogy a telefonos látogatók többsége az első elem képét látja.

### Hibaelhárítás

- **Eltűnt a tárolón beállított háttér:** ez az elrendezés sajátja. A widget a saját képét írja arra a tárolóra, amelyben áll, és felülírja az előző hátteret. Adj a widgetnek saját tárolót.
- **Egy másik widget furcsán néz ki ugyanabban a tárolóban:** ugyanez az ok, a változó kép fölött áll. Tedd át saját tárolóba.
- **Egyáltalán nem látszik kép:** nézd meg, hogy minden elemnek van-e **Kiemelt kép**. Anélkül az Elementor szürke helyőrzője jelenik meg, és a hatás hibásnak látszik.
- **Az első váltás akadozik:** kapcsold be a **Kép előtöltése** beállítást, hogy a böngésző az első rámutatás előtt letöltse az összes képet, és tartsd ésszerű méretűre a képfájlokat.

## Kinyíló szolgáltatásdoboz

A kinyíló szolgáltatásdoboz rövidre fogja a szolgáltatások rácsát: minden kártyán egy cím és egy összefoglaló sor látszik, a teljes felsorolás pedig csak akkor, ha a látogató a kártyára mutat. Ezt az elrendezést a widget **Szolgáltatáselem** néven kínálja, a lista egyetlen mezőből áll, és a sorokat függőleges vonal (pipe, `|`) karakterrel választod el.

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 **Szolgáltatáselem**-re.
3. Válassz **Stílus** értéket. A **Stílus 1** (alapérték) a listát rámutatásig elrejti, a **Stílus 2** mindig mutatja.
4. Kapcsold be a **Kép/ikon** kapcsolót, ha minden kártya fölött ikon, kép vagy Lottie legyen.
5. Nyisd meg a három elemmel induló listát. Mindegyikben töltsd ki a **Cím**et, az **Alcím**et és a **Leírás**t: ezek a kártya látható részét adják.
6. Ugyanabban az elemben a **Lista tartalma** mezőbe írd a listát, a sorokat függőleges vonallal elválasztva. A mező minden elrendezésnél látszik, de csak a **Szolgáltatáselem** rajzolja ki, a panel is ezt írja alatta.
7. Kívánság szerint kapcsold be a **Gomb** kapcsolót, és állítsd be elemenként a **Gomb szövege** és **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. Hagyj helyet a sor alatt: a lista lefelé nyílik, bármi fölé, ami alatta van.

![Szolgáltatáselem Stílus 1: a középső kártya fölött az egér, alatta megjelenik a lista](./kepek/dobozok-gombok-5-asb-szolg.webp)

*Szolgáltatáselem Stílus 1: a középső kártya fölött az egér, alatta megjelenik a lista* (https://minta-bolt.hu/tp-asb-szolg/)

A képen a középső kártya listája (**Ötletelés**, **Tervezés**, **Kivitelezés**, **Átadás**) nyílt ki a kártya alatt, a másik kettő zárt.

Az **Oszlopok közötti térköz** a kártyák közötti távolságot adja.

| Beállítás | Hol | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Stílus** | **Tartalom → Animált szolgáltatásdobozok** | **Stílus 1**: a lista rámutatásra jelenik meg. **Stílus 2**: mindig látszik. | **Stílus 1** |
| **Lista tartalma** | az elemben | A lista sorai, függőleges vonallal elválasztva. Csak ez az elrendezés rajzolja ki. | négy mintasor |
| **Kép/ikon** | **Tartalom → Animált szolgáltatásdobozok** | Főkapcsoló az elemek **Ikon kiválasztása** mezőjéhez. | **Elrejtés** |
| **Gomb** / **Gomb stílusa** | ugyanott | Elemenkénti gomb három kivitelben. | **Elrejtés** / **Stílus 1** |
| **Oszlop asztali nézetben** / **Oszlop táblagépen** / **Oszlop mobilon** | **Oszlopok kezelése** | Kártyák száma egy sorban. | 4 / 3 / 2 |

### Működés

- A **Stílus 1** a listát rámutatásig elrejti. Betöltéskor minden listapanel rejtett és teljesen átlátszó volt. Egy kártya fölé víve csak annak a listája látszott, a másik kettőé rejtett maradt.
- Minden elválasztójel egy sort ad. A `Stratégia | Drótváz | Dizájnrendszer | Átadás` négy külön listasorként jelent meg.
- A kártya nem változtat méretet. Rámutatás előtt és után egyaránt 285 × 167 képpont volt. A lista a kártya alatt jelenik meg, nem nyitja szét, ezért a lenti sor sem mozdul.
- A **Stílus 2** mindent egyszerre mutat. Nincs rejtett állapot: minden kártyán a lista az oldal betöltésétől látszik.

### Korlátok

- A **Szolgáltatáselem** doboza nem nő. **Stílus 1**-ben a kártya mérete ugyanaz, a lista alatta jelenik meg, bármi fölé kerülhet, ami lejjebb áll. Hagyj helyet a sor alatt, különben a lista eltakarja a következő sort.
- A **Lista tartalma** minden elrendezésnél látszik, de csak itt jelenik meg. Ha más fő stílusnál töltöd ki, az oldalon semmi sem látszik belőle.
- A listasoroknak nincs saját hivatkozásuk. A sorok szövegek, csak a kártya gombja vagy a címe lehet link.

### Hibaelhárítás

- **Nem jelenik meg a lista:** nézd meg, hogy a **Fő stílus** **Szolgáltatáselem**-e. A **Lista tartalma** mező minden elrendezésnél látszik, de csak ez rajzolja ki.
- **Az egész lista egyetlen hosszú sor:** az elválasztó a függőleges vonal (pipe) karakter. A vesszőt és a sortörést a widget nem választja szét.
- **A lista eltakarja az alatta lévő tartalmat:** a kártya nem nő, ezért a lista a lejjebb lévő fölött nyílik. Adj alsó belső margót a tárolónak, vagy használd a **Stílus 2**-t, amely a listát a helyén mutatja.
- **A listát rámutatás nélkül is látni szeretném:** állítsd a **Stílus** értékét **Stílus 2**-re.

## Portfólió szakasz

Egy portfólió nem muszáj, hogy bélyegképek rácsa legyen. Szebben olvasható a projektnevek oszlopa egy nagy kép mellett, amely változik, ahogy a látogató végighalad a listán. A **Portfólió** elrendezés pont ezt adja, és külön beállítása van érintőképernyőre, ahol nincs rámutatás.

### Előkészület

- Minden elemnek legyen saját **Kiemelt kép**e.
- Minden elemnek legyen **Gomb hivatkozása**. Ebben az elrendezésben maga a cím a link, és az 1024 képpontos vagy keskenyebb kijelzőn a **Cím kattintáskor megjelenő szövege** hivatkozás is ugyanerre a címre mutat.

### Beállítás

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 **Portfólió**-ra.
3. Válassz **Stílus** értéket, két képből. A **Stílus 1** (alapérték) a címeket az egyik oszlopba, a képet a másikba teszi. A **Stílus 2** a képet a teljes blokk hátterévé teszi, a címekkel fölötte.
4. Nyisd meg a három elemmel induló listát. Mindegyikben állítsd be a **Cím**et (ez a kattintható projektnév) és a **Kiemelt kép**et (ez látszik, amíg arra a címre mutatnak).
5. A projekt címét a **Gomb hivatkozása** mezőbe írd. Ebben az elrendezésben nincs külön gomb, a **Gomb** kapcsoló rejtett, és ez a mező adja a cím linkjét.
6. Nyisd meg a **Cím kattintáskor megjelenő szövege** szakaszt, és add meg a szöveget kis kijelzőkre. Az alapérték **Ide kattintás**, de pl. a „Projekt megtekintése” jobban olvasható.
7. Az **Elrendezés** szakaszban a szakasz **Magasság**át, a címek **Szöveg igazítása** értékét és függőleges **Eltolás**át állíthatod.

![Portfólió Stílus 1: a harmadik cím fölött az egér, a jobb oldali kép a harmadik projekté](./kepek/dobozok-gombok-5-asb-portfolio.webp)

*Portfólió Stílus 1: a harmadik cím fölött az egér, a jobb oldali kép a harmadik projekté* (https://minta-bolt.hu/tp-asb-portfolio/)

A képen a címek oszlopa bal oldalon áll, a rámutatott **Fotózás** címe fekete, a többi halvány, és a jobb oldali kép a harmadik elemé.

![A Portfólió fő stílus tartalompanelje, a Cím kattintáskor megjelenő szövege szakasszal](./kepek/dobozok-gombok-5-asb-panel-portfolio.webp)

*A Portfólió fő stílus tartalompanelje, a Cím kattintáskor megjelenő szövege szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=119&action=elementor)

A panelen a **Stílus** két képe, a lista és az **Elrendezés**, valamint a **Cím kattintáskor megjelenő szövege** szakasz látszik. **Oszlopok kezelése** itt nincs.

Új projekthez használd az **Elem hozzáadása** gombot.

| Beállítás | Hol | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Stílus** | **Tartalom → Animált szolgáltatásdobozok** | **Stílus 1**: címek és kép egymás mellett. **Stílus 2**: a kép a címek mögött. | **Stílus 1** |
| **Képfelbontás** | ugyanott | A **Kiemelt kép** betöltési mérete. | **Teljes** |
| **Gomb hivatkozása** | az elemben | Hová visz a cím kattintásra, és hová a kis kijelzős hivatkozás. | `#` |
| **Cím kattintáskor megjelenő szövege** | **Cím kattintáskor megjelenő szövege** szakasz | A hivatkozás felirata, amelyet az 1024 képpontos vagy keskenyebb kijelzőn az első érintés felfed. | **Ide kattintás** |

### Működés

- A cím fölé víve a kép cserélődik. Három elemnél az egyetlen közös kép az első projekté volt, és a harmadik cím fölé víve a harmadikéra váltott. A rámutatott cím az aktív. A képblokk 570 × 600 képpont volt a lista mellett.
- Az első elem képe töltődik be. Rendezd át az elemeket, ha más képpel akarsz indulni.
- Kis kijelzőn az első érintés nem követi a linket. 390 képponton a widget csak a három címet mutatta. Az aktív cím egyszeri érintése után megjelent egy hivatkozás a **Cím kattintáskor megjelenő szövege** mezőben megadott felirattal, az elem **Gomb hivatkozása** címére mutatva. A projekt megnyitásához erre a hivatkozásra kell érinteni. A widget 1024 képponton és az alatt kapcsol erre a viselkedésre.

### Korlátok

- A **Képes harmonikának** és a **Portfóliónak** nincs **Oszlopok kezelése** szakasza. A soronkénti elemszám az elrendezésből adódik, ezért eszközönként nincs mit beállítani.
- Ebben az elrendezésben nincs gomb. A **Gomb** kapcsoló rejtett, a **Gomb szövege** nem használatos, a **Gomb hivatkozása** pedig a címet szolgálja.
- A kis kijelzős hivatkozás nem látszik előre. A telefonos látogatók csak a címeket látják, amíg egyre nem érintenek, ezért a kétérintéses út azt kívánja, hogy a **Cím kattintáskor megjelenő szövege** önmagában is érthető legyen.
- Minden elem ugyanazt a képhelyet használja. Egyszerre egy kép látszik, ezért az elrendezés nem alkalmas több kép egyidejű megmutatására.

### Hibaelhárítás

- **A kép nem változik:** nézd meg, hogy minden elemnek van-e saját **Kiemelt kép**e. Ha több elemnek ugyanaz a képe, nincs mit látni, ahogy mozogsz közöttük.
- **A telefonon a címre kattintva semmi sem történik:** történik, csak más: az első érintés felfedi a **Cím kattintáskor megjelenő szövege** hivatkozást a cím alatt. A projekt megnyitásához erre érints.
- **A kis kijelzős hivatkozás „Ide kattintás”:** ez az alapérték. A **Cím kattintáskor megjelenő szövege** szakaszban módosíthatod.
- **Nem találom az Oszlopok kezelése szakaszt:** a **Portfólió** elrendezésnek nincs. A szakasz magasságát és a címek igazítását az **Elrendezés** szakaszban állítsd.