# Oldalgörgetés: effektek, szakaszonkénti és tehetetlenségi görgetés

> Az oldal szakaszait görgetési lépésekké alakító Oldalgörgetés beállításai: görgetési effektek, szakaszonkénti (snap) görgetés navigációval és tehetetlenségi görgetés.

Az **Oldalgörgetés** az oldal szakaszait görgetési lépésekké alakítja. Háromféle működést kapcsolhatsz be: **Görgetési effektek** (átmeneti hatás a szakaszok között), **Szakaszonkénti görgetés** (az oldal szakaszról szakaszra ugrik) és **Tehetetlenségi görgetés** (a görgetés késleltetve, finoman követi az egeret).

> A funkció az egyes szakaszokat (section) alakítja görgetési lépésekké. A konténerekkel való kompatibilitáson a fejlesztők dolgoznak, ezért konténeres oldalon próbáld ki, mielőtt éles oldalra teszed. Az Elementor sablonjainál a görgetési beállítások nem érhetők el, csak oldalaknál és bejegyzéseknél.

## Hol találod?

Az Elementor szerkesztőjében kattints a bal alsó sarokban lévő fogaskerékre (**Oldal beállításai**). A **Beállítások** fülön nyisd ki az **Oldalgörgetés** szakaszt. Itt először a **Görgetési beállítások** kapcsolót kell bekapcsolnod, utána jelenik meg a három lehetőség.

![Az Oldalgörgetés szakasz bekapcsolt Görgetési beállítások kapcsolóval](./kepek/oldalgorgetes-oldalbeallitasok.webp)

*Az Oldalgörgetés szakasz bekapcsolt Görgetési beállítások kapcsolóval* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen a négy kapcsoló látszik: a főkapcsoló már be van kapcsolva, alatta a három görgetési mód még kikapcsolt.

| Kapcsoló | Mit csinál |
| --- | --- |
| **Görgetési beállítások** | Engedélyezi az oldal görgetési funkcióit. Enélkül a többi kapcsoló nem látszik. |
| **Görgetési effektek** | Átmeneti hatás a szakaszok között görgetés közben. |
| **Szakaszonkénti görgetés** | A szakaszok között „ugrik” az oldal (snap hatás). |
| **Tehetetlenségi görgetés** | A görgetés a megadott együtthatóval késleltetve követi az egeret. Függőlegesen és vízszintesen is használható. |

> A különböző görgetési módok nem működnek együtt. Például a vízszintes tehetetlenségi görgetést és a szakaszonkénti görgetést nem használhatod egyszerre.

## Görgetési effektek

A **Görgetési effektek** átmeneti hatást ad a szakaszok közé. Az effektek kombinálhatók: ha például a **Kicsinyítés** és a **Forgatás** is ki van választva, a két hatás együtt érvényesül. Az effekt kompatibilis az Elementor MotionScroll funkciójával.

![A Görgetési effektek beállításai](./kepek/oldalgorgetes-effektek.webp)

*A Görgetési effektek beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Animációs effektek** | Egy vagy több effekt kiválasztása. A lista: **Nincs**, **Kicsinyítés**, **Átlátszatlanság**, **Rögzített**, **Forgatás**, **Késleltetett maszkolás**, **Eger**, **Szlalom**, **Forgatás**, **Fordított pörgés**, **Balra sodródás**, **Jobbra sodródás**, **Balról jobbra**, **Jobbról balra**, **Nagyítás és kicsinyítés**, **Nagyítás**, **Kicsinyítés**, **Lengés**, **Gyors**. A listában a **Forgatás** és a **Kicsinyítés** név kétszer szerepel: két külön effektről van szó, csak a magyar felirat azonos. | **Kicsinyítés** |
| **A hatás eltávolítása az első sorból** | Az első szakaszon nem fut le az effekt. | Nem |
| **Szakasz egyéni osztálya** | Ha kitöltöd, az effekt csak az ezzel a CSS-osztállyal ellátott szakaszokra érvényes. | üres |
| **Görgetési effektek alkalmazása** | Mely eszközökön legyen aktív: **desktop**, **tablet**, **mobile**. | mindhárom |

A reszponzív beállítás csak az előnézetben vagy az éles oldalon érvényesül, a szerkesztőben nem.

## Szakaszonkénti görgetés (snap)

A **Szakaszonkénti görgetés** a szakaszok közötti „beugró” (snap) hatást adja: egy görgetés a következő szakaszra visz. Az **Oldalgörgetés** szakaszban kapcsold be a **Szakaszonkénti görgetés** kapcsolót.

![A Szakaszonkénti görgetés beállításai](./kepek/oldalgorgetes-snap.webp)

*A Szakaszonkénti görgetés beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

