Képek egymásra rétegzése: szöveg, Lottie, felugró ablak és képanimáció

A Képek egymásra rétegzése widget alapjait az áttekintő fejezet írja le. Itt a további rétegtípusok, a felugró ablak és a képanimáció következik. A widget a Pro bővítmény része, és az Image Cascading kapcsolóval kapcsolható be a The Plus Addons → Widgets oldalon.

Szöveges réteg

Egy rövid sor, például egy ár, egy évszak vagy egy név a képek közé téve tervezett látványt ad a kollázsnak. A szöveg ugyanúgy réteg, mint a képek: ugyanazokkal a csúszkákkal pozícionálod, és ugyanabban a veremben áll.

1. A Képek egymásra rétegzése szakaszban kattints a lista alatti gombra (Add Item) új réteghez, vagy nyiss meg egy meglévőt.
2. A Réteg típusa legyen Szöveges tartalom.
3. Írd a sort a Szöveges tartalom mezőbe.
4. A Réteg pozíciója alatt a Bal (automatikus / %), Fent (automatikus / %) és Szélesség beállítással helyezd el, pont úgy, mint a képet.
5. Frissítsd az oldalt, és nézd meg a nyilvános oldalon.

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

A képen a „Kézzel készült kerámia” szöveg a két kép alatt áll, a Szöveg színe sötétkék.

A szöveg formázása

A szöveges réteg a képbeállítások helyett a saját beállításait kapja:

Beállítás	Mit csinál	Alapérték
Szöveg tipográfiája	Betűtípus, méret, vastagság, sormagasság, betűköz	A sablonból öröklődik
Szöveg színe	A szöveg színe	Örökölt
Szöveg színe rámutatáskor	A szín, amíg az egér a réteg fölött van	üres
Háttér típusa	A szöveg mögötti háttér: egyszínű, kép vagy színátmenet	Nincs
Keretsugár	A háttér sarkainak lekerekítése	üres
Szövegárnyék	CSS-szövegárnyék a soron	Nincs
CSS-háttérszűrő	Csak szöveges rétegen. A szöveg mögötti terület Szélességét, Magasságát, Elmosását és Szürkeárnyalatos értékét állítja, így az alatta lévő fénykép elmosódik vagy színtelenedik	Ki

Hogyan viselkedik

• Az Extra opciók többi eleme (Folyamatos hatás, Kép alakjának maszkolása, Mágikus görgetés, Eszköztipp, Speciális effektus, Parallax elmozdulás, Billentés rámutatáskor, Link / felugró ablak) a szöveges rétegen is elérhető, nem csak a képen.
• A Szélesség legnagyobb szélesség, ezért egy hosszú sor a rétegen belül tördelődik, és nem szélesíti a réteget.

Korlátozások

• A Szöveges tartalom egyszerű, egysoros mező. Nincs szövegszerkesztő, sortörés és címsorcímke, ezért a szöveg a keresőoptimalizálás és a képernyőolvasók számára nem címsor.
• A szöveges rétegek nem vesznek részt a Diavetítés forgásában: a rétegeket váltó szkript csak a kép és a Lottie rétegeket veszi fel.
• A csak képekhez tartozó beállítások (Átfedés háttere, Átlátszatlanság, Transzformációs CSS és Reszponzív láthatóság) szöveges rétegen nem látszanak.

Hibaelhárítás

A szöveget elrejti egy fénykép. A rétegeket a lista sorrendjében rajzolja a widget, és az utolsó elem van legfelül. Húzd a szöveges elemet a képek alá a listában.

A szöveg olvashatatlan egy zsúfolt fotón. Adj neki Háttér típusa értéket, vagy kapcsold be a CSS-háttérszűrőt, és adj hozzá Elmosást, hogy a mögötte lévő kép elmosódjon.

