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

> A Divi 5 Supreme Image Text Reveal, Line Hover, Lottie, Mask Text és On Scroll Header Animation moduljainak beállításai.

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% |