# Képek egymásra rétegzése widget: áttekintés, lépcsőzetes elrendezés és diavetítés

> A rétegekből álló képkollázs felépítése százalékos pozíciókkal, a rétegbeállítások, az extra opciók és a diavetítés.

A **Képek egymásra rétegzése** (Image Cascading) widget képeket, szöveget és Lottie-animációt rak egymásra egyetlen blokkban, és mindegyiket pontosan oda teszi, ahová szeretnéd. Minden réteg külön pozícionálható asztali gépre, táblagépre és mobilra, így CSS írása nélkül építhetsz egymást átfedő hősképeket, kollázsokat és fényképkötegeket. A widget a Pro bővítmény része.

## Bekapcsolás és felépítés

1. A **The Plus Addons → Widgets** oldalon keress rá az **Image Cascading** névre, és kapcsold be.
2. Töltsd újra az Elementor szerkesztőjét, és húzd a widgetet az oldalra.

A **Tartalom** fülön három szakasz van: **Képek egymásra rétegzése** (a rétegek), **Képanimáció** és **Stílus**. A **Több lépcsőzetes szakasz hozzáadása** lista minden eleme egy réteg. A rétegek a widgeten belül abszolút pozícióval állnak, ezért átfedhetik egymást. Új widget egy elemmel indul. A szakasz tetején az **Import Presets** gomb kész elrendezést tölt be, amelyet utána szerkeszthetsz.

![A Képek egymásra rétegzése szakasz egy kinyitott réteggel](./kepek/kepek-media-kaszkad-reteg-panel.webp)

