# Divi 5 modulok: képharmonika, hotspotok és hover felfedés

> A Divi 5 Visual Builder képharmonika (Image Accordion), képes hotspot (Image Hotspots) és képfelfedő (Image Hover Reveal) moduljának beállításai.

Ebben a fejezetben három interaktív képmodult találsz. Mindegyik a **Divi Supreme** kategóriában van a modulválasztóban, és a **Divi Supreme Pro → Modulok beállításai** fülön kell bekapcsolnod őket. A beállítások feliratai a builderben angolul maradnak. A szokásos Divi-csoportok (háttér, méret, térköz, szegély, árnyék, animáció) ott érhetők el, ahol a modul támogatja őket.

A képharmonika és a hotspot modul szülő és gyermek elemekből áll. A szülőn a közös beállítások vannak, a gyermek elemek az egyes panelek vagy pontok. A gyermek elemet mindig a szülő **Content** füléről add hozzá, külön nem tehetsz az oldalra. A sorrendet húzással változtathatod. Kezdj 3 és 6 elem között, és a közös stílust a szülőn finomítsd. Egyszerű dekorációs képhez elég a sima Divi kép modul.

## Képharmonika (Supreme Image Accordion)

Képek lenyitható panelekben, egérráhúzásra vagy kattintásra működő animációval. Minden panelhez adhatsz ikont, képet, címet, leírást és gombot.

1. Add hozzá a **Supreme Image Accordion** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön vedd fel az első panelt (gyermek elem), és töltsd ki.
3. A szülőn állítsd be a harmonika típusát, irányát és magasságát.
4. Mentsd az oldalt, és nézd meg a weboldalon.

### Szülő

| Beállítás | Mit csinál |
|---|---|
| **Accordion Type** | A harmonika típusa, vagyis hogy a panelek hogyan nyílnak (egérráhúzásra vagy kattintásra). |
| **Accordion Content Animation** | A panel tartalmának megjelenési animációja. |
| **Use Sequenced Animation** | A tartalom elemei egymás után animálódnak. |
| **Accordion Direction** | A panelek iránya. |
| **Accordion Height** | A harmonika magassága. |
| **Overlay Color** (Design) | A képre kerülő fedőszín. |
| **Horizontal align**, **Vertical align** (Design) | A panel tartalmának vízszintes és függőleges igazítása. |
| **Icon Color** (Design) | Az ikon színe. |
| **Use Icon Font Size**, **Icon Font Size** (Design) | Külön ikonméret bekapcsolása és az ikon mérete. |

### Gyermek elem (panel)

| Beállítás | Mit csinál |
|---|---|
| **Make Item Expanded** | A panel az oldal betöltésekor nyitva van. |
| **Background Image** | A panel háttérképe. Elsőbbséget élvez a Background csoportban megadott képpel szemben. |
| **Use Icon** | Ikon használata. |
| **Icon** | A panel ikonja. |
| **Icon Image** | Ikon helyett saját kép. |
| **Title** | A panel címe. |
| **Description** | A panel leírása. |
| **Show Button** | Gomb megjelenítése. |
| **Button Text** | A gomb felirata. |
| **Button Link** | A gomb hivatkozása. |
| **Url Opens** | A hivatkozás megnyitási módja (ugyanabban vagy új ablakban). |
| **Horizontal Align**, **Vertical Align** | A panel tartalmának igazítása. |
| **Overlay Color**, **Icon Color** (Design) | Csak erre a panelre érvényes fedőszín és ikonszín. |
| **Use Icon Font Size**, **Icon Font Size** (Design) | Az ikon mérete. |
| **Image Width** (Design) | Az ikonkép szélessége. |

## Képes hotspotok (Supreme Image Hotspots)

Egy képre pontokat (hotspotokat) tehetsz, amelyek buborékban további információt mutatnak.

1. Add hozzá a **Supreme Image Hotspots** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön töltsd fel a képet az **Image** mezőbe.
3. Vedd fel az első hotspotot (gyermek elem), és állítsd be a helyét a **Left Position** és **Top Position** csúszkákkal.
4. A **Design** fülön állítsd be a buborék viselkedését és színeit.
5. Mentsd az oldalt, és nézd meg a weboldalon.

### Szülő

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Image** (Content) | A kép, amelyre a hotspotok kerülnek. | |
| **Trigger Event** | A buborék megjelenítése egérráhúzásra vagy kattintásra. | hover |
| **Icon Color** | A hotspot ikonjának színe. | #ffffff |
| **Icon Font Size** | Az ikon mérete. | 14px |
| **Background Color** | A buborék háttérszíne. | rgba(34,34,34,0.9) |
| **Tooltip Animation** | A buborék megjelenési animációja. | fade |
| **Tooltip Max Width** | A buborék legnagyobb szélessége. | 180px |
| **Tooltip Delay Show** | A buborék megjelenésének késleltetése. | 50 |
| **Tooltip Delay Hide** | A buborék eltűnésének késleltetése. | 50 |

### Gyermek elem (hotspot)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Type** | A hotspot ikon vagy szöveg. | icon |
| **Icon** | A hotspotként megjelenő ikon. | |
| **Hotspot Image** | Saját kép a hotspothoz. | |
| **Hotspot Text** | A hotspot szövege. | text |
| **Use Tooltip** | A hotspothoz tartozik buborék. | be |
| **Content** | A buborék szövege. | Your tooltip content goes here |
| **Left Position**, **Top Position** (Design) | A hotspot helye a képen. | |
| **Icon Color**, **Icon Font Size** (Design) | Az ikon színe és mérete. | #ffffff, 14px |
| **Hotspot Image Width** (Design) | A hotspot képének szélessége. | |
| **Background Color** (Design) | Csak erre a hotspotra érvényes buborékháttér. Üresen a szülő beállítását használja. | |
| **Placement** (Design) | A buborék helye a hotspothoz képest. | |
| **Tooltip Max Width** (Design) | Csak erre a hotspotra érvényes buboréknagyság. Üresen a szülő értékét használja. | |
| **Use Pulse Animation** | Pulzáló animáció a hotspoton. | ki |
| **Background Color** (pulzálás) | A pulzáló hatás színe. | |

## Képfelfedő hover hatás (Supreme Image Hover Reveal)

Egérráhúzásra a felső kép öt szeletre bomlik, és alatta nagyítási animációval újra megjelenik a kép. Négy animációtípus közül választhatsz.

1. Add hozzá a **Supreme Image Hover Reveal** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön töltsd fel a képet, adj meg magasságot, és válaszd ki az animációt.
3. Mentsd az oldalt, és nézd meg a weboldalon.

| Beállítás | Mit csinál |
|---|---|
| **Image** | A kép. Az SVG fájlok is jól működnek, a megjelenítési hibákat a modul magától javítja. |
| **Height** | A modul magassága. |
| **Image Reveal Animation** | A felfedés csúszásának iránya. |