# Modulok: képek, galériák és carouselek

> A képes, galériás, carouseles, kártyás és animált modulok beállításai.

Ebben a fejezetben a képekkel, galériákkal, carouselekkel, kártyákkal és animációkkal dolgozó modulok szerepelnek. A modulok a Divi Builderben, a modulválasztóban jelennek meg, ha a **Modulok beállításai** fülön be vannak kapcsolva. A beállítások a modul ablakának **Content**, **Design** és **Advanced** füleiben vannak.

Minden modul **Advanced** fülén egyedi CSS-azonosítót és osztályt adhatsz meg, saját CSS-t írhatsz, és beállíthatod, melyik eszközön látszódjon a modul. Ezt lent nem ismételjük meg minden modulnál.

## Divi előtte-utána képes diavetítés

Két kép összehasonlítására való: a látogató egy fogantyút húz a két változat fölött. A két képnek ugyanakkorának kell lennie, különben rosszul fog kinézni.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Before/After Image (kép) | Az első kép az „előtte”, a második az „utána” változat. |
| **Before/After Image Alternative text** | A kép HTML ALT szövege, rövid leírás. |
| **Before/After Image Title Text** | A kép HTML Title szövege. |
| **Before Label text** / **After Label text** | Az „előtte” és az „utána” felirat saját szövege. |
| **Show Labels on Hover** | Bekapcsolva a feliratok csak rámutatáskor látszanak, kikapcsolva mindig. |
| **Default Offset Percentage** | A fogantyú kezdőhelye betöltéskor. A 0 a bal szél, a 0.5 a közép. |
| **Orientation** | A fogantyú iránya: Horizontal (vízszintes) vagy Vertical (függőleges). |
| **No Overlay** | Kikapcsolja a rámutatáskor megjelenő színes réteget. |
| **Move Slider on Hover** | A fogantyú követi az egér mozgását. |
| **Move Slider with Handle** | A látogató a kép bármely pontján húzhatja (swipe) a fogantyút. |
| **Click to Move slider** | Kattintásra (vagy koppintásra) a fogantyú a megérintett helyre ugrik. |

**Design**

- **Before and After Label:** a feliratok háttérszíne, betűtípusa, mérete, színe és a többi szövegbeállítás.
- **Overlay:** a rámutatáskor megjelenő réteg színe.
- **Handle Slider:** **Handle Border Color** (a fogantyú keretének színe), **Handle Border Radius** (a középső ikon lekerekítése), **Handle Background Color** (az ikon háttere), **Handle Arrow Color** (az ikon színe).
- A modul keretet, lekerekítést és árnyékot is kaphat, mint a többi Divi modul.

## Divi blob alakú kép

Képet tesz szerves, „blob” alakba, opcionálisan szöveges réteggel és színátmenettel.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Image | A megjelenítendő kép. |
| **Blob Shapes** | 13 blob alak közül választhatsz. |
| **Title** | Az átfedő réteg címe. |
| **Description** | Az átfedő réteg leírása. |
| **Show Content on Hover** | Az átfedő tartalom csak rámutatáskor jelenik meg. |

**Design**

- **Blob Image Settings:** a kép háttérként van elhelyezve. A **Size** értéke Cover vagy Initial, a **Position** a kép elhelyezése, a **Blob Image Height** a magasság. Keret, lekerekítés és árnyék is adható.
- **Overlay:** a **Use Overlay** bekapcsolása után választhatsz átfedő színt. A **Use Gradient Overlay** színátmenetet ad, és megjelennek a színátmenet szögének és eltolásának beállításai.
- **Overlay Text:** az átfedő cím és leírás stílusa, valamint a tartalom körüli térköz (Spacing).

## Divi blokkos képfelfedés

A kép előtt először egy színes blokk rajzolódik ki, majd összehúzódik, és felfedi a képet. Négy irány közül választhatsz.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Image | A felfedendő kép. |
| **Open in Lightbox** | A kép kattintásra Lightboxban nyílik. Ha be van kapcsolva, az URL-beállítások figyelmen kívül maradnak. |
| **Open as Video Popup** | Az Image URL mezőbe videó URL-jét kell írni (YouTube, Vimeo, Dailymotion), kattintásra videós felugró ablak nyílik. |
| **Block Reveal Animation style** | Az irány: Left to Right, Right to Left, Top to Bottom vagy Bottom to Top. |
| **Block Reveal Color** | Az először megjelenő blokk színe. |
| **Delay** | Az animáció késleltetése. |
| **Animate in Viewport** | Az animáció csak akkor indul, amikor a modul a látható területre ér. |

**Design**

- **Overlay:** az **Image Overlay** kapcsolóval színes réteget, ikont vagy mindkettőt adhatsz a képhez. Beállítható az **Overlay Color**, a **Use Icon** (ikon a Divi ikontárból, színezhető), valamint az átfedés lekerekítése, kerete és árnyéka. A lekerekítésnél a lánc ikonnal egyszerre vagy sarkonként állíthatod az értéket.
- A képnek is lehet lekerekítése, kerete és árnyéka.

## Divi kártya

Egy kártya, amelyben szöveg, link, jelvény és kép együtt jelenik meg. A kép rámutatáskor nagyítható.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Title**, **Subtitle**, **Content** | A kártya címe, alcíme és leírása. Ha törlöd a szöveget, az elem nem jelenik meg. |
| Image | A kártya képe. |
| **Use Image as background** | A kép háttérként szerepel, így a pozíciója és magassága állítható, és hover animációt kaphat. |
| **Image Height** | A kép magassága csúszkával. |
| **Background Image animation** | Négy animáció közül választhatsz a képhez. |
| **Animation Speed (in ms)** | A hover animáció sebessége ezredmásodpercben. |
| **Badge Text** | A jelvény szövege. A jelvényhez linket a link panelen adhatsz. |
| **Use Icon** | Ikont ad a kártyához, az ikont a listából választod. |
| Button text, Button URL | A gomb szövege és célcíme. |

