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

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: 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ő.

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.

<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:

.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)}}

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.

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.

[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.