# Animált doboz, szolgáltatások és csapattagok

> Az Animált doboz, a Szolgáltatások és a Csapattag widget beállításai: előoldal, hátoldal, fejléc és takarás.

Három widget, amellyel szolgáltatásokat és csapattagokat mutathatsz be. A **Szolgáltatások** és a **Csapattag** widget egyetlen elemet ad. Ha több kell belőlük, készíts egy oszlopos szakaszt, alakíts ki egy elemet, majd másold a többi oszlopba, így a formázást nem kell újra elvégezned.

## Animált doboz

Az **Animált doboz** egy megfordítható doboz: az egyik oldalán a szolgáltatás neve, a másikon a részletek látszanak.

1. Húzd az **Animált doboz** widgetet a kívánt szakaszba.
2. Az **Előoldal tartalma** részben add meg a doboz elülső oldalának tartalmát.
3. A **Hátoldal tartalma** részben add meg a hátoldalt.
4. A **Beállítások** részben válaszd ki a magasságot, a fordítás módját és az animációt.
5. A **Stílus** fülön formázd az egészet és az egyes részeket, majd kattints a **Frissítés** gombra.

### Előoldal tartalma

![Az Animált doboz előoldalának beállításai](./kepek/tartalom-widgetek-animalt-doboz-eloldal.webp)

*Az Animált doboz előoldalának beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Tartalomtípus** | **Alapértelmezett**: a mezők alapján épül fel a doboz. a másik lehetőség a sablon: egy elmentett sablon jelenik meg (a **Sablonok → Mentett sablonok** menüben készíthetsz ilyet). |
| **Ikon** | Az ikonkönyvtárból, vagy feltöltött SVG-fájlból. |
| **Cím**, **Alcím**, **Leírás** | A doboz szövegei. Ha üresen hagyod valamelyiket, az nem jelenik meg. A **Dinamikus címkék** gombbal egyéni meződből is betöltheted. |
| **Kapcsolóikon** | A kapcsolóként használt ikon. |

### Hátoldal tartalma

A mezők ugyanazok, mint az előoldalon. Itt van egy kattintható gomb is, amelynek a szövegét (**Gomb szövege**) és a hivatkozását (**Gomb hivatkozása**) itt adod meg.

![Az Animált doboz hátoldalának beállításai](./kepek/tartalom-widgetek-animalt-doboz-hatoldal.webp)

*Az Animált doboz hátoldalának beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

### Beállítások

![Az Animált doboz Beállítások része](./kepek/tartalom-widgetek-animalt-doboz-beallitasok.webp)

*Az Animált doboz Beállítások része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Magasság** | A doboz magassága csúszkával vagy beírt értékkel. Mértékegység: **px** (képpont), **rem** (a HTML-elem betűméretéhez kötött érték) vagy **vh** (a böngészőablak méretéhez kötött érték). |
| **Kapcsoló típusa** | Mivel fordítja meg a látogató a dobozt (lásd lent). |
| **Animációs hatás** | A fordulás módja. Csak a rámutatásos, a kattintásos és a **Váltógomb** típusnál jelenik meg. |
| **Cím HTML-címkéje** | A cím mérete (alapérték: **H3**). |
| **Alcím HTML-címkéje** | Az alcím mérete (alapérték: **H4**). |

A **Kapcsoló típusa** lehetőségei:

- Rámutatás: a doboz megfordul, ha az egérrel fölé mész.
- Kattintás: a doboz kattintásra fordul meg.
- **Váltógomb**: az előoldalon megjelenik egy gomb, és arra kattintva fordul meg a doboz.
- Kaparás: a hátoldal úgy tárul fel, hogy a látogató lenyomott bal egérgombbal végighúzza az egeret az előoldalon, mintha lekaparná.
- Papírhajtogatás, lehúzás, kicsúsztatás: a látogató lenyomott bal egérgombbal húzza az előoldalt egy irányba. Papírhajtogatásnál az előoldal összehajlik, lehúzásnál lehámlik, kicsúsztatásnál oldalra csúszik.

## Szolgáltatások

A **Szolgáltatások** widget egy szolgáltatásblokkot jelenít meg, ikonnal, címmel, leírással és gombbal.

1. Húzd a **Szolgáltatások** widgetet a kívánt szakaszba.
2. A **Tartalom** részben töltsd ki az elem mezőit.
3. A **Beállítások** részben állítsd be, mi jelenjen meg a fejlécben.
4. A **Stílus** fülön a háttér, a lekerekítés, a cím és a leírás színe állítható.
5. Kattints a **Frissítés** gombra, és nézd meg az oldalt.