A sor kilóg a widgetből mobilon. Nyisd meg a Réteg pozíciója Mobil fülét, kapcsold be a Reszponzív értékek kapcsolót, és adj a rétegnek saját szélességet és pozíciót.

Lottie réteg

A Lottie egy kis JSON-fájl, amely éles vektoranimációként játszik bármilyen méretben, ezért jól illik a képkollázshoz.

Szükséged van az animáció JSON-címére. A LottieFiles oldalán nyisd meg az animációt, menj a Handoff fülre, kapcsold be az Enable asset CDN lehetőséget, és válaszd a Lottie JSON formátumot a hivatkozáshoz. A saját tárhelyedről is működik, ha a cím .json-ra végződik.

Lottie réteg hozzáadása

1. 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. A pozíció számít, lásd lent.
2. A Réteg típusa legyen Lottie.
3. Illeszd a JSON-címet a Lottie URL mezőbe.
4. Helyezd el a réteget a Bal (automatikus / %), Fent (automatikus / %) és Szélesség beállítással, mint bármely másikat.
5. Frissítsd az oldalt, és nézd meg az animációt a nyilvános oldalon.

A Lottie réteg legyen az első. A Lottie réteg csak akkor játszik, ha a Több lépcsőzetes szakasz hozzáadása lista első eleme. Bármely későbbi helyen a lejátszó szkript nem töltődik be, és semmi sem rajzolódik ki.

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

A képen a Lottie-animáció, a 220 × 220 képpontos kék forgó körív a fénykép mellett áll. A Lottie réteg a lista első eleme.

Az animáció szabályozása

A méret- és lejátszási beállítások a Stílus fül Lottie szakaszában vannak. A widget egészére vonatkoznak, ezért minden Lottie réteg ugyanazokat az értékeket használja.

Beállítás	Mit csinál	Alapérték
Szélesség / Magasság	A doboz, amelybe az animáció rajzolódik, képpontban. Állítsd be mindkettőt: üresen a widget 100 képpontra esik vissza	üres (100 px)
Sebesség	A lejátszás sebességének szorzója	1
Animáció ismétlése	Ismétli az animációt ahelyett, hogy egyszer lejátszaná	Be
Rámutatáskor megjelenő animáció	Csak akkor játszik, ha az egér a réteg fölött van, magától nem	Ki
CSS Filters	Elmosás, fényerő, kontraszt, telítettség és színárnyalat, normál és rámutatásos állapotra	Nincs

Korlátozások

• A Lottie réteg csak a lista első elemeként játszik.
• A Lottie stílusbeállításai a widgetre vonatkoznak, nem rétegenként, ezért két Lottie réteg ugyanabban a widgetben nem lehet különböző méretű vagy sebességű.
• A címnek .json-ra kell végződnie. Minden más a réteg helyén az „Opps!! Please Enter Only JSON File Extension.” üzenetet írja ki.
• A fájlt onnan tölti le, ahová a hivatkozás mutat, ezért egy lassú vagy tiltott CDN miatt az animáció meg sem jelenik.

Hibaelhárítás

Nem rajzolódik ki semmi, ahol a Lottie-nak lennie kellene. Ellenőrizd, hogy a Lottie réteg a lista első eleme-e, és hogy a Szélesség és Magasság be van-e állítva a Stílus fül Lottie szakaszában.

Az „Opps!! Please Enter Only JSON File Extension” üzenet látszik. A hivatkozás nem JSON-fájl. A Lottie JSON-címet a LottieFiles Handoff füléről másold ki, ne az oldal címét vagy egy GIF-exportot.

Az animáció egy apró négyzet. A Szélesség és a Magasság üres, ezért a widget a 100 képpontos tartalékot használja. Állítsd be mindkettőt.

Felugró ablak vagy link a rétegen

Egy képkollázs jó hely a plusz részletekhez: a látogató rákattint az egyik fotóra, és egy videó, egy térkép vagy egy nagyobb kép nyílik meg az oldal fölött. A widget minden rétege ezt külön tudja a Link / felugró ablak beállítással.