*A Képek egymásra rétegzése szakasz egy kinyitott réteggel* (https://minta-bolt.hu/wp-admin/post.php?post=180&action=elementor)

A képen a lista három rétege közül az első van kinyitva: fent a **Réteg pozíciója** az **Asztali gép**, **Tablet** és **Mobil** fülekkel, alatta a **Réteg típusa**, a **Képválasztó** és az **Extra opciók**.

## A lépcsőzetes elrendezés felépítése

1. A **Stílus** szakaszban állíts be **Minimális magasság**ot. A százalékos pozíciók ehhez a magassághoz viszonyítanak, ezért ezt állítsd be elsőnek.
2. Nyisd meg a **Képek egymásra rétegzése** szakaszt, és az első elemet a **Több lépcsőzetes szakasz hozzáadása** alatt.
3. A **Réteg típusa** maradjon **Kép**, és válaszd ki a fényképet a **Képválasztó** mezőben. A **Képfelbontás** azt a regisztrált méretet adja meg, amelyet használ.
4. A **Réteg pozíciója** alatt a **Bal (automatikus / %)** és a **Fent (automatikus / %)** kapcsolóval helyezd el a réteget. Mindkettő % értéken indul, ezért a csúszkáik már ott vannak. A **Jobb (automatikus / %)** és a **Lent (automatikus / %)** automatikusan indul, csak akkor kapcsold be, ha az adott szélhez akarod kötni a réteget.
5. A **Szélesség** adja meg, mennyi helyet foglal a réteg. Ez legnagyobb szélesség, a kép nem nő túl rajta.
6. Új réteghez kattints a lista alatti gombra (**Add Item**), és adj neki olyan **Bal** és **Felül** értéket, amely részben az előző fölé tolja.
7. Add hozzá az összes szükséges elemet, majd frissítsd az oldalt, és nézd meg a nyilvános oldalon.

A százalékok a widgetdobozhoz viszonyítanak, ezért ugyanaz az érték másik képernyőméreten másképp néz ki. Nyisd meg a **Tablet** és a **Mobil** fület, kapcsold be a **Reszponzív értékek** kapcsolót, és ezekre az eszközökre is add meg a pozíciókat.

![Három, átlósan egymásra csúszó fénykép a nyilvános oldalon](./kepek/kepek-media-kaszkad.webp)

*Három, átlósan egymásra csúszó fénykép a nyilvános oldalon* (https://minta-bolt.hu/km4-kaszkad/)

A képen három réteg látszik, 260 képpontos **Szélességgel**, a **Bal** és **Felül** értékük 5/8, 28/26 és 50/44 százalék.

## Réteg pozíciója

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Bal (automatikus / %)** | Megjeleníti a **Bal** csúszkát, -100 és 100 % között | % (be) |
| **Jobb (automatikus / %)** | Megjeleníti a **Jobb** csúszkát | Automatikus (ki) |
| **Fent (automatikus / %)** | Megjeleníti a **Felül** csúszkát | % (be) |
| **Lent (automatikus / %)** | Megjeleníti az **Alul** csúszkát | Automatikus (ki) |
| **Szélesség** | A réteg legnagyobb szélessége | 150 px |
| **Reszponzív értékek** | A **Tablet** és **Mobil** fülön. Amíg nem kapcsolod be, az eszköz az asztali pozíciót használja | Ki |

Ha egy szélt visszaállítasz automatikusra, az a szél eltűnik a réteg CSS-éből, nem nullára áll.

## Réteg típusa

A **Réteg típusa** dönti el, mi van a rétegben, és a réteg további beállításai ehhez igazodnak.

- **Kép**: a fájlt a **Képválasztó**ban, a méretet a **Képfelbontás** mezőben választod ki.
- **Szöveges tartalom**: a szöveget a **Szöveges tartalom** mezőbe írod. Részletek a [rétegtípusokat bemutató fejezetben](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kaszkad-retegek/).
- **Lottie**: a JSON-címet a **Lottie URL** mezőbe illeszted. Részletek ugyanott.

## Extra opciók

A rétegek alján az **Extra opciók** blokk hatásokat ad a réteghez. Ugyanezek a hatások a bővítmény más widgetjeiben is elérhetők.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Folyamatos hatás** | Folyamatosan ismétlődő animáció a rétegen, például lüktetés, lebegés, himbálás, forgás vagy Ken Burns-nagyítás | **Nincs** |
| **Kép alakjának maszkolása** | A réteget PNG- vagy SVG-alakra vágja | Ki |
| **Mágikus görgetés** | A réteg görgetés közben mozog, halványul, méretet vagy forgást vált | Ki |
| **Eszköztipp** | Buboréksúgót mutat, ha a látogató a réteg fölé viszi az egeret | Ki |
| **Speciális effektus** | Kétszínű felfedő fedőréteg a rétegen | Ki |
| **Parallax elmozdulás** | A réteg az egérmutatóval együtt elmozdul | Ki |
| **Billentés rámutatáskor** | 3D-s billentés, amíg az egér a réteg fölött van | Ki |
| **Link / felugró ablak** | A **Link** URL-t nyit, a **Felugró ablak** beágyazott tartalmat mutat egy lightboxban. Részletek a [rétegtípusokat bemutató fejezetben](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-kaszkad-retegek/) | üres |

A kép típusú rétegeknek **Normál** és **Rámutatás** fülük is van, rajtuk **Átfedés háttere**, **Átlátszatlanság**, **Transzformációs CSS** és **Keretsugár**, valamint egy **Reszponzív láthatóság** beállítás, amellyel a réteg az **Asztali gép**, a **Tablet** vagy a **Mobil** nézeten elrejthető.

## Stílus

A **Stílus** szakasz a widget egészére vonatkozik.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Minimális magasság** | A widgetdoboz magassága. A százalékos pozíciók ehhez viszonyítanak, ezért ezt állítsd be elsőnek | 400 |
| **Diavetítés** | A rétegeket egyenként hozza előre | Ki |
| **Diavetítés típusa** | **Kattintásra** vagy **Automatikus lejátszás** | **Kattintásra** |
| **Automatikus lejátszás időtartama** | A diák közti idő ezredmásodpercben | 4000 |
| **Túlcsorduló tartalom elrejtése** (asztali, táblagép, mobil) | A widgetből kilógó rétegek levágására való | Ki |

![A Stílus szakasz bekapcsolt diavetítéssel](./kepek/kepek-media-kaszkad-stilus-panel.webp)

*A Stílus szakasz bekapcsolt diavetítéssel* (https://minta-bolt.hu/wp-admin/post.php?post=180&action=elementor)

A képen a **Minimális magasság** 420, a **Diavetítés** be van kapcsolva, a **Diavetítés típusa** **Automatikus lejátszás**, az **Automatikus lejátszás időtartama** pedig 3000.

## Diavetítés

A diavetítés a már felépített, egymást átfedő képkötegből indul, és a rétegeket sorban az első helyre hozza, így az egész kollázs mozgásban marad. Legalább két rétegre van szükség, egyetlen elemnél nincs mit váltogatni.

1. Építsd meg a lépcsőzetes elrendezést, és helyezd el az összes réteget.
2. A **Stílus** szakaszban kapcsold be a **Diavetítés** kapcsolót.
3. Válassz **Diavetítés típusa** értéket: **Kattintásra** vagy **Automatikus lejátszás**.
4. Automatikus lejátszásnál állítsd be az **Automatikus lejátszás időtartama** értéket ezredmásodpercben. Az 1000 egy másodperc.
5. Frissítsd az oldalt, és nézd meg a nyilvános oldalon.

| Típus | Mi történik |
|---|---|
| **Kattintásra** | Addig nem mozdul semmi, amíg a látogató egy rétegre nem kattint. A rétegre kattintva az kissé elhalványul, előre kerül, és ott marad. Ez az alapérték |
| **Automatikus lejátszás** | A rétegek maguktól kerülnek előre egymás után, a lista sorrendjében. Egy rétegre kattintva az azonnal előre kerül. Az **Automatikus lejátszás időtartama** (alapérték 4000) csak ennél a típusnál látszik |

![A diavetítés automatikus lejátszás közben, két pillanatban](./kepek/kepek-media-kaszkad-show-1.webp)

*A diavetítés automatikus lejátszás közben, két pillanatban* (https://minta-bolt.hu/km4-kaszkad-show/)

![Ugyanaz a kollázs három másodperccel később, más sorrendben](./kepek/kepek-media-kaszkad-show-2.webp)

*Ugyanaz a kollázs három másodperccel később, más sorrendben* (https://minta-bolt.hu/km4-kaszkad-show/)

A két képen ugyanaz a három réteg látszik, a második kép készítésekor már más réteg van elöl.

A diavetítés viselkedése:

- A réteget valóban előre helyezi: a widget átrendezi a rétegeket, nem csak egy z-indexet állít. Az 1500 ezredmásodperces automatikus lejátszásnál a sorrend minden intervallumban magától forgott.
- Az elöl álló réteg `active` osztályt kap, így a sablonod egyéni CSS-ével formázhatod.
- Az automatikus lejátszás addig fut, amíg az oldal nyitva van: nincs szünet egérmutatóra, és egy kör után sem áll le.
- A forgás nem fut a szerkesztő vásznán, csak a közzétett oldalon.

## Korlátozások

- A Lottie réteg csak akkor játszik, ha a lista első eleme. Bármely későbbi helyen a lejátszó szkript nem töltődik be, és semmi sem rajzolódik ki. Ezt két, egyébként azonos tesztoldalon is láttuk.
- A **Túlcsorduló tartalom elrejtése** (asztali, táblagép, mobil) nem hat az Elementor tárolókkal épített oldalon: a szkript régi típusú `section` burkolót keres, a tárolós oldalon pedig nincs ilyen. A kilógó tartalmat a szülőtárolón vágd le a **Haladó → Elrendezés → Túlcsordulás** beállítással.
- A rétegek abszolút pozícióval állnak, ezért a widget nem nő meg a rétegekhez. Ha egy réteg le van vágva, növeld a **Minimális magasság**ot.
- A százalékok a widgetdobozhoz viszonyítanak, ezért egy asztali gépen jól álló réteg telefonon rossz helyre kerülhet. Kapcsold be a **Reszponzív értékek** kapcsolót, és állítsd be a táblagépes és mobilos pozíciókat külön.
- Nincs z-index beállítás. Egy réteg előre vagy hátra mozgatásához húzd az elemet a lista másik helyére: az utolsó elem van legfelül.
- A diavetítésnél a kattintásos típusban a lista utolsó rétege nem hozható előre, mert már az van elöl. A szöveges rétegek nem vesznek részt a forgásban, helyükön maradnak. Nincsenek nyilak, pontok vagy szünet gomb; ilyenhez karusszel widgetet használj.

## Hibaelhárítás

**A widget üres az oldalon.** Állíts be **Minimális magasság**ot a **Stílus** szakaszban. Magasság nélkül a doboz összeesik, és az abszolút pozíciójú rétegeknek nincs hova kerülniük.

**A rétegek mind egymáson vannak.** Minden elemnek saját **Bal** és **Felül** érték kell. Az új elem az alapértékeket kapja, ezért a következő felvétele előtt módosítsd őket.

**Egy réteg eltűnik mobilon.** Nézd meg a réteg **Reszponzív láthatóság** beállítását és a **Réteg pozíciója** **Mobil** fülét.

**A diavetítés nem mozog.** Ellenőrizd, hogy legalább két réteg van-e, hogy a **Diavetítés** be van-e kapcsolva, és hogy a közzétett oldalt nézed-e, nem a szerkesztőt.

**Túl gyors vagy túl lassú a váltás.** Az **Automatikus lejátszás időtartama** ezredmásodpercben van: a 4000 négy másodperc.

**Az egyik kép sosem kerül előre.** Ellenőrizd, hogy az **Kép** vagy **Lottie** típusú-e, a szöveges rétegek kimaradnak.