**Design**

- **Layout & Alignment:** a **Layout** Stacked (kép felül, tartalom alul) vagy Inline (kép és tartalom egy sorban). Inline esetén megjelenik a kép **Width** értéke, az **Order Alignment** (a kép balra vagy jobbra a tartalomtól) és a **Horizontal Content Alignment** (Top, Center, Bottom). A **Use Equal Height** egyforma magasságúra állítja a kártyákat. Az **Image Height** a képtároló magasságát adja, és csak akkor működik, ha a **Use Image as background** ki van kapcsolva. Az **Image Vertical Alignment**: Top, Bottom vagy Center.
- **Image:** **Image Width**, **Image Alignment** (Left, Right, Center), **Stretch Image** (a kép kitölti a helyét, maximális szélességgel, megtartva az arányt), továbbá az **Image Overlay** (**Overlay Color**, **Use Icon**), valamint a kép lekerekítése, kerete és árnyéka.
- **Badge:** **Position** (a jelvény helye a képen), **Use Custom Position** (saját pozíció), **Background Color**, **Padding**, a jelvény szövegének stílusa, lekerekítés, keret, árnyék.
- A cím, az alcím és a törzsszöveg betűtípusa, mérete, színe, vastagsága és árnyéka a saját design paneljükön állítható.
- **Button:** a **Use Custom Styles for button** bekapcsolása után a gomb úgy formázható, mint egy alap Divi gomb.

**Egyforma magasságú kártyák.** Kapcsold be a sor (Row) beállításai között a **Design > Sizing > Equalize Column Heights** opciót, és minden kártyán a **Use Equal Height** kapcsolót.

**Gomb a kártya aljára.** Egyforma magasságú kártyáknál a gombot lefelé igazíthatod. Ehhez a sor **Equalize Column Heights** opciója legyen bekapcsolva, és add hozzá ezt a CSS-t (például a Divi témabeállítások egyedi CSS mezőjébe vagy az oldal egyedi CSS-ébe):

```css
.dsm_card_wrapper .et_pb_button_wrapper { 
margin-top: auto; 
}
```

## Divi kártya-carousel

Kártyák (szöveg, link, jelvény, kép) carouselben. Van képes és videós Lightbox, és sok carousel-beállítás. A **+ Add new Item** gombbal adsz hozzá elemet, minden elemnek saját Content, Design és Advanced füle van. Az elemeket a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

**Content: carousel-beállítások**

| Beállítás | Mit csinál |
| --- | --- |
| **Carousel Effect** | Slide, Coverflow, Flip vagy Cube. |
| Coverflow beállítások | Coverflow esetén: **Show Shadow** (árnyék a következő képeken), **Coverflow rotate** (a következő képek dőlése), **Coverflow Depth** (nagyobb értéknél több elem látszik). |
| **Carousel Direction** | Left to Right vagy Right to Left. |
| **Centered Mode** | Az aktív dia középen van, nem mindig a bal szélen. |
| **Slides to Show** | Egyszerre látható diák száma, reszponzívan is állítható. |
| **Slides to Scroll** | Egy nyílkattintással hány diát lép. |
| **Slides Speed** | A váltás sebessége. |
| **Autoplay**, **Autoplay Change interval** | Automatikus léptetés, és a lépések közti idő. |
| **Pause on Hover** | Rámutatáskor megáll az automatikus léptetés. |
| **Spacing** | Térköz az elemek között. |
| **Infinite Looping** | Körbeforgó carousel. Kikapcsolva a végén nem lehet tovább lépni, csak vissza. |
| **Equalize Card Heights** | Az elemek 100% magasak, így egyformák. |
| **Show Arrow** | A nyilak megjelenítése. |
| **Show Pagination** | A lapozópontok megjelenítése. |
| **Disable Touch/Dragging** | Kikapcsolja az érintéssel vagy húzással léptetést. |
| **Use Grab Cursor** | Az egérkurzor „megfogó” kéz lesz. |

**Content: egy elem**

| Beállítás | Mit csinál |
| --- | --- |
| **Title**, **Subtitle**, **Content** | Cím, alcím, leírás (üresen az elem eltűnik). |
| Image | Az elem képe. |
| **Use Image as background**, **Image Height**, **Background Image animation**, **Animation Speed (in ms)** | Mint a Divi kártyánál. |
| **Open as Image Lightbox** | A kép kattintásra Lightboxban nyílik, külön kiválasztható képpel. |
| **Open as VideoLightbox** | Kattintásra videó nyílik felugró ablakban, a videó URL-jét kell megadni. |
| **Badge Text** | A jelvény szövege, linkje a link panelen állítható. |
| Button text, Button URL | A gomb szövege és célcíme. |
| Gomb: **Open as Image Lightbox** | A gombra kattintva kép nyílik Lightboxban. |
| Gomb: **Open as Video Lightbox** | A gombra kattintva videó nyílik. A videó linkjét a Button URL mezőbe kell írni. |

**Design: a modulon**

- **Layout & Alignment:** **Layout** (Stacked vagy Inline), Inline esetén **Width**, **Order Alignment** és **Horizontal Content Alignment**.
- **Image:** **Image Width**, **Stretch Image**, **Image Alignment** (Left, Right, Center), lekerekítés, keret, árnyék.
- **Badge:** **Position**, **Background Color**, **Padding**, a szöveg stílusa, lekerekítés, keret, árnyék.
- **Arrow Element:** **Arrow Position** és **Mobile Arrow Position** (a nyilak a carouselen belül vagy kívül), **Use Arrow Custom position** (saját hely mindkét nyílnak), **Use Custom Previous Arrow Icon** és **Use Custom Next Arrow Icon** (saját ikon a Divi ikontárból), **Arrow Size**, **Arrow Color**, **Arrow Background Color**, **Arrow Rounded Corners**, **Arrow Border and Box Shadow**.
- **Pagination Element:** **Pagination Horizontal Placement**, **Pagination Active Color**, **Pagination In-Active Color**.
- A cím, alcím és törzsszöveg stílusa a design paneleken állítható.
- **Button:** **Use Custom Styles for the button** után alap Divi gombként formázható. Az **Align Button Vertically** Top, Center vagy Bottom igazítást ad, és csak akkor látszik, ha a carousel-beállításoknál az egyforma magasság be van kapcsolva.
- **Border:** a kártya lekerekítése (Card Corner Radius) és kerete (Card Border). **Box Shadow:** egy kártya árnyéka.

