# Gomb widget és Gomb elem

> Gombok készítése a Gomb widgettel (V3) és a Gomb elemmel (V4): szöveg, link, ikon, stílus és állapotok.

A gombok az oldalon a látogatók műveleteit irányítják: egyértelmű felhívást adnak, és növelik az elköteleződést. A **Gomb** widget látványos, kattintható gombokat ad az oldaladhoz, amelyek megjelenését, viselkedését és link-célját szabadon állíthatod.

Két változat van, attól függően, melyik szerkesztőt használod:

- **Gomb widget:** az Elementor Editor V3-ban.
- **Gomb elem:** az Editor V4-ben (atomikus szerkesztő). A két szerkesztő különbségeit lásd: [A V3 és a V4 szerkesztő különbségei](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-v3-es-v4-kulonbsegek/).

## Mire jó?

- Hírlevél-feliratkozásra: egy „Feliratkozom” gomb a cikkek végén.
- Ingyenes próbaidőszak kínálatánál: „Kipróbálom ingyen” gomb a regisztrációs oldalra.
- Blogbejegyzések végén közösségi oldalakra mutató gombok.
- Szoftverek termékoldalán „Letöltés” gomb.
- A nyitó (hero) részben egy feltűnő gomb a regisztrációs oldalra.

## A widget hozzáadása és törlése

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjen az összes widget (V4-ben az összes elem).
2. Kattints a **Gomb** elemre, vagy húzd a vászonra. A részleteket lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

Törlésnél jelöld ki a vásznon a gombot, és nyomd meg a billentyűzeten a Delete billentyűt. Részletek: [Elemek törlése és mozgatása](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-torlese-es-mozgatasa/).

## Gomb widget (V3)

### Beállítás lépésről lépésre

1. Add a Gomb widgetet a vászonhoz.
2. A **Tartalom** fülön, a **Gomb** szekcióban a **Típus** mezővel válassz öt kialakítás közül: **Alapértelmezett**, **Információ**, **Sikeres**, **Figyelem** vagy **Veszély**.
3. A **Szöveg** mezőbe írd a gomb feliratát.
4. A **Link** mezőbe írd a cél URL-jét. A fogaskerék ikonra kattintva beállíthatod, hogy a link új ablakban nyíljon meg, vagy hogy kapjon `nofollow` jelölést.
5. Ha szeretnél ikont, az **Ikon** mezőben választhatsz: **Nincs**, **SVG feltöltése** (az SVG-támogatás bekapcsolásáról lásd: [SVG-ikonok, ikonkönyvtár és soron belüli ikonok](https://hub.hellowp.io/hu/plugins/elementor/globalis-beallitasok-svg-es-ikonok/)), vagy ikon az **Ikonkönyvtár**ból.
6. Az **Ikon pozíciója** mezővel az ikon a szöveg elé vagy mögé kerül.
7. Az **Ikon térköze** mezővel az ikon és a szöveg közti távolságot adod meg. Ez a két mező csak akkor jelenik meg, ha választottál ikont.
8. A **Gomb ID** mezőbe egyedi azonosítót írhatsz, ha szükséges (például Google Analytics-eseményekhez vagy a Meta Pixelhez). Az ID legyen egyedi az oldalon, szóköz nélkül, és csak az A-z, 0-9 és az alulvonás karaktereket tartalmazhatja.

![A Gomb widget Tartalom füle: típus, szöveg, link, ikon, ikon pozíciója és térköze, gomb ID](./kepek/widgetek-gomb-tartalom.webp)

*A Gomb widget Tartalom füle: típus, szöveg, link, ikon, ikon pozíciója és térköze, gomb ID* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=elementor)

A képen a **Típus**, a **Szöveg**, a **Link** (fogaskerékkel), az **Ikon**, az **Ikon pozíciója**, az **Ikon térköze** és a **Gomb ID** mező látszik.

A **Link** mezőben a fogaskerék a következőket adja: a megnyitás új ablakban a látogatót az oldaladon tartja, a `nofollow` pedig megakadályozza, hogy a keresők az oldaladat a linkelt oldallal összekapcsolják.

### A gomb méretének módosítása

1. Kattints a **Stílus** fülre.
2. A panelen módosítsd a **Padding** értékeit: így szabályozod a gomb méretét.

### Stílus fül

| Beállítás | Mit csinál |
|---|---|
| **Pozíció** | A gomb igazítása az oszlophoz képest: balra, középre, jobbra vagy sorkizárt |
| **Tipográfia** | A gombfelirat betűtípusa és mérete |
| **Szövegárnyék** | Árnyék és elmosás a gombfeliraton |
| **Normál** | Az alapállapot: **Szöveg színe** és háttér (**Háttér típusa**, **Szín**) |
| **Rámutatás** | A gomb megjelenése, ha az egér fölötte van: szöveg színe, háttér, és rámutatási animáció; átmeneti idő is megadható |
| **Dobozárnyék** | Árnyék a gomb körül |
| **Szegély típusa** | A gomb szegélye; vastagság és szín adható hozzá |
| **Sarkok lekerekítése** | A sarkok kerekítése |
| **Padding** | A szöveg és a gomb széle közti hely |

![A Gomb widget Stílus füle: pozíció, tipográfia, normál és rámutatás állapot, szegély](./kepek/widgetek-gomb-stilus.webp)

*A Gomb widget Stílus füle: pozíció, tipográfia, normál és rámutatás állapot, szegély* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=elementor)

A képen a **Normál** és **Rámutatás** állapot választója, a háttér, a szegély és a sarkok beállításai látszanak.

A szövegárnyékról és a dobozárnyékról lásd: [Árnyék](https://hub.hellowp.io/hu/plugins/elementor/stilus-arnyek/). A gombok színátmenetes háttéréről lásd: [Színátmenetes háttér](https://hub.hellowp.io/hu/plugins/elementor/stilus-hatter-tipusok/).

### Haladó fül

A **Haladó** fülön a widget pozícióját, térközeit és egyedi kódját állíthatod, ugyanúgy, mint a többi widgetnél.

### Az eredmény az oldalon

![Sikeres típusú, ikonnal ellátott zöld gomb az oldalon](./kepek/widgetek-gomb-elol.webp)

*Sikeres típusú, ikonnal ellátott zöld gomb az oldalon* (https://minta-bolt.hu/widget-demo/)

A képen a **Sikeres** típusú gomb látszik: zöld háttérrel és a felirat előtt álló ikonnal.

## Gomb elem (V4)

A Gomb elem az Editor V4 felhasználóinak szól.

### Példa: átlátszó hátterű, kerek gomb fehér szegéllyel

Egy edzőterem nyitóoldalán egy feltűnő gombot teszel a hero részbe; a látogatók a gombra kattintva a regisztrációs oldalra jutnak.

1. Add a Gomb elemet a vászonhoz. A bal oldali panelen megjelennek az elem beállításai.
2. Az **Általános** fülön a gomb szövegének mezőbe írd: „Kezdjük el”.
3. A link mellett kattints a plusz jelre, és írd be a cél oldal URL-jét.
4. Ha a gomb túl nagy, nyisd meg a **Méret** szekciót, és állítsd a szélességet 200-ra, a magasságot 50-re.
5. Kattints a **Stílus** fülre, nyisd meg a **Tipográfia** szekciót, és válaszd ki a betűtípust, a betűvastagságot (például 600) és a betűméretet (például 16). Részletek: [Betűtípus, méret és szín](https://hub.hellowp.io/hu/plugins/elementor/stilus-betutipus-meret-es-szin/).
6. Az átlátszó háttérhez nyisd meg a **Háttér** szekciót, kattints a színmintára, és állítsd az átlátszóságot (opacity) 0%-ra. A színválasztóról lásd: [Színválasztó](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szinvalaszto/).
7. A kerek, fehér szegélyű alakhoz nyisd meg a **Szegély** szekciót, kattints a szegély-beállító ikonra, írj be 50-et az összes sarokhoz, kattints a **Szegély** melletti plusz jelre, a vastagságot állítsd 2-re, a színt `#FFFFFF`-re.
8. Hogy a gomb az egér fölé mutatáskor megváltozzon, állapotot kell szerkesztened: az **Osztályok** mezőben kattints a **local** szó melletti három pontra, és válaszd a **Rámutatás** állapotot. A mezőben megjelenő szó rózsaszín lesz, ez jelzi, hogy most azt szerkeszted, hogyan néz ki a gomb, ha a látogató az egérrel fölé mutat. Az állapotokról lásd: [Elemállapotok](https://hub.hellowp.io/hu/plugins/elementor/stilus-elemallapotok/).
9. Kattints a **Szín** melletti színmintára, és állítsd a hex értéket `#FFFFFF`-re, az átlátszóságot 100%-ra. Így az egér fölé vitelkor a gomb fehér lesz.

### Az Általános fül beállításai

| Beállítás | Mit csinál |
|---|---|
| Gomb szövege | A gombon megjelenő felirat |
| Link | A plusz jelre kattintva adhatod meg a linket; a gombra kattintva a látogató megnyitja. Ha van link, bekapcsolhatod, hogy új lapon nyíljon meg |
| ID | Az elem azonosítója: így közvetlenül linkelhetsz erre az elemre |

### A Stílus fül beállításai

A **Stílus** fül szekciói a V4 elemeknél egységesek: elrendezés, térköz, méret, pozíció, tipográfia, háttér, szegély és hatások. Részletesen: [Méret](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-meret/), [Pozíció](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-pozicio/), [Tipográfia](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-tipografia/), [Háttér](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatter/) és [Hatások](https://hub.hellowp.io/hu/plugins/elementor/stilus-v4-hatasok/).