# Divi 5 modul: dönthető kép (Tilt Image)

> A Divi 5 Visual Builder Supreme Tilt Image moduljának beállításai: dőlés az egér mozgására, fény, 3D kiemelés, átfedő ikon és szöveg.

A **Supreme Tilt Image** interaktív, parallax jellegű dőlési hatást ad a képnek: a kép követi az egér mozgását. A képre átfedő ikont vagy szöveget is tehetsz, hogy jobban látszódjon. 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 builderben a feliratok angolul maradnak.

Portfólió- vagy termékképhez, nyitóoldali hero-képhez és funkciók bemutatásához jó. Ha csak egy egyszerű dekorképre van szükséged, a sima Divi kép modul könnyebb és egyértelműbb.

## Hozzáadás

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Szúrj be egy modult, és válaszd ki a **Supreme Tilt Image** modult a **Divi Supreme** kategóriából.
3. A **Content** fülön válaszd ki a képet, és állítsd be a dőlés paramétereit.
4. A **Design** fülön állítsd be az átfedés színét, az ikon méretét és az igazítást.
5. Mentsd az oldalt, és nézd meg a weboldalon.

A Divi 4-es shortcode: `dsm_tilt_image`. A Divi 4-es elrendezések a Divi 5-ben való megnyitáskor átalakulnak.

## Content fül

### Kép és dőlés

| Beállítás | Mit csinál |
|---|---|
| **Image** | A megjelenített kép. |
| **Disable on Mobile** | Mobilon kikapcsolja a dőlési hatást. |
| **Perspective** | A transzformáció perspektívája: minél kisebb, annál szélsőségesebb a dőlés. |
| **Scale on Hover** | Nagyítás egér fölé vitelkor (2 = 200%, 1,5 = 150%). |
| **Max Rotation** | A legnagyobb dőlésszög: minél kisebb, annál kevesebbet dől. |
| **Speed** | A belépő és kilépő átmenet sebessége. |
| **Reverse** | Megfordítja a dőlés irányát. |

### Fényhatás és 3D

| Beállítás | Mit csinál |
|---|---|
| **Use Glare** | Egér fölé vitelkor „fényvisszaverődés” hatást ad a képnek. |
| **Glare** | A fényhatás átlátszatlansága. |
| **Use 3D Pop Out Effect** | Bekapcsolja a 3D kiemelést. |
| **Overlay 3D Pop out** | A kép és az átfedő réteg közti kiemelés mértéke. |

### Átfedő réteg és hivatkozás

| Beállítás | Mit csinál |
|---|---|
| **Use Icon** | Ikont tesz a kép fölé. |
| **Icon** | A használt ikon. |
| **Overlay Title** | Az átfedő réteg címe. |
| **Overlay Content** | Az átfedő réteg szövege. |
| **Show on Hover** | Az átfedő réteg csak egér fölé vitelkor jelenik meg. |
| **Open in Lightbox** | Kattintásra a képet lightboxban nyitja meg. |
| **Image Link URL** | A kép hivatkozásának címe, mellette választható, hogy új ablakban nyíljon-e meg. |

## Design fül

| Beállítás | Mit csinál |
|---|---|
| **Overlay Color** | Az átfedő réteg színe. |
| **Overlay Icon Color** | Az átfedő ikon színe. |
| **Use Icon Font Size** | Engedélyezi az ikon saját méretét. |
| **Icon Font Size** | Az ikon mérete. |
| **Image Alignment** | A kép igazítása. |
| **Text Vertical Alignment** | Az átfedő szöveg függőleges igazítása. |

Tipp: nagyon sok képnél érdemes inkább galéria modult használni. Ha a méret számít, állítsd be külön a táblagépre és a telefonra is.