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

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.