# Animált szolgáltatásdobozok widget: beállítások áttekintése és a Dekoratív doboz

> Az Animált szolgáltatásdobozok widget nyolc elrendezése, a közös elemmezők, az oszlopok, az Elrendezés szakasz és a Dekoratív doboz.

Az **Animált szolgáltatásdobozok** egyetlen widget, amely nyolc különböző animált elrendezést rajzol: képes harmonikát, csúszó dobozokat, cikkdobozt, információs bannert, háttérváltót rámutatáskor, dekoratív dobozt, kinyíló szolgáltatásdobozt és portfóliólistát. Egyszer választasz elrendezést, kitöltöd az azonos mezőket, és a widget a hozzá tartozó szerkezetet és animációt adja.

## Előkészületek

- A widget a Pro kiadás része. Pro nélkül egyáltalán nem jelenik meg, az ingyenes bővítményben nincs hasonló widget.
- Az Elementor (ingyenes) legyen telepítve és aktív.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá az **Animated Service Boxes** szóra, és kapcsold be. A szerkesztőben a neve **Animált szolgáltatásdobozok**.
- Töltsd fel előre a Médiatárba a megjelenítendő képeket. 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.

## Az elrendezés kiválasztása

Húzd az oldalra a widgetet. A **Tartalom → Animált szolgáltatásdobozok** első vezérlője a **Fő stílus**, ez határozza meg, mit látsz a panel többi részén. Nyolc választható:

![A widget tartalompanelje a Képes harmonika elrendezéssel](./kepek/dobozok-gombok-5-asb-panel.webp)

