# Előtöltő: több elem együtt, saját CSS-es betöltő és rövidkód

> Több előtöltő egy képernyőn, saját HTML és CSS betöltő az Egyéni kód típussal, és tetszőleges tartalom vagy Elementor-sablon a Rövidkód típussal.

Az **Előtöltő** widget beépített típusain túl több elemet is összerakhatsz egy betöltőképernyőn, saját CSS-es betöltőt rajzolhatsz az **Egyéni kód** típussal, és bármilyen tartalmat kitehetsz a **Rövidkód** típussal. A widget a Pro bővítmény része.

Mindháromhoz kell a két bekapcsolás az [áttekintő fejezetből](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/kepek-media-eloto-attekintes/): a widget a **The Plus Addons → Widgets** oldalon, és a webhelyszintű **Pre Loader** beállítás az **Extra Options → Settings → Design** fülön. Az elemeket a **Tartalom** fülön, a **Betöltésjelző** listában állítod be.

## Több előtöltő egy oldalon

A **Betöltésjelző** lista ismétlődő mező, ezért annyi elemet adhatsz hozzá, amennyit szeretnél, és mind ugyanazon a betöltőképernyőn jelenik meg. Egy logó alatt egy forgó jelzés, vagy egy animáció rövid üzenettel jobban mutat, mint külön-külön.

1. Jelöld ki az **Előtöltő** widgetet, és maradj a **Tartalom** fülön.
2. Állítsd be a lista első elemét a szokásos módon: válassz típust a **Kiválasztás** mezőben, és töltsd ki a mezőit.
3. Kattints a lista alatti gombra (**Add Item**) egy új elem felvételéhez.
4. Nyisd meg az új elemet, és válassz más típust a **Kiválasztás** mezőben.
5. Ismételd meg további elemekkel, majd frissítsd az oldalt.

A lista minden sorának a címe a saját **Kiválasztás** értéke, ezért első pillantásra látod, mit tartalmaz a betöltőképernyő.

![Két előtöltő egy betöltőképernyőn: logó és szöveg](./kepek/kepek-media-eloto-tobb.webp)

*Két előtöltő egy betöltőképernyőn: logó és szöveg* (https://minta-bolt.hu/km4-eloto-tobb/)

A képen egymás alatt látszik a **Kép** típusú logó és a **Szöveges tartalom** típusú „Betöltés…” felirat.

### Jól működő párosítások

| Első elem | Második elem | Eredmény |
|---|---|---|
| **Kép** (a logód) | **Előre meghatározott** | Logó, alatta forgó jelzés |
| **Előre meghatározott** | **Szöveges tartalom** | Animáció rövid üzenettel |
| **Kép** | **Előrehaladás** | Logó folyamatjelző sávval és százalékkal |
| **Lottie** | **Szöveges tartalom** | Saját animáció felirattal |

### Hogyan viselkedik

- A lista minden eleme megjelenik, a widget nem korlátozza a számukat.
- Az elemek a lista sorrendjében követik egymást, egymás alatt. A sorrendet a sorok húzásával módosíthatod.
- Minden elem megtartja a saját beállításait, de a **Stílus** fül közös: az összes **Szöveges tartalom** elem ugyanazt a szövegstílust kapja, az összes **Ikon** elem ugyanazt az ikonstílust, és így tovább.
- Vigyázz a fehér a fehéren esetre: a betöltőképernyő háttere és az **Előre meghatározott** animációk is fehérek, és sem a **Stílus → Előre meghatározott → Szín 1**, sem a **Doboz → Teljes háttér** nem változtatott ezen a kipróbálásnál. Az **Előre meghatározott** elemet olyannal párosítsd, ami fehéren is látszik, például képpel vagy színes szöveggel.

### Korlátozások

- Két azonos típusú elemet nem formázhatsz másképp, mert a **Stílus** fülön típusonként van egy szakasz, elemenként nincs.
- Az elemek egymás alatti elrendezéséhez nincs beállítás.
- Minden további elem több letöltendő tartalmat jelent az oldal megjelenése előtt, ezért tartsd rövidnek a listát.

### Hibaelhárítás

**Csak egy előtöltő látszik.** Nézd meg, hogy a második elemnek van-e tartalma: a kép nélküli **Kép** elem és az URL nélküli **Lottie** elem nem rajzol semmit.

**Az egyik elem láthatatlan.** Valószínűleg **Előre meghatározott** animáció, amelyet fehérrel rajzol a fehér háttéren. A widget saját stíluslapja az Elementor generált CSS-e után töltődik be, ezért néhány olyan stílusvezérlőt felülír, amelynek a szabálya nincs a widgetre szűkítve. A helyes CSS elkészül, csak a bővítmény saját szabálya nyer. Használj színezhető típust, például **Szöveges tartalom**, **Ikon** vagy **Egyéni kód**.

**Rossz a sorrend.** Húzd át a sorokat a **Betöltésjelző** listában, a rajzolás sorrendje a listát követi.

## Saját CSS-es betöltő (Egyéni kód)

A widget tizenhárom kész animációt ad, de lehet, hogy már van egy saját CSS-betöltőd, vagy találtál egy ilyet egy CSS-betöltőket gyűjtő oldalon. Az **Egyéni kód** típus a saját jelölésedet rajzolja ki a betöltőképernyőn.

Szükséged lesz egy helyre a stíluslapnak is, mert a **Kód** mező csak HTML-jelölést fogad el. Ilyen hely a sablonod egyéni CSS-e, az Elementor egyéni CSS-e, vagy a bővítmény saját **Extra Options → Custom CSS & JS** oldala.

### A jelölés beillesztése

1. Add az **Előtöltő** widgetet az oldalra vagy egy fejléc- vagy lábléc-sablonba.
2. A **Tartalom** fülön nyisd meg a **Betöltésjelző** lista elemét.
3. A **Kiválasztás** legyen **Egyéni kód**.
4. A **Kód** mezőbe csak a betöltő HTML-jét illeszd be, például az alábbi jelölést.
5. Frissítsd az oldalt.

```html
<div class="my-loader"></div>
```

### A CSS külön helyen

Ne illessz `<style>` blokkot a **Kód** mezőbe. A mezőt kiírás előtt megszűri a widget, és a szűrő a `<style>` címkéket eltávolítja, de a bennük lévő szöveget meghagyja. Kipróbáltuk: a CSS szavakból álló bekezdésként jelent meg a betöltőképernyő közepén, a betöltő pedig formázatlan maradt.

A stíluslapot helyezd olyan helyre, ahonnan az egész webhelyen betöltődik. Az alábbiak bármelyike jó, mert az előtöltő jelölése ugyanúgy az oldal része, mint bármely más elem:

- **The Plus Addons → Extra Options → Custom CSS & JS**
- az Elementor egyéni CSS mezője, a widget **Haladó** fülén vagy a Webhelybeállításokban
- a sablonod vagy gyermeksablonod stíluslapja

A CSS tartalma attól függ, mit rajzol a betöltőd, például:

```css
.my-loader{width:64px;height:64px;border:8px solid #e9e9ff;
  border-top-color:#5b5bd6;border-radius:50%;
  animation:my-spin 1s linear infinite}
@keyframes my-spin{to{transform:rotate(360deg)}}
```

![Saját CSS-es forgó betöltő a betöltőképernyőn](./kepek/kepek-media-eloto-kod.webp)

*Saját CSS-es forgó betöltő a betöltőképernyőn* (https://minta-bolt.hu/km4-eloto-kod/)

A képen a fenti CSS-sel rajzolt forgó kör látszik a fehér betöltőképernyő közepén.

### Hogyan viselkedik

- A jelölés az előtöltő fedőrétegén belülre kerül, ezért a CSS-ed a saját osztályodat célozza, ne a widget osztályait.
- A **Kód** mezőből eltűnnek azok a címkék, amelyeket a WordPress a bejegyzéstartalomban sem enged. A sima elemek, például a `div` és a `span` osztállyal megmaradnak, a `<style>` és a `<script>` nem.
- Az animáció addig fut, amíg a fedőréteg látszik, és akkor áll le, amikor eltűnik.
- Ennek a típusnak nincs saját szakasza a **Stílus** fülön. Csak a **Doboz** hat a tárolóra és a háttérre.

### Korlátozások

- A `<style>` és a `<script>` nem használható a **Kód** mezőben.
- A szerkesztőben nincs a kész betöltőről előnézet: a **Láthatóság a háttérfelületen** csak egy statikus helyőrzőt mutat.
- A nyilvános oldalon addig nem jelenik meg semmi, amíg a webhelyszintű **Pre Loader** beállítás nincs bekapcsolva.

### Hibaelhárítás

**A betöltőképernyő szövegként mutatja a CSS-emet.** A `<style>` címke eltűnt, a tartalma pedig bent maradt. Vedd ki a stílusblokkot a **Kód** mezőből, és tedd a webhely stíluslapjába.

**A jelölés ott van, de nincs formázva.** A stíluslap nem töltődik be azon az oldalon, vagy az osztálynevek nem egyeznek. Vizsgáld meg a betöltőképernyőt, és nézd meg az elem osztályát.

**Valami egyszerűbbet szeretnék.** A **Kiválasztás** legyen **Előre meghatározott**, és válassz a tizenhárom beépített animáció közül, vagy használj Lottie-fájlt.

## Rövidkódos előtöltő

Ha a beépített típusok (logó, ikon, szó, Lottie, folyamatjelző) nem elegendők, a **Rövidkód** típussal tetszőleges tartalmat tehetsz a betöltőképernyőre. A widget lefuttatja a megadott rövidkódot, és az eredményét a fedőréteg közepére rajzolja.

### Rövidkódos előtöltő hozzáadása

1. Add az **Előtöltő** widgetet az oldalra vagy egy fejléc- vagy lábléc-sablonba.
2. A **Tartalom** fülön nyisd meg a **Betöltésjelző** lista elemét.
3. A **Kiválasztás** legyen **Rövidkód**.
4. Illeszd a rövidkódodat a **Rövidkód** mezőbe.
5. Frissítsd az oldalt, és nyisd meg.

![Rövidkóddal kirajzolt szöveg a betöltőképernyőn](./kepek/kepek-media-eloto-rovidkod.webp)

*Rövidkóddal kirajzolt szöveg a betöltőképernyőn* (https://minta-bolt.hu/km4-eloto-rovidkod/)

A képen a **Rövidkód** mezőbe írt, a WordPress beépített rövidkódjával kirajzolt felirat látszik a betöltőképernyő közepén.

Bármely regisztrált rövidkód működik: egy bővítményé, egy általad regisztrált, vagy egy mentett Elementor-sablon rövidkódja. A tesztben egy űrlap rövidkódja a teljes űrlapot kirajzolta a betöltőképernyőn.

### Elementor-sablon mint előtöltő

A sablon adja a legnagyobb szabadságot: bármilyen widgetekből felépítheted a betöltőképernyőt, és az előtöltőt a sablonra irányíthatod.

1. Építsd meg a kívánt elrendezést, és mentsd el a **Sablonok → Mentett sablonok** alatt.
2. Szerezz hozzá rövidkódot. Az Elementor Pro minden mentett sablon mellett mutat egy rövidkódot. Elementor Pro nélkül olyan bővítmény kell, amely a sablonból rövidkódot készít, például az AnyWhere Elementor, amely az alábbi formát használja.
3. Illeszd a rövidkódot az **Előtöltő** widget **Rövidkód** mezőjébe.

```text
[INSERT_ELEMENTOR id=xxx]
```

Az `xxx` helyére a sablon azonosítója kerül. Az azonosítót úgy találod meg, hogy a sablon fölé viszed az egeret a listában, és a böngésző állapotsorában kiolvasod a szerkesztési hivatkozást: a `post=` utáni szám az azonosító.

Ha Nexter Theme Pro-t használsz, a **Nexter Builder → All Templates** alatti sablonjaihoz is tartozik rövidkód, amelyet ugyanebbe a mezőbe illeszthetsz.

### Hogyan viselkedik

- A rövidkód a kiszolgálón fut le az oldal összeállításakor, ugyanúgy, mint az oldalon lévő többi rövidkód.
- Nincs méretkorlát: amit a rövidkód kiad, azt kirajzolja a fedőrétegen, ezért egy magas tartalom magas betöltőképernyőt ad.
- Ennek a típusnak nincs saját szakasza a **Stílus** fülön. A rövidkód kimenete magával hozza a saját stílusát, csak a **Doboz** hat a tárolóra és a háttérre.
- A JavaScriptet igénylő rövidkód lehet, hogy nem készül el az inicializálással, amíg az oldal még töltődik.

### Korlátozások

- A rövidkód erőforrásait a widget nem tölti be külön az előtöltőhöz. Ha a rövidkódot adó bővítmény a stíluslapját csak akkor tölti be, ha a blokkja máshol is megjelenik az oldalon, az előtöltőben látszó példány formázatlan lehet.
- Az interaktív tartalom rossz választás: a fedőréteg az oldal betöltődése után azonnal eltűnik, ezért senki sem tudja használni.
- A nyilvános oldalon addig nem jelenik meg semmi, amíg a webhelyszintű **Pre Loader** beállítás nincs bekapcsolva.

### Hibaelhárítás

**A rövidkód szövegként jelenik meg, nem fut le.** A rövidkód nincs regisztrálva ezen a webhelyen. Ellenőrizd, hogy az azt adó bővítmény aktív-e, és hogy a címke pontosan úgy van-e írva, ahogy a bővítmény leírja.

**A sablon megjelenik, de rosszul néz ki.** Az Elementor a sablon stílusait sablononként generálja. Nyisd meg és mentsd el újra a sablont, hogy újragenerálódjon a CSS-e, majd töltsd újra az oldalt.

**A betöltőképernyő óriási.** Rövidítsd a sablont. A rövidkód teljes kimenetét teljes magasságban rajzolja ki a fedőréteg.