Előtöltő: képes, ikonos, szöveges és Lottie betöltőképernyő

Az Előtöltő widget négy gyakori típusát itt írjuk le: a képet, az ikont, a szöveget és a Lottie-animációt. Mindegyikhez kell a két bekapcsolás, amelyet az áttekintő fejezet ír le: a widgetet a The Plus Addons → Widgets oldalon kapcsold be, és a bővítmény Extra Options → Settings oldalának Design fülén a Pre Loader kártyán állítsd Entire Sitera, majd mentsd. Amíg ez nincs meg, a nyilvános oldalon semmi sem jelenik meg. A widget a Pro bővítmény része.

Az Előtöltő widgetet az oldalra vagy egy fejléc- vagy lábléc-sablonba add, a Tartalom fülön nyisd meg a Betöltésjelző lista elemét, és a Kiválasztás mezőben válaszd ki a típust.

Kép

A képes előtöltő a logóddal vagy bármely képpel takarja le az oldalt, amíg be nem töltött.

1. Add az Előtöltő widgetet az oldalhoz, vagy fejléc- vagy lábléc-sablonhoz, ha mindenhol kell.
2. A Tartalom fülön nyisd meg a Betöltésjelző lista elemét.
3. A Kiválasztás maradjon Képen (ez az alapérték).
4. A Kép mezőben válaszd ki a fájlt.
5. Frissítsd az oldalt, és nyisd meg új fülön.

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

A képen a Kiválasztás Képre van állítva, alatta a kiválasztott logó és a Betöltésjelző a képen kapcsoló.

A kép ezután a teljes képernyős fedőréteg közepén áll, amíg az oldal be nem töltött.

Kép kitöltése a betöltéssel

Kapcsold be a Betöltésjelző a képen kapcsolót ugyanabban az elemben. A kép ekkor kétszer rajzolódik: alatta egy halványított példány, felette egy éles, amely balról jobbra fokozatosan feltárul a betöltés előrehaladtával.

https://minta-bolt.hu/km3-eloto-kep/

A képen a logó bal fele már éles, a jobb fele még halvány.

A tesztoldalon a feltárt éles rész az oldal megnyitása után közvetlenül 15 képpont széles volt, két másodperc múlva 179, négy másodperc múlva 527 képpont a 640 képpont széles képen.

Stílus

Beállítás	Mit csinál	Hol
Maximális szélesség, Margó, szegély, keretsugár	A kép mérete és kerete	Stílus → Kép
Képes betöltésjelző → Átlátszatlanság (normál)	Mennyire halvány a még be nem töltött rész	Stílus → Kép
Képes betöltésjelző → Átlátszatlanság (kitöltött)	Mennyire tömör a már betöltött rész	Stílus → Kép
Doboz → Teljes háttér	Az előtöltő mögötti színt kellene állítania. A kipróbálásnál nem volt hatása	Stílus → Doboz

Hogyan viselkedik

• Az előtöltő rögzített, teljes képernyős fedőréteg z-index: 12345 értékkel. A fejlécet is eltakarja, ha nem zárod ki; ezt az Elsőként betöltendő szakasz kezeli.
• A kitöltés az oldal tényleges betöltési idejéből számolódik, ezért az oldallal együtt ér véget.
• Az Egyéb opció → Betöltési idő → Minimum tovább tartja az előtöltőt.
• A Láthatóság a háttérfelületen csak statikus előnézetet ad a szerkesztőben, a közzétett oldalon semmit sem változtat.

Korlátozások

• A nyilvános oldalon addig semmi sem történik, amíg a webhelyszintű Pre Loader beállítás nincs bekapcsolva. A stíluslap és a szkript addig be sem töltődik.
• Nincs külön mobilkép: minden képernyőméreten ugyanaz a fájl jelenik meg.
• A Doboz → Teljes háttér a kipróbálásnál hatástalan volt, a betöltőképernyő fehér maradt. A widget saját stíluslapja az Elementor generált CSS-e után töltődik be, ezért néhány, a widgetre nem szűkített szabályú vezérlő felülíródik.

Hibaelhárítás

Az oldal előtöltő nélkül töltődik. Ellenőrizd a webhelyszintű Pre Loader beállítást. Ha Specific Page/Post módban van, és az oldal azonosítója nincs a listában, semmi sem töltődik be.