**Design: egy elemen**

- **Image:** **Image Overlay** (**Overlay Color**, **Use Icon**), lekerekítés, keret, árnyék.
- **Badge:** **Position**, **Use Custom Position**, **Background Color**, **Padding**, szövegstílus, lekerekítés, keret, árnyék.
- A szövegek és a gomb (**Use Custom Styles for the button**) formázása, mint fent.

## Divi blog-carousel

A blogbejegyzéseket carouselben mutatja.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Post Count** | Hány bejegyzés jelenjen meg. |
| **Included Categories** | Melyik kategóriák bejegyzései látszanak, vagy „All Category”. |
| **Date Format** | A dátum formátuma. |
| **Show Featured Image**, **Show Title**, **Show Excerpt**, **Show Date**, **Show Category**, **Author** | Az egyes elemek megjelenítése. |
| **Excerpt Text** | A kivonat hossza számmal. |
| **Meta Separator** | Saját elválasztójel a meta adatok között. |
| **Readmore Button** | Tovább gomb minden kártyán. Alatta: **Readmore Text** (a gomb szövege) és **Read More Link Target** (ugyanabban a lapon vagy új ablakban nyíljon). |
| **Show Bottom Meta Elements** | Alul a szerző képe és neve, valamint a közzététel dátuma. Külön kikapcsolható: **Bottom Date**, **Bottom Author**. |
| **Carousel Effect** | Slide, Coverflow, Flip vagy Cube. |
| **Carousel Direction** | Left to Right vagy Right to Left. |
| **Columns** | Hány oszlop látszik. |
| **Use Multiple Row** | Több sor bejegyzés. A „Row Per Slide” mezőben adod meg a sorok számát. |
| **Centered Mode** | Az aktív dia középen van. |
| **Spacing** | Térköz az elemek között. |
| **Transition Duration** | A léptetés időtartama. |
| **Infinite Looping** | Körbeforgás, kikapcsolva a végén nem lehet tovább lépni. |
| **Autoplay** | Automatikus léptetés. Alatta: **Autoplay Speed** (lépések közti idő) és **Pause on Hover**. |
| **Pagination** | A lapozópontok ki- vagy bekapcsolása. |
| **Navigation** | A nyilak ki- vagy bekapcsolása. |
| **Use Equal Height** | Egyforma magasságú kártyák. |

**Design**

- **Post Item:** **Post Item Padding**, **Background Color**, lekerekítés, keret, árnyék a kártyákra.
- **Post Thumbnail:** **Thumbnail Height**, lekerekítés, keret, árnyék, szűrők.
- **Post Entry Title:** a cím stílusa, a címsor szintjével (Heading Level) együtt. **Post Entry Summary:** a kivonat stílusa. **Post Entry Meta:** a dátum, kategória és szerző stílusa külön-külön, plusz **Alignment** (Left, Right, Center).
- **Readmore:** a **Use Custom Styles for Readmore** után alap Divi gombként formázható. Az **Align Button Vertically** (Top, Center, Bottom) csak bekapcsolt egyforma magasságnál látszik.
- **Navigation:** **Navi Vertical Position**, **Left Navigation Position**, **Right Navigation Position**, **Navi Arrow Icon Size**, **Custom Prev Arrow Icon**, **Custom Next Arrow Icon** (ikon a Divi ikontárból), **Arrow Color**, **Arrow Background Color**, lekerekítés, keret, árnyék.
- **Pagination:** **Pagination Position** (függőleges hely), **Pagination Color**, **Pagination Active Color**, **Pagination Button Style**: Default, Dynamic vagy Progress Bar.
- **Bottom Meta Items:** **Image Width** (a szerző képének szélessége), a név és a dátum stílusa, a szerzőkép lekerekítése, kerete, árnyéka.
- **Overlay:** a miniatűrön rámutatáskor megjelenő réteg, ikonnal a Divi ikontárból. Beállítható az **Overlay Icon Color**, az **Overlay Icon Size** és az **Overlay Background Color**.

## Divi bejegyzés-carousel

Mint a blog-carousel, de tetszőleges bejegyzéstípusra is használható. A blogbejegyzésekhez a blog-carousel való.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Post Type** | Melyik bejegyzéstípus jelenjen meg. |
| **Post Count** | Hány bejegyzés látszik. |
| **Date Format** | A dátum formátuma. |
| **Show Featured Image**, **Show Title**, **Show Excerpt**, **Show Date**, **Author** | Az egyes elemek megjelenítése. |
| **Excerpt Text** | A kivonat hossza számmal. |
| **Meta Separator** | Saját elválasztójel. |
| **Readmore Button**, **Readmore Text** | Tovább gomb és a szövege. |
| **Show Bottom Meta Elements** | Alul a szerző képe, neve és a dátum. Külön kikapcsolható: **Bottom Date**, **Bottom Author**. |
| **Carousel Effect** | Slide, Coverflow, Flip vagy Cube. |
| **Columns** | Hány oszlop látszik. |
| **Use Multiple Row** | Több sor bejegyzés („Row Per Slide”). |
| **Centered Mode** | Az aktív dia középen van. |
| **Spacing** | Térköz az elemek között. |
| **Transition Duration** | A léptetés időtartama. |
| **Infinite Looping** | Körbeforgás. |
| **Autoplay** | Automatikus léptetés. Alatta: **Autoplay Speed**, **Pause on Hover**. |
| **Pagination**, **Navigation** | Lapozópontok és nyilak ki- vagy bekapcsolása. |
| **Use Equal Height** | Egyforma magasságú kártyák. |

