Vízszintes görgetés: átmeneti effekt, hivatkozás egy diára és háttérkép váltása

A Vízszintes görgetés widget az oldal függőleges görgetését oldalirányú csúsztatássá alakítja: a sablon minden felső szintű szakasza egy dia. Ez a fejezet a görgetés közbeni átmeneti effektet, a hivatkozást egy adott diára, a diánként váltakozó háttérképet és háttérszínt, valamint a diák fölé rögzített sávot írja le.

A widget a Pro bővítmény része.

Mielőtt elkezdesz

• A widgetet a The Plus Addons → Widgets oldalon kapcsold be (Horizontal Scroll). A Pro bővítmény nélkül a widget eltűnik a szerkesztőből, és az oldal, amely már használja, üresen marad a widget helyén.
• Szükséged van egy sablonra: egy Elementor-könyvtári sablonra, amelynek felső szintű szakaszai a diák. A widget a Tartalom → Sablonminta kiválasztása listában kapja meg a sablont, és minden felső szintű szakaszából egy vízszintes diát csinál.

Átmeneti effekt görgetés közben

Az egyszerű oldalirányú csúsztatás is működik, de egy kevés mozgás a csík haladása közben természetesebbé teszi a görgetést. A Görgetési opciók → Görgetés közbeni csúsztatási effektusok négy beépített átmenetet kínál.

1. Jelöld ki a Vízszintes görgetés widgetet.
2. Nyisd meg a Görgetési opciók szakaszt.
3. Válassz egy értéket a Görgetés közbeni csúsztatási effektusok listából.
4. Ha megjelenik, állítsd be a Dőlés értéke vagy a Méretarány értéke mezőt, majd nézd meg a megjelent oldalon, és görgess.

https://minta-bolt.hu/wp-admin/post.php?post=221&action=elementor

Érték	Mi történik görgetés közben	Használt érték
Normál	Nincs átalakítás, a diák csak oldalra csúsznak.	nincs
Dőlés	A csík megdől haladás közben, visszagörgetéskor a másik irányba.	Dőlés értéke, 0 és 20 között, alapérték 3
Méretezés	A csík függőlegesen összenyomódik haladás közben.	Méretarány értéke, 0,1 és 1 között, alapérték 0,9
Ugrálás	Egyszerre dől és nyomódik össze.	mindkét érték

https://minta-bolt.hu/km6-vizszintes-effekt/

A képen a két dia határa ferde: a csík mozgás közben megdőlt.

• Az átalakítás az egész csíkra érvényes, nem diánként, ezért az összes dia együtt dől vagy nyomódik össze.
• Csak a görgetés alatt tart: nagyjából egy harmad másodperccel a megállás után a csík visszasimul a normál alakjába.
• A dőlés iránya a görgetés irányával fordul.
• A Dőlés értéke a Dőlés és az Ugrálás esetén, a Méretarány értéke a Méretezés és az Ugrálás esetén jelenik meg.
• Az alapbeállítás hatása kicsi.

Az effekt négy beépített változat között választ: nem kombinálhatod másképp, és saját átalakítást sem adhatsz meg. Egy diára külön nem alkalmazható. Mivel görgetés végén visszaáll, álló oldalról készített képernyőképen nem látszik.

Ha az effekt túl erős, csökkentsd a Dőlés értékét nulla felé, vagy növeld a Méretarány értékét egy felé. Ha semmi nem változik, görgetés közben nézd az oldalt: álló képen mindig normálisnak látszik.

Hivatkozás egy adott diára

Egy vízszintes görgetés sok tartalmat bírhat, és a negyedik diára az egyszerű horgonyhivatkozás magában nem visz el. A widget minden diának ad azonosítót, az URL-paraméter beállítás pedig ezeket hivatkozássá teszi.

1. lépés: azonosító minden diának

Két mód van, elég az egyik.

A. lehetőség: a sablonban. Nyisd meg a diák sablonját, jelölj ki egy szakaszt, és írd be az azonosítót a Haladó fül CSS ID mezőjébe.

B. lehetőség: a widgetből. Jelöld ki a Vízszintes görgetés widgetet, nyisd meg az Extra opciók szakaszt, és a Szakasz ID mezőbe írd az azonosítókat | jellel elválasztva, szóközök nélkül. A diákra sorrendben kerülnek.

https://minta-bolt.hu/wp-admin/post.php?post=222&action=elementor

Szóköz nélkül írd az azonosítókat, így: dia1|dia2|dia3|dia4. A határoló melletti szóköz az azonosító része marad, és a hivatkozás nem találja meg.

2. lépés: URL-paraméter bekapcsolása

Ugyanitt, az Extra opciókban kapcsold be az URL-paraméter kapcsolót. Ettől nyílik az oldal egy adott diánál.

3. lépés: hivatkozás a diára

Az azonosítót kettőskereszt előtaggal használd hivatkozásként. Gomb widgetnél ez a Link mezőbe kerül, például #dia2.

Ha az oldalt a #dia3 kiegészítéssel nyitod meg, rögtön a harmadik diára ér:

