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

> Négy előtöltőtípus lépésről lépésre: kép kitöltődő hatással, ikon, szöveg és Lottie-animáció, stílusbeállításokkal és hibaelhárítással.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-eloto-attekintes/) í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 Site**ra, 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ép**en (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.

![A Kép típusú előtöltő kinyitott listaeleme](./kepek/kepek-media-eloto-kep-panel.webp)

*A Kép típusú előtöltő kinyitott listaeleme* (https://minta-bolt.hu/wp-admin/post.php?post=138&action=elementor)

A képen a **Kiválasztás** **Kép**re 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.

![A képes előtöltő betöltés közben: a kép bal oldala éles, a jobb oldala halvány](./kepek/kepek-media-eloto-kep.webp)

*A képes előtöltő betöltés közben: a kép bal oldala éles, a jobb oldala halvány* (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ég**et 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éret**et. Ezt közzététel előtt tedd meg, lásd az alábbi megjegyzést.
6. Frissítsd az oldalt, és nyisd meg.

![Az Ikon típusú előtöltő kinyitott listaeleme](./kepek/kepek-media-eloto-ikon-panel.webp)

*Az Ikon típusú előtöltő kinyitott listaeleme* (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éret**et. 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.

![Az ikonos előtöltő a betöltés közben a képernyő közepén](./kepek/kepek-media-eloto-ikon.webp)

*Az ikonos előtöltő a betöltés közben a képernyő közepén* (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 |

![A Stílus fül Ikon szakasza](./kepek/kepek-media-eloto-ikon-stilus.webp)

*A Stílus fül Ikon szakasza* (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ározott**ra, é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.

![A Szöveges tartalom típusú előtöltő kinyitott listaeleme](./kepek/kepek-media-eloto-szoveg-panel.webp)

*A Szöveges tartalom típusú előtöltő kinyitott listaeleme* (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ín**t: 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ín**t: 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.

![A szöveges előtöltő a betöltés elején: a szó első betűje már kitöltődött](./kepek/kepek-media-eloto-szoveg.webp)

*A szöveges előtöltő a betöltés elején: a szó első betűje már kitöltődött* (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** |

![A Stílus fül Szöveg szakasza](./kepek/kepek-media-eloto-szoveg-stilus.webp)

*A Stílus fül Szöveg szakasza* (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ín**e 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 **Minimum**ra, é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.

![A Lottie-animáció a teljes képernyős előtöltő közepén](./kepek/kepek-media-eloto-lottie.webp)

*A Lottie-animáció a teljes képernyős előtöltő közepén* (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 **Minimum**ra, és adj meg egy **Idő (másodperc)** értéket.