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

> Betöltőképernyő az Elementor oldalakhoz: a két szükséges kapcsoló, a nyolc előtöltőtípus, a betöltési idő és a stílusbeállítások.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-eloto-tipusok/) 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 Site**ra, vagy **Specific Page/Post**ra, é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és**ig |

![Az Előrehaladás típusú előtöltő kinyitott listaeleme](./kepek/kepek-media-eloto-progress-panel.webp)

*Az Előrehaladás típusú előtöltő kinyitott listaeleme* (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ó.

![Egy előrehaladás-előtöltő a betöltés közben: kitöltődő sáv](./kepek/kepek-media-eloto-progress.webp)

*Egy előrehaladás-előtöltő a betöltés közben: kitöltődő sáv* (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.

![Az Egyéb opció szakasz Minimum betöltési idővel](./kepek/kepek-media-eloto-egyeb.webp)

*Az Egyéb opció szakasz Minimum betöltési idővel* (https://minta-bolt.hu/wp-admin/post.php?post=138&action=elementor)

A képen a **Betöltési idő** **Minimum**ra 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ág**a 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.