### Működés beállításai

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Szakasz egyéni osztálya** | A snap csak az ezzel a CSS-osztállyal ellátott szakaszokra vonatkozik. | üres |
| **Közbeiktatott szekció** | Azoknak a nem teljes magasságú szakaszoknak a CSS-szelektora, amelyekre nem kell snap hatás, például a fejléc és a lábléc. Nagyon fontos kitölteni, különben a snap rájuk is érvényes lesz. A szelektor a téma HTML-szerkezetétől függ, lásd a [témák HTML-szerkezete](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/oldalgorgetes-burkolo-es-temaszerkezet/) fejezetet. | mintaszöveg: header, footer |
| **Görgetési sebesség** | Az átmenet hossza ezredmásodpercben (500 és 2400 között). | 1000 |
| **Eltolás** | Pixelben megadott eltolás, amennyivel a szakaszok pozícióját elmozdítja (-500 és 500 között). | 0 |
| **Szakaszmagasság teljes képernyőre állítása** | Eldönti, hogy a bővítmény teljes képernyő magasságúra állítsa-e a szakaszokat. | Igen |
| **Görgetés túlcsordulás esetén** | Ha egy szakasz tartalma magasabb a képernyőnél, engedi a szakaszon belüli görgetést. | Igen |
| **Hash frissítése** | Görgetés közben frissíti a böngésző címsorában a hash (#) részt. | Nem |
| **Görgetősáv megjelenítése** | A böngésző görgetősávja látszik-e. | Igen |
| **Érintéses görgetés** | Kezeli-e az érintéses görgetést. | Igen |
| **Snap Scroll alkalmazása ezen** | Mely eszközökön legyen aktív: **desktop**, **tablet**, **mobile**. Csak az előnézetben vagy az éles oldalon érvényesül. | mindhárom |

### Navigáció

A **Navigáció engedélyezése** kapcsolóval egy folyamatjelző navigációt kapcsolsz be az oldal szélére. A **Navigáció stílusa** listából választhatsz: **Dinamikus**, **Pontok**, **Sávok**, **Függőleges sávok**, **Vonalak (cím nélkül)**, **Négyzetek**, **Körök**, **Körök vonala (SVG)**, **Háromszögek**, **Ikonok**.

![A Navigáció stílusa és a méret, térköz, szín beállítások](./kepek/oldalgorgetes-snap-navigacio.webp)

*A Navigáció stílusa és a méret, térköz, szín beállítások* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A kiválasztott stílustól függően ezek a beállítások érhetők el:

| Beállítás | Mit csinál |
| --- | --- |
| **Szakasz címének megjelenítése** | A szakasz címe a navigációban: **Nincs**, **Szám** (sorszám) vagy **Szakasz CSS ID** (a szakasz CSS-azonosítója). A **Vonalak (cím nélkül)** és a **Körök** stílusnál ez nem választható. |
| **Cím tipográfiája**, **Cím színe** | A cím betűtípusa és színe (ha van cím). |
| **Ikon**, **Ikon mérete** | Csak az **Ikonok** stílusnál: az ikon és a mérete. Saját ikont is megadhatsz. |
| **Méret** | A navigációs elem mérete. |
| **Térköz** | A navigációs elemek közötti távolság. |
| **Oldalsó térköz** | Az elem távolsága az oldal szélétől. |
| **Szín**, **Aktív szín**, **Szegély színe**, **Aktív szegély színe**, **Szegély mérete** | Az elemek színei és szegélye. A **Dinamikus** stílusnál ezek **Normál**, **Rámutatás** és **Aktív** állapot szerinti fülekre bontva jelennek meg. |

![Az Ikonok stílus beállításai szakaszszámmal](./kepek/oldalgorgetes-snap-ikonok.webp)

*Az Ikonok stílus beállításai szakaszszámmal* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A képen az **Ikonok** stílus látszik, ahol a szakasz címe a **Szám**. Itt külön beállítható az ikon és annak mérete is.

Ha a címet a szakasz CSS-azonosítójával szeretnéd megjeleníteni, előbb add meg az azonosítót a szakaszon (**Haladó** fül, CSS-azonosító mező), és csak utána válaszd a **Szakasz CSS ID** lehetőséget. Az azonosítóban nem lehet szóköz; a kötőjelet (-) és az aláhúzást (_) a bővítmény szóközzé alakítja a navigációs címben.

## Tehetetlenségi görgetés

A **Tehetetlenségi görgetés** egy együttható szerint késlelteti és lágyítja a görgetést, a szakaszok közben megdőlhetnek (ferdítés). Függőlegesen és vízszintesen is működik.

![A Tehetetlenségi görgetés beállításai](./kepek/oldalgorgetes-tehetetlenseg.webp)

*A Tehetetlenségi görgetés beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=59&action=elementor)

A görgetés kezelése az oldal különböző elemeit érinti, nem csak az Elementort. A megfelelő működéshez és az átalakítások (transzformációk) eléréséhez meg kell adnod a használt téma CSS-szelektorait. Alapértelmezés szerint az OceanWP téma elemeit jelöli meg a bővítmény. A témák szelektorait a [témák HTML-szerkezete](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/oldalgorgetes-burkolo-es-temaszerkezet/) fejezet sorolja fel.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Automatikus burkolóelem** | Bekapcsolva a bővítmény JavaScripttel maga hozza létre a két burkolót (`#outer-wrap` és benne `#wrap`) az Elementor-tartalom körül, ha az oldalon még nincsenek. Ilyenkor a két szelektormező nem látszik. | Nem |
| **Nézetablak** | A nézetablak (viewport) burkolójának CSS-szelektora. | `#outer-wrap` |
| **Tartalom görgetése** | A mozgó tartalom burkolójának CSS-szelektora. | `#wrap` |
| **Sebességi együttható** | A késleltetés mértéke (0 és 0,5 között). | 0,05 |
| **Pattogás** | A pattogó hatás erőssége (0 és 0,8 között). | 0 |
| **Ferdítés** | A szakaszok ferdítése görgetés közben (0 és 20 között). | 10 |
| **Görgetés iránya** | **Függőleges** vagy **Vízszintes**. | **Függőleges** |
| **Tehetetlenségi görgetés alkalmazása ezen** | Mely eszközökön legyen aktív: **desktop**, **tablet**, **mobile**. Csak az előnézetben vagy az éles oldalon érvényesül. | **desktop** |

Ha a téma nem tartalmazza a két burkolót, két megoldás van: az **Automatikus burkolóelem** bekapcsolása, vagy a burkolók beépítése a témába. Utóbbit a [burkolóelem létrehozása](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/oldalgorgetes-burkolo-es-temaszerkezet/) fejezet írja le.