Divi 5 modulok: képfelfedő szöveg, vonalas hover, Lottie, maszkolt szöveg, fejléc animáció

Ebben a fejezetben öt, mozgással vagy effekttel díszített modult találsz. Mindegyik 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. 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.

Minden modulnál ugyanaz az első menet: nyisd meg az oldalt a Divi 5 Visual Builderben, add hozzá a modult, állítsd be a Content fület, igazítsd a Design fület, mentsd az oldalt, és nézd meg a weboldalon. A responsive beállításokat tablet és telefon nézetben is ellenőrizd.

Képfelfedő szöveg (Supreme Image Text Reveal)

Ha az egeret a kép fölé viszed, balról egy takaró csúszik a képre, és a helyén szöveg jelenik meg. Amikor elmozdítod az egeret, a kép jobbra kicsúszik a nézetből. A felfedett szöveghez sok animáció közül választhatsz.

Mire jó: portfólió- vagy termékképek, nyitóoldali főképek, funkciómagyarázatok. Egyszerű dekorációs fotóhoz a sima Kép modul könnyebb, nagyon sok képhez inkább külön galéria bővítményt vagy szűrhető archívumot használj.

Beállítás	Mit csinál
Reveal Text	A felfedett szöveg.
Image	A kép (feltöltés vagy URL).
Reveal trigger	Mi indítja a felfedést. Hover: az egér be- és kilépése. Click: koppintásra vált (érintőképernyőre ajánlott). In view once: akkor játszódik le, amikor a modul a nézetbe görgetődik, és felfedve marad. A Click kikapcsolja a kép lightboxát, hogy a koppintás a felfedést váltsa.
Animation	A szöveg animációja.
Reveal Duration Text	Az egyes karakterek felfedésének időtartama.
Reveal Delay Text	A karakterenkénti, lépcsőzetes animáció alapkésleltetése.
Open image in lightbox	A kép lightboxban nyílik meg kattintásra.

Design fül:

Beállítás	Mit csinál
Reveal Overlay Color	A takaró színe.
Overlay Wipe Direction	Merre mozog a színes takaró, mielőtt a szöveg animálódik.
Image Alignment	A kép igazítása.
Always Center Image On Mobile	Mobilon mindig középre igazítja a képet.
Force Fullwidth	A képet teljes szélességre kényszeríti.

Vonalas hover (Supreme Line Hover)

Linkek aláhúzás-effektjét adja hozzá: a szövegre vitt egérrel animált vonal jelenik meg. Menükhöz és linklistákhoz jó, hogy a navigáció kidolgozottabbnak hasson. Ha egy alap Divi modul is elég, használd azt.

Beállítás	Mit csinál
Text	A link szövege.
Animation Effect	A vonal animációjának fajtája.
Animation Color	A vonal színe.
Animation Duration	Az animáció időtartama.
Animation Delay	Az animáció késleltetése.
Link URL	A link címe.
Link URL Target	A link megnyitásának módja (ugyanabban vagy új ablakban).

A Design fülön az Image Alignment (igazítás) állítható.

Lottie (Supreme Lottie)

A Lottie egy könyvtár, amely After Effects animációkat jelenít meg natív alkalmazásokban. Ez a modul hozza el a Diviba: könnyű, vektoros animációkat és dekoratív alakzatokat tehetsz az oldalra nehéz videófájl nélkül. Fontos szöveget ne csak animációban jeleníts meg: a lényeges szöveg legyen valódi szövegmodulban.

Beállítás	Mit csinál
Lottie / dotLottie file (.json or .lottie)	A feltöltött vagy kiválasztott animációfájl.
Loop	Ismétlődjön-e az animáció.
Number of times	Hányszor ismétlődjön a leállás előtt. Csak akkor érhető el, ha a Loop be van kapcsolva.
Delay	Az animáció késleltetése ezredmásodpercben.
Direction	Az animáció iránya.
Speed (More is faster)	Az animáció sebessége, nagyobb érték gyorsabb.
Trigger	Hoverre induljon-e az animáció.
Trigger Method	Az indítás módja.
Relative To	Mihez viszonyítva indul a görgetésre vagy hoverre kötött animáció.
On Mouseout Action	Mi történik, amikor az egér elhagyja a modult.
Animate in Viewport	A nézetbe érkezéskor induló animáció, ahol az érték azt adja meg, hol indul.

Maszkolt szöveg (Supreme Mask Text)

A szöveg egy képpel van kimaszkolva: a betűk kitöltése a kép, így látványos hatást kapsz. Rövid kifejezéshez és címsorhoz való, hosszú törzsszövegre ne használd.

Beállítás	Mit csinál
Mask Text	A maszkolt szöveg.
Background Image	A betűket kitöltő kép.
Background Image Size	A kép mérete.
Background Image Position	A kép pozíciója.
Background Image Repeat	A kép ismétlődése.

A Design fülön a Heading HTML Tag választja ki a szöveg HTML címsor-elemét.

Fejléc animáció görgetésre (Supreme On Scroll Header Animation)

A fejléc megjelenése görgetés közben változik, ezért tapadós oldalfejlécekhez ad dinamikusabb élményt.

Beállítás	Mit csinál	Alapérték
Text	A megjelenített szöveg.
Animation Effect	A görgetésre induló animáció fajtája.
Animation start (viewport)	Hol kezdődik a görgetési animáció: kisebb érték korábban indul (feljebb az oldalon). A 100% a nézet alja. A legkisebb érték 5%, mert ez elkerüli, hogy egyes effektek görgetési tartománya megsérüljön.	100%