Preloader: betöltőképernyő

A Preloader márkázott fedőréteget mutat, amíg a nyilvános oldal betöltődik, majd eltűnik, és megjelenik a valódi elrendezés. A kinézetet a Divi 5 Visual Builderben tervezed meg, a Divi szín-, betűtípus- és töréspont-vezérlőivel. Választható (opt-in) Divi Supreme Pro kiterjesztés.

A fedőréteg a Visual Builderben, a wp-adminban és a builder lekérdezésében soha nem fut. A hatását a nyilvános oldalon nézheted meg, vagy add hozzá az oldal címéhez a ?dsm_pl=1 paramétert, hogy egyszer kikényszerítsd a megjelenését.

A működési extrák (biztonsági időkorlát, elrejtés bejelentkezettek elől, kis képernyők, WooCommerce kizárások) a Divi Supreme → Preloader oldalon vannak, lásd Preloader beállításai.

Mit tud

• 30 CSS/SVG előbeállítás: gyűrűk, pontok, sávok, pulzálás, rács, útvonal, valamint Logo + ring, Logo pulse és Logo only.
• Arculat: elsődleges és másodlagos szín, a fedőréteg háttere (opcionálisan kétszínű színátmenet), feltöltött logó, betöltési szöveg és tipográfia.
• Reszponzív méretek: animáció mérete, logó legnagyobb szélessége és szövegméret töréspontonként.
• Háromrészes bevezető: belépés, tartás, kilépés, három receptből, az általad megadott időzítéssel.
• Kilépési stílusok: fade, fade up, wipe up, scale vagy curtain split.
• Folyamatjelző: ki, határozatlan vagy határozott, fent vagy lent.
• Oldalak közötti átmenet: az azonos webhelyen belüli hivatkozásoknál előbb betakarja az oldalt, aztán továbblép.
• Megjelenési kör: az egész webhely, felsorolt oldalak, kivételek vagy oldalankénti beállítás, plusz opcionálisan csak a kezdőlap.
• Csökkentett mozgás: statikus logó (a bezárás megmarad) vagy a fedőréteg kihagyása.

Mikor ne használd

• Ha oldalanként más logó vagy előbeállítás kell: az oldalankénti beállítás csak a láthatóságot szabályozza, a dizájn egyetlen, globális.
• Library-elrendezés, Lottie vagy videós bevezető nem támogatott, csak az előbeállítások és az opcionális logó/szöveg.
• JavaScript nélküli látogatók soha nem látják a fedőréteget.
• A Visual Builderben a fedőréteg nem fut: a customiserben vászon-előnézetet látsz, a végeredményt a nyilvános oldalon ellenőrizd.

Használati esetek

Eset	Hogyan
Márkázott első benyomás	Logo + ring vagy szóképes (wordmark) betöltő a kezdőlapon.
Ügynökségi, webhelyszintű bevezető	Egy dizájn, felsorolt vagy kizárt oldalak, vagy oldalankénti láthatóság.
WooCommerce Divi-vel	A kosár, a pénztár és a fiók maradjon fedőréteg nélkül (a kizárás a Divi Supreme → Preloader oldalon alapból be van kapcsolva).

Bekapcsolás

1. Nyisd meg a Divi Supreme → Extensions oldalt.
2. Kapcsold be a Preloader kiterjesztést.
3. Mentsd, majd töltsd újra a Visual Buildert.

Alapértelmezetten ki van kapcsolva (beállításkulcs: dsm_use_preloader). Amíg nincs bekapcsolva, a builder sáv Preloader gombja és a beállítófülek nem működnek.

Első lépések

1. Kapcsold be a kiterjesztést, és töltsd újra a buildert.
2. Kattints a Visual Builder sávján a Preloader gombra.
3. A Settings fülön hagyd bekapcsolva a Show on the frontend kapcsolót, és a Display on legyen Entire site (vagy szűkítsd a kört).
4. A Design fülön válassz előbeállítást (például Logo + ring), tölts fel logót, állítsd be a színeket.
5. A Motion fülön hagyd az alap Logo hold → curtain receptet, vagy válassz másikat, és állítsd be a belépés, tartás és kilépés időzítését.
6. Mentsd, nyisd meg a nyilvános oldalt (vagy add hozzá a ?dsm_pl=1 paramétert), és ellenőrizd, hogy a fedőréteg eltűnik.

A customiser három füle

A builder sávon a Preloader gombra kattintva nyílik meg. Amíg nyitva van, a vászon felett előnézet látszik (a builder felületét nem takarja).

Fül	Mit szabályoz
Settings	Megjelenés a nyilvános oldalon, megjelenési kör, csak kezdőlap, első érkezés gyakorisága, kihagyás, oldalak közötti átmenet
Design	Előbeállítás, színek, méret, háttér, logó, betöltési szöveg, tipográfia
Motion	Bevezető recept, belépés/tartás időzítése, kilépési és átmeneti stílus, folyamatjelző, csökkentett mozgás

A beállítások webhelyszintűek: mindenhol érvényesek, ahol a Preloader betölthet, nem csak a szerkesztett oldalon.

Settings: láthatóság és gyakoriság

Beállítás	Alapérték	Mit csinál
Show on the frontend	be	A fedőréteg főkapcsolója a kiterjesztés bekapcsolása után.
Display on	Entire site	Entire site, Specific pages only (include), All pages except (exclude) vagy Per page.
Enable on this page		Csak Per page módban, és csak normál oldalon vagy bejegyzésen.
Homepage only	ki	További korlát: a fedőréteg csak a címlapon jelenik meg.
First-arrival frequency	Every page load	Every page load vagy Once per session.
Visitors can skip	be	A látogató idő előtt bezárhatja a fedőréteget.
Page-to-page transitions	be	A belső hivatkozásoknál lejátszódik a takaró animáció, majd a következő oldalon a fedőréteg.

Az oldalak közötti átmenet nem érinti a külső hivatkozásokat, az új lapon nyíló hivatkozásokat, a letöltéseket, a # horgonyokat és a módosítóbillentyűvel (például Ctrl) végzett kattintásokat. Egy hivatkozást kihagyhatsz a data-dsm-preloader-skip attribútummal vagy a dsm-preloader-skip osztállyal.

A ?dsm_pl=1 egyszeri megjelenést kényszerít ki, és megkerüli a „csak munkamenetenként egyszer” és a „bejelentkezetteknek elrejtés” szabályt is.

Design: előbeállítások és arculat

A 30 előbeállítás:

• Gyűrűk: Ring, Dashed ring, Dual ring, Nested rings, Opposing rings, Arc
• Pontok: Bouncing, Pulsing, Fading, Orbiting, Typing, Colliding
• Sávok: Equalizer, Wave bars, Mini bars, Sliding bar
• Pulzálás: Ripple, Double pulse, Scale pulse, Breathe
• Rács és útvonal: Grid, Cube grid, Flower, Satellite, Path circle, Path tail, Path blocks
• Márka: Logo + ring, Logo pulse, Logo only

A feltöltött logó a pörgő animációval együtt is látszhat, kivéve a Logo only előbeállításnál.

Továbbá beállítható: elsődleges és másodlagos szín, az animáció mérete, a fedőréteg háttere (egy második színnel színátmenet), a logó legnagyobb szélessége, a betöltési szöveg és a szöveg tipográfiája (betűtípus, vastagság, méret, szín, igazítás, kisbetű/nagybetű, stílus). A Divi változószínei is használhatók.

Motion: receptek és kilépés

Recept	Felirat
logo_hold_curtain	Logo hold → curtain (alapérték)
wordmark_spinner	Wordmark + spinner
progress_fade	Progress → fade

Beállítás	Alapérték	Mit csinál
Belépés időtartama	450 ms	A bevezető belépő szakasza.
Tartás időtartama	1000 ms	Legalább ennyi ideig marad fent a fedőréteg.
Kilépési stílus	Curtain split	Fade, Fade up, Wipe up, Scale vagy Curtain split.
Kilépés időtartama	450 ms	Mennyi ideig tart a kilépés.
Átmeneti kilépési stílus	Curtain split	Az oldalak közötti takarás stílusa.
Folyamatjelző	Off	Off, Indeterminate vagy Determinate; helye fent vagy lent.
Csökkentett mozgás	Static logo (still dismiss)	Vagy a fedőréteg letiltása.

A biztonsági időkorlát (a Divi Supreme → Preloader oldalon, alapból 8000 ms) mindig bezárja a fedőréteget, ha a betöltés nem fejeződne be.

Beállítások az adatbázisban

Beállítás	Típus	Alapérték	Leírás
Preloader	jelölőnégyzet	ki	Főkapcsoló az Extensions fülön (dsm_use_preloader).
Webhelybeállítások	objektum	lásd fent	A Visual Builder customiser és a működési kulcsok mentése a dsm_settings_preloader alatt.

Tippek

• Először kapcsold be a kiterjesztést, csak utána keresd a Preloader gombot.
• A builderben tervezz, a nyilvános oldalon tesztelj.
• Ha a gyakoriság „munkamenetenként egyszer”, vagy be vagy jelentkezve és az elrejtés be van kapcsolva, használd a ?dsm_pl=1 paramétert a kipróbáláshoz.
• WooCommerce-boltnál tartsd kizárva a kosarat, a pénztárat és a fiókot.
• Egyéni hivatkozás kihagyásához használd a data-dsm-preloader-skip attribútumot vagy a .dsm-preloader-skip osztályt.