*A widget tartalompanelje a Képes harmonika elrendezéssel* (https://minta-bolt.hu/wp-admin/post.php?post=112&action=elementor)

A képen a **Fő stílus** legördülője, alatta a **Stílus** két képe és a három elemből álló lista látszik.

| Fő stílus | Mit kapsz | Részletes leírás |
| --- | --- | --- |
| **Képes harmonika** | Rámutatáskor kinyíló csíkok, függőlegesen vagy vízszintesen. | [Elrendezések](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-kartyak/) |
| **Csúszó dobozok** | Rámutatáskor kiszélesedő doboz, mellette becsúszik a szöveg. | [Elrendezések](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-kartyak/) |
| **Cikkdoboz** | Kártyasor képpel, címmel, leírással és gombbal. | [Elrendezések](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-kartyak/) |
| **Információs banner** | Rámutatáskor megfordul, és a hátoldalán mutatja a leírást. | [Elrendezések](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-kartyak/) |
| **Rámutatáskor megjelenő szakasz** | Címek listája, a rámutatott elem képe a teljes szakasz háttere. | [Háttérváltó, szolgáltatáslista, portfólió](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-hover/) |
| **Dekoratív doboz** | Képháttér, rajta cím és alcím. | lent |
| **Szolgáltatáselem** | Rámutatásra kinyíló szolgáltatáslista. | [Háttérváltó, szolgáltatáslista, portfólió](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-hover/) |
| **Portfólió** | Címek oszlopa egy közös kép mellett, amely a címek között haladva cserélődik. | [Háttérváltó, szolgáltatáslista, portfólió](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-hover/) |

## A Dekoratív doboz

Ennek az elrendezésnek nincs külön fejezete, itt a leírása. Állítsd a **Fő stílus** értékét **Dekoratív doboz**-ra, és minden elemnél töltsd ki a **Cím**, **Alcím** és **Kiemelt kép** mezőt. Az eredmény egy dobozsor, amelynek a képe a háttere, a szöveg pedig rajta áll. Egy 1200 képpontos oldalon, alapbeállításokkal három 285 × 340 képpontos doboz jött létre, mindegyik a címét és az alcímét mutatta.

![Három Dekoratív doboz a képpel a háttérben, rajta a címmel és az alcímmel](./kepek/dobozok-gombok-5-asb-fancy.webp)

*Három Dekoratív doboz a képpel a háttérben, rajta a címmel és az alcímmel* (https://minta-bolt.hu/tp-asb-fancy/)

A képen a három doboz képe áttetsző fedvény alatt látszik, és a cím, az alcím, valamint a leírás világos betűkkel olvasható rajta.

A **Dekoratív doboz** nem kínál **Stílus** választót, ahogy a **Csúszó dobozok** és a **Rámutatáskor megjelenő szakasz** sem. Csak a **Képes harmonika**, a **Cikkdoboz**, az **Információs banner**, a **Szolgáltatáselem** és a **Portfólió** mutat **Stílus** választót, ami **Stílus 1** és **Stílus 2** feliratú két kép.

## A legtöbb elrendezésre érvényes beállítások

| Beállítás | Hol | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Képfelbontás** | **Tartalom → Animált szolgáltatásdobozok** | Melyik regisztrált képmérettel töltődik be az elemek **Kiemelt kép**e. | **Teljes** |
| **Gomb** | ugyanott | Bekapcsolja az elemenkénti gombot. A **Portfólió** elrendezésnél rejtve van, mert ott nincs gomb. | **Elrejtés** |
| **Gomb stílusa** | ugyanott | **Stílus 1**, **Stílus 2** vagy **Stílus 3**. Csak bekapcsolt **Gomb** mellett látszik. | **Stílus 1** |
| **Kép/ikon** | ugyanott | Lehetővé teszi, hogy minden elem ikont, képet vagy Lottie-t mutasson. A **Képes harmonikánál** és a **Csúszó doboznál** nincs. | **Elrejtés** |

## Az elemek listája

Az **Animált szolgáltatásdobozok** lista tartalmazza a tartalmat. Három elemmel indul, az **Elem hozzáadása** gombbal veszel fel újat. Bármelyik elrendezésnél ugyanazok a mezők vannak.

![A lista első eleme megnyitva: Cím, Ikon kiválasztása, Alcím, Leírás és Kiemelt kép](./kepek/dobozok-gombok-5-asb-panel-elem.webp)

*A lista első eleme megnyitva: Cím, Ikon kiválasztása, Alcím, Leírás és Kiemelt kép* (https://minta-bolt.hu/wp-admin/post.php?post=112&action=elementor)

A képen az elem mezői láthatók. Az **Ikon kiválasztása** alatti szürke szöveg arra figyelmeztet, hogy az ikon/kép/Lottie csak akkor használható, ha a fő stílus menüben az információs bannert, a rámutatáskor megjelenő szakaszt vagy a szolgáltatáselemet választod, és bekapcsolod a **Kép/ikon** kapcsolót.

| Mező | Mit csinál | Alapérték |
| --- | --- | --- |
| **Cím** | Az elem címsora. A **Portfólió** elrendezésben ez egyben a hivatkozás is. | `The Plus` |
| **Ikon kiválasztása** | **Nincs**, **Ikon**, **Kép** vagy **Lottie**. A hozzá tartozó mezők a választással változnak, és a **Kép/ikon** kapcsolónak is be kell lennie. | **Nincs** |
| **Alcím** | Második sor a cím alatt. | üres |
| **Leírás** | Formázható szöveg. Több elrendezés csak rámutatáskor mutatja. | üres |
| **Kiemelt kép** | Az elem képe. Az elrendezéstől függően csík, kártyakép vagy háttér. | Elementor helyőrző |
| **Gomb szövege**, **Gomb hivatkozása** | A gomb felirata és címe. Csak bekapcsolt **Gomb** mellett jelennek meg, kivéve a **Portfólió** elrendezést, ahol a **Gomb hivatkozása** a cím linkje. | `Read More` / `#` |
| **Lista tartalma** | Egyetlen mező, amelyben a sorokat a függőleges vonal (pipe) karakterrel választod el. Minden elrendezésben látszik, de csak a **Szolgáltatáselem** rajzolja ki. A használatát lásd a [Szolgáltatáselem](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-szolgaltatasdobozok-hover/) fejezetben. | négy mintasor |

## Elrendezés szakasz

Az **Elrendezés** szakasz a szöveg elhelyezését állítja az elemekben:

- **Transzformációs CSS**: szabad szövegű CSS transzformáció, külön **Normál** és **Rámutatás** lappal. A mező mintája: `rotate(10deg) scale(1.1)`.
- **Szöveg igazítása**: **Bal**, **Közép** vagy **Jobb**, eszközönként.
- **Eltolás**: a szövegblokk függőleges helye: **Felül**, **Közép**, **Alul**, néhány elrendezésnél **Sorkizárt** is.
- **Magasság**: az elemek legkisebb magassága, eszközönként.

Hogy ebből melyik látszik, az az elrendezéstől függ, ezért ne várd mind a négyet minden esetben.

## Oszlopok kezelése

Az **Oszlopok kezelése** szakasz elrendezésenként más:

- **Cikkdoboz**, **Információs banner**, **Rámutatáskor megjelenő szakasz**, **Dekoratív doboz** és **Szolgáltatáselem**: **Oszlop asztali nézetben**, **Oszlop táblagépen** és **Oszlop mobilon**. Az értékek 1-től 6 oszlopig választhatók, ennyi elem van egy sorban. Az alapértékek: asztalin 4, táblagépen 3, mobilon 2.
- **Csúszó dobozok**: csak **Oszlop táblagépen** (alapból 2) és **Oszlop mobilon** (alapból 1). Asztali beállítás nincs.
- **Képes harmonika** és **Portfólió**: nincs **Oszlopok kezelése** szakasz.

Mindkét változat az **Oszlopok közötti térköz** beállítással zárul, ez négyoldalas térköz px, % vagy em egységben, eszközönként.

## Cím kattintáskor megjelenő szövege

Ez a szakasz csak **Portfólió** fő stílusnál látszik, egyetlen mezőt tartalmaz, a **Cím kattintáskor megjelenő szövege** értékét, alapból **Ide kattintás**. Ott, ahol nincs rámutatás (1024 képpont vagy keskenyebb kijelző), a cím első érintése ezt a szöveget mutatja hivatkozásként az elem **Gomb hivatkozása** címére. A panelen a megjegyzés is ezt mondja: „Work Only < 1024 screen”.

## A Stílus fül

A **Stílus** fül szakaszai az elrendezéstől és a **Tartalom** fül kapcsolóitól függnek. A widget a következőket regisztrálja:

- **Cím**, **Alcím** és **Leírás**: a három szöveg tipográfiája és színe.
- **Ikon** és **Lottie**: csak bekapcsolt **Kép/ikon** mellett érdekes.
- **Lista**: a **Szolgáltatáselem** listája.
- **Gomb**: csak bekapcsolt **Gomb** mellett.
- **Kiemelt kép**, **Tartalom háttere**, **Háttér a tartalom mögött** és **Külső tartalom**: maguk a dobozok.
- **On Scroll View Animation**: a webhelyszintű kiterjesztés, amely a widgetet a látótérbe érkezéskor animálja.

## Lottie-animáció az elemeken

A Lottie kis méretű, mozgó animáció, amelyet ikon helyett használhatsz a dobozokon. Ehhez az animáció JSON-címe kell.

A cím beszerzése:

1. Jelentkezz be a LottieFiles oldalán (ingyenes regisztráció), és a kiemelt, ingyenes animációk közül válassz egyet.
2. Kattints az animációra, majd a felugró ablakban a munkaterületre mentés gombra, hogy új ablakban megnyíljon.
3. A jobb oldali panelen kapcsold be az asset-link kapcsolót.
4. Másold ki az URL-t az **Asset link** mezőből.

A doboz beállítása:

1. Add az oldalhoz az **Animált szolgáltatásdobozok** widgetet.
2. A **Fő stílus** listából válassz **Információs bannert**, **Rámutatáskor megjelenő szakaszt** vagy **Szolgáltatáselemet** (például utóbbit).
3. Kapcsold be a **Kép/ikon** kapcsolót.
4. Az elemlistában három elem van alapból; nyisd meg az egyiket, és írd be a **Cím**et.
5. Az **Ikon kiválasztása** listából válaszd a **Lottie** értéket.
6. A **Lottie URL** mezőbe illeszd be a kimásolt JSON-címet, a többi mezőt töltsd ki igényed szerint.

A többi elemhez ugyanígy adhatsz Lottie-t. A megjelenést a **Stílus** fülön szabályozhatod. A **Képes harmonika** és a **Csúszó dobozok** elrendezésnél a **Kép/ikon** kapcsoló nincs, ott Lottie sem használható.

## Korlátok

- Nem minden elrendezésnek van **Stílus** választója: a **Csúszó dobozok**, a **Rámutatáskor megjelenő szakasz** és a **Dekoratív doboz** egyetlen kivitelű.
- A **Képes harmonika** és a **Portfólió** elemeinek sorbeli száma az elrendezésből adódik, ezért nincs **Oszlopok kezelése** szakaszuk.
- A **Cikkdoboz** nem jeleníti meg az **Alcím**et: a mező minden elemben ott van, de ez az elrendezés csak a címet, a leírást és a gombot rajzolja ki.
- A **Rámutatáskor megjelenő szakasz** a legközelebbi Elementor-tároló hátterét változtatja, nem a widgetét. A kép arra a tárolóra kerül, ezért az oda beállított háttér a widget megjelenése alatt felülíródik, és minden más widget a váltakozó kép fölött áll.
- A **Szolgáltatáselem** doboza nem nő meg: **Stílus 1**-ben a kártya mérete rámutatás előtt és után ugyanaz (285 × 167 képpont), a lista alatta jelenik meg, a fölötte lévő tartalom fölé. Hagyj helyet a sor alatt.
- Az **Aktív dia szélessége (0-15)** valójában nem állítható 0-ra: a címke ellenére a mező legkisebb értéke 1. 1-nél minden dia egyforma széles, és a rámutatás nem nyit ki egyet sem.

## Hibaelhárítás

- **A widget nincs az Elementor paneljén:** Pro widget, és ki lehet kapcsolva. Nézd meg a **The Plus Addons → Widgets** oldalon, keress rá az **Animated Service Boxes**-ra, kapcsold be, és töltsd újra a szerkesztőt.
- **Kitöltöttem az Alcím mezőt, de semmi sem látszik:** több elrendezés elrejti. A **Cikkdoboz** soha nem mutatja, az **Információs banner**, a **Rámutatáskor megjelenő szakasz** és a **Csúszó dobozok** csak rámutatáskor.
- **A Stílus legördülő, amiről olvastam, hiányzik:** nyolc elrendezésből csak ötnek van. A **Csúszó dobozok**, a **Rámutatáskor megjelenő szakasz** és a **Dekoratív doboz** egyetlen kivitelű, nem hiányzik semmi.
- **Az animáció a szerkesztőben működik, az oldalon nem:** az elrendezések a közzétett oldalon JavaScripttel működnek. Ürítsd az oldal gyorsítótárát, és az éles címet nézd, ne a szerkesztő előnézetét.