# Divi 5 modulok: szűrhető galéria és lebegő képek

> A Divi 5 Visual Builder szűrhető galéria (Filterable Gallery) és lebegő képek (Floating Multi Images) moduljának beállításai.

Ebben a fejezetben két képmegjelenítő modult találsz. Mindkettő 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.

## Szűrhető galéria (Supreme Filterable Gallery)

Képgaléria, amelyben a látogatók a képekhez rendelt kategóriák szerint szűrhetnek. Portfóliókhoz és terméklátványokhoz való. Egyszerű dekorációs képhez elég a sima Divi kép modul, nagyon nagy képkészletnél pedig érdemes külön galéria-bővítményt vagy szűrhető archívumot használni.

1. Add hozzá a **Supreme Filterable Gallery** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön válaszd ki a képeket: dinamikusan, a médiatár kategóriái szerint, vagy kézzel.
3. Állítsd be az oszlopokat, a hover hatást, a szűrőfüleket és a lapozást.
4. A **Design** fülön állítsd be a színeket.
5. Mentsd az oldalt, és nézd meg a weboldalon.

### Content: képek

| Beállítás | Mit csinál |
|---|---|
| **Dynamic images** | A képeket a médiatárból húzza a csatolmány-kategória szerint. Kikapcsolva kézzel választod ki őket. |
| **Categories** | Csak az itt kijelölt kategóriákba tartozó képek kerülnek be. |
| **Sort order** | A képek sorrendje dinamikus képeknél. |
| **Max images** | A betöltött képek felső határa dinamikus képeknél. Egy kategória akár több száz fájlt is találhat, a korlát könnyebbé teszi az oldalt, csökkenti a kéréseket és a szkriptmunkát (elrendezés, szűrés, lightbox), és gyorsítja a builder előnézetét. |
| **Gallery images** | A kézzel választott képek feltöltése és húzással rendezése. |
| **Image size** | A rácshoz használt WordPress-képméret. A gyorsabb betöltéshez használj Medium vagy Large méretet, a Full csak kis galériához ajánlott. A lightbox így is a teljes képet nyitja meg. |

### Content: elrendezés

| Beállítás | Mit csinál |
|---|---|
| **Columns** | Az oszlopok száma. |
| **Column gap**, **Row gap** | Az oszlopok és sorok közti rés. |
| **Uniform row height** | Minden sor azonos magasságú. |
| **Row height** | A sorok rögzített magassága, ha az egységes sormagasság be van kapcsolva. |
| **Item layout** | Kártya: a szöveg a kép alatt van. Overlay: a szöveg a kép fölött, hover hatásra jelenik meg. |
| **Filter animation** | A képek szűrés közbeni átrendeződésének időtartama ezredmásodpercben. |
| **Auto image height** | A képmagasság a képhez igazodik. Kikapcsolva rögzített magasságot adhatsz meg. |
| **Image height** | A kép területének rögzített magassága, ha az automatikus magasság ki van kapcsolva. |
| **Hover effect** | Hogyan jelenik meg az átfedés egérráhúzásra. |
| **Hover transition** | A hover animáció hossza. |

### Content: szűrőfülek

| Beállítás | Mit csinál |
|---|---|
| **Show filter tabs** | Kategóriafüleket jelenít meg a galéria fölött a szűréshez. |
| **Tab order** | A kategóriafülek rendezési módja. |
| **Show "All" Tab** | Megjelenít egy fület, amely az összes képet mutatja. |
| **“All” tab label** | Az „All” fül felirata. |

### Content: szövegek, lightbox, lapozás

| Beállítás | Mit csinál |
|---|---|
| **Title**, **Caption**, **Description** | Megjeleníti a médiatárban megadott címet, képaláírást, leírást a képeknél. |
| **Enable lightbox** | Kattintásra a kép lightboxban nyílik meg. |
| **Show title**, **Show caption**, **Show description** | A lightboxban is megjeleníti a címet, a képaláírást, a leírást. |
| **Zoom image on hover** | Egérráhúzásra kissé nagyítja a képet. |
| **Enable pagination** | A galéria lapokra vagy „többet mutat” vezérlőre oszlik. |
| **Items per page** | Hány kép látszik a lapozás előtt. |
| **Type** | „Többet mutat” gomb vagy számozott oldallinkek. |
| **Load more button text** | A „többet mutat” gomb felirata. |
| **Previous label**, **Next label** | Az előző és következő oldal vezérlőjének felirata. |
| **Compact page numbers** | Sok oldalnál rövidíti az oldalszámok sorát három ponttal. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Background** (kártya) | A kép és a szöveg háttere kártya elrendezésnél. |
| **Overlay background** | A fedőszöveg mögötti szín overlay elrendezésnél. |
| **Alignment** (kategóriafülek) | A kategóriafülek sorának igazítása. |
| **Background**, **Text color** (inaktív fül) | A ki nem választott fülek háttere és szövegszíne. |
| **Background**, **Text color** (aktív fül) | A kiválasztott fül háttere és szövegszíne. |
| **Alignment** (lapozás) | A számozott lapozó igazítása. |
| **Background**, **Text color** (inaktív oldal) | A nem aktív oldallinkek háttere és szövegszíne. |
| **Background**, **Text color** (aktív oldal) | Az aktuális oldal háttere és szövegszíne. |
| **Background** (gomb) | A „többet mutat” gomb háttere. |
| **Alignment** (gomb) | A „többet mutat” gomb igazítása. |

## Lebegő képek (Supreme Floating Multi Images)

Több kép együtt, lebegő mozgással. A mozgás iránya felfelé-lefelé vagy balra-jobbra lehet. Hero-szekciókhoz és termékbemutatókhoz való. A modul szülő és gyermek elemekből áll: a szülő a **Supreme Floating Multi Images**, az egyes képek a gyermek elemek. A képeket mindig a szülő **Content** füléről add hozzá, gyermek elemet külön nem tehetsz az oldalra. A sorrendet húzással változtathatod, az elemeket duplikálhatod is. Kezdj 3 és 6 kép között.

1. Add hozzá a **Supreme Floating Multi Images** modult a **Divi Supreme** kategóriából.
2. A **Content** fülön vedd fel az első képet.
3. A **Design** fülön állítsd be a magasságot, a lebegés hatását és az időzítést.
4. Mentsd az oldalt, és nézd meg a weboldalon.

### Design

| Beállítás | Mit csinál |
|---|---|
| **Height** | A modul magassága. |
| **Floating Effect** | A lebegés iránya és módja. |
| **Image Animation Delay Interval (in ms)** | A képek animációja közti késleltetés ezredmásodpercben. |
| **Animation Speed (in ms)** | Az animáció sebessége ezredmásodpercben. |

### Gyermek elem (egy kép)

Az egyes képek beállításai csak az adott elemre vonatkoznak.

| Beállítás | Mit csinál |
|---|---|
| **Image** (Content) | A megjelenő kép. |
| **Open in Lightbox** (Content) | Kattintásra a kép lightboxban nyílik meg. Alapból ki van kapcsolva. |
| **Horizontal Align** (Design) | A kép vízszintes helye a modulban. |
| **Vertical Align** (Design) | A kép függőleges helye a modulban. |