Egérkurzor widget: áttekintés, kurzorterület és kurzortípusok

Az Egérkurzor widget lecseréli a látogató egérmutatóját az oldal általad kijelölt részén: képre, szóra, körre vagy egy képsorra. Ez a fejezet a widget összes közös beállítását leírja, a hatásukat a nyilvános oldalon, és azt, hol áll le az effekt. A követő képet külön az Egérkurzor: követő kép, a kurzor tárolóra és widgetre szűkítését az Egérkurzor: tároló és widget, a folyamatjelző kört az Egérkurzor: folyamatjelző kör fejezet írja le.

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

Mielőtt elkezdesz

• A widget a The Plus Addons → Widgets oldalon kapcsolható be: keresd meg a Mouse Cursor kapcsolót.
• 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, kurzoreffektus és értesítés nélkül jelenik meg.
• A widget a szerkesztőben semmit sem rajzol ki. A panelen is ez áll: „Ez a widget csak a webhely nyilvános felületén működik.” A kurzort a nyilvános oldalon vagy az előnézetben nézd.
• Minden kurzoreffektus kikapcsol, ha a böngészőablak 991 képpont vagy keskenyebb. Telefonon és a legtöbb tableten ezért nem történik semmi.

A widget bekapcsolása

1. Nyisd meg a The Plus Addons → Widgets oldalt.
2. Keresd meg a Mouse Cursor kapcsolót, és kapcsold be.
3. Szerkeszd az oldalt Elementorral, és húzd az Egérkurzor widgetet az oldalra.

A widget maga láthatatlan, ezért teljesen mindegy, hová húzod a tárolón belül. Csak az számít, melyik tárolóban vagy widget mellett áll.

A kurzor területe

A Tartalom fülön a Kurzor területe dönti el, az oldal mekkora részén él az új kurzor.

Érték	Mit fed le	Tapasztalat
Törzs	A teljes oldalt	A widget megjelöli az oldal törzsét, és a kurzor mindenhol érvényes
Tároló	Azt a tárolót, amelyben a widget áll	Az effekt addig látszik, amíg az egér a tárolón belül van, és azon kívül eltűnik
Widget	A közvetlenül a widget fölötti widgetet	Az effekt csak azon az egy widgeten látszik. Ha fölötte nincs semmi, nem jön létre semmi
Oszlop és Szakasz	A régi Elementor-oszlopot és -szakaszt	Tárolóalapú oldalon egyik sem lesz látható. Csak a régi szakasz-oszlop elrendezésű oldalon használd

A Tároló és a Widget részletei az Egérkurzor: tároló és widget fejezetben vannak.

A kurzor típusa

A Típus nem legördülő menü, hanem egy képsor, öt választható képpel. A sorrend: Kurzorikon, Kép követése, Szöveg követése, Követő kör, Egérmozgást követő kép.

Típus	Mit lát a látogató
Kurzorikon	Maga a mutató cserélődik le, beépített CSS-kurzorra vagy saját képre
Kép követése	A megszokott mutató megmarad, és egy kép követi
Szöveg követése	A megszokott mutató megmarad, és egy szó vagy kifejezés követi
Követő kör	Egy kör követi a mutatót. Három stílusa van: Keretkurzor, Folyamatjelző kurzor (oldaltörzs) és Keverési módú kurzor
Egérmozgást követő kép	A mutató mozgása közben képeket szór maga mögé, amelyek elhalványulnak

Kurzorikon

Ha a Kurzorikon a kiválasztott típus, az Ikon típusa az Előre meghatározott és az Egyéni közül választ.

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

A képen a Kurzor területe Törzs, az Ikon típusa Előre meghatározott, a Kiválasztás pedig a böngésző beépített kurzorainak listája.

• Az Előre meghatározott értéknél a Kiválasztás a böngésző szokásos kurzorainak listája: például célkereszt, megragadás, mozgatás, súgó, nagyítás, kicsinyítés, várakozás vagy semmi. Az alapérték a célkereszt. Az effekt a teljes területen érvényes, az Előre meghatározott nagyítás-kurzor például a fejlécen és a szövegen is nagyítót mutat.
• Az Egyéni értéknél a Kurzorikon mezőben saját képet választhatsz. Kicsi, átlátszó hátterű képet használj. A panel .svg fájlt kér.

Bármelyiket választod, a terület minden elemén érvényes, a linkeken és a képeken is, vagyis a link szokásos mutató keze is lecserélődik.

Egérkurzor kattintási effektusa

Az Egérkurzor kattintási effektusa kapcsolót bekapcsolva második kép adható, amely a linkek fölött mutatkozik a másik helyett. A név ellenére ez rámutatásra, nem kattintásra vált: amíg az egér egy <a> elem fölött van, a második kép látszik, máshol az első. Ha bekapcsolod a kapcsolót, de nem választasz második képet, semmi sem változik.

A követő típusok

A Kép követése, a Szöveg követése és a Követő kör megtartja a látogató megszokott mutatóját, és hozzáad valamit, ami követi. Három közös beállításuk van:

Beállítás	Mit csinál	Alapérték
Kurzor bal oldali eltolása	Jobbra tolja a követő elemet a mutatótól. Negatív érték balra tol. −500 és 500 között állítható	10 px
Kurzor felső eltolása	Lefelé tolja a követő elemet a mutatótól. Negatív érték felfelé tol. −500 és 500 között állítható	10 px
Egérkurzor kattintási effektusa	A kép vagy a szöveg cserélődik, amíg a mutató egy link fölött áll	Nem

Egérmozgást követő kép

Az Egérmozgást követő kép képeket szór a mutató mögé, ahogy mozog. A Képlista minden sora egy-egy kép, saját Szélesség, Eltolás X és Eltolás Y beállítással. Az Elem hozzáadása gombbal veszel fel új sort.

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

A képen a Képlista három sorral, alatta az Időtartam, a Távolságküszöb és a Húzási effektus.

Beállítás	Mit csinál	Alapérték
Időtartam	Hány másodperc alatt halványul el egy-egy kép. 0,1 és 5 között állítható	1
Távolságküszöb	Milyen messzire kell mozdulnia a mutatónak, mielőtt a következő kép lekerül. A nagyobb szám kevesebb képet jelent. 10 és 200 képpont között állítható	50 px
Húzási effektus	Minden képet kissé a mutató mögött kezd, abban az irányban, ahonnan jött	Kikapcsolva

A listából a widget véletlenszerűen választ képet minden lerakáskor. Három képnél kilenc gyors egérugrás tizenhét képet hagyott az oldalon egyszerre, és három és fél másodperc mozdulatlanság után mind eltűnt. Tizenkét öt képpontos mozdítás 200-as Távolságküszöbnél egyet sem rakott le.

https://minta-bolt.hu/km5-kurzor-nyom/

A képen a kártyák az egér útját követik, a régebbiek már elhalványultak. Az Egérmozgást követő kép a GSAP-ot is használja.

Stílus

A Stílus fül a kiválasztott típustól függ.

• Szöveg követése: Szöveg párnázása (alapérték 10/15/10/15 px), tipográfia, szövegszín, háttér, szegély, keretsugár és szövegdoboz-árnyék.
• Szöveg követése, ha a terület Widget: rövidebb szakasz, csak Szöveg mérete és Szöveg színe.
• Követő kör: Normál és Rámutatás fül, színekkel, körvonalvastagságokkal, Transzformációs CSS-sel és Átmenet időtartama értékkel.

Hogyan viselkedik

• A widget a szerkesztőben semmit sem rajzol ki. Az előnézetben vagy a nyilvános oldalon nézd.
• 991 képpont szélességű ablaknál és az alatt minden kikapcsol, 992 képponttól működik. A vizsgálat egyszer, betöltéskor fut, átméretezéskor nem ismétlődik.
• A feltétel az ablak szélessége, nem az eszköz. Egy 1200 képpont széles érintőeszközön az effekt működött, egy 390 képpontos telefonon nem.
• A widget egy stíluslapot és egy szkriptet tölt be, csak azokon az oldalakon, amelyek használják. Az Egérmozgást követő kép GSAP-ot is igényel.

Korlátozások

• A widget csak Pro. A Pro bővítmény nélkül eltűnik a szerkesztőből, és az oldal egyszerűen kurzoreffektus nélkül jelenik meg, értesítés nélkül.
• 991 képpont szélesség alatt nincs hatás, ezért a telefonos és tabletes látogatók nem látják. Ne használd információhordozásra.
• Az Egérkurzor kattintási effektusa a kurzort akkor cseréli, amikor a mutató egy link fölött van, nem akkor, amikor a látogató kattint.
• Az Oszlop és a Szakasz csak a régi, szakaszokkal és oszlopokkal épített oldalon működik. Tárolóalapú oldalon nem csinálnak semmit.
• Az egyedi kurzorkép a terület minden elemén lecseréli a mutatót, ezért a látogató elveszti a szokásos jelzést arról, hogy valami link. Tartsd kicsin a képet, és a linkeket máshogy is tedd egyértelművé.
• A Folyamatjelző kurzor (oldaltörzs) megrajzolja a gyűrűjét, de a gyűrű nem tölt fel görgetés közben. Lásd az Egérkurzor: folyamatjelző kör fejezetet.

Hibaelhárítás

A szerkesztőben semmi sem történik. Ez így van: a panel is azt írja, hogy a widget csak a nyilvános felületen működik. Használd az előnézetet, vagy nyisd meg az oldalt.

A laptopomon működik, a telefonomon nem. Ez is így van: minden effektus 991 képpontnál és alatta ki van kapcsolva.

A kurzor az egész oldalra érvényes, pedig csak egy szakaszra szántam. Állítsd a Kurzor területe értékét Törzsről Tárolóra, és ellenőrizd, hogy a widget abban a tárolóban van-e, amelyiket szánod.

Az egyedi kurzorképem nem látszik. Tartsd kicsin a képet: a nagyot a böngésző figyelmen kívül hagyhatja. Az átlátszóságot támogató formátumot használj, hogy tisztán üljön a tartalom fölött.