A kép azonnal kitöltődik. Egy gyors oldal hamarabb betölt, mint hogy a kitöltést látnád. Az Egyéb opció → Betöltési idő → Minimum értékével és egy Idő (másodperc) beállításával tartsd a képernyőn.

A kép túl nagy. Állítsd be a Maximális szélességet a Stílus → Kép alatt.

Ikon

Az ikonos előtöltő egyetlen ikont mutat a képernyő közepén. Ez a legkönnyebb típus, mert nincs letöltendő képfájl. Az Elementor ikonkönyvtárából bármelyik ikont kiválaszthatod, vagy feltölthetsz saját SVG-t.

1. Add az Előtöltő widgetet az oldalhoz vagy egy fejléc- vagy lábléc-sablonhoz.
2. A Tartalom fülön nyisd meg a Betöltésjelző lista elemét.
3. A Kiválasztás legyen Ikon.
4. Az Ikon mezőben válassz ikont, vagy tölts fel SVG-t.
5. A Stílus → Ikon alatt állíts be Méretet. Ezt közzététel előtt tedd meg, lásd az alábbi megjegyzést.
6. Frissítsd az oldalt, és nyisd meg.

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

A képen az Ikon mezőben a kiválasztott ikon látszik.

Állítsd be a Méretet. A Méret mezőnek nincs alapértéke. Az Elementor az ikonokat beágyazott SVG-ként rajzolja ki, a méret nélküli SVG szélessége pedig 0, így az ikon az oldalon van, de láthatatlan. Méret nélkül 0 képpont szélességet mértünk; a beállítása megoldja a problémát.

https://minta-bolt.hu/km3-eloto-ikon/

A képen a kiválasztott ikon a képernyő közepén áll, a Stílus → Ikon alatt beállított mérettel és színnel.

Stílus

Mindegyik a Stílus fülön az Ikon szakaszban van.

Beállítás	Mit csinál
Méret	Az ikon szélessége és magassága. Nincs alapértéke, állítsd be.
Szín	Az ikon színe (az SVG kitöltése)
Háttér típusa	Klasszikus vagy színátmenetes háttér az ikon mögött
Padding, Margó	Az ikon körüli hely
Szegély típusa, Keretsugár	Keret vagy kör az ikon körül

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

A képen a Méret 80, a Szín kék, alatta a háttér, a szegély és a keretsugár beállításai.

Hogyan viselkedik

• Az ikon egy rögzített, teljes képernyős fedőréteg közepén áll, z-index: 12345 értékkel.
• Az ikon nem forog: a widget nem ad hozzá animációt. Ha mozgást akarsz, válassz animált típust (Lottie vagy Egyéni kód), vagy adj az ikonhoz saját CSS-animációt.
• Az előtöltő az oldal betöltése után körülbelül egy másodperccel tűnik el.

Korlátozások

• A Méret nem rendelkezik alapértékkel, ezért egy frissen felvett ikonos előtöltő semmit sem mutat.
• Ehhez a típushoz nincs beépített forgás, lüktetés vagy más mozgás.
• A nyilvános oldalon semmi sem jelenik meg, amíg a webhelyszintű Pre Loader beállítás nincs bekapcsolva.

Hibaelhárítás

A képernyő üres, miközben az oldal betölt. A fedőréteg ott van, de az ikonnak nincs mérete. Állítsd be a Stílus → Ikon → Méret értékét.

Forgó betöltőt szeretnék. Állítsd a Kiválasztás mezőt Előre meghatározottra, és válassz a tizenhárom kész animáció közül az 1. animáció és a 13. animáció között.

Egyáltalán nem jelenik meg semmi. Kapcsold be a webhelyszintű Pre Loader beállítást (Extra Options → Settings → Design).

Szöveg

A szöveges előtöltő egy szót, például „Betöltés…” mutat a képernyő közepén az oldal betöltése alatt. Nem kell hozzá se kép, se ikonkönyvtár. A szót állóan is megjelenítheti, vagy a színét balról jobbra fokozatosan kitöltheti, ahogy az oldal megérkezik.

