Divi 5 modulok: Flipbox

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.