# 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 görgetési effektjei (dőlés, méretezés, ugrálás), a diák közvetlen elérése hivatkozással, a diánként váltakozó háttérkép vagy háttérszín és a rögzített sáv a diák fölött.

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.

![A Görgetési opciók szakasz a görgetési effektussal, háttérátmenettel és a további kapcsolókkal](./kepek/kepek-media-vizszintes-panel-gorgetes.webp)

*A Görgetési opciók szakasz a görgetési effektussal, háttérátmenettel és a további kapcsolókkal* (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 |

![A vízszintes csík görgetés közben megdőlve: a narancs és a zöld dia határa ferde](./kepek/kepek-media-vizszintes-effekt.webp)

*A vízszintes csík görgetés közben megdőlve: a narancs és a zöld dia határa ferde* (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.

![Az Extra opciók szakasz: szakaszazonosítók, URL-paraméter és egyedi kapcsolati azonosító](./kepek/kepek-media-vizszintes-panel-extra.webp)

*Az Extra opciók szakasz: szakaszazonosítók, URL-paraméter és egyedi kapcsolati azonosító* (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:

![A vízszintes görgetés oldal a #dia3 címmel megnyitva: a harmadik dia a bal szélen](./kepek/kepek-media-vizszintes-link.webp)

*A vízszintes görgetés oldal a #dia3 címmel megnyitva: a harmadik dia a bal szélen* (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.

![A Görgetési opciók szakasz bekapcsolt háttérátmenettel és a háromsoros Háttér listával](./kepek/kepek-media-vizszintes-panel-hatter.webp)

*A Görgetési opciók szakasz bekapcsolt háttérátmenettel és a háromsoros Háttér listával* (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:

![A vízszintes görgetés egyik dia a saját háttérképén, sötét fedvénnyel](./kepek/kepek-media-vizszintes-hatter.webp)

*A vízszintes görgetés egyik dia a saját háttérképén, sötét fedvénnyel* (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.

![Az első háttérsor kinyitva: cím, szín, kép kiválasztása és háttérszűrő](./kepek/kepek-media-vizszintes-panel-szin.webp)

*Az első háttérsor kinyitva: cím, szín, kép kiválasztása és háttérszűrő* (https://minta-bolt.hu/wp-admin/post.php?post=233&action=elementor)

![A kinyitott Item #1 sor a kiválasztott színnel](./kepek/kepek-media-vizszintes-panel-szin-sor.webp)

*A kinyitott Item #1 sor a kiválasztott színnel* (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:

![A vízszintes görgetés második diája a saját háttérszínén](./kepek/kepek-media-vizszintes-szin.webp)

*A vízszintes görgetés második diája a saját háttérszíné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.

![A Rögzített szakasz bekapcsolva, alatta a sablon kiválasztása](./kepek/kepek-media-vizszintes-panel-ragados.webp)

*A Rögzített szakasz bekapcsolva, alatta a sablon kiválasztása* (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:

![A sárga sáv a vízszintes görgetés fölött rögzítve, a második diával](./kepek/kepek-media-vizszintes-ragados.webp)

*A sárga sáv a vízszintes görgetés fölött rögzítve, a második diával* (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.