Előtöltő widget: áttekintés, bekapcsolás és betöltési idő

Az Elementornak nincs saját betöltőképernyője. Az Előtöltő (Pre Loader) widget ad egyet, és nyolcféle tartalmat mutathat a betöltés alatt. A widget a Pro bővítmény része. Ez a fejezet a teljes widgetet leírja: hol kell bekapcsolni, mit tud az egyes típus, és mit szabályoznak a Tartalom fül szakaszai. A képes, ikonos, szöveges és Lottie-típus részletei a típusokat bemutató fejezetben vannak.

Bekapcsolás

Két kapcsoló kell két különböző helyen, és mindkettő szükséges.

1. A widget. A The Plus Addons → Widgets oldalon keress rá a Pre Loader névre, és kapcsold be.
2. A webhelyre szóló beállítás. A bővítmény Extra Options → Settings oldalának Design fülén kattints a Pre Loader kártya fogaskerekére.
3. A felugró ablakban állítsd a Pre Loader értékét Entire Sitera, vagy Specific Page/Postra, és a Pre Loader in Specific Page/Post mezőben vesszővel elválasztva sorold fel az oldalak vagy bejegyzések azonosítóját. Kapcsold be a Load Lottie JS in Pre Loader kapcsolót, ha Lottie-animációt akarsz használni, majd mentsd.

A második kapcsoló nem elhagyható. Az előtöltő stíluslapja és szkriptje csak akkor töltődik be, ha a beállítás Entire Site, vagy Specific Page/Post és az oldal azonosítója szerepel a listában. Addig a widget kódja ott van az oldalon, de semmi nem takarja a képernyőt. Az Elementor szerkesztőjének előnézete engedékenyebb, ezért az előtöltő a szerkesztőben jónak látszhat, a közzétett oldalon pedig semmit sem csinál.

Egy oldal azonosítójának megtalálásához nyisd meg az Oldalak → Összes oldal listát, és állj az egérrel az oldalra: a böngésző alul mutatott hivatkozásában a post= utáni szám az azonosító. Ugyanígy működik bármely tartalomtípusnál.

A widget felvétele

Tedd az Előtöltő widgetet egyetlen oldalra, ha csak azt az oldalt akarod letakarni, vagy fejléc- vagy lábléc-sablonba, ha az egész webhelyet. Ezután a Tartalom fülön nyisd meg a Betöltésjelző lista elemét, és válassz típust a Kiválasztás mezőben.

Az Elem hozzáadása gombbal több típust is egymásra rakhatsz ugyanazon a betöltőképernyőn.

A nyolc előtöltőtípus

Kiválasztás	Mit mutat	Fő beállítások
Kép (alapérték)	Bármilyen képet, amely a betöltéssel együtt kitöltődhet	Kép, Betöltésjelző a képen
Ikon	Elementor-ikont vagy saját SVG-t	Ikon; a Méret a Stílus fülön állítható
Szöveges tartalom	Egy szót, például „Betöltés…”, amely kitöltődhet	Tartalom, Betöltésjelző a szövegen
Előre meghatározott	A tizenhárom beépített animáció egyikét	Kiválasztás: 1. animáció a 13. animációig
Lottie	Lottie JSON animációt	Lottie URL, Szélesség, Magasság, Sebesség, Animáció ismétlése
Egyéni kód	Saját kódot	Kód
Rövidkód	Bármit, amit egy rövidkód kiad, mentett sablont is	Rövidkód
Előrehaladás	Folyamatjelző sávot vagy százalékszámlálót	Elrendezés: Elrendezés 1 a 6. elrendezésig

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

A képen az Előrehaladás típus látszik az Elrendezés mezővel, alatta az Elem hozzáadása gomb és a Láthatóság a háttérfelületen kapcsoló.

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

A képen a töltősáv a betöltés közben épp kitöltődik.

A Láthatóság a háttérfelületen a szerkesztőben egy statikus előtöltőt mutat, hogy tervezhesd. A közzétett oldalon semmit sem változtat, és néhány típusnak nincs szerkesztőbeli előnézete.

A négy tartalmi szakasz

Szakasz	Mire való
Tartalom	Maga az előtöltő: az elemek listája és a Láthatóság a háttérfelületen
Elsőként betöltendő	Egy elemet az előtöltő fölött látható marad (például a fejlécet)
Oldalátmenet	Hogyan érkezik és távozik a betöltőképernyő
Egyéb opció	Meddig marad a betöltőképernyő

Egyéb opció: betöltési idő

Alapból a betöltőképernyő pontosan addig marad, amíg az oldal betölt. A Betöltési idő ezt módosítja.

