Egérkurzor: követő kör, keverő kurzor és követő szöveg

Az Egérkurzor widget két követő típusa a Szöveg követése és a Kör követése. Ez a fejezet ezek beállításait írja le: a kört (keretkurzort), a keverő kurzort, amely invertálja vagy átszínezi, ami alatta van, és a szövegcímkét, amely az egérrel mozog.

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

Mielőtt elkezdesz

• A widgetet a The Plus Addons → Widgets oldalon kapcsold be (Mouse Cursor).
• 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 nem rajzol semmit, a panelen ez áll: „Ez a widget csak a webhely nyilvános felületén működik.” A kurzort a megjelent oldalon nézd meg.
• Minden kurzoreffektus kikapcsol, ha a böngészőablak 991 képpont vagy keskenyebb, ezért telefonon és a legtöbb tableten nem történik semmi.
• A widget láthatatlan, ezért mindegy, hová húzod a tárolón belül: csak az számít, melyik tárolóban áll.

Követő kör

A kör finoman az egérmutató után csúszik, a mutató pedig megmarad alatta.

1. Húzd az Egérkurzor widgetet a tárolóba, amelyre az effektet szeretnéd.
2. A Kurzor területe legyen Törzs, ha az egész oldalon működjön, vagy Tároló, ha csak egy sávban.
3. A Típus sorban kattints a negyedik képre, a Kör követése típusra.
4. A Mutatótípus legyen Előre meghatározott a beépített körstílusokhoz, vagy Egyedi, ha saját alakot építesz.
5. Előre meghatározott esetén a Mutató kiválasztása adja meg, milyen mutatót lát a látogató a kör alatt (alapérték: célkereszt).
6. Válassz alakot a Követő kör stílusa listában.

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

A képen a negyedik típus van kijelölve, alatta a Követő kör stílusa, a kör mérete, az eltolások, a Kör Z-indexe és a Címkék listája a rámutatási effektushoz.

Stílus	Mit rajzol
Keretkurzor	Egyszerű, kitöltött kör, amelynek a színét te adod meg. Ez a szokásos választás.
Folyamatjelző kurzor (törzs)	Két SVG-körből álló gyűrű, csak a Törzs területtel működik. Lásd az Egérkurzor: folyamatjelző kör fejezetet.
Keverő kurzor	CSS-keverési móddal rajzolt kör, amely átszínezi, ami alatta van. Lásd lejjebb.

https://minta-bolt.hu/km6-kurzor-kor/

A képen a kék kör a fotó fölé került; a mutató alatta marad.

Méret és pozíció

Beállítás	Mit csinál	Alapérték
Kör maximális szélessége és Kör maximális magassága	A kör mérete. A tökéletes körhöz mindkettő kell, azonos értékkel.	100 px (0 és 500 között)
Kurzor bal oldali eltolása és Kurzor felső eltolása	A kört eltolja az egérmutatótól.	10 px mindkettő
Kör Z-indexe	A kör helye a rétegek között. Növeld, ha a kör eltűnik az oldal tartalma mögött.	1 (0 és 99999 között)

A Kör Z-indexe valóban 1-ről indul, ami elég alacsony ahhoz, hogy szinte minden pozicionált elem eltakarja a kört. Ha a kör egy részen eltűnik az elrendezésedben, ezt emeld meg.

Saját kör építése

Ha a Mutatótípus értéke Egyedi, a tartalom típusát Kép vagy Szín között választod.

• Szín esetén megadhatod a színt, a méretet (alapérték 20 px), a lekerekítést, az elmosást (alapérték 0) és a keverési módot. Ez a kör kattintásáteresztő, a linkeket nem takarja el. Lágy fényfolt vagy elnyújtott folt készítésére jó.
• Kép esetén a mutatóra a kiválasztott kép kerül, de a gyári, áttetsző szürke kör is tovább követi az egeret. Ha csak képes mutatót szeretnél, használd inkább a Kurzorikon típust az Egyedi ikontípussal.

Normál és rámutatási stílus

A Stílus fülön a Követő kör blokk Normál és Rámutatás füleket tartalmaz.

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

• A Háttérszín tölti ki a kört.
• Az Átlátszatlanság a kör áttetszőségét adja (csak keretkurzornál és keverő kurzornál).
• A Transzformációs CSS bármilyen CSS-átalakítást elfogad, például rotate(10deg) scale(1.1).
• Az Átmenet időtartama azt adja meg, mennyi ideig tart a változás (alapérték 0,5 mp, 0,1 és 3 között).
• A Rámutatás fül ugyanezeket tartalmazza azokra az időkre, amikor a mutató egy megfelelő elem fölött áll.

Mely elemek számítanak rámutatásnak

A Tartalom fülön a Címkék listája a rámutatási effektushoz dönti el. CSS-választót vár, a panel példája: a,h1,h2. A vesszővel elválasztott értékek szóközzel és szóköz nélkül is működnek (a,img és a, img). A mező csak valódi CSS-választót fogad el: a hibás, például a|img leállítja az egész kurzort, a kör meg sem jelenik, és nem követi az egeret. A panel ezt a mezőt a magyar felületen ma egy alapértékkel mutatja az a helyett; írd át a-ra, ha a linkek fölötti rámutatást szeretnéd.

Keverő kurzor

A keverő kurzor olyan kör, amely nem ül rá a tartalomra, hanem reagál rá: invertálja a fotót, átszínezi a címsort, vagy világosítja a sötét szakaszt, ahogy áthalad rajta. Hatását a CSS-keverési mód adja.

1. Állítsd be a követő kört a fenti lépésekkel, de a Követő kör stílusa legyen Keverő kurzor.
2. A Mutatótípus maradjon Előre meghatározott.
3. Állítsd a Kör maximális szélességét és magasságát azonos értékre. A keverő kurzor általában nagyobb, mint a sima: 120 és 150 px között jól olvasható.
4. Emeld meg a Kör Z-indexét, különben a kör az elemek mögé kerül.

A Stílus fülön a Keverési mód áll legfelül, alapértéke a difference. Utána a Normál fülön adj Háttérszínt: amíg a körnek nincs színe, a keverési módnak nincs mivel dolgoznia. A fehér szín és a difference mód adja a klasszikus invertált fotó hatást.

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

Keverési mód	Mit csinál
difference	Invertálja, ami a kör alatt van. Az alapérték és a legerősebb.
exclusion	Mint a difference, de a középtónusokban lágyabb.
multiply	Sötétít. Világos fotók fölött jó.
screen	Világosít. Sötét szakasz fölött jó.
overlay, hard-light, soft-light	Különböző mértékben növelik a kontrasztot.
hue, saturation, color, luminosity	A tartalmat megtartják, és csak az adott összetevőt változtatják.

https://minta-bolt.hu/km6-kurzor-keveres/

A képen a kör és a hegy csúcsa találkozásánál látszik a megfordított szín: a keverés azzal történik, ami a kör mögött tényleg ki van rajzolva.

A Normál és Rámutatás fül itt is tartalmazza a Háttérszínt, a Transzformációs CSS-t és az Átmenet időtartamát. Hogy mi számít rámutatásnak, a Címkék listája a rámutatási effektushoz dönti el, ugyanúgy, mint a sima körnél.

Mit érdemes tudni a körről és a keverő körről

• A kör rejtve marad, amíg a mutató először be nem lép a területre, utána minden mozdulatot követ.
• A Mutató kiválasztása a kör alatti szokásos mutatót módosítja, nem magát a kört.
• Előre meghatározott mutatótípusnál a kör nem kattintásáteresztő, a mutató és az oldal közé kerül. Ezért a Rámutatás fülön a Transzformációs CSS megbízhatatlan lehet: ismételt próbáknál előfordult, hogy a kör megtartotta a rámutatási átalakítást, miközben a mutató messze volt a megfelelő elemtől, máskor pedig nem alkalmazta, miközben fölötte állt. Díszítésnek használd, jelzésnek ne.
• A keverési módnak kell valami a kör mögött. Sima fehér oldal fölött fehér körrel és difference móddal semmi sem látszik.

Követő szöveg

A követő szöveg rövid címkét tesz az egérmutató mellé (például „Projekt megnézése”, „Húzd”, „Tovább”), és az egérrel együtt mozgatja. Ez a legolcsóbb mód arra, hogy megmondd a látogatónak, mit tesz egy kép vagy egy panel, ha rákattint.

1. Húzd az Egérkurzor widgetet a tárolóba.
2. A Kurzor területe legyen Törzs az egész oldalra, vagy Tároló egy sávra.
3. A Típus sorban kattints a harmadik képre, a Szöveg követése típusra.
4. Írd be a címkét a Szöveg követése mezőbe. Kezdetben a „Follow Text” szavak állnak benne, ezt írd át magyarra.
5. Tedd közzé az oldalt, és mozgasd az egeret a területen.

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

https://minta-bolt.hu/km6-kurzor-szoveg/

A képen a címke az egérmutató közepére igazodik. A szöveg a mutató köré van középre igazítva, nem a bal felső sarkára (ellentétben a követő képpel): ha a két típus között váltasz, az eltolásokat újra be kell állítanod. A Kurzor bal oldali eltolása és Kurzor felső eltolása (alapérték 10 px mindkettő) arra való, hogy a címkét arrébb told a mutatótól, ha takarja.

A címke stílusa

A Stílus fül Követő szöveg blokkjában alakítod ki a címke megjelenését.

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

Beállítás	Mit csinál	Alapérték
Szöveg paddingje	A címke belső tere, ettől lesz tabletta vagy címke formájú.	10 / 15 / 10 / 15 px
Tipográfia	Betűtípus, méret, vastagság, térköz.	16 px, örökölt betűtípus
Szöveg színe	A címke színe.	fekete
Háttér típusa	Egyszínű vagy átmenetes háttér a címke mögött.	nincs
Szegély típusa és Keretsugár	Körvonal és lekerekített sarkok.	nincs
Szövegdoboz árnyéka	A címke mögötti árnyék.	nincs

Ha a Kurzor területe Widget, a blokk jóval rövidebb: csak a szöveg mérete és színe állítható. A padding, a háttér és a szegély ilyenkor nem érhető el.

Más címke a linkek fölött

Kapcsold be az Egérkurzor kattintási effektusa kapcsolót, és töltsd ki a Kattintáskor megjelenő szöveg mezőt. Kezdetben „See More” áll benne, ezt is írd át magyarra. A címke megváltozik, amíg a mutató egy link fölött áll, és visszaáll, ha elhagyja azt. Rámutatásra reagál, nem kattintásra, ezért felszólításnak fogalmazd meg, ne visszaigazolásnak.

Hogyan viselkedik a szöveg

• A címke rejtve marad, amíg a mutató először be nem lép a területre, utána minden mozdulatot követ.
• Soha nem akadályozza a kattintást: az alatta lévő linkek és gombok működnek.
• A hosszú szöveg nincs tördelve, egy egész mondat nagyon széles sáv lesz. Maradj egy-két szónál.
• Nincs áttűnés és lassítás: a címke minden egérmozdulatnál új helyre kerül.

Korlátozások

• A widget csak a Pro bővítménnyel működik; kikapcsolt Pro mellett nincs kurzor és nincs értesítés.
• 991 képpont vagy keskenyebb ablaknál semmi sem történik.
• A kör Kör Z-indexe alapértéke 1, ezért a kör a legtöbb pozicionált elem mögé kerül, amíg meg nem emeled.
• A hibás CSS-választó a Címkék listája a rámutatási effektushoz mezőben üzenet nélkül leállítja az egész kurzort.
• Egyedi mutatótípusnál és Kép tartalomnál a gyári szürke kör is megmarad a kép mellett.
• A követő szövegnél a Widget terület csak a szöveg méretét és színét engedi állítani.
• Az Egérkurzor kattintási effektusa a link fölé mutatásra reagál, nem a kattintásra.

Hibaelhárítás

A kör vagy a címke egyáltalán nem jelenik meg

Mozgasd először a mutatót a területre: addig rejtve marad, a szerkesztőben pedig a widget semmit sem rajzol. Kör esetén ellenőrizd, hogy a Címkék listája a rámutatási effektushoz érvényes CSS-választót tartalmaz-e.

A kör a szakaszok mögé kerül

Emeld a Kör Z-indexét, mert 1-ről indul.

Ovális a kör

A szélesség és a magasság külön beállítás: állítsd őket ugyanarra az értékre.

Szürke folt van az egyedi képes mutató mellett

Ez a gyári kör, amely Egyedi mutatótípusnál és Kép tartalomnál is megmarad. Válts a Típus sorban Kurzorikon-ra, és használd az Egyedi ikontípust.

Nem látszik a keveredés

Adj a körnek Háttérszínt a Normál fülön, és győződj meg róla, hogy valódi tartalom (fotó, színes panel) van a kör mögött, nem sima fehér.

Nincs semmi telefonon

Ez a megszokott működés: minden kurzoreffektus 992 képpontnál keskenyebb ablaknál leáll.

A címke háttér nélkül jelenik meg, bár beállítottam

Nézd meg a Kurzor területe értékét. Widget esetén a rövid stílusblokk érvényes, abban nincs háttér.

A címke a mutató tetején ül

Ott kezd. Növeld a Kurzor bal oldali eltolását és a Kurzor felső eltolását.

A címke túl széles

Rövidítsd a szöveget, mert egy sorban jelenik meg, nincs tördelve.