https://minta-bolt.hu/km6-vizszintes-link/

Másik oldalról ugyanazon a webhelyen az oldal útvonalát tedd az azonosító elé, például /szolgaltatasok/#dia2.

Hogyan viselkedik az azonosító

• A Szakasz ID az azonosítókat sorrendben adja a diáknak: az első azonosító a sablon első felső szintű szakaszára kerül, és így tovább.
• Ugyanazon az oldalon egy diaazonosítóra mutató hivatkozás a diát a bal szélre hozza az URL-paraméter állapotától függetlenül.
• Az URL-paraméter teszi működővé az oldalad.hu/oldal/#dia3 típusú címet: kikapcsolva az ilyen címmel érkező látogató az oldal tetején marad.
• Bekapcsolva a címsor is frissül, amikor a látogató hivatkozással vagy egy Carousel Remote ponttal diára lép.
• Ugyanezek az azonosítók szolgálnak a Carousel Remote pontok diaugrásához.

Korlátozások

• Ha kevesebb azonosítót sorolsz fel, mint ahány dia van, a maradék diák a szó szerinti undefined azonosítót kapják. Mindig diánként egyet adj meg.
• A | melletti szóközök az azonosítóban maradnak, és a hivatkozás nem működik.
• Az azonosítók pozíció szerintiek: a sablon szakaszainak átrendezése átosztja őket.
• Az ugrás az első dia szélességéből számolódik, ezért ha a Diák szélessége különböző értékeket tartalmaz, a hivatkozás nem középre érkezik.

Háttérkép váltása diánként

A diánként váltakozó háttérkép a vízszintes görgetést diavetítésszerűvé teszi úgy, hogy nem kell képet tenni az egyes szakaszokba. A Háttérátmenet beállítás diánként egy képet vesz, opcionális elmosással és színes fedvénnyel.

1. Jelöld ki a Vízszintes görgetés widgetet, és nyisd meg a Görgetési opciók szakaszt.
2. Kapcsold be a Háttérátmenet kapcsolót. Megjelenik a Háttér lista kezdetben három sorral.
3. Nyisd ki az Item #1 sort, és a Kép kiválasztása mezőben válassz képet. Ez lesz az első dia háttere.
4. A Háttérszűrő gombbal nyitod a szűrőbeállításokat: a Háttérelmosás elmossa a képet, a Háttérfedvény színt terít rá, ettől marad olvasható a világos szöveg.
5. Ismételd minden sorral, és az Elem hozzáadása gombbal vegyél fel annyi sort, ahány dia van.

https://minta-bolt.hu/wp-admin/post.php?post=223&action=elementor

A második dia a saját képén és fedvényén látszik:

https://minta-bolt.hu/km6-vizszintes-hatter/

Egy sor beállításai

Beállítás	Mit csinál	Alapérték
Cím	Csak a sor címkéje a panelen.	Item #1, Item #2
Szín	Egyszínű háttér kép helyett.	üres
Kép kiválasztása	A dia háttérképe.	üres
Háttérszűrő	Megnyitja a Háttérelmosás (0 és 10 között) és a Háttérfedvény beállítást.	alap, elmosás 1

Hogyan viselkedik

• A sorok pozíció szerint felelnek meg a diáknak: a 3. sor a 3. dia háttere.
• Egyszerre egy sor aktív, az követi a látható diát.
• A Háttérátmenet időtartama ugyanebben a szakaszban azt adja meg, mennyi ideig tart, amíg egyik kép átúszik a másikba (alapérték 0,7).
• A fedvény a kép fölött van, ezért a képet árnyalja, a dia tartalmát nem érinti.
• Az adott eszközön elrejtett dia kiesik a csíkból, és vele a háttérsora is.

Tippek és korlátozások

• Hagyd átlátszónak a sablon szakaszait: a háttérkép a sablon mögé kerül, ezért a saját háttérrel rendelkező szakasz eltakarja.
• Egy sorban vagy Színt, vagy Kép kiválasztása értéket használj. Ha mindkettő be van állítva, a kép nyer.
• A háttérképhez nincs kivágás-, fókuszpont- vagy méretvezérlő: a kép úgy tölti ki a területet, ahogy a stíluslap előírja.
• A Háttérelmosás 10-nél megáll.

Háttérszín váltása diánként

A háttérkép mellett színt is adhatsz minden diának: ugyanaz a Háttérátmenet beállítás kezeli, csak a sorban a Szín mezőt töltöd ki a kép helyett.

1. Jelöld ki a Vízszintes görgetés widgetet, nyisd meg a Görgetési opciók szakaszt, és kapcsold be a Háttérátmenet kapcsolót.
2. Nyisd ki az Item #1 sort, és a Szín mezőben válassz színt. Ez az első dia háttere.
3. Ismételd a többi sorral, és az Elem hozzáadása gombbal vegyél fel annyi sort, ahány dia van.
4. A Háttérátmenet időtartama adja meg, mennyi ideig tart egyik színből a másikba átúszni.

https://minta-bolt.hu/wp-admin/post.php?post=233&action=elementor

