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

> A Gomb widget figyelemfelkeltő beállításai lépésenként: buborékszöveg, folyamatos animáció, időközönkénti rázás, felirat rámutatáskor és teljes szélességű gomb.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-gomb/) 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.

![A Gomb widget Haladó fülének Eszköztipp szakasza a Tartalom fülön](./kepek/dobozok-gombok-11-gomb-tooltip-panel.webp)

*A Gomb widget Haladó fülének Eszköztipp szakasza a Tartalom fülön* (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.

![Az Eszköztipp szakasz Stílus füle](./kepek/dobozok-gombok-11-gomb-tooltip-stilus.webp)

*Az Eszköztipp szakasz Stílus füle* (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**).

![A Gomb widget Haladó fülének Folyamatos animáció szakasza](./kepek/dobozok-gombok-11-gomb-folyamatos-panel.webp)

*A Gomb widget Haladó fülének Folyamatos animáció szakasza* (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.