1. Add az Előtöltő widgetet az oldalhoz vagy egy fejléc- vagy lábléc-sablonhoz.
2. A Tartalom fülön nyisd meg a Betöltésjelző lista elemét.
3. A Kiválasztás legyen Szöveges tartalom.
4. A Tartalom mezőbe írd a szavadat. Alapból „Betöltés…” áll benne.
5. A betűtípust a Stílus → Szöveg alatt állítsd be, majd frissítsd az oldalt.

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

A képen a Tartalom mező „Betöltés…” szöveggel és a Betöltésjelző a szövegen kapcsolóval látszik.

Szöveg kitöltése a betöltéssel

1. Kapcsold be a Betöltésjelző a szövegen kapcsolót ugyanabban az elemben.
2. A Stílus → Szöveg alatt állítsd be a Színt: ez a szó színe a kitöltés előtt.
3. Ugyanott, a Szöveges betöltésjelző alcím alatt állítsd be a Színt: ez a kitöltőszín. Válassz olyat, amely kiemelkedik, lásd a lenti megjegyzést.
4. Frissítsd az oldalt, és nyisd meg.

A tesztoldalon egy 91 képpont széles szó kitöltött része az oldal megnyitása után közvetlenül 2 képpont volt, két másodperc múlva 24, négy másodperc múlva 72.

Állítsd be a kitöltőszínt. Beállítás nélkül a kitöltés színe fehér lesz. A fehér alapú előtöltőn ez a kitöltést láthatatlanná teszi, a szó pedig mintha eltűnne. A tesztben egy meleg sárga szín beállítása láthatóvá tette a kitöltést.

https://minta-bolt.hu/km3-eloto-szoveg/

A képen a szó a kitöltés elején jár, az első betű már sárga.

Stílus

Beállítás	Mit csinál	Hol
Tipográfia	A szó betűtípusa, mérete és vastagsága	Stílus → Szöveg
Szín	A szó alapszíne	Stílus → Szöveg
Szöveges betöltésjelző → Szín	A kitöltőszín	Stílus → Szöveg
Padding, Margó, Szegély típusa, Keretsugár	A szó körüli hely és keret	Stílus → Szöveg
Teljes háttér	Az előtöltő mögötti színt kellene állítania. A kipróbálásnál nem volt hatása	Stílus → Doboz

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

A képen a Tipográfia, a Szín, a háttér és a Szöveges betöltésjelző Színe látszik.

Hogyan viselkedik

• Ha a Betöltésjelző a szövegen ki van kapcsolva, a szó egyszer jelenik meg, és nem mozog.
• Bekapcsolva a szó kétszer rajzolódik: alul egy alappéldány, rajta egy levágott kitöltött példány, amelynek szélessége a betöltéssel nő. Ezért szerepel a szó kétszer az oldal szövegében.
• A kitöltés az oldal tényleges betöltési idejéből számolódik, ezért az oldallal együtt ér véget. Az Egyéb opció → Betöltési idő → Minimum megnyújtja.
• A szöveg egyszerű szöveg: a Tartalom mezőbe írt HTML nem jelenik meg formázottan, hanem kódolva.

Korlátozások

• A kitöltőszínnek nincs használható alapértéke: beállításig fehér.
• A Stílus → Szöveg → Szín, az alapszín a kipróbálásnál nem változtatta meg a szót: a widget saját stíluslapja az Elementoré után töltődik be, és fehéren tartja a szót. A kitöltőszín ettől független, és működik.
• A Doboz → Teljes háttér sem hatott: a betöltőképernyő fehér maradt.
• Ehhez a típushoz nincs betűnkénti vagy írógépszerű animáció, a kitöltés egyetlen balról jobbra húzott sáv.
• A nyilvános oldalon semmi sem jelenik meg, amíg a webhelyszintű Pre Loader beállítás nincs bekapcsolva.

Hibaelhárítás

A szó kifakul, ahelyett hogy kitöltődne. A kitöltés fehér a fehér háttéren. Állítsd be a Stílus → Szöveg → Szöveges betöltésjelző → Szín értékét.

A szó kétszer látszik. Ez a kitöltött példány. Pontosan az alappéldányra kerül, ezért csak akkor látszik duplának, ha az előtöltő saját CSS-e nem töltődött be: ellenőrizd a webhelyszintű Pre Loader beállítást.

A kitöltés véget ér, mielőtt látnám. Állítsd az Egyéb opció → Betöltési idő értékét Minimumra, és adj meg egy Idő (másodperc) értéket.

