# Divi 5 modulok: Masonry galéria és menü

> A Divi 5 Supreme Masonry Gallery és Supreme Menu moduljának beállításai.

Ebben a fejezetben a Masonry galéria és a menü modul van. Mindkettő a **Divi Supreme** kategóriában van a modulválasztóban, és előbb be kell kapcsolnod a **Divi Supreme Pro → Modulok beállításai** fülön. A builder feliratai angolul maradnak.

## Masonry galéria (Supreme Masonry Gallery)

Képeket mutat be érdekes, falazott elrendezésben. Webdesignereknek, fotósoknak és portfóliókhoz való. Egyszerű dekorációs fotóhoz a sima Kép modul könnyebb; nagyon sok képnél inkább külön galéria bővítményt vagy szűrhető archívumot érdemes használni.

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Add hozzá a **Supreme Masonry Gallery** modult a **Divi Supreme** kategóriából.
3. A **Content** fülön add hozzá a képeket (**Images**), és állítsd be a rendezést, az átmeneteket, az átfedést és a lightboxot.
4. A **Design** fülön állítsd be az oszlopokat és a színeket.
5. Mentsd az oldalt, és nézd meg a weboldalon.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Images** | A galéria képei. |
| **Lazy Load Images** | A képek akkor töltődnek be, amikor a nézetbe érnek. Éles használat előtt próbáld ki a gyorsítótárazásoddal. |
| **Sort Images** | Be- vagy kikapcsolja a képek rendezését. |
| **Sort By** | A rendezés alapja. |
| **Date Order** | A dátum szerinti sorrend iránya. |
| **Horizontal Order** | A képek balról jobbra haladó sorrendben maradnak, amikor a rács újrarendeződik. |
| **Layout Transition** | Mennyi ideig animálódik egy csempe, amikor megváltozik a helye a rácson. Reszponzív: 980 px és 767 px alatt a tablet- és telefonértékeket használja (mint a Divi oszlopai). 0 esetén nincs mozgás. |
| **Item Stagger** | A csempék animációja közti késleltetés. Ugyanúgy reszponzív. Csak akkor látszik, ha a Layout Transition nagyobb nullánál. |
| **Columns From Left** | Ha ki van kapcsolva, az oszlopok jobbról töltődnek. Jobbról balra író nyelvekhez hasznos. |
| **Viewport Margin** | Mennyivel a nézet alja alatt kezdhet a rács elrendeződni (a nézetmagasság százalékában). Nagyobb érték korábban indítja az elrendezést görgetéskor. |
| **Zoom Image On Hover** | A kép nagyít, ha az egeret fölé viszed. |
| **Enable Overlay** | Hover átfedést mutat minden képen címmel, képaláírással és/vagy leírással. |
| **Show Title** | Megjeleníti a címet az átfedésben. |
| **Show Caption** | Megjeleníti a képaláírást az átfedésben. |
| **Show Description** | Megjeleníti a leírást az átfedésben. |
| **Enable Lightbox** | Kattintásra a kép lightboxban nyílik meg. |
| **Lightbox Image Size** | A lightboxban megjelenő kép mérete. |
| **Show Title In Lightbox** | A cím látszik a lightboxban. |
| **Show Caption In Lightbox** | A képaláírás látszik a lightboxban. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Columns** | Az oszlopok száma. |
| **Column Gap** | Az oszlopok közti rés. |
| **Overlay Color** | Az átfedés színe. |
| **Backdrop Overlay** | A lightbox képe mögötti háttér színe. Üresen a szokásos sötét takarás marad. |

A szokásos Divi méret, térköz, szegély, árnyék és animáció csoportok is érvényesek.

## Menü (Supreme Menu)

Egy WordPress-menüt jelenít meg, tetszés szerinti formázással. Lábléchez és oldalsávhoz is használható. Ha egy alap Divi modul elég, használd azt.

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Add hozzá a **Supreme Menu** modult a **Divi Supreme** kategóriából.
3. A **Content** fülön add meg a menü címét, válaszd ki a menüt, és állítsd be az almenü viselkedését.
4. A **Design** fülön színezd és igazítsd a linkeket.
5. Mentsd az oldalt, és nézd meg a weboldalon.

### Content

| Beállítás | Mit csinál |
|---|---|
| **Menu Title** | A menü fölött megjelenő cím. |
| **Menu** | Melyik WordPress-menüt használja a modul. |
| **Collapse Sub Menu** | Összecsukható legyen-e az almenü. |
| **Use Schema Markup** | A menü schema markup strukturált adatot használjon-e. |

### Design

| Beállítás | Mit csinál |
|---|---|
| **Bottom Gap** | A cím és a menü közti rés. |
| **Menu Layout** | A menü elrendezése. |
| **Menu Link Color** | A linkek színe. |
| **Active Link Color** | Az aktív link (az éppen megnyitott oldal) színe. |
| **Menu Link Active Color (:active pseudo)** | A link színe, amíg aktiválják (kattintás közben). |
| **Menu Link Visited Color** | A meglátogatott linkek színe. |
| **Space Between** | A menüpontok közti távolság. |
| **Left Spacing** | A menüpontok bal oldali térköze. |
| **List Style Type** | A lista jelölőjének típusa. |
| **List Style Position** | A lista jelölőjének helye. |
| **List Style Color** | A lista jelölőjének színe. |
| **Menu Text Alignment** | A menüszöveg igazítása. |
| **Left Spacing** (almenü) | Az almenü bal oldali térköze. |
| **Arrow Color** | Az almenü nyíl színe. |
| **Arrow Background Color** | A nyíl hátterének színe. |
| **Arrow Gap** | A nyíl körüli rés. |
| **Arrow Font Size** | A nyíl mérete. |
| **Use Link Hover Animation** | Hover animáció a menülinkeken. |
| **Animation Type** | Az animáció fajtája. |
| **Underline Animation** | Az aláhúzás animációja. |
| **Animation Color** | Az animáció színe. |

A szokásos Divi méret, térköz, szegély, árnyék és animáció csoportok is érvényesek.