MagyarmagyarOldalgö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?
Szekció neve “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.
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
Szekció neve “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.
| 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)
Szekció neve “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.
Működés beállításai
Szekció neve “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 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ó
Szekció neve “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 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. |
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
Szekció neve “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 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 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 fejezet írja le.
Készült: