# Preloader: betöltőképernyő

> Márkázott betöltőképernyő a Visual Builderből: 30 előbeállítás, logó, színek, mozgás, kilépési stílus, folyamatjelző és oldalak közötti átmenetek.

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](https://hub.hellowp.io/hu/plugins/supreme-modules-pro-for-divi/beallitasok-elotolto/).

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