# Divi 5 modulok: képek

> A Divi 5 Visual Builder előtte-utána képes csúszka, blob alakú kép és blokkos felfedésű kép moduljának beállításai.

Ebben a fejezetben a Divi 5-ös Visual Builder képes moduljait találod. A modulok a **Divi Supreme** kategóriában vannak a modulválasztóban, és előbb be kell őket kapcsolnod a **Divi Supreme Pro → Modulok beállításai** fülön. A builder feliratai angolul maradnak, ezért itt is úgy szerepelnek.

## Előtte-utána képes csúszka (Before/After Image Slider)

Két kép ugyanarra a helyre kerül, a látogató pedig egy csúszkát húzva hasonlítja össze őket. Átalakítások, felújítások, retusált fotók bemutatására jó.

Hozzáadás: a Divi 5 Visual Builderben válaszd a **Supreme Before/After Image Slider** modult a **Divi Supreme** kategóriából.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Before Image** | Az „előtte” kép (feltöltés, vagy a kép címének beírása). |
| **Before Image Alternative Text** | Az „előtte” kép ALT szövege, a kép rövid leírása. |
| **Before Image Title Text** | Az „előtte” kép HTML title szövege. |
| **After Image** | Az „utána” kép. |
| **After Image Alternative Text** | Az „utána” kép ALT szövege. |
| **After Image Title Text** | Az „utána” kép title szövege. |
| **Before Label Text**, **After Label Text** | A két kép felirata. |
| **Hide Labels** | Elrejti a feliratokat. |
| **Show Labels on Hover** | A feliratok csak akkor látszanak, ha az egeret a kép fölé viszed. |
| **Label alignment** | A feliratok igazítása. |
| **Default Offset Percentage** | Az „előtte” kép mekkora része látszik az oldal betöltésekor. |
| **Orientation** | A csúszka iránya (vízszintes vagy függőleges). |
| **Move Slider on Hover** | A csúszka az egér mozgását követi, húzás nélkül. |
| **Smoothing** | Húzáskor az elválasztó vonal finoman mozog. Safariban magától kikapcsol. |
| **Smoothing Amount (ms)** | A finom mozgás időtartama ezredmásodpercben (legfeljebb 2000). |
| **Handle Shadow** | Árnyék a vezérlő vonalon és a nyilakon. |
| **Circular Handle** | Kör alakú fogantyú körvonalas nyilakkal. |
| **Circular Handle Blur** | Elmosott háttér a kör alakú fogantyú mögött. |
| **Fluid Mode** | A második kép vágással vagy háttérként jelenik meg. Reszponzív tárolóban ez ajánlott. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Background Color** (előtte felirat) | Az „előtte” felirat háttérszíne. |
| **Background Color** (utána felirat) | Az „utána” felirat háttérszíne. |
| **Overlay color** | A kép fölé vitt egér hatására megjelenő réteg színe. |
| **Handle Border Color** | A fogantyú szegélyének színe. |
| **Handle Border Radius** | A fogantyú lekerekítése. |
| **Handle Background Color** | A fogantyú háttérszíne. |
| **Arrow Color** | A fogantyú nyilainak színe. |

## Blob alakú kép (Blob Shape Image)

Szabálytalan, „blob” alakú képkivágás, 13 alakzat közül választhatsz. A képre szöveges tartalom, egyszínű vagy színátmenetes fedőréteg is kerülhet. Portfólióhoz, bemutatkozó szakaszokhoz való. Ha csak egy egyszerű fotót akarsz, a Divi saját kép modulja elég.

Hozzáadás: **Supreme Blob Shape Image** a **Divi Supreme** kategóriából.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Image** | A kép. |
| **Size** | A kép méretezése. |
| **Position** | A kép pozíciója az alakzaton belül. |
| **Image Height** | A kép magassága. |
| **Blob Shapes** | Az alakzat kiválasztása. |
| **Title** | A képre kerülő cím. |
| **Description** | A képre kerülő leírás. |
| **Show Content On Hover** | A cím és a leírás csak az egér ráhúzásakor látszik. |
| **Image Link URL** | A kép linkje. |
| **Image Link Target** | A link ugyanabban az ablakban vagy új lapon nyílik. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Use Overlay** | Fedőréteget tesz a képre. |
| **Overlay Color** | A fedőréteg színe. |
| **Use Gradient Color** | Egyszínű helyett színátmenetes fedőréteg. |
| **Gradient Angle** | A színátmenet szöge. |
| **Fade Offset** | Az elhalványulás eltolása. |
| **Gradient Color 1**, **Gradient Color 1 Offset** | Az első szín és a pozíciója. |
| **Gradient Color 2**, **Gradient Color 2 Offset** | A második szín és a pozíciója. |

## Blokkos felfedésű kép (Block Reveal Image)

Előbb egy dekoratív színes blokk rajzolódik ki, majd ahogy zsugorodik, alóla felfedi a képet. Négy animáció közül választhatsz. A kép lightboxban is megnyitható, videós felugróként is használható.

Hozzáadás: **Supreme Block Reveal Image** a **Divi Supreme** kategóriából.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Image** | A kép. |
| **Open in Lightbox** | Kattintásra a kép lightboxban nyílik meg. |
| **Use Other Lightbox Image** | A lightboxban másik képet mutat. |
| **Image** (lightbox) | A lightboxban megjelenő másik kép. |
| **Image Link Url** | A kép linkje. |
| **Image Link Target** | A link ugyanabban az ablakban vagy új lapon nyílik. |
| **Use as Video Popup** | Videós felugró ablakként működik. |
| **Block Reveal Animation** | Az animáció típusa. |
| **Block Reveal Color** | A takaró blokk színe. |
| **Delay** | Az animáció késleltetése. |
| **Animate in Viewport** | Mikor induljon el az animáció, amikor a modul a látható területre ér. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Image Overlay** | Fedőréteget tesz a képre. |
| **Overlay Color** | A fedőréteg színe. |
| **Use Icon** | Ikon a fedőrétegen. |
| **Overlay Icon Color** | Az ikon színe. |
| **Icon Picker** | Az ikon kiválasztása. |
| **Show Overlay On Hover** | A fedőréteg csak az egér ráhúzásakor jelenik meg. |
| **Alignment** | A kép igazítása. |
| **Close Color** | A lightbox bezárás gombjának színe. |
| **Max Width** | A lightbox legnagyobb szélessége. |