Szükséged van a megjelenítendő tartalom URL-jére: egy YouTube- vagy Vimeo-videó oldalára, egy Google Maps beágyazási címre vagy egy kép közvetlen hivatkozására.

Felugró ablak hozzáadása egy réteghez

1. Nyisd meg a Képek egymásra rétegzése szakaszt, és azt az elemet, amelyet kattinthatóvá szeretnél tenni.
2. Állítsd be a Réteg típusa értéket, és add meg a tartalmát a szokásos módon. A beállítás minden elem alján ott van, bármilyen a réteg típusa. Mi egy Kép rétegen próbáltuk ki.
3. Görgess a Link / felugró ablak mezőhöz, és válaszd a Felugró ablak lehetőséget.
4. Illeszd az URL-t a megjelenő Felugró ablak tartalma mezőbe.
5. Frissítsd az oldalt, és kattints a rétegre a nyilvános oldalon.

A réteg linkké válik, és kattintásra az oldal elsötétül, a tartalom pedig egy lightboxban nyílik meg, bezárás gombbal.

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

A képen a lightbox a megnyitott képet mutatja, alatta a bezárás gomb, a háttérben a sötétített kollázs.

Hogyan viselkedik

• Minden elemnek saját Link / felugró ablak beállítása van, ezért több rétegnek adhatsz különböző felugró ablakot, a többi pedig maradhat sima kép.
• A lightbox az URL alapján dönti el, mit tegyen: a videóoldalból beágyazott lejátszó lesz, a kép URL-jét teljes méretben mutatja, minden mást pedig keretben tölt be.
• A látogató a lightbox sarkában lévő bezárás gombbal zárja be.
• A Link a másik lehetőség ugyanabban a legördülőben. Ez a réteget hagyományos linkké teszi, a szokásos Link mezővel és az új lapon nyitás és nofollow kapcsolókkal.

Korlátozások

• A Felugró ablak tartalma csak URL-t fogad el. Nem választható Elementor-sablon vagy mentett felugró ablak a lightboxhoz.
• Egy réteg lehet link vagy felugró ablak, a kettő együtt nem.
• Egyes weboldalak nem engedik, hogy keretben jelenjenek meg. Ha a lightbox üresen nyílik meg, a cél blokkolja a beágyazást, használd a hivatalos beágyazási URL-jét.

Hibaelhárítás

A rétegre kattintva nem történik semmi. Ellenőrizd, hogy a Link / felugró ablak Felugró ablakra van-e állítva, és hogy a Felugró ablak tartalma ki van-e töltve. Üres mezőnél a réteg nem kattintható.

A lightbox megnyílik, de üres marad. Az URL valószínűleg nem beágyazható. YouTube-hoz a hagyományos megtekintési URL-t használd, Google Mapshez pedig a térkép Megosztás → Térkép beágyazása paneljén kapott URL-t.

A felugró ablak a kollázs mögött nyílik meg. Nézd meg, hogy a szülőtárolónak vagy egy ragadós fejlécnek nincs-e egyéni z-indexe.

Réteg maszkolása egyedi alakra

A maszkolás a téglalap alakú fotót alakzaton keresztül mutatja: körön, csillagon, ecsetvonáson vagy logósziluetten. A kollázsban ez akadályozza meg, hogy a rétegek dobozkupacnak látsszanak. A widget minden rétegének saját Kép alakjának maszkolása kapcsolója van, ezért az egyik réteget maszkolhatod, a többi maradhat négyszögletes.

Szükséged van az alakzatra fájlként: átlátszó hátterű PNG-re vagy SVG-re. A fájl átlátszatlan része marad látható, minden átlátszó levágódik.

Egy réteg maszkolása

