Képek egymásra rétegzése widget: áttekintés, lépcsőzetes elrendezés és 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.

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ágot. 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.

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.
• 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	ü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

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

https://minta-bolt.hu/km4-kaszkad-show/

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ágot.
• 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ágot 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.