# Page Tour: lépésenkénti oldalbejárás

> Az oldal modulait lépésként megjelölve végigvezetheted a látogatót az oldalon: sötétítés, kiemelés és buborék minden lépésnél.

A Page Tour sötét réteggel, kivágott kiemeléssel és minden lépésnél egy buborékkal vezeti végig a látogatót az oldalon. Nem kell tour modult beszúrnod: bekapcsolod a kiterjesztést, és a már meglévő modulokat jelölöd meg, például a címsort 1., az árlistát 2., az űrlapot 3. lépésnek.

A beállítás két helyen van:

- **Advanced → Page Tour** minden szakaszon, soron, oszlopon és modulon: „This is a tour step”, lépésszám, cím, szöveg, elhelyezés.
- **Visual Builder sáv → Page Tour:** az egész bejárás indítója, sötétítő réteg, buborék, folyamatjelző, Tovább/Vissza/Kihagyás gombok.

Opcionális kiterjesztés (alapértelmezetten ki van kapcsolva). Bekapcsolva a régi Page Tour szülő- és gyermekmodulok eltűnnek a modulválasztóból; az őket használó meglévő elrendezések tovább működnek.

## Miért kiterjesztés a régi modul helyett

A régi Page Tour modul rejtett szülő és gyermek lépések voltak, amelyeknél minden lépéshez célt kellett választani (blokkazonosító vagy CSS-választó). A látogató a modult sosem látta, csak a sötétítést más modulokon. Ez plusz burkolót jelentett a Layersben, célválasztót, és a Theme Builder elemeit nehéz volt megcélozni.

A kiterjesztésnél a lépés magán a célon van:

| Régi Page Tour modul | Page Tour kiterjesztés |
|---|---|
| Beszúrsz egy szülőt, gyermek lépéseket adsz hozzá, és mindegyiknél célt választasz. | Megnyitod a meglévő modult, és **Advanced → Page Tour**. |
| Láthatatlan burkoló a vásznon. | Nincs plusz modul, a sötétítő réteg az oldal láblécében készül. |
| A gyermeknek blokkazonosítót vagy választót kell találnia. | A szerkesztett modul maga a cél. |
| A tour megjelenése a próbababán szülőn. | A tour megjelenése a builder sáv customiserében. |

Új bejárásokhoz a kiterjesztést használd. A régi modult csak akkor hagyd, ha egy elrendezésben már `dsm/page-tour` van, és még nem kapcsoltad be a kiterjesztést.

Ez nem ugyanaz, mint a Tooltip kiterjesztés: a tooltip egy hover/kattintásos tipp, a page tour sorrendbe állított bejárás Tovább/Vissza/Kihagyás gombokkal.

## Mit tud

- Bármely modul lépés lehet: **This is a tour step**, és a **Step** száma (1-99). A vásznon egy „Step N” címke látszik (hover és kijelölés esetén).
- Címe és szövege lépésenként, a Dynamic Content és Loop mezők is használhatók.
- Elhelyezés: Auto, Top, Bottom, Left vagy Right. A középre igazított bevezető/záró lépések figyelmen kívül hagyják.
- Kiemelő lyuk: kivágás a sötétítő rétegben, így a modul látszik és kattintható marad.
- Kihagyható: a lépésen megjelenik a **Skip** gomb.
- Középre igazított bevezető vagy záró lépés: a **Highlight this module** kikapcsolásával a buborék nem a modulhoz kötődik.
- Divi Loop: az **Expand** minden ciklusmásolaton végigmegy, a **First item only** csak az elsőt emeli ki. A későbbi modulok lépésszáma nem változik.
- CSS-választó felülbírálás: egy belső elemet vagy Theme Builder elemet emelhetsz ki a modul burkolója helyett.
- Indítás betöltéskor, kattintásra vagy interakcióra; megjelenési gyakoriság; az első cél látótérbe kerülése vagy automatikus görgetés.
- A bejárás egyszeri megformázása: sötétítés, buborékanimáció, cím- és szövegtipográfia, folyamatjelző színei és a gombok teljes dizájnja (az elsődleges a Next és a Done, a másodlagos a Back és a Skip).
- Előnézet a vásznon, amíg a customiser nyitva van (nem mentődik, a látogató nem látja a kapcsolót).

## Használati esetek

| Eset | Miért jó |
|---|---|
| Termék bemutatása | 1. lépés a hős rész, 2. a funkciók, 3. a regisztrációs űrlap. |
| Tagsági oldal | Az első belépés után végigvezet a fontos blokkokon. |
| Árlista, pénztár | Kiemeli a táblát, majd a gombot. |
| Ciklusos katalógus | Az **Expand** végigmegy a kalap, cipő, táska elemeken, a későbbi lépések átszámozása nélkül. |
| Üdvözlő bevezető | Középre igazított első lépés (**Highlight this module**: No), utána a modulokhoz kötött lépések. |

## Mikor ne használd

- Egyetlen hover tipphez használd a Tooltip kiterjesztést.
- Ha a modulnak nincs Advanced füle: a csoport csak azokon a modulokon jelenik meg, amelyeknek van Advanced panelje. A régi `dsm/page-tour` és `dsm/page-tour-step` modul nem lehet lépés.
- Ha még kell a régi szülő és gyermek modul a modulválasztóban: kapcsold ki a kiterjesztést. A régi modulok visszatérnek, az **Advanced → Page Tour** pedig eltűnik.

## Bekapcsolás

1. Nyisd meg a **Divi Supreme → Extensions** oldalt.
2. Kapcsold be a **Page Tour** kiterjesztést (alapérték: ki).
3. Mentsd, majd töltsd újra a Visual Buildert, hogy megjelenjen az **Advanced → Page Tour** és a builder sáv **Page Tour** gombja.

Amíg ki van kapcsolva, a csoport és a customiser nem fut, a régi modulok a modulválasztóban maradnak. A wp-adminban nincs külön Page Tour beállításfül: a lépések az **Advanced → Page Tour** alatt, a tour egésze a Visual Builder customiserében van.

## Első lépések

1. Kapcsold be a kiterjesztést, és töltsd újra a buildert.
2. Nyiss meg egy modult (például Címsor), menj az **Advanced → Page Tour** csoportba, kapcsold be a **This is a tour step** kapcsolót, a **Step** maradjon 1, és adj meg **Title** és **Content** értéket.
3. Ismételd a következő modulokon 2., 3. lépésként.
4. Kattints a builder sáv **Page Tour** gombjára. Állítsd be a **Start Trigger** értékét (kezdd az **On Page Load** értékkel).
5. Opcionálisan kapcsold be a **Preview on canvas** kapcsolót, és járd végig a bejárást a builderben.
6. Mentsd, és nézd meg a közzétett oldalt.

## Advanced → Page Tour

A csoport az Advanced fülön van. A további mezők a **This is a tour step** bekapcsolása után jelennek meg.

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **This is a tour step** | ki | A modul a bejárás része. A vásznon kis „Step” címke látszik. |
| **Step** | 1 | A sorrend: 1, 2, 3 stb. (1-99). A modul ciklusba tétele nem változtatja a későbbi lépések számát. |
| **Title** | üres | A lépés buborékjának címe. Dynamic Content és Loop mezők használhatók. |
| **Content** | üres | A lépés buborékjának szövege. Dynamic Content és Loop mezők használhatók. |
| **Placement** | Auto | A buborék helye a modulhoz képest: Auto, Bottom, Top, Left, Right. A középre igazított lépések figyelmen kívül hagyják. |
| **Highlight Hole** | Yes | Lyukat vág a sötétítő rétegbe, így a modul látszik és kattintható. |
| **Skippable** | Yes | Megjeleníti a **Skip** gombot ezen a lépésen. |
| **Highlight this module** | Yes | Kikapcsolva (**No (centered)**) a buborék középre kerül, és nem kötődik a modulhoz. |
| **When this module is looped** | Expand (every item) | Az **Expand** a ciklus minden elemén végigmegy az oldalon; a **First item only** csak az elsőt. |
| **CSS selector override** | üres | Opcionális: belső elemet vagy Theme Builder elemet emel ki a modul burkolója helyett. Üresen a modul maga a cél. |

A nyilvános oldalon a sorrend a lépésszám szerint növekvő, azonos szám esetén a dokumentumbeli sorrend. A hézagok megengedettek (az 1, 2, 5 három lépés). Két különböző modul azonos lépésszámmal is lejátszódik, dokumentumsorrendben.

