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

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.