![A Szolgáltatások widget Tartalom része](./kepek/tartalom-widgetek-szolgaltatasok-tartalom.webp)

*A Szolgáltatások widget Tartalom része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Ikon** | Az ikonkönyvtárból, vagy feltöltött SVG-fájlból. |
| **Cím** | A szolgáltatás neve. |
| **Cím HTML-címkéje** | A cím címkéje (alapérték: **H3**). |
| **Ikon használata a címnél?** | Az ikon a cím mellett is megjelenjen-e. |
| **Leírás** | A szolgáltatás leírása. |
| **Gomb szövege** | A gomb felirata. |
| **Gomb hivatkozása** | Az oldal, ahová a gomb vezet. |
| **Ikon hozzáadása a gombhoz** | Ikon a gombon. |

### Beállítások

![A Szolgáltatások widget Beállítások része](./kepek/tartalom-widgetek-szolgaltatasok-beallitasok.webp)

*A Szolgáltatások widget Beállítások része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A **Fejléc pozíciója** legördülőben (alapérték: **Felül**) állíthatod be, hol legyen a fejléc. Az alatta lévő kapcsolókkal eldöntheted, mi legyen a fejlécben:

- **Ikon megjelenítése a fejlécben**,
- **Cím megjelenítése a fejlécben**,
- **Leírás megjelenítése a fejlécben**,
- **Gomb megjelenítése a fejlécben**.

Az utolsó kapcsoló az **Átfedés megjelenítése rámutatáskor**. Bekapcsolva a fejlécbe tett elemek csak akkor tűnnek elő, amikor a látogató az elem fölé viszi az egeret, ez kis animációt ad a blokknak.

Ha egy részt a fejlécbe teszel, az eltűnik az elem alapelrendezéséből.

## Csapattag

A **Csapattag** widget egy csapattagot mutat be fényképpel, névvel, beosztással, bemutatkozással, közösségi hivatkozásokkal és egy gombbal.

1. Húzd a **Csapattag** widgetet a szakaszba. Ez egy oszlopot ad, ezért érdemes többoszlopos szakaszt használnod, és az első oszlop kialakítása után a többibe másolnod.
2. A **Tartalom** részben töltsd ki az adatokat.
3. A **Beállítások** részben állítsd be az átfedést.
4. A **Stílus** fülön alakítsd ki a megjelenést, majd kattints a **Közzététel** gombra.

![A Csapattag widget Tartalom része](./kepek/tartalom-widgetek-csapattag-tartalom.webp)

*A Csapattag widget Tartalom része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| **Tag képe** | A csapattag fényképe. |
| **Keresztnév**, **Vezetéknév** | A név két része. |
| **Név HTML-címkéje** | A név címkéje (alapérték: **H3**). |
| **Beosztás** | A tag beosztása. |
| **Leírás** | Személyes bemutatkozás. |

A leírás alatt közösségi hivatkozásokat (például Facebook, X, Instagram) vehetsz fel. Egy hivatkozásnál a következők adhatók meg: **Ikon**, **Címke**, **Címke látható**, **Link**, **Link megnyitása új ablakban** és **Nofollow hozzáadása**. Az **Elem hozzáadása** gombbal annyi hivatkozást veszel fel, amennyit akarsz. A tartalom végén egy gombot is megadhatsz, amely a tag személyes oldalára vezet (**Gomb hivatkozása** és **Gomb szövege**).

![Egy közösségi hivatkozás beállításai a Csapattag widgetben](./kepek/tartalom-widgetek-csapattag-tartalom-tetel.webp)

*Egy közösségi hivatkozás beállításai a Csapattag widgetben* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

### Beállítások

![A Csapattag widget Beállítások része](./kepek/tartalom-widgetek-csapattag-beallitasok.webp)

*A Csapattag widget Beállítások része* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

Az alábbi kapcsolók (alapérték: mind **Nem**) dinamikussá teszik a blokkot:

| Beállítás | Mit csinál |
| --- | --- |
| **Átfedés megjelenítése rámutatáskor** | A borítóra tett információ csak akkor látszik, ha a látogató az oszlop fölé viszi az egeret. |
| **Tippbuborékra emlékeztető átfedés** | A borítóra tett információ tippbuborékként jelenik meg. |
| **Név megjelenítése a borítón** | A nevet a borítóra teszi. |
| **Beosztás megjelenítése a borítón** | A beosztást a borítóra teszi. |
| **Leírás megjelenítése a borítón** | A leírást a borítóra teszi. |
| **Közösségi linkek megjelenítése a borítón** | A közösségi hivatkozásokat a borítóra teszi. |
| **Műveletgomb megjelenítése a borítón** | A gombot a borítóra teszi. |