A régi `dsm/page-tour` és `dsm/page-tour-step` modulok sosem kapják meg ezt a csoportot.

## Visual Builder sáv → Page Tour

Az oldalszintű beállítások az oldallal együtt tárolódnak (`dsm_page_tour_settings`, bejegyzés-meta `dsm-page-tour-settings`). Az egész elrendezésre vonatkoznak, nem csak az éppen szerkesztett modulra.

### Settings fül

| Beállítás | Alapérték | Mit csinál |
|---|---|---|
| **Preview on canvas** | ki | A customiser nyitva tartása alatt a vásznon játssza a bejárást, hogy ellenőrizhesd a dizájnt és a lépések szövegét. Csak a builderben létezik, a látogató nem látja a kapcsolót, és nem mentődik az oldallal. |
| **Tour Name** | üres | A visszatérő látogatók számára ez azonosítja a bejárást. |
| **Start Trigger** | On Page Load | Mikor indul: **On Page Load**, **On Click** vagy **On Interaction**. |
| **Click Selector** | üres | Annak az elemnek a CSS-választója, amely elindítja a bejárást. **On Click** esetén jelenik meg. |
| **Display Frequency** | Until skipped | Az **On Page Load** gyakorisága: **Once per visitor**, **Every visit** vagy **Until skipped** (addig elérhető, amíg a látogató ki nem hagyja). |
| **First Step** | When target is in view | **When target is in view** vagy **Auto-scroll to target**. **On Page Load** esetén jelenik meg. |
| **In-view Offset** | 45% | Mennyire kell bejönnie az első célnak a látótérbe, mielőtt a bejárás elindul. **Auto-scroll** esetén rejtett. |
| **Steps on this page** | | A megjelölt modulok élő listája. Egy sorra kattintva megnyílik a modul **Advanced → Page Tour** része, és a vászon odagörög. Ha üres: „No modules are marked as tour steps yet.” |

A bejárást jelölésből is indíthatod:

- `data-dsm-page-tour-start` attribútum egy kattintott elemen (az érték a bejárás neve, tárolóazonosítója vagy azonosítója).
- `dsm-page-tour:start` egyéni esemény (az **On Interaction** ezt használja, vagy ha az esemény megnevez egy bejárást).

### Design fül

Sok érték reszponzív (asztali, tablet, telefon).

| Csoport | Beállítások |
|---|---|
| **Overlay** | **Dim Color** (alapérték `rgba(15, 10, 28, 0.55)`), **Hole Radius** (alapérték `4px`). |
| **Popover** | **Animation** (Fade, Scale, Shift Away, Shift Toward, Perspective), **Show Duration** (`300ms`), **Hide Duration** (`250ms`), **Move Transition** (None, Ease Out, Ease, Linear), **Background Color** (`#ffffff`), **Max Width** (`360px`). |
| **Title / Body** | Betűcsalád, vastagság, méret, szín, sormagasság, betűköz, kisbetű/nagybetű, stílus. A cím alapértéke 16px / 600 / `#2b1a4a`, a szövegé 14px / 400 / `#3d2d55`. |
| **Progress** | **Bar Color** (`#5c1db0`), **Track Color** (`#ece6f5`). |
| **Buttons** | Teljes Divi-stílusú gombdizájn. Az elsődleges a Next és Done, a másodlagos a Back és Skip. |

A nyilvános oldalon a modul burkolóján `data-dsm-tour-step` attribútum jelenik meg. Az eszközök csak akkor töltődnek be, ha az oldalon van bekapcsolt lépés.

## Tippek

- A kiterjesztés bekapcsolása és a builder újratöltése után keresd az **Advanced → Page Tour** csoportot és a builder sáv gombját.
- A **Preview on canvas** közzététel nélkül ellenőrzi a szöveget és a dizájnt.
- Ha a **Once per visitor** vagy **Until skipped** gyakoriságot használod, adj nevet a bejárásnak, hogy a visszatérő látogatókat helyesen jegyezze meg.
- Ha csak egy gombra kell lyukat vágni egy nagyobb modulban, használd a **CSS selector override** mezőt.
- Ha egy szülőelem levágja a kiemelést, a közzétett oldalon próbáld ki: a réteg az oldal láblécében készül.
- Két modul azonos lépésszámmal mindkettő lejátszódik; ha ez nem szándékos, módosítsd az egyik számát.