Betöltési idő	Mit csinál	Példa
Alapértelmezett	Az oldal tényleges betöltési idejét követi
Minimum	Legalább a megadott ideig tartja a képernyőt	3-ra állítva egy 2 másodperc alatt betöltő oldalon is 3 másodpercig látszik az előtöltő
Maximum	Legkésőbb a megadott idő után eltávolítja a képernyőt	2-re állítva egy 5 másodperc alatt betöltő oldalon is csak 2 másodpercig látszik

Az Idő (másodperc) csúszka a Minimum vagy Maximum kiválasztása után jelenik meg, és 1 és 60 másodperc között állítható, 1-es lépésekkel.

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

A képen a Betöltési idő Minimumra van állítva, és az Idő (másodperc) csúszka 20-at mutat.

Stílusbeállítások

A Stílus fülön minden előtöltőtípusnak külön szakasza van, és két szakasz mindig érvényes.

Szakasz	Mit szabályoz
Kép	Maximális szélesség, Margó, szegély és keretsugár, valamint a Képes betöltésjelző Átlátszatlansága normál és kitöltött állapotban
Ikon	Méret, Szín, háttér, Padding, Margó, szegély, keretsugár
Szöveg	Tipográfia, Szín, háttér, térközök és a Szöveges betöltésjelző kitöltőszíne
Előre meghatározott	Padding és Margó. A Szín 1 a kipróbálásnál hatástalan volt
Folyamatjelző sáv	Szélesség, magasság, színek és elrendezésenkénti beállítások
Folyamatjelző száma	A százalék tipográfiája és színe
Folyamatjelző kör	Az üres és a kitöltött szín, a vonalvastagság és a százalék típusa a 6. elrendezéshez
Átmeneti effektus	Egyes oldalátmenetek színei
Doboz	Az előtöltő tárolója. A teljes háttér a kipróbálásnál hatástalan volt, a betöltőképernyő fehér maradt

Hogyan viselkedik

• A betöltőképernyő rögzített fedőréteg, amely a teljes nézetablakot letakarja, z-index: 12345 értékkel.
• Az oldal betöltése után körülbelül egy másodperccel, vagy a beállított betöltési idő után tűnik el.
• A fejléc- vagy lábléc-sablonba tett előtöltő mindenhol érvényes, ahol a sablont használják; az oldalra tett csak arra az oldalra.
• Ha az előtöltő sablonban van, de csak néhány oldalon kell, a webhelyszintű beállításnál használd a Specific Page/Post lehetőséget, ahelyett, hogy sokszor beraknád a widgetet.

Korlátozások

• A widget addig nem csinál semmit a nyilvános oldalon, amíg a webhelyszintű Pre Loader beállítás nincs bekapcsolva.
• Az Oldalátmenet szakasz osztálykizárási beállítása (Exclude Class) úgy működik, hogy a kimenő átmenet csak a megnevezett osztályon indul el, nem pedig kihagyja azt.
• Az Egyéni kód típus Kód mezője eltávolítja a <style> címkéket.
• Két stílusvezérlő a kipróbálásnál hatástalan volt: Doboz → Teljes háttér és Előre meghatározott → Szín 1. A widget saját stíluslapja az Elementor generált CSS-e után töltődik be, ezért néhány vezérlő, amelynek a szabálya nincs a widgetre szűkítve, felülíródik. A helyes CSS elkészül, csak a bővítmény saját szabálya nyer. A betöltőképernyő ezért fehér marad, így olyan előtöltőt válassz, amely fehéren is olvasható: képet, színes szöveget, megadott Méretű és Színű ikont, Lottie-fájlt vagy folyamatjelző sávot.

Hibaelhárítás

Az előtöltő a szerkesztőben működik, de a webhelyen nem. A webhelyszintű Pre Loader beállítás nincs bekapcsolva, vagy Specific Page/Post módban nem szerepel benne az oldal azonosítója.

A betöltőképernyő csak felvillan. Gyors az oldal. Az Egyéb opció → Betöltési idő → Minimum tartja vissza.

A betöltőképernyő túl sokáig marad. A Betöltési idő → Maximum lefaragja, és ellenőrizd az oldalt egy lassú külső szkript miatt.

Az animáció láthatatlan a fehér képernyőn. Az Előre meghatározott animációk fehérrel rajzolódnak, és a Szín 1 vezérlő a kipróbálásnál ezen nem változtatott. Használj színezhető típust: Ikon, Szöveges tartalom vagy Egyéni kód.

Az előtöltő eltakarja a logót és a menüt. Ez várható. Az Elsőként betöltendő szakasz tartalomkizárási beállítása (Exclude Content) a fejlécet az előtöltő fölé emeli.