Vízszintes görgetés widget: áttekintés és az összes beállítás

A Vízszintes görgetés widget egy Elementor-sablonból diák sorát csinálja, amely oldalirányban halad, miközben a látogató lefelé görget. A kiválasztott sablon minden felső szintű szakasza egy dia. Ez a fejezet a widget összes beállítását végigveszi. A görgetés közbeni effektről, a diára mutató hivatkozásról és a diánként váltakozó háttérről a Vízszintes görgetés: átmeneti effekt, hivatkozás egy diára és háttérkép váltása fejezet szól.

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). Ha a navigációs elemeket (pontok, gombok, lapozás, folyamatjelző sáv) is használni szeretnéd, a Carousel Remote widgetet is kapcsold be.
• 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. Figyelmeztetés nincs.
• Szükséged van egy Elementor-könyvtári sablonra, amelynek felső szintű szakaszai a diák.
• Tedd a widgetet teljes szélességű tárolóba, belső margó nélkül. A diák méretét a nézetablak szélessége adja, ezért az oldalsó belső margó miatt a következő dia egy sávja bekukucskál.

A tartalom beállítása

Húzd az oldalra a widgetet, és nyisd meg a Tartalom szakaszt.

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

1. A Sablonminta kiválasztása listából válaszd ki a diák sablonját. A lista az Elementor-könyvtár elemeit mutatja.
2. Ha még nincs sablonod, kattints a Create Template gombra: a szerkesztő felugró ablakban nyílik meg, így az oldal elhagyása nélkül megépítheted a diákat.
3. Később az Edit Template gombbal térhetsz vissza a sablonhoz.
4. A szakasz tetején az Import Presets kész elrendezést hoz be.

A sablon szakaszaiból lesznek a diák. Ha teljes képernyős diákat szeretnél, adj a szakaszoknak 100vh minimális magasságot. Ha nincs sablon kiválasztva, az oldalon a „No Template Selected! Please Select Template To Get The Desired Result.” üzenet látszik.

Görgetési opciók

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

A képen a beállítások a táblázat sorrendjében követik egymást.

Beállítás	Mit csinál	Alapérték
Görgetés közbeni csúsztatási effektusok	A mozgó csíkra átalakítást tesz: Dőlés, Méretezés vagy Ugrálás. Nem sokkal a görgetés megállta után visszaáll.	Normál
Dőlés értéke / Méretarány értéke	Az átalakítás erőssége.	3 és 0,9
Háttérátmenet	Minden diának saját háttérszínt vagy háttérképet ad a sablon mögé.	Ki
Háttérátmenet időtartama	Mennyi idő alatt úszik át egyik háttér a másikba (másodperc).	0,7
Rögzített szakasz	Egy második sablont rögzít a diák fölé a teljes vízszintes szakaszra.	Ki
Átlátszatlanság-alapú görgetés	A még előttünk álló diákat elhalványítja, az Érték adja meg, mennyire.	Ki, érték 0,5
Teljes diás görgetés	A csík mindig egy egész dián áll meg.	Ki
RTL-kompatibilitás	A csík jobbról balra halad.	Ki
Görgetési sebesség	Mennyi oldalgörgetést foglal le a teljes vízszintes szakasz.	4

A Görgetési sebesség távolság, nem sebesség

A vízszintes szakasz addig marad rögzítve, ameddig a nézetablak szélességének és a Görgetési sebesség értékének szorzata kitesz. Egy 1440 pixeles képernyőn négy diával a rögzített terület magassága 6660 px volt az alapértéken (4), 2340 px az 1-es és 15 300 px a 10-es értéknél. A diák mindig ugyanazt a távolságot teszik meg oldalra, a nagyobb szám ezt több görgetésre osztja szét, ezért a csík lassabban mozog. Ha túl lassúnak érzed, csökkentsd az értéket.

Extra opciók

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

Az Egyedi kapcsolati ID és a Szakasz ID a Carousel Remote összekötéséhez kell.

Beállítás	Mit csinál	Alapérték
Távolság az utolsó dia után	Plusz oldalirányú mozgás, miután az utolsó dia a helyére került. Az oldalt nem teszi magasabbá.	0
Diák szélessége	A diák szélessége nézetablak-szélességben, `	` jellel elválasztva, szóköz nélkül. Egyetlen érték minden diára érvényes.
Szakasz ID	Azonosító minden diához, `	` jellel elválasztva, szóköz nélkül. Hivatkozásokhoz és a Carousel Remote pontjaihoz kell.
URL-paraméter	A #azonosito végű címmel megnyitott oldal azon a diánál nyílik.	Ki
Egyedi kapcsolati ID	Összeköti a widgetet egy Carousel Remote widgettel.	üres
Reszponzív láthatóság	A Szélesség alatt a diák egymás alá kerülnek, és az oldal egyszerűen görgethető.	Ki, szélesség 300

A Diák szélessége diánként egy értéket vár. A 100|50|100|150 egy 1440 pixeles képernyőn 1440, 720, 1440 és 2160 pixeles diákat adott.

Vízszintes görgetés kikapcsolása kis képernyőn

Telefonon kényelmetlen az oldalirányú görgetés. Kapcsold be a Reszponzív láthatóság kapcsolót, és a Szélesség mezőben add meg azt a képernyőszélességet, amely alatt vagy amelynél a hatás megszűnik. Egy 390 pixeles telefonképernyőn, 1024-es szélességi értéknél a diák egymás alá kerültek, és az oldal normálisan görgethető volt.

Az érték az eszköz képernyőjének szélességéhez viszonyít, nem a böngészőablakéhoz. Egy asztali böngészőablak összehúzása ezért nem kapcsolja ki a hatást, csak egy valóban kis képernyős eszköz.

Hogyan viselkedik

• A kiválasztott sablon minden felső szintű szakasza egy dia, a sablon sorrendjében.
• A csík mozgás közben rögzített, az oldal magassága a Görgetési sebesség minden egységével egy nézetablak-szélességgel nő.
• Az Elementor Elrejtés asztali nézetben / tableten / mobilon beállításával elrejtett dia kiesik a csíkból az adott eszközön. Vele együtt kiesik a hozzá tartozó háttérsor és a Carousel Remote pontja is.
• A widget négy plusz szkriptet tölt be, csak azokon az oldalakon, ahol használod: GSAP, ScrollToPlugin, ScrollTrigger és a saját kezelőjét.

Korlátozások

• A Távolság az utolsó dia után az utolsó diát a bal szélen túlra húzza, és ugyanekkora rés nyílik jobb oldalon.
• Az egyetlen szakaszból álló sablon is lefoglalja a teljes rögzített szakaszt, vagyis hosszan görgetsz úgy, hogy semmi nem mozdul.
• A Szakasz ID nem vágja le a szóközöket. Ha kevesebb azonosítót adsz meg, mint ahány dia van, a maradék diák szó szerint undefined azonosítót kapnak.

Hibaelhárítás

Az oldal csak lefelé görög, oldalra semmi sem mozdul

Ellenőrizd, hogy van-e kiválasztott sablon, és hogy több felső szintű szakaszból áll-e. Egyetlen szakasz nem ad mit végiggörgetni.

A következő dia egy sávja mindig látszik

A tároló, amelyben a widget van, legyen teljes szélességű, és töröld a belső margóját.

Telefonon is oldalra görget

Kapcsold be a Reszponzív láthatóság kapcsolót, és a Szélesség értéke legyen nagyobb a telefon képernyőszélességénél. Ne feledd: a képernyőhöz viszonyít, nem a böngészőablakhoz.

A görgetés túl lassú

Csökkentsd a Görgetési sebesség értékét.