https://minta-bolt.hu/wp-admin/post.php?post=233&action=elementor

Minden dia a saját színén érkezik. A képen a második dia van a képernyőn, a mögötte lévő szín a második sorból jön:

https://minta-bolt.hu/km7-hs-szin/

Az időtartam 0-nál az átváltás azonnali, a csúszka 2 másodpercnél megáll, és az érték minden diára közös. Ha kevesebb sort veszel fel, mint ahány dia van, az utolsó diáknak nincs saját háttere. A sorok akkor is a megfelelő diát követik, ha a diák szélessége különböző. Egy sorban vagy színt, vagy képet állíts be, mert együtt a kép takarja a színt. A szín a sablon mögé kerül, ezért a sablon szakaszainak saját háttere eltakarja, és a Pro bővítmény nélkül a widget vele együtt semmit sem jelenít meg.

Ha a színek sosem látszanak, töröld a sablon szakaszainak saját hátterét. Ha a szín ugrik és nem úszik át, növeld a Háttérátmenet időtartamát.

Rögzített sáv a diák fölött

Amíg a vízszintes szakasz fut, az oldal többi része nincs a képernyőn. A Rögzített szakasz egy második Elementor-sablont tart a mozgó diák fölött, így egy cím, logó vagy hivatkozássor a teljes út alatt látszik.

1. Készítsd el a sávot külön Elementor-sablonként. Egy rövid szakasz elég. A sablon legyen közzétéve.
2. Jelöld ki a Vízszintes görgetés widgetet, és nyisd meg a Görgetési opciók szakaszt.
3. Kapcsold be a Rögzített szakasz kapcsolót.
4. A kapcsoló alatt megjelenő Sablonminta kiválasztása listában válaszd ki a sávot. Ha még nem készítetted el, a Create Template gomb segít.
5. Tedd közzé az oldalt, és görgess végig a szakaszon.

https://minta-bolt.hu/wp-admin/post.php?post=232&action=elementor

A sáv a diák fölött áll, és a diák mozgása közben is a helyén marad:

https://minta-bolt.hu/km7-hs-ragados/

• A sablon a vízszintes csík tetejére kerül, vele együtt mozog, és nem lebeg az egész oldal fölött.
• A teljes vízszintes úton a helyén marad. Ha az utolsó dia után az oldal tovább görög, a sáv a szakasszal együtt elgörög.
• Közönséges Elementor-sablon, tehát bármi lehet benne.
• Ha a sablon nincs közzétéve, a rögzített rész helyén „Unauthorized Access” üzenet látszik.
• Csak egy sablon lehet rögzített.
• A sáv a szakasz tetejéhez van rögzítve: alulra tenni vagy eltolni nem lehet. Nem fejléc, és nem követi a látogatót az oldal többi részén.
• A sáv helyet foglal a diák fölött, ezért számolj vele a diák magasságánál. Ha takarja a diák tetejét, csökkentsd a magasságát, vagy adj a sablon szakaszainak felső belső margót.
• Ha túl korán elgörög, növeld a Görgetési sebességet: ez határozza meg, mennyi ideig marad a szakasz a képernyőn.
• A Rögzített szakasz sablonválasztója csak a kapcsoló bekapcsolása után jelenik meg.

Hibaelhárítás

Kiválasztottam egy effektet, de semmi sem változott

Görgetés közben nézd az oldalt. Az átalakítás a görgetés végén visszaáll, ezért álló oldalon mindig normálisnak látszik.

Nincs ott a Dőlés értéke vagy a Méretarány értéke

Mindkettő csak azokhoz az effektekhez jelenik meg, amelyek használják: a Dőlés értéke a Dőlés és az Ugrálás esetén, a Méretarány értéke a Méretezés és az Ugrálás esetén.

A hivatkozás nem csinál semmit

Ellenőrizd az azonosító helyesírását mindkét oldalon, és azt, hogy a Szakasz ID a | jel körül nem tartalmaz szóközt.

A #dia3 címmel megnyitott oldal az elején marad

Az URL-paraméter ki van kapcsolva. Kapcsold be az Extra opciókban.

Az utolsó diákra nem lehet hivatkozni

Kevesebb azonosítót adtál meg, mint ahány dia van, ezért a többi dia azonosítója undefined. Adj meg diánként egy azonosítót.

A hivatkozás két dia közé érkezik

A Diák szélessége különböző értékeket tartalmaz. Ha a hivatkozásnak pontosan kell érkeznie, használj egyetlen szélességet minden diához.

A háttérképek nem jelennek meg

Töröld a sablon szakaszainak saját hátterét: ezek a háttérátmenet rétege fölött rajzolódnak.

A diák szövege nehezen olvasható

Nyisd meg a Háttérszűrő beállítást, adj félig átlátszó Háttérfedvényt, vagy növeld a Háttérelmosást.

Az egyik dia színt mutat a kép helyett

Abban a sorban egyszerre van Szín és Kép kiválasztása, vagy hiányzik a kép. Ellenőrizd azt a sort, amely a dia pozíciójának felel meg.