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

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.