1. A Képek egymásra rétegzése szakaszban nyisd meg a maszkolni kívánt elemet.
2. Állítsd be a Réteg típusa értéket, és add meg a tartalmát. A kapcsoló a Kép és a Szöveges tartalom rétegen érhető el, mi egy képen próbáltuk ki.
3. Görgess az Extra opciók részhez, és kapcsold be a Kép alakjának maszkolása kapcsolót.
4. A megjelenő Maszkolt kép mezőben töltsd fel vagy válaszd ki az alakzatot.
5. Frissítsd az oldalt, és nézd meg a nyilvános oldalon.

https://minta-bolt.hu/km5-kaszkad-maszk/

A képen a bal oldali réteg nincs maszkolva, a jobb oldali csillag alakú PNG-vel van maszkolva, és a Kép árnyéka mezőbe írt árnyék követi a csillag körvonalát.

Kép árnyéka

A Maszkolt kép alatti Kép árnyéka egyszerű szövegmező, nem színválasztó. Írj bele CSS árnyékértéket, például 6px 8px 12px rgba(0,0,0,0.55). A widget CSS drop-shadow() szűrőként alkalmazza, amely a maszkolt körvonalat követi, ezért az árnyék a csillag vagy az ecsetvonás alakját rajzolja ki, nem körülötte egy téglalapot. Éppen ezért van itt, nem egy hagyományos dobozárnyék.

Hogyan viselkedik a maszk

• A maszk kitölti a réteget, ezért az a fotótól eltérő arányú alakzat torzul. Vágd a maszkfájlt nagyjából a kép arányára.
• A maszkolás rétegenként állítható: bekapcsolod az egyiken, a többi érintetlen marad.
• A maszkfájlból csak az alakzat számít, a színeit figyelmen kívül hagyja, csak az átlátszatlan és az átlátszó terület különbsége fontos.

Maszk korlátozásai

• Nincs méret-, pozíció- és ismétlésvezérlő a maszkhoz, és beépített alakzattár sincs: a fájlt te adod meg.
• A Kép árnyéka ellenőrizetlen szöveg: elírásnál nincs árnyék és figyelmeztetés sem.
• A puha, félig átlátszó szélű maszk a rétegnek is puha szélt ad, ami nagy méretnél elmosódottnak látszhat. Éles alakzathoz kemény szélű fájlt használj.

Maszk hibaelhárítása

A réteg teljesen eltűnt. A maszkfájlnak nincs átlátszatlan területe: általában JPG, amelyben egyáltalán nincs átlátszóság, vagy kitöltött útvonal nélküli SVG. Használj átlátszó hátterű PNG-t.

Az alakzat összenyomódott. A maszk a réteg dobozához nyúlik. Készítsd a maszkfájlt a kép alakjára, vagy állítsd a réteg Szélesség értékét.

Nem történt semmi. Ellenőrizd, hogy a Kép alakjának maszkolása be van-e kapcsolva, és hogy a Maszkolt kép mezőben van-e fájl. Bekapcsolt kapcsolónál és üres mezőnél a réteg érintetlen marad.

Képanimáció

Egy kollázs, amely az érkezéskor magától áll össze, tudatos hatást kelt: a fotók becsúsznak, felúsznak, és a helyükre állnak. A widget Képanimáció szakasza GSAP-alapú animációt ad a rétegek képeihez, egyéni kód nélkül.

Építsd fel előbb a kollázst, mert az animáció a Több lépcsőzetes szakasz hozzáadása listában már meglévő képeken fut.

Az animáció bekapcsolása

1. A Tartalom fülön nyisd meg a Képanimáció szakaszt, és kapcsold be az Animáció engedélyezése kapcsolót.
2. Az Animáció mezőben válassz Alap értéket, ha a mozgást itt a widgetben állítod, vagy Globális értéket, ha egy, a webhelybeállításokban egyszer már megadott animációt használnál újra.
3. Válassz Indítási típus értéket: Betöltéskor, Görgetésre vagy Rámutatáskor.
4. Nyisd meg a Transzformációs hatások beállítást, és add meg a kezdőeltolást, a dőlést, a méretet, a forgatást, az átlátszatlanságot és a transzformációs origót: ezekből az értékekből indul az animáció.
5. Az Animációs vezérlők a hosszt és a késleltetést adják, az Animációs effektek a gyorsulási görbét.
6. Az Animáció lejátszása sor Animáció előnézete gombjával lejátszhatod a szerkesztőben, majd frissítsd az oldalt, és nézd meg a nyilvános oldalon.

https://minta-bolt.hu/wp-admin/post.php?post=180&action=elementor

A képen az Animáció engedélyezése be van kapcsolva, az Animáció Alap, az Indítási típus Betöltéskor, alatta a Transzformációs hatások, az Animációs vezérlők, az Animációs effektek (Power3) és az Animáció előnézete gomb.

A beállítások

Beállítás	Mit csinál	Alapérték
Animáció engedélyezése	Az egész szakaszt bekapcsolja	Ki
Animáció	Alap vagy Globális	Alap
Indítási típus	A Betöltéskor egyszer játszik, az oldal megnyitásakor. A Görgetésre akkor, amikor a widget látótérbe kerül. A Rámutatáskor akkor, ha az egér fölötte van	Betöltéskor
Transzformációs hatások	A kezdőállapot: X és Y eltolás, dőlés, méret, forgatás, átlátszatlanság, transzformációs origó és egy elhagyható vágási maszkos felfedés	Nincs eltolás, 1-es méret, 1-es átlátszatlanság
Animációs vezérlők	Időtartam és késleltetés másodpercben	1,2 s, késleltetés 0,3 s
Animációs effektek	A gyorsulási görbe: Power1, Power2, Power3, Elastic, Back, Bounce vagy nincs	Power3

Globális animáció

A Globális egyszer megadott animációt használ újra, így egy egész webhely ugyanazt a belépést kaphatja. Előbb hozd létre a webhelybeállításokban, majd válaszd ki a Globális animáció legördülőből, amely a transzformációs beállítások helyére kerül.

Hogyan viselkedik

• Az animáció a rétegekben lévő képeket mozgatja. A tesztben a réteg képe 160 képponttal balra és teljesen átlátszatlanul indult, és nagyjából 1,4 másodperc alatt, lassuló mozgással a helyére állt.
• Egy beállításcsoport a widget összes rétegére vonatkozik, nincs rétegenkénti animáció.
• A nyilvános oldalon fut. Az Animáció előnézete gomb azért van, mert a szerkesztővászon nem a megítélés helye.

Korlátozások

• A beállítások widgetenkéntiek, nem rétegenkéntiek, ezért a rétegek nem időzíthetők eltolva, és nem kaphatnak különböző mozgást ebből a szakaszból.
• Mivel a rétegek képeit animálja, a Szöveges tartalom rétegnek nincs mit mozgatnia.
• A Betöltéskor oldalbetöltésenként egyszer játszik le. Ismétlés vagy visszafordítás nincs.
• A Globális értékhez előbb léteznie kell az animációnak a webhelybeállításokban, addig a legördülő üres.

Hibaelhárítás

Nem animál semmi. Ellenőrizd, hogy az Animáció engedélyezése be van-e kapcsolva, és hogy a Transzformációs hatások tényleg változtat-e valamit: eltolás nélkül, 1-es méretnél és 1-es átlátszatlanságnál a kép onnan animál, ahol már van, ezért nincs mit látni.

Az animáció véget ér, mielőtt megnézném. Állítsd az Indítási típus értékét Görgetésre, hogy a widget látótérbe kerülésekor induljon, vagy növeld a késleltetést az Animációs vezérlők alatt.

A Globális animáció legördülő üres. Még nem hoztál létre globális képanimációt. Előbb add hozzá a webhelybeállításokban.