# Divi 5 modulok: Flipbox

> A Divi 5 Visual Builder Flipbox moduljának és a Flipbox Face gyermek elemnek a beállításai: elülső és hátsó oldal, hatások, ikonok.

A Flipbox olyan kártya, amelynek két oldala van: az elülső oldal egy ráhúzásra vagy kattintásra átfordul, vagy átcsúszik, és mögötte megjelenik a hátsó oldal. Több mint tizenöt hatás közül választhatsz. Funkciók bemutatására jó: az egyik oldalon a rövid kedvcsináló, a másikon a részletek. A modul a **Divi Supreme** kategóriában van, és a **Divi Supreme Pro → Modulok beállításai** fülön kell bekapcsolnod. A beállítások feliratai a builderben angolul maradnak.

A modul szülő és gyermek elemekből áll: a szülő a **Supreme Flipbox**, a gyermek elem a **Flipbox Face**. A gyermek elemet a szülő **Content** füléről add hozzá, külön nem tehető az oldalra. Az elemek sorrendjét húzással változtathatod, duplikálhatod is őket. A gyermek elemnek nincs saját, modulspecifikus mezője, csak a szokásos Divi-csoportok (háttér, méret, térköz, szegély, árnyék, animáció). A tartalmat és a hatásokat a szülő **Content** és **Design** füle adja.

1. Add hozzá a **Supreme Flipbox** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön töltsd ki az elülső és a hátsó oldal tartalmát.
3. Válaszd ki a hatást és az indítás módját.
4. A **Design** fülön állítsd be az ikon, a szöveg és a kép megjelenését mindkét oldalon.
5. Mentsd az oldalt, és próbáld ki a weboldalon (a kattintásos indítás csak az éles oldalon működik).

## Content: az oldalak tartalma

Az elülső és a hátsó oldalnak ugyanazok a mezői vannak, külön-külön kitölthetők:

| Beállítás | Mit csinál |
|---|---|
| **Title** | Az oldal címe. |
| **Subtitle** | Az oldal alcíme. |
| **Content** | Az oldal szövegtörzse. |
| **Use Icon** | Ikont használ képként. |
| **Icon** | Az ikon kiválasztása. |
| **Image** | Az oldal képe. |
| **Button Text** | A gomb felirata. |
| **Button URL** | A gomb célcíme. |
| **Button Link Target** | A gomb célja új lapon nyíljon-e meg. |

## Content: hatás és működés

| Beállítás | Mit csinál |
|---|---|
| **Trigger Animation On** | Mi indítja a váltást (egérráhúzás vagy kattintás). A kattintásos indítás csak az éles oldalon hat. |
| **Click On** | Kattintásos indításnál mire kell kattintani. |
| **Flipbox Type** | A hatás fajtája (forgatás, csúszás, nagyítás-kicsinyítés és más). A fajtától függően a lenti beállítások közül csak a hozzá tartozók látszanak. |
| **Flip Direction** | A forgatás iránya. |
| **3D Effect** | Háromdimenziós forgatás. |
| **Slide Effect** | A csúszás iránya csúszó fajtánál. |
| **Zoom Out Effect** | A kicsinyítés módja kicsinyítő fajtánál. |
| **Animation Speed** | Az animáció sebessége. |
| **Container height** | **Automatic**: a doboz magassága a magasabb oldalhoz igazodik, és a **Design → Sizing** magasságot figyelmen kívül hagyja. **Fixed**: a **Design → Sizing** magasságot használja. |

## Design: oldalanként

Az elülső és a hátsó oldalnak külön ugyanezek a beállításai vannak:

| Beállítás | Mit csinál |
|---|---|
| **Text Vertical Alignment** | A cím, az alcím, a szöveg és a gomb függőleges igazítása az oldalon belül. |
| **Image/Icon Placement** | A kép vagy az ikon helye a szöveghez képest. |
| **Icon Color** | Az ikon színe. |
| **Circle Icon** | Az ikon körbe kerül. |
| **Circle Color** | A kör színe. |
| **Show Circle Border** | Szegélyt rajzol a kör köré. |
| **Circle Border Color** | A kör szegélyének színe. |
| **Use Icon Font Size** | Egyéni ikonméretet használ. |
| **Icon Font Size** | Az ikon mérete. |
| **Image Width** | A kép legnagyobb szélessége. |

Tipp: kezdj 3 és 6 elem között, a közös megjelenést a szülőn állítsd be, a gyermek elemen csak a kivételeket.