Gomb widget: tooltip, folyamatos és rázó animáció, rámutatási szöveg, teljes szélesség

Ez a fejezet a Gomb widget öt kisebb beállítását írja le lépésről lépésre. A widget alapjai és a többi beállítás a Gomb widget: beállítások áttekintése fejezetben vannak.

Mindegyikhez kell, hogy a Button widget be legyen kapcsolva a The Plus Addons → Widgets oldalon, és hogy a gombot már felvetted az oldalra a Tartalom → Elrendezés szakaszban (válassz Gomb stílusát, és írd be a Szöveget).

Beállítás	Hol van	Kiadás
Tooltip (Eszköztipp)	Haladó → Eszköztipp	Pro
Folyamatos animáció	Haladó → Folyamatos animáció	Pro
Időközönkénti rázó animáció	Stílus → Különleges	ingyenes
Rámutatáskor megjelenő szöveg	Tartalom → Elrendezés	ingyenes
Teljes szélességű gomb	Stílus → Különleges	ingyenes

Az ingyenes bővítményben az Eszköztipp és a Folyamatos animáció kapcsolója a Stílus → Különleges szakaszban látszik, de bekapcsolva csak egy Pro-értesítést mutat. A működő beállítások a Pro kiadásban a Haladó fülön vannak.

Tooltip a gombon

A tooltip a gomb fölé úszó kis panel, amely rámutatáskor jelenik meg. Jó arra, hogy a gomb felirata rövid maradjon, a magyarázat (például szállítási feltétel) mégis kéznél legyen.

1. Jelöld ki a Gomb widgetet, és válts a Haladó fülre.
2. Nyisd meg az Eszköztipp szakaszt, és kapcsold be az Eszköztipp kapcsolót. Alatta két fül jelenik meg: Tartalom és Stílus. Ezek a szakaszon belüli fülek, nem a widget felső Tartalom és Stílus fülei.
3. A Tartalom fülön a Tartalomtípus mezőben válassz: Szöveges tartalom (egyszerű szövegmező, rövid mondathoz ez a jó) vagy WYSIWYG-szerkesztő (formázott tartalom, link, kép, videó vagy emoji is lehet benne).
4. Írd be a szöveget a Leírás mezőbe. Az alapértelmezett, latin helykitöltő szöveget cseréld ki, különben a látogató azt olvassa.
5. A Szöveg igazítása mezővel a szöveg balra, középre (alapérték) vagy jobbra igazodik a buborékban. A Tipográfia és a Szöveg színe alatta van.

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

A képen a bekapcsolt Eszköztipp, a Tartalomtípus, a Leírás és a szövegbeállítások látszanak.

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

A Stílus fülön két csoport van, mindkettő a szerkesztés ikonnal nyílik: a Buboréksúgó opciói és a Stílusopciók.

A Buboréksúgó opciói csoportban állíthatod a buborék működését:

Beállítás	Mit csinál	Alapérték
Pozíció	Hol jelenik meg a gomb körül: balra, jobbra, fent, fent kezdő, fent záró, lent.	Fent
Eseményindító	Mi nyitja meg: rámutatás vagy kattintás.	Rámutatás
Téma	A buborék megjelenése: sötét, világos vagy áttetsző.	Sötét
Nyilak	A buborék nyila: nincs, alapértelmezett vagy kerek.	Alapértelmezett
Animáció	A megjelenés hatása: eltolódás el, eltolódás felé, halványítás, nagyítás, perspektíva.	Eltolódás felé
Beúszás időtartama	A megjelenés ideje ezredmásodpercben.	250
Kiúszás időtartama	Az eltűnés ideje ezredmásodpercben.	200
Interaktív súgóbuborékok	Bekapcsolva a látogató a buborékra is rámutathat vagy kattinthat, nem tűnik el azonnal.	Be

A Stílusopciók csoportban a buborék belső térköze (Padding), háttere, szegélye, szegélysugara és dobozárnyéka állítható.

Korlátok és tudnivalók:

• Egy gombhoz egy tooltip tartozik.
• Telefonon nincs rámutatás. Ha a buborék fontos információt hordoz, állítsd az Eseményindítót kattintásra, vagy tedd a szöveget az oldalra.
• Ha a buborék kilóg a képernyőről vagy rossz helyen áll, váltsd a Pozíció értékét, vagy igazítsd az Eltolás és Távolság mezőkkel.
• A tooltip widgetenként állítható. Ha több widgethez ugyanazt akarod, használj globális tooltipet.

Hibaelhárítás: ha nem találod a tooltip beállításait, a Pro kiadásban a Haladó fülön nézd, nem a Stílus → Különleges szakaszban. Ha latin szöveg látszik, a Leírás még az alapértéken van.

Folyamatos animáció

A folyamatos animáció ismétlődő mozgás, amely a látogató közreműködése nélkül, a gomb egész ottléte alatt fut.

1. Jelöld ki a gombot, és a Haladó fülön nyisd meg a Folyamatos animáció szakaszt. Közvetlenül az Eszköztipp alatt van.
2. Kapcsold be a Folyamatos animáció kapcsolót. Alatta megjelennek a beállítások.
3. Az Animációs hatás listából válassz: Pulzálás (alapérték), Lebegtetés, Dobálás vagy Forgó. Hívásra felszólító gombnál a pulzálás és a lebegtetés a jó választás, a forgó hatás inkább csak ikonos gombhoz.
4. A Rámutatáskor megjelenő animáció kapcsolót akkor kapcsold be, ha az animáció csak akkor induljon, amikor a látogató a gombra mutat. Kikapcsolva az animáció folyamatosan fut.
5. Az Időtartam csúszkával másodpercben állítod a ciklus idejét (alapérték: 2,5). Kisebb szám gyorsabb, nagyobb szám nyugodtabb mozgást ad. Nagyjából egy másodperc alatt a mozgás már remegésnek hat.
6. Ha az Animációs hatás a Forgó, megjelenik a Transzformáció origója mező: kilenc pozíció közül (például Bal felső, Középen középen, Lent középen) választhatod ki, melyik pont körül forogjon a gomb (alapérték: Középen középen).

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

A képen a bekapcsolt kapcsoló, a Pulzálás hatás, a Rámutatáskor megjelenő animáció és az Időtartam látszik.

Beállítás	Opciók	Alapérték
Folyamatos animáció	Be / Ki	Ki
Animációs hatás	Pulzálás, Lebegtetés, Dobálás, Forgó	Pulzálás
Rámutatáskor megjelenő animáció	Be / Ki	Ki
Időtartam	Csúszka, másodperc	2,5
Transzformáció origója (csak Forgó hatásnál)	Kilenc pozíció	Középen középen

Korlátok:

• Egyszerre egy hatás választható.
• Eszközönként külön érték nincs: a mozgás telefonon is fut.
• A mozgásra érzékeny látogatók miatt érdemes a Rámutatáskor megjelenő animáció kapcsolót használni.
• A Stílus → Különleges szakasz rámutatási effektusától független beállítás, de ha mindkettő be van kapcsolva, a gomb zsúfoltan mozoghat.

Hibaelhárítás:

• Ha nem találod a szakaszt: a Pro kiadásban a Haladó fülön van. Az ingyenes bővítményben csak a kapcsoló látszik a Stílus → Különleges szakaszban, és Pro-értesítést ad.
• Ha az élő oldalon nem játszik az animáció, generáld újra az Elementor fájljait az Elementor → Eszközök oldalon, majd ürítsd a gyorsítótárat vagy a CDN-t.
• Ha az animáció alig látszik, csökkentsd az Időtartam értékét, és próbáld a Lebegtetés hatást.

Időközönkénti rázó animáció

A rázás nem folyamatos, hanem időnként ismétlődő megmozdulás, amely visszavonzza a látogató figyelmét a gombra. Az ingyenes bővítményben is elérhető.

1. A Tartalom → Elrendezés szakaszban válassz Gomb stílusát, és add meg a Szöveget.
2. Válts a Stílus fülre, nyisd meg a Különleges szakaszt, és kapcsold be az Időközönkénti rázó animáció kapcsolót. A szakasz alján van, a rámutatási effektusok alatt.
3. A megjelenő Időközönkénti rázó animáció időtartama mezőbe írd be, hány másodpercenként rázza meg magát a gomb (alapérték: 5). Három másodperc alatt már hibának tűnik, nyolc-tíz másodperc átgondolt figyelemfelkeltés.

Korlátok: a rázás módja, erőssége és iránya nem állítható, csak a gyakorisága. Eszközönként külön érték nincs. Oldalanként egy gombon használd, és ne kapcsold össze más hatásokkal. Ha az időtartam mező nem látszik, kapcsold be előbb a kapcsolót. Ha nem rázkódik a gomb az élő oldalon, generáld újra az Elementor fájljait és ürítsd a gyorsítótárat.

Felirat rámutatáskor

A gomb két feliratot is hordozhat: egy nyugalmi és egy másikat, amely rámutatáskor cseréli le az elsőt (például „Kezdjük el” helyett „Kérem az ingyenes próbát”).

1. A Tartalom → Elrendezés szakaszban állítsd a Gomb stílusát Stílus 4, Stílus 11 vagy Stílus 14 értékre. A többi 20 stílusnál a mezők rejtve maradnak, mert azokban nincs második felirat.
2. A Szöveg mezőbe írd a nyugalmi feliratot. Ez érthető legyen önmagában, mert a legtöbb látogató nem mutat rá.
3. A Rámutatáskor megjelenő szöveg mezőbe írd a cserefeliratot (alapérték: „Ide kattintás”). Tartsd nagyjából egyforma hosszúra, különben a gomb mérete ugrik.
4. Az Igazítás mezővel balra, középre vagy jobbra igazíthatod a gombot, eszközönként külön is.

Korlátok:

• Csak a három fent említett stílusnál működik. Más stílusra váltva a mező eltűnik, és a csere megszűnik.
• Érintőképernyőn nincs rámutatás, ott csak a nyugalmi felirat látszik. Lényeges információt ne csak a rámutatási szövegbe írj.
• Gombonként egy cserefelirat adható meg, eszközönként külön nem.

Ha a mező hiányzik, a stílus nem a három támogatott közül való. Ha a gomb mérete ugrik csere közben, hozd közelebb a két felirat hosszát, vagy adj fix szélességet a tárolónak.

Teljes szélességű gomb

A teljes szélességű gomb kitölti a tárolóját, ezért telefonon könnyebb megérinteni, és nagyobb súlya van. A 23 stílus mindegyikénél működik, és az ingyenes bővítményben is elérhető.

1. A Tartalom → Elrendezés szakaszban válassz Gomb stílusát, írd be a Szöveget, és add meg a Link címét. Link nélkül a gomb megjelenik, de nem visz sehova.
2. Válts a Stílus fülre, nyisd meg a Különleges szakaszt, és kapcsold be a Teljes szélességű gomb kapcsolót. A gomb azonnal kitölti a tároló szélességét.

A gomb szélességét ez a kapcsoló az egyik leggyorsabb módon szabályozza, mert a méretét a tároló adja, nem a felirata. Ha olyan gombot szeretnél, amely szélesebb a feliratánál, de nem éri el a széleket, tedd egy legnagyobb szélességgel korlátozott tárolóba, vagy csökkentsd a tároló vízszintes belső térközét. A gomb magasságát és betűméretét a Stílus fül térköz- és tipográfiabeállításai adják, a teljes szélesség csak a vízszintes irányra hat.

Korlátok:

• A kapcsolónak nincs eszközönkénti értéke, minden töréspontnál érvényes. Ha csak mobilon akarsz teljes szélességet, használd az Elementor saját Szélesség beállítását a Haladó fülön: annak van külön tablet- és mobilértéke.
• A szélességet a szülő tároló korlátozza. Ha annak van legnagyobb szélessége vagy nagy belső térköze, a gomb csak azt tölti ki.
• Globális beállítás nincs, a kapcsoló gombonként állítható.

Ha a gomb mégsem teljes szélességű, ellenőrizd, hogy a kapcsolót a Stílus fülön, a Különleges szakaszban kapcsoltad be, és hogy a tároló nem keskenyebb-e. Ha csak a szerkesztőben látod teljes szélességűnek, generáld újra az Elementor fájljait az Elementor → Eszközök oldalon, és ürítsd a gyorsítótárat. Ha nem találod a Gomb widgetet a panelen, kapcsold be a The Plus Addons → Widgets oldalon, mentsd, és töltsd újra a szerkesztőt.