Lottie

A Lottie-fájlok egy kis JSON-fájlban tárolt vektoranimációk. Bármilyen méretben élesek, és sokkal kisebbek, mint egy GIF vagy videó, ezért jól illenek betöltőképernyőre. Az Előtöltő widget közvetlenül a Lottie-fájl címéről játssza le az animációt, saját szélességgel, magassággal, sebességgel és ismétlési beállítással.

Előfeltétel a Load Lottie JS in Pre Loader kapcsoló bekapcsolása ugyanabban a Pre Loader beállító ablakban, ahol a webhelyszintű Pre Loader értéket adod meg. Enélkül a Lottie-lejátszó szkript sosem töltődik be.

Lottie-fájl címének megszerzése

1. Nyisd meg a LottieFiles oldalát, és jelentkezz be (az ingyenes fiók elég).
2. Válassz egy animációt.
3. Másold ki az animáció JSON-címét a fájl oldaláról.

A címnek .json kiterjesztéssel kell végződnie. Bármilyen más fájl, a .lottie csomag is, megállítja a widgetet: az egész előtöltő eltűnik, és helyette az oldalon az „Opps!! Please Enter Only JSON File Extension.” üzenet jelenik meg.

Lottie-előtöltő hozzáadása

1. Add az Előtöltő widgetet az oldalhoz vagy egy fejléc- vagy lábléc-sablonhoz.
2. A Tartalom fülön nyisd meg a Betöltésjelző lista elemét.
3. A Kiválasztás legyen Lottie.
4. Illeszd a JSON-címet a Lottie URL mezőbe.
5. Állítsd be a Szélesség és a Magasság értékét: mindkettő 300 képpontról indul, és 700-ig adható meg.
6. Frissítsd az oldalt, és nyisd meg.

A nyilvános oldalon az animáció a betöltőképernyő közepén játszik.

https://minta-bolt.hu/km3-eloto-lottie/

A képen a forgó, körív alakú Lottie-animáció a fehér betöltőképernyő közepén áll.

Lottie-beállítások

Beállítás	Mit csinál	Tartomány	Alapérték
Lottie URL	Az animáció JSON-fájlja		üres
Szélesség	A lejátszó szélessége képpontban	1 és 700 között	300
Magasság	A lejátszó magassága képpontban	1 és 700 között	300
Sebesség	A lejátszás sebességének szorzója	1 és 10 között	1
Animáció ismétlése	Ismétli az animációt, amíg az oldal be nem töltött	be / ki	be

Hogyan viselkedik

• Az animáció magától indul, és az Animáció ismétlése bekapcsolt állapotában addig ismétlődik, amíg az oldal be nem töltött.
• A méretet csak a Szélesség és a Magasság adja, a Lottie típusnak nincs Stílus fül szakasza.
• A fájlt onnan tölti le, ahová a címe mutat, ezért az animáció attól függ, hogy a tárhelye elérhető marad.
• Csak az előtöltőbeli Lottie-használathoz kell a Load Lottie JS in Pre Loader: ez külön kapcsoló a bővítmény többi Lottie-lehetőségétől.

Korlátozások

• Csak a .json című fájl működik. Más fájl nem fogadható el, és a rossz kiterjesztés az egész előtöltőt eltávolítja, nem esik vissza semmire.
• Nincs feltöltési mező, az animációnak egy címen elérhetőnek kell lennie.
• A Szélesség és a Magasság 700 képpontnál megáll.
• A nyilvános oldalon semmi sem jelenik meg, amíg a webhelyszintű Pre Loader beállítás nincs bekapcsolva.

Hibaelhárítás

Az oldalon az „Opps!! Please Enter Only JSON File Extension.” üzenet látszik. A Lottie URL címe nem .json-ra végződik. A JSON-hivatkozást másold ki, ne az oldal címét vagy egy .lottie letöltést.

Az animáció helye üres. Ellenőrizd, hogy a Load Lottie JS in Pre Loader be van-e kapcsolva, és hogy a JSON-cím megnyílik-e a böngészőben.

Az animáció eltűnik, mielőtt meglátnám. Állítsd az Egyéb opció → Betöltési idő értékét Minimumra, és adj meg egy Idő (másodperc) értéket.