**Design**

- **Post Item:** **Post Item Padding**, **Background Color**, lekerekítés, keret, árnyék.
- **Post Thumbnail:** **Thumbnail Height**, lekerekítés, keret, árnyék, szűrők.
- **Post Entry Title**, **Post Entry Summary**, **Post Entry Meta** (a meta **Alignment** értéke Left, Right vagy Center): a szövegek stílusa.
- **Readmore:** a **Use Custom Styles for Readmore** után alap Divi gombként formázható.
- **Navigation:** **Navi Vertical Position**, **Left Navigation Position**, **Right Navigation Position**, **Navi Arrow Icon Size**, **Custom Prev Arrow Icon**, **Custom Next Arrow Icon**, **Arrow Color**, **Arrow Background Color**, lekerekítés, keret, árnyék.
- **Pagination:** **Pagination Position**, **Pagination Color**, **Pagination Active Color**, **Pagination Button Style**: Default, Dynamic vagy Progress Bar.
- **Bottom Meta Items:** **Image Width**, a név és a dátum stílusa, a szerzőkép lekerekítése, kerete, árnyéka.
- **Overlay:** a miniatűrön rámutatáskor megjelenő réteg ikonnal, **Overlay Icon Color**, **Overlay Icon Size**, **Overlay Background Color**.

## Divi képcarousel

Képek sorozata carouselben: portfólióhoz, ügyféllogókhoz és hasonlóhoz.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **+Add Gallery Images** | Több kép kiválasztása a médiatárból. |
| **Order by** | Default (a kiválasztás sorrendje) vagy Random (véletlen sorrend). |
| **Image Size** | Az összes kép mérete. |
| **Carousel Effect** | Slide, Coverflow, Flip vagy Cube. |
| Coverflow beállítások | **Show Shadow**, **Coverflow rotate**, **Coverflow Depth**. |
| **Carousel Direction** | Left to Right vagy Right to Left. |
| **Centered Mode** | A következő kép félig látszik, jelezve, hogy van még tartalom. |
| **Slides to Show** | Egy diában látható képek száma. |
| **Slides to Scroll** | Egy nyílkattintással hány diát lép. |
| **Slider Speed** | A léptetés sebessége. |
| **Use Multiple Row** | Több sor kép („Row Per Slide”). |
| **Autoplay**, **Autoplay Change interval** | Automatikus léptetés és a lépések közti idő. |
| **Spacing** | Térköz a képek között. |
| **Infinite Looping** | Körbeforgás. |
| **Show Arrow**, **Show Pagination** | Nyilak és lapozópontok. |
| **Disable Touch/Dragging** | Kikapcsolja az érintéssel vagy húzással léptetést. |
| **Use Grab Cursor** | Megfogó kéz kurzor. |

**Content: Lightbox**

| Beállítás | Mit csinál |
| --- | --- |
| **Open Image in Lightbox** | Kattintásra a kép Lightboxban nyílik. Bekapcsolva további beállítások jelennek meg. |
| **Image Size** | A kép mérete a Lightboxban. |
| **Lightbox in Gallery Mode** | A Lightboxban nyilakkal lehet váltani a carousel többi képére. |
| **Display Caption** | A kép felirata is látszik. A feliratot a médiatárban állíthatod be. |

**Design**

- **Layout:** **Horizontal Alignment**, hasznos, ha kis és nagy képek vegyesen vannak.
- **Element:** **Arrow Position** és **Mobile Arrow Position** (belül vagy kívül), **Arrow Size**, **Arrow Color**, **Arrow Background Color**, **Pagination Placement** (függőleges hely), **Pagination Active Color**, **Pagination In-Active Color**.
- **Image:** lekerekítés, keret, árnyék a képekre.

**Link a képekhez.** Nyisd meg a képet a médiatárban, és add meg az egyedi URL-t. Kattintáskor a látogató oda jut. Ez csak a Supreme modulokon belül működik. Ha letölthető fájlt szeretnél, add meg a fájl URL-jét, és jelöld be a „Download as File” opciót.

## Divi képes harmonika

Képek hover vagy kattintás hatására táguló harmonikában. Elemenként lehet ikon, kép, cím, leírás és gomb.

A **+ Add new Item** gombbal adsz hozzá elemet, minden elemnek saját Content, Design és Advanced füle van. Az elemeket a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

**Content: a modulon**

| Beállítás | Mit csinál |
| --- | --- |
| **Accordion Type** | Hover vagy Click: rámutatásra vagy kattintásra nyílik. |
| **Accordion Content Animation** | Öt animáció közül választhatsz a tartalom megjelenéséhez. |
| **Use Sequenced Animation** | Az elemek (cím, leírás, gomb, ikon) külön-külön animálódnak. |
| **Accordion Direction** | Horizontal vagy Vertical. |
| **Accordion Height** | A harmonika magassága. |

**Content: egy elem**

| Beállítás | Mit csinál |
| --- | --- |
| **Make Item Expanded** | Az elem alapból kinyitva jelenik meg. |
| Image | Az elem fő képe. |
| **Use Icon** | Bekapcsolva ikon, kikapcsolva kép szerepel az ikon helyén. |
| **Title**, **Description** | Az elem címe és leírása. |
| **Show Button** | Gomb az elemben, bekapcsolás után kéri a szöveget és az URL-t. |
| **Horizontal Align** | A tartalom vízszintes igazítása: Left, Right, Center. |
| **Vertical Align** | A tartalom függőleges igazítása: Top, Bottom, Center. |

**Design: a modulon**

- **Overlay:** az **Overlay Color** bármilyen RGBA értékre állítható, és a képre kerül, hogy a szöveg jobban olvasható legyen.
- **Icon:** **Icon Color**, **Use Icon Font Size** (a méret fogantyúval állítható).
- **Icon Image:** ha az ikon helyett képet használsz, ennek kerete, lekerekítése és árnyéka itt állítható.
- **Title:** **Title Heading Level** (H1-től H6-ig) és a szöveg további stílusa.
- **Description:** a leírás stílusa, mint a Szöveg modul bekezdéséé.
- **Button:** a **Use Custom Styles for Button** után alap Divi gombként formázható.

**Design: egy elemen**

- **Overlay:** **Overlay Color**, a Hover opcióval rámutatáskor másik szín is adható. Az elemeknél ez a legjobb használat.
- **Title**, **Description**, **Button:** mint a modulon.
- **Sizing:** **Content Width**, a tartalom szélessége.

## Divi képi hotspotok

Képre tehetsz pontokat (hotspotokat), amelyek rámutatásra vagy kattintásra felugró magyarázatot (tooltip) mutatnak.

**Content**

Először az **Image** mezőben add meg a képet, utána a **+ Add new Item** gombbal adj hozzá hotspotokat. Minden hotspotnak saját Content, Design és Advanced füle van. A hotspotokat a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

**Content: egy hotspot**

| Beállítás | Mit csinál |
| --- | --- |
| **Hotspot Type** | A hotspot gombja: Icon (ikon a Divi ikontárból), Image (kép a médiatárból) vagy Text (szöveg, megjelenik egy szövegmező). |
| **Use Tooltip** | Be- vagy kikapcsolja a felugró magyarázatot. |
| **Content** | A tooltip szövege. |
| Background | A hotspot háttere: szín, színátmenet, kép vagy videó. |

**Design: a modulon (minden hotspotra érvényes)**

Ha mindegyik hotspot egyformán nézzen ki, itt stílusozd őket. Ha eltérőek legyenek, az elemek saját Design fülén.

| Beállítás | Mit csinál |
| --- | --- |
| Hotspot text | Szöveges hotspotnál a szöveg színe, mérete, vastagsága. |
| **Trigger Event** | Mouse Enter (rámutatásra), Mouse Enter & Click (rámutatásra, és kattintás után is marad), Mouse Enter & Focus (rámutatásra, kattintásra eltűnik), Click (kattintásra), Click & Focus (kattintásra, újabb kattintásra eltűnik). |
| **Padding**, Border Radius, Border | A hotspot belső térköze, lekerekítése és kerete. |
| **Icon Color**, **Icon font Size** | A hotspot ikonja. |
| Tooltip: **Background Color**, **Tooltip Padding**, **Tooltip Max Width** | A tooltip háttere, belső térköze és legnagyobb szélessége. |
| **Tooltip Delay Show**, **Tooltip Delay Hide** | Késleltetés a megjelenéshez és az eltűnéshez, csúszkával. |
| **Tooltip Heading Text**, **Tooltip Body Text** | A tooltip címsorának és törzsszövegének stílusa. |
| Image: **Alignment**, **Image Box Shadow** | A kép igazítása és árnyéka. |
| Sizing: **Force Fullwidth** | Teljes szélességre húzza a képet, utána a Width mezővel egyedi szélesség adható. |

**Design: egy hotspoton**

| Beállítás | Mit csinál |
| --- | --- |
| Hotspot Text | Szöveges hotspot szövegének stílusa. |
| **Left Position**, **TOP Position** | A hotspot helye a képen csúszkákkal. |
| **Padding**, Border Radius, border | A hotspot térköze, lekerekítése, kerete. |
| **Hotspot Image width**, **Hotspot Image Rounded Corners**, **Hotspot Image Border**, **Hotspot Image Box Shadow** | Képes hotspot stílusa. |
| **Icon Color**, **Icon font Size** | Ikonos hotspot stílusa. |
| **Tooltip Animation** | Öt animáció közül választhatsz. |
| **Background color**, **Padding**, **Tooltip Max Width** | A tooltip háttere, térköze, legnagyobb szélessége. |
| **Placement** | A tooltip helye a hotspothoz képest: Top, Bottom, Left vagy Right. |
| **Tooltip Heading Text**, **Tooltip Body Text** | A tooltip szövegeinek stílusa. |

## Divi kép felfedése rámutatáskor

Rámutatáskor a felső kép 5 darabra szeletelődik, és nagyítási animációval újra felfedi a képet. Négy animáció közül választhatsz.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Image | A kép. Mindig az oszlop teljes szélességét kitölti, de nem lesz nagyobb az eredeti feltöltött méreténél. A magasságot az eredeti kép aránya adja. |
| **Admin Label** | A modul neve a builderben, könnyebb azonosításhoz. |

**Design**

- **Sizing > Height:** a kép magassága, alapértéke 260px.
- **Animation > Image Reveal Animation:** Vertical Slide Down, Vertical Slide Up, Horizontal Slide Right vagy Horizontal Slide Left.

## Divi kép szövegének felfedése

Rámutatáskor egy réteg balról becsúszik, eltakarja a képet, és megmutat egy szöveget. Az egér elhagyásakor a réteg jobbra kicsúszik. A szövegnek 30-nál több animációja van.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Reveal Text** | A felfedett szöveg. |
| Image | A kép. Kitölti az oszlop szélességét, de nem nagyobb az eredeti méreténél. |
| **Admin Label** | A modul neve a builderben. |

**Design**

- **Overlay > Reveal Overlay Color:** a takaró réteg színe.
- **Animation:** a szöveg animációja, több mint 30 közül.

## Divi lebegő képek

Több kép, amely lebegő animációval mozog fel-le vagy balra-jobbra.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **+ Image Item** | Egy kép hozzáadása. Minden képnek saját Content, Design és Advanced füle van, a szürke sávon szerkesztheted, duplikálhatod vagy törölheted. |
| **Floating Effect** | Up Down vagy Left Right. |
| **Image animation delay interval (in ms)** | Az animáció indításának késleltetése ezredmásodpercben. |
| **Animation Speed** | A lebegés sebessége. |
| Image (elemenként) | A kép. Az oszlop szélességét kitölti, de nem lesz nagyobb az eredeti méreténél. |
| **Open in Lightbox** | A kép kattintásra Lightboxban nyílik. |

**Design > Sizing**

- **Horizontal Align:** a kép vízszintes helye százalékban.
- **Vertical Align:** a kép függőleges helye százalékban.
- **Width:** a kép szélessége.

## Divi szűrhető galéria

Képgaléria, amelyet a képekhez rendelt kategóriák szerint lehet szűrni.

**Kategóriák létrehozása és hozzárendelése.** Kategóriát a **Dashboard > Media > Categories** oldalon hozhatsz létre és szerkeszthetsz. Kategóriát a médiatárban a kép megnyitása után a jobb oldali sávban rendelhetsz a képhez. Ugyanez megy a Divi Builderben is: a modul beállításaiban a + ikonnal új képet veszel fel a médiatárból, és a jobb sávban hozzárendeled a kategóriákat.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Use Dynamic Images** | Megjelennek a kategóriák, és csak a kiválasztott kategóriák képei látszanak. |
| **Images** | Kézzel feltöltött képek, húzással átrendezhetők. |
| **Number of Columns** | Oszlopok száma. |
| **Image Size** | A kép mérete előre megadott méretek közül. |
| **Column Gap**, **Row Gap** | Az oszlopok és a sorok közti térköz. |
| **Speed** | A szűrés animációjának sebessége. |
| **Layout** | Card vagy Overlay. Overlay esetén megjelenik az **Image Height** (a kép magassága), a **Hover** (Fade In, Zoom vagy None) és a **Hover Transition** (az átmenet időtartama). |
| **Enable Filterable Gallery** | A szűrősáv megjelenítése felül. |
| **Show All Images Text** | Az „All” fül megjelenítése, amely az összes képet mutatja. Alatta az **All Images Text** a fül saját felirata. |
| **Show Title**, **Show Caption**, **Show Description** | A kép címe, felirata és leírása. Ezeket a médiatárban adod meg. |
| **Use Lightbox** | A képek Lightboxban nyílnak. |
| **Show Pagination** | Lapozás sok kép esetén, típusa a Pagination panelen állítható. |
| **Items Per Page** | Hány kép látszik egy oldalon. |
| **Pagination Type** | „Load More” gomb vagy számozott lapozás. |

**Design**

- **Title**, **Caption**, **Description:** a szövegek betűtípusa, mérete, színe, vastagsága és a többi szövegbeállítás.
- **Card** (Card elrendezésnél): **Background Color**, **Padding**, keret, lekerekítés, árnyék.
- **Image:** **Margin**, **Padding**, keret, lekerekítés, árnyék.
- **Content Wrapper:** **Margin**, **Padding**, keret, lekerekítés, árnyék.
- **Overlay** (Overlay elrendezésnél): a rámutatáskor megjelenő réteg **Background Color** és **Padding** értéke.
- **Category Tab:** **Alignment**, **Inactive BG Color**, **Active BG Color**, **Inactive Color**, **Active Color**, **Margin**, **Padding**, valamint betűméret, szín, vastagság, keret, lekerekítés és árnyék normál és aktív állapotra.
- **Pagination** (számozott lapozás): **Inactive BG Color**, **Active BG Color**, **Inactive Color**, **Active Color**, **Margin**, **Padding**, **Alignment**, plusz betűbeállítások, keret, lekerekítés, árnyék normál és aktív állapotra.
- **Load More:** **Background Color**, **Margin**, **Padding**, betűbeállítások, keret, lekerekítés, árnyék.

**Link a képekhez.** Nyisd meg a képet a médiatárban, és add meg az egyedi URL-t. Kattintáskor a látogató oda jut. Ez csak a Supreme modulokon belül működik.

## Divi masonry elrendezésű galéria

Képek masonry (téglafal) elrendezésben, például portfólióhoz.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Gallery | A galéria képei a médiatárból. |
| **Use Overlay** | Rámutatáskor réteg jelenik meg a kép címével és leírásával. Ezeket a médiatárban kell kitölteni. |
| **Use Lightbox** | A képek Lightboxban nyílnak, nyilakkal lehet váltani köztük. |
| **Use Horizontal Order** | A képek vízszintes sorrendbe rendeződnek. |
| **Use Zoom on Hover** | Rámutatáskor a képek nagyítási effektet kapnak. |

**Design**

- **Grid Layout:** **Columns** (az oszlopok száma, a reszponzív opcióval mobilra külön megadható) és **Columns Gaps** (az oszlopköz).
- **Grid Items:** a képek lekerekítése és kerete (**Grid Item Rounded Corners and Border**), árnyéka (**Grid Item Box Shadow**).
- **Overlay:** **Show Image Overlay Title**, **Show Image Overlay Description** (kikapcsolhatók), **Overlay Color**, valamint a cím és a leírás betűtípusa, mérete, vastagsága és a többi szövegbeállítás.

**Az átfedés címe és leírása.** A WordPress médiatárban szerkeszd a kép címét és leírását, ezek jelennek meg az átfedésben. A „LINK URL” mezőbe (a „Divi Supreme Modules Only” szakaszban) egyedi URL-t is megadhatsz a képhez.

## Divi véletlenszerű kép

A feltöltött képek közül véletlenszerűen mutat egyet. Az optimális működéshez kapcsold ki a gyorsítótárazást azon az oldalon, ahol a modul van.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Images | A véletlenszerűen megjelenítendő képek. |
| **Image Size** | A kép mérete, vagy marad a „Full Size”. |
| **Use Image Link URL** | Minden képnek lehet saját URL-je. |
| Lightbox | Bekapcsolva a kép kattintásra Lightboxban nyílik. |
| Lightbox: **Image Size** | A kép mérete csak a Lightboxban, vagy marad a „Full Size”. |

**Design**

- **Overlay:** **Image Overlay** (a réteg ki- és bekapcsolása), **Show Overlay on Hover** (csak rámutatáskor látszik), **Overlay Icon Color**, **Overlay Color** (az átlátszóság csúszkával állítható), **Icon Picker** (az ikon kiválasztása).
- **Image:** lekerekítés, keret, árnyék, szűrők és további képbeállítások.

## Divi görgethető kép

Hosszú kép, amely rámutatáskor lefelé vagy felfelé görgetődik a modulon belül.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Image | A kép a médiatárból. |
| **Open in Lightbox** | Kattintásra a kép Lightboxban nyílik. |
| **Image link URL** | A kép linkje, és a megnyitás módja (Target). |
| **Use as a Video Popup** | Kattintásra videó nyílik Lightboxban. A videó URL-jét az Image Link URL mezőbe kell írni. |
| **Scroll Speed (in s)** | Hány másodperc alatt görgetődik végig a kép, csúszkával. |
| **Scroll Reverse Direction** | Alapból fentről lefelé görget, bekapcsolva lentről felfelé. |

**Design**

- **Overlay:** az **Overlay** a képet fedő szín és ikon rámutatáskor. Beállítható az **Overlay Color**, a **User Icon** (az ikon ki- és bekapcsolása), az **Overlay Icon color**, az **Icon Picker** (ikon a Divi ikontárból), a **Show Overlay on Hover** (kikapcsolva a réteg mindig a képen marad), valamint a réteg lekerekítése és kerete (**Overlay Border Radius and Border**).
- **Lightbox:** ha a Link panelen Lightboxot vagy videót állítottál be, itt formázhatod: **Close Color** (a bezáró ikon színe) és **Overlay Max Width** (a legnagyobb szélesség).

## Divi kép

Kép 3D-s átalakítással: perspektívával és forgatással.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Image | A kép. Kitölti az oszlop szélességét, de nem lesz nagyobb az eredeti méreténél. |
| **Open in Lightbox** | Kattintásra a kép teljes méretben, felugró ablakban nyílik. |
| **Link URL** | Linkké teszi a képet. Üresen a kép statikus marad. |
| **Use as Video Popup** | Kattintásra videó nyílik, a videó URL-jét kell megadni. |
| **Perspective** | A 3D-s tér mélysége, az érték határozza meg a hatás erősségét. |
| **Rotate Y** | Forgatás a függőleges tengely körül. |
| **Rotate X** | Forgatás a vízszintes tengely körül. |
| **Rotate Z** | Forgatás a z tengely körül. |
| **Admin Label** | A modul neve a builderben. |

**Design**

- **Overlay:** az **Image Overlay** rámutatáskor színt és ikont ad a képre. Beállítható az **Overlay Color**, a **Use Icon**, az **Overlay Icon Color**, az **Icon Picker** (ikon a Divi ikontárból), a **Show overlay on Hover** (kikapcsolva a réteg mindig látszik), valamint a réteg lekerekítése és kerete.
- **Alignment:** **Image Alignment** (balra, jobbra vagy középre) és **Always Center Image On Mobile** (mobilon a kép középre igazodik, az asztali igazítás változatlan marad).

## Divi billenthető kép

Interaktív, egérmozgásra billenő kép. Rá ikon vagy szöveg is tehető.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| Image | A kép. Kitölti az oszlop szélességét, de nem lesz nagyobb az eredeti méreténél. |
| **Disable on Mobile** | Mobilon kikapcsolja a billenést. |
| **Perspective** | Minél kisebb az érték, annál szélsőségesebb a billenés. |
| **Scale** | Nagyítás rámutatáskor. A 2 a 200%, az 1.5 a 150%. |
| **Max Rotation** | A legnagyobb dőlés. Minél kisebb, annál kevésbé dől. |
| **Speed** | A belépő és kilépő átmenet sebessége. |
| **Use Glare** | Rámutatáskor fényvisszaverődés-effekt. Alatta a **GLARE** a csillogás átlátszósága. |
| **Reverse** | Megfordítja a billenés irányát. |
| **Use 3D Pop Out Effect** | Térbeli kiemelést ad a kép és az átfedés között. Alatta az **OVERLAY 3D POP OUT** a kettő távolságát adja. |
| **Open in Lightbox** | Kattintásra a kép teljes méretben, felugró ablakban nyílik. |
| **Link URL** | Linkké teszi a képet. Üresen a kép statikus. |
| **Use Icon** | Az átfedésen ikon jelenik meg. |
| **Overlay Title** | Az átfedés címe. |
| **Overlay Content** | Az átfedés szövege. |
| **Show on Hover** | Az átfedés szövege csak rámutatáskor látszik. |
| **Admin Label** | A modul neve a builderben. |

**Design**

- **Overlay:** **Overlay Icon Color**, **Overlay Color**, **Use Icon Font Size** (az ikon saját méretének megadása).
- **Alignment:** **Image Alignment** (balra, jobbra, középre) és **Always Center Image On Mobile**.
- **Overlay Text:** az átfedő cím és szöveg betűtípusa, színe, igazítása, és a **Text Vertical Alignment** (a szöveg függőleges igazítása).

## Divi alakzatok

Színes alakzat, amelyhez nem kell képfájl vagy egyedi kód.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Type** | 16 alakzat közül választhatsz: Square, Circle, Rectangle, Oval, Trapezoid, Parallelogram, Diamond Square, Hexagon, és 8 féle Blob. |
| **Size** | Az alakzat mérete. |

**Design**

| Beállítás | Mit csinál |
| --- | --- |
| **Shape Color** | Az alakzat színe. |
| **User Border** | Bekapcsolva keretet és lekerekítést adhatsz az alakzathoz. |
| **Shapes Shadow** | Árnyék az alakzathoz. |

**Az alakzat helyének módosítása**, háromféleképpen:

- **Margin:** külső térközt ad, növelve a távolságot a többi elemtől.
- **Transform > Translate:** a Translate fülön a megjelenő dobozt mozgatva bárhová áthelyezheted az alakzatot.
- **Position (Advanced fül):** a pozíció típusa Relative vagy Absolute, az alakzat csúszkákkal vagy beírt értékkel mozgatható.

## Divi Lottie

After Effects animációk megjelenítése a Divi oldalon, Lottie JSON fájlból.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Lottie JSON File** | A LottieFiles oldalról letöltött .JSON fájl feltöltése. |
| **Loop** | Ismétli az animációt. |
| **Number of Times** | Hányszor ismétlődjön. A 2 azt jelenti, hogy kétszer ismétlődik, utána megáll. |
| **Direction** | Normal vagy Reverse. |
| **Speed (More is Faster)** | A sebesség, a nagyobb érték gyorsabb. |
| **Trigger** | Bekapcsolva az animációt esemény indítja. |
| **Trigger Method** | Play Animation on Hover/Mouse over (rámutatásra), Play Animation on Click (kattintásra), Play Animation on Scroll (görgetésre). |
| **Relative To** | Görgetéses indításnál mihez viszonyít: jelenleg az Entire Page (teljes oldal). |
| **On Mouseout action** | Csak Hover indításnál látszik: Stop, Pause vagy Reverse, amikor az egeret elviszed a modulról. |
| **Animate in Viewport** | Az animáció egy megadott látómezőben játszódik le. |

**Design:** nincs szükség külön beállításra, de kaphat árnyékot, lekerekítést és a szokásos Divi design opciókat.

## Divi SVG animáció

SVG ábra animálása kód nélkül.

**Content**

| Beállítás | Mit csinál |
| --- | --- |
| **Use SVG Code** | SVG fájl helyett SVG kódot használsz. |
| **SVG File** | Az SVG fájl feltöltése. |
| **Type** | Az animáció típusa: Delayed, Sync vagy One-by-One. |
| **Animate Timing Function** | A sebességgörbe. |
| **Loop** | Az animáció ismétlődik. |
| **Unlimited** | Végtelen ismétlés. Kikapcsolva megadhatod az ismétlések számát. |
| **Trigger** | Bekapcsolva választhatsz indítási módot. |
| **Trigger Type** | Start Animation when in Viewport (ha a modul a látható területre ér), Start on Hover (rámutatásra), Start on Click (kattintásra). |
| **Speed** | Az animáció sebessége, minél kisebb az érték, annál gyorsabb. |
| **Delay** | Az indítás késleltetése. |

**Design**

- **Alignment:** az SVG igazítása.
- **SVG:** **Color** (az animáció színe) és **Width** (szélesség).

## Divi átforduló doboz

Olyan doboz, mint a Blurb modul, de elő- és hátoldallal: rámutatásra vagy kattintásra átfordul. Több mint 15 effekt közül választhatsz. A **+ Flipbox Item** gombbal adsz hozzá elemet, de csak kettőt hozz létre: az első az előlap, a második a hátlap. Az elemeket a szürke sávon szerkesztheted, duplikálhatod vagy törölheted.

**Design: a modulon**

| Beállítás | Mit csinál |
| --- | --- |
| **Sizing > Height** | A doboz magassága, alapértéke 200px. Ha a tartalom túl hosszú, állítsd nagyobbra. |
| **Trigger Animation On** | Hover vagy Click. |
| **Click On** | Csak Click esetén látszik: a teljes dobozra kattintva vagy csak a gombra kattintva forduljon át. |
| **Flipbox Type** | Flip, Slide, Zoom In, Zoom Out vagy Fade. |
| **Flip Animation** | Flip Left, Flip Right, Flip Up vagy Flip Down. |
| **3D Effect** | Csak Flip típusnál látszik, térhatást ad. |
| **Slide Animation** | Csak Slide típusnál látszik: Slide Left, Slide Right, Slide Up vagy Slide Down. |
| **Zoom In Animation** | Nagyításos animáció. |
| **Zoom Out Animation** | Csak Zoom Out típusnál látszik: Zoom Out, Zoom Out Up, Zoom Out Down, Zoom Out Left vagy Zoom Out Right. |
| **Animation Speed (in s)** | Az animáció sebessége másodpercben. |

**Content: egy elem**

| Beállítás | Mit csinál |
| --- | --- |
| **Title** | Az elem címe, félkövér szöveggel. |
| **Sub Title** | Alcím a cím alatt, kisebb betűvel. |
| **Content** | A törzsszöveg, kitölti az oszlop szélességét. |
| **Use Icon** | Ikon vagy kép szerepel a szöveg mellett. Ha nem használsz ikont, képet kell feltölteni. |
| **Icon** | Ikon a listából. |
| Image | Kép, nem lesz nagyobb az eredeti méreténél. Egymás mellett elhelyezett dobozoknál jó, ha a képek egyforma magasak. |
| Button Text, Button URL | A gomb szövege és célcíme. |
| **URL Opens** | A link új ablakban nyíljon-e. |

**Design: egy elem**

- **Image & Icon:** **Icon Color** (alapból a téma kiemelő színe), **Circle Icon** (az ikon színes körben), **Circle Color**, **Show Circle Border** és **Circle Border Color**, **Use Icon Font Size** (az ikon saját mérete).
- **Sizing > Width:** a kép legnagyobb szélessége, csak ikon nélküli dobozoknál hat.
- **Spacing > Custom Padding:** az elem belső margója mind a négy oldalon. Alapból pixelben számol, de más mértékegységet is beírhatsz. A saját érték törléséhez ürítsd ki a mezőt.
- **Spacing > Custom Padding:** belső térköz a doboz mind a négy oldalán. Alapból pixelben értendő, de más mértékegységet is beírhatsz. Az egyedi érték törléséhez töröld ki a mezőt.