# Gomb widget: beállítások áttekintése

> A Gomb widget stílusai, szövege, linkje, ikonja, azonosítója és a Különleges hatások.

A **Gomb** (angolul Button) widget cselekvésre hívó gombot tesz az oldalra. 23 előre elkészített stílus közül választhatsz, és a stílusok mind elérhetők az ingyenes bővítményben is.

Használat előtt kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **Button** szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében a panelen keress rá a **Gomb** névre, és húzd az oldalra. Az Elementor ingyenes változata is elég hozzá.

![A kész gomb a nyilvános oldalon](./kepek/dobozok-gombok-1-gomb.webp)

*A kész gomb a nyilvános oldalon* (https://minta-bolt.hu/tp-gomb/)

A kép az alapértelmezett **Stílus 1** gombot mutatja a megadott szöveggel.

## Az Elrendezés szakasz

![A Gomb widget Elrendezés szakasza az Elementor panelben](./kepek/dobozok-gombok-1-gomb-panel.webp)

*A Gomb widget Elrendezés szakasza az Elementor panelben* (https://minta-bolt.hu/wp-admin/post.php?post=75&action=elementor)

A képen a gomb típusa, stílusa, igazítása, szövege és linkje látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Gomb típusa** | **Alap**: a gomb megjelenését a **Stílus** fülön állítod. **Globális**: egy előre megadott globális gombstílust használ (a **Globális stílus** mezőben választod ki). | Alap |
| **Gomb stílusa** | A 23 stílus egyike (**Stílus 1** … **Stílus 23**). | Stílus 1 |
| **Igazítás** | A gomb igazítása balra, középre vagy jobbra; asztali, táblagépes és mobil nézetre külön állítható. | nincs megadva |
| **Szöveg** | A gombon látszó felirat. | Bővebben |
| **Gombcímke szövege** | Extra szöveg a gombon, csak a **Stílus 23** esetén jelenik meg. | Ide kattintás |
| **Rámutatáskor megjelenő szöveg** | A gomb másik felirata, amely az egérrel való rámutatáskor látszik. Csak a **Stílus 4**, **Stílus 11** és **Stílus 14** esetén van, a többi 20 stílusnál rejtve marad. | Ide kattintás |
| **Link** | A gomb célcíme. | # |
| **Egyéni attribútumok hozzáadása** | Saját HTML-attribútumokat adhatsz a gomb elemhez. | ki |

A gombfelirat rámutatáskor történő cseréjéhez tehát válassz egy olyan stílust, amelynél a **Rámutatáskor megjelenő szöveg** mező megjelenik (**Stílus 4**, **Stílus 11** vagy **Stílus 14**), és írd bele a második feliratot.

## Ikonbeállítások

![A Gomb widget Ikonbeállítások szakasza](./kepek/dobozok-gombok-1-gomb-panel-ikon.webp)

*A Gomb widget Ikonbeállítások szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=75&action=elementor)

Az **Ikonbetűkészlet** listából azt a könyvtárat választod, amelyből az ikon származik. Három lehetőség van:

- **Font Awesome**: klasszikus ikonok.
- **Font Awesome 5**: modernebb ikonok a Font Awesome 5 gyűjteményből.
- **Icons Mind**: letisztult, minimalista ikonok.

A választott könyvtártól függően más-más ikonválasztó mező jelenik meg. Az ikon helyét és méretét ezek a beállítások adják meg:

| Beállítás | Mit csinál |
| --- | --- |
| **Ikon pozíciója** | Az ikon a felirat előtt vagy után áll. |
| **Ikon térköze** | A távolság az ikon és a felirat között; eszközönként állítható. |
| **Ikon mérete** | Az ikon mérete; eszközönként állítható. |
| **Igazítás** | Az ikon függőleges igazítása a gombon belül: fent, középen vagy lent; eszközönként állítható. |

## Egyéb opció

Az **Egyéb opció** szakasz **Gomb ID** mezőjébe azonosítót írhatsz. Ezzel az azonosítóval közvetlenül a gombhoz irányíthatod a látogatót (horgonylinkkel), vagy JavaScriptben is hivatkozhatsz rá egyéni működéshez.

## A gomb formázása: Stílus fül

A **Stílus** fülön a **Háttérbeállítás** szakaszban a gomb belső és külső térközét (**Padding**, **Margó**), a betűtípust, a színeket, az ikon méretét és a hátteret állítod. A rámutatáskor érvényes színek külön vannak.

### Különleges

![A Gomb widget Különleges szakasza a Stílus fülön](./kepek/dobozok-gombok-1-gomb-panel-special.webp)

*A Gomb widget Különleges szakasza a Stílus fülön* (https://minta-bolt.hu/wp-admin/post.php?post=75&action=elementor)

A **Különleges** szakasz kapcsolói és listái külön hatásokat adnak a gombhoz. A képen jól látszik, melyik kapcsoló melyik hatást indítja.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Mágikus görgetés** | Görgetésre mozgó, átlátszóságot vagy méretet változtató hatás a gombon (a beállításai Pro funkciók). | Nem |
| **Speciális effektus** | Fedvényhatás a gombon: két hatásszín állítható (a beállításai Pro funkciók). | Nem |
| **Parallaxis egérmozgással** | A gomb az egérmozgás irányában elmozdul (a beállításai Pro funkciók). | Nem |
| **Teljes szélességű gomb** | A gomb kitölti a tárolója teljes szélességét. | Nem |
| **A gomb rámutatáskor érvényes effektusai** | Rámutatási animáció: növelés (grow), lenyomás (push), beúszás (bounce in), lebegés (float), vízszintes és függőleges billegés (wobble), árnyékos lebegés, árnyékos növelés és sugaras árnyék. | nincs kiválasztva |
| **Árnyék színe** | Az árnyék színe; csak az árnyékos lebegés, az árnyékos növelés és a sugaras árnyék hatásnál jelenik meg. | nincs megadva |
| **Időközönkénti rázó animáció** | A gomb időnként megrázza magát, hogy felhívja a figyelmet. | Nem |
| **Időközönkénti rázó animáció időtartama** | A rázás ismétlődésének ideje másodpercben; a kapcsoló bekapcsolása után jelenik meg. | 5 |

### Rámutatási effektus a gombon

A **Különleges** szakasz **A gomb rámutatáskor érvényes effektusai** listája kilenc kész animációt ad. Az animáció akkor indul, amikor a látogató a gombra mutat, és akkor áll le, amikor elhagyja. CSS-t nem kell írnod, és az effektus a 23 stílus mindegyikével működik.

1. Húzd a **Gomb** widgetet a tárolóba. A **Tartalom → Elrendezés** szakaszban válassz **Gomb stílusát** a 23 közül, és add meg a **Szöveget**.
2. Válts a **Stílus** fülre, és nyisd meg a **Különleges** szakaszt.
3. Az **A gomb rámutatáskor érvényes effektusai** listából válaszd ki az effektust. Az alapérték a **Rámutatási effektus kiválasztása** felirat, ami azt jelenti, hogy nincs effektus.

| Effektus a listában | Mit csinál | Mire jó |
| --- | --- | --- |
| **Növekedés** | Kicsit megnöveli a gombot | Szinte bármilyen cselekvésre hívó gombhoz |
| **Tolás** | Lenyomja a gombot | Valamit elküldő gombokhoz |
| **Pattogó megjelenés** | Felrugaszkodó mozgás | Játékos, fogyasztói oldalakhoz |
| **Lebegőpontos szám** (a „Float” effektus, a felirat a magyar felületen így szerepel) | Felemeli a gombot | Kártyákhoz, árlistákhoz |
| **Vízszintes imbolygás** | Oldalirányban rázza | Figyelemfelkeltésre, módjával |
| **Függőleges imbolygás** | Fel-le rázza | Mint az előző |
| **Lebegő árnyék** | Felemeli a gombot, és árnyékot vet alá | Lapos gomb térhatásához |
| **Grow Shadow** (a felirat a magyar felületen angolul áll) | Megnöveli és árnyékot ad hozzá | Sötét háttéren a leggyakoribb választás |
| **Sugárirányú árnyék** | Lágy, sugaras árnyékot terít szét | Finom hangsúly mozgás nélkül |

A **Lebegő árnyék**, a **Grow Shadow** és a **Sugárirányú árnyék** effektusnál a lista alatt megjelenik az **Árnyék színe** mező is, hogy az árnyék illeszkedjen a színeidhez, a szürke alapérték helyett.

Korlátok:

- Egyszerre egy effektus választható, a gomb nem növekedhet és lebeghet egyszerre.
- Érintőképernyőn nincs rámutatás: telefonon és táblagépen a látogató semmilyen effektust nem lát, ezért ne erre bízd annak jelzését, hogy a gomb kattintható.
- Eszközönként külön érték nincs: az effektus minden töréspontnál ugyanaz.
- Az **Árnyék színe** csak az árnyékos effektusoknál számít, a **Növekedés** vagy a **Tolás** mellett nem változtat semmit.
- Néhány gombstílus magától is animál rámutatáskor. Ha ráteszel egy effektust, zsúfolt lehet, ezért nézd meg az eredményt közzététel előtt.

Hibaelhárítás:

- **Az effektus nem indul el:** ellenőrizd, hogy a lista nem maradt-e az üres alapértéken, majd generáld újra az Elementor fájljait az **Elementor → Eszközök** oldal **Regenerate CSS & Data** gombjával, és ürítsd az oldal előtti gyorsítótárat vagy CDN-t.
- **Hiányzik az Árnyék színe mező:** csak a három árnyékos effektusnál jelenik meg. Válassz közülük egyet, és a lista alatt megjelenik.
- **Az effektus furcsán néz ki a gombstílus tetején:** válts egyszerűbb stílusra, vagy állítsd vissza a listát a **Rámutatási effektus kiválasztása** értékre, és hagyd a stílusra a munkát.

Ha folyamatos, saját magától ismétlődő animációt szeretnél rámutatás nélkül, azt a lent leírt **Folyamatos animáció** adja, a rázást pedig az **Időközönkénti rázó animáció** kapcsoló.

### Tooltip és folyamatos animáció a Haladó fülön

A Gomb két további funkciója nem a **Tartalom** vagy a **Stílus** fülön, hanem a **Haladó** fülön található, és csak a Pro változatban használható:

| Funkció | Beállítások |
| --- | --- |
| **Tooltip** (buborékszöveg) | Tartalom típusa (sima szöveg vagy szerkesztő), leírás, szövegigazítás (balra, középre, jobbra), szövegszín, pozíció (balra, jobbra, fent, fent kezdő, fent záró, lent; alapérték: fent), megjelenítés (rámutatás vagy kattintás; alapérték: rámutatás), téma (sötét, világos, áttetsző; alapérték: sötét), nyíl (nincs, alapértelmezett, kerek), animáció (eltolódás el, eltolódás felé, halványítás, nagyítás, perspektíva), megjelenési és eltűnési idő (alapérték: 250 és 200 ezredmásodperc) és az interaktivitás (alapérték: be). |
| **Folyamatos animáció** | Animáció hatása (pulzálás, lebegtetés, dobálás, forgás; alapérték: pulzálás), animáció rámutatáskor, az animáció ideje másodpercben (alapérték: 2,5) és a transzformáció kiindulópontja (kilenc pozíció közül; alapérték: középen). |

## Görgetési animáció és haladó beállítások

Az **On Scroll View Animation** szakasz minden widgetnél ugyanúgy működik: a widget a látótérbe görgetéskor animálva jelenik meg. A **Haladó** fül további beállításai szintén minden widgetnél közösek.

## Tudnivalók

- A gombnak minden stílusnál van **Szöveg** mezője; a **Gombcímke szövege** és a **Rámutatáskor megjelenő szöveg** csak a fent említett stílusoknál látszik.
- A bővítmény kiegészítő útmutatókat is ad a tooltip, a folyamatos animáció, a rázó animáció és a teljes szélességű gomb beállításához; ezek a fenti táblázatok beállításaira épülnek.