# Lebegő gomb

> Lebegő gomb (chat- vagy kapcsolatfelvételi gomb) létrehozása sablonból: platformok, felső sáv, üzenetbuborék, küldés gomb, chatdoboz és elhelyezés.

A lebegő gomb (más néven lebegő műveleti gomb) olyan felületi elem, amely az oldal tartalma fölött „lebeg”, és görgetés közben is látszik. Általában az oldal egyik sarkához vagy szélére rögzítik, és egy fontos műveletet indít, például kapcsolatfelvételt egy munkatárssal. A gombon többnyire egy ikon áll, amely jelzi a funkcióját, és állapotai (alap, lenyomott, fókuszált, letiltott) visszajelzést adnak a használatáról.

A lebegő gomb **sablon**, nem widget vagy más szerkesztőelem. A WordPress admin felületéről hozod létre, nem a szerkesztőből. A lebegő sávról lásd: [Lebegő sáv](https://hub.hellowp.io/hu/plugins/elementor/widgetek-lebego-sav/).

## Mire jó?

- **Kapcsolatfelvétel:** a látogató az oldal bármely pontjáról írhat egy képviselőnek (például egy újonnan nyílt virágüzletben, hogy ne maradjon le egyetlen eladásról sem).
- **Új tartalom létrehozása:** levelező- vagy jegyzetalkalmazásban új levél vagy jegyzet indítására.
- **Navigáció:** az oldal egy fontos részére ugrasztja a látogatót.
- **Művelet indítása:** például új feladat felvétele.

## Lebegő gomb létrehozása lépésről lépésre

A lebegő gomb előre elkészített sablonra épül. A sablont testre szabhatod, de nulláról nem készíthetsz új sablont. A példában olyan gombot készítünk, amellyel a látogatók csevegést indíthatnak egy ügyfélszolgálati munkatárssal.

### A sablon létrehozása

1. A WordPress admin felületén nyisd meg a **Lebegő Elemek** menüpontot (az **Elementor** menüben, a **Sablonminták** mellett).
2. Kattints az **Új Lebegő elem hozzáadása** gombra. Megnyílik az **Új lebegő elemek** ablak.
3. A **Lebegő elem kiválasztása** listából válaszd a **Lebegő gombok** lehetőséget.
4. Ha szeretnéd, add meg a sablon nevét a **Nevezd el a sablonodat** mezőben.
5. Kattints a **Lebegő elem létrehozása** gombra.

![Az Új lebegő elemek ablak: Lebegő gombok kiválasztva, névvel](./kepek/widgetek-lebego-gomb-uj.webp)

*Az Új lebegő elemek ablak: Lebegő gombok kiválasztva, névvel* (https://minta-bolt.hu/wp-admin/edit.php?post_type=e-floating-buttons)

A képen a **Lebegő elem kiválasztása** mezőben a **Lebegő gombok** áll, alatta a sablon neve és a **Lebegő elem létrehozása** gomb.

6. A szerkesztő megnyílik, előtte pedig a sablontár ablak a **Lebegő gombok** fülön. Ebből kell választanod egy sablont. Az ablak felirata a magyar felületen **Médiatár**.
7. Vidd az egeret a kiválasztott sablon fölé, és kattints a **Beszúrás** gombra. A sablon megjelenik a szerkesztő vásznán.

![A sablontár ablak Lebegő gombok fülje: kártyák, az elsőn a Beszúrás gomb](./kepek/widgetek-lebego-gomb-konyvtar.webp)

*A sablontár ablak Lebegő gombok fülje: kártyák, az elsőn a Beszúrás gomb* (https://minta-bolt.hu/wp-admin/post.php?post=60&action=elementor&floating_element=floating-buttons)

A képen a lebegő gomb sablonok kártyái láthatók; a fölé vitt kártyán megjelenik a **Beszúrás** gomb. A **PRO** jelzésű sablonok csak Elementor Pro mellett érhetők el.

A látogatók az oldalon először csak a csevegés ikont látják. Az ikonra kattintva nyílik ki a teljes lebegő gomb.

### A lebegő gomb szerkesztése

A panel beállításai a választott sablontól függnek. A példában átírjuk az ügyintéző nevét, a chatdoboz alakját és a gomb helyét.

1. A panelen a **Felhasználónév** mezőbe írd be annak a felhasználónevét, aki a csevegéseket fogadja. Így a látogatók üzenete az ő fiókjába érkezik.
2. Nyisd meg a **Felső sáv** szekciót, és a **Név** mezőbe írd be az ügyintéző nevét (például „Kiss Anna”).
3. Nyisd meg az **Üzenetbuborék** szekciót, és a **Név** mezőbe írd be a becenevet (például „Anna”).
4. Kattints a **Stílus** fülre, nyisd meg a **Chatdoboz** szekciót, és a **Sarkok** listából válaszd a **Kerek** értéket.
5. Kattints a **Haladó** fülre, és állítsd a **Vízszintes pozíciót** balra, a **Függőleges pozíciót** középre.
6. A jobb felső sarokban kattints a **Közzététel** gombra.
7. (Csak Elementor Pro felhasználóknak) Állíts be megjelenítési feltételeket, hogy a gomb az oldal mely részein jelenjen meg. Ha minden oldalon látszani szeretne, válaszd az egész webhelyet.

## Lebegő elem szerkesztése később

1. A WordPress admin felületén nyisd meg az **Elementor → Lebegő Elemek** oldalt.
2. Vidd az egeret a szerkeszteni kívánt elem fölé, és válaszd az **Szerkesztés az Elementorral** lehetőséget.

## A lebegő gomb beállításai

Az alábbiak a lebegő gomb sablonok leggyakoribb beállításai. Sokféle sablon van, ezért egyeseknél eltérő beállítások vagy elrendezés lehet.

### Chatgomb

A chatgomb az oldalon megjelenő ikon; a látogatók erre kattintva aktiválják a lebegő gombot.

**Tartalom fül**

| Beállítás | Mit csinál |
|---|---|
| **Platform** | Az alkalmazás, amelyen a kapcsolat létrejön. **WhatsApp**: a **Szám** mezőben a használt WhatsApp-szám. **Messenger**: a **Felhasználónév** mezőben a használt felhasználónév. **E-mail**: az **E-mail** (a címzett címe), és szükség szerint a **Tárgy** (alapértelmezett tárgy) és az **Üzenet** (alapértelmezett szöveg). **SMS**: a **Szám** mezőben a szám, amelyre az SMS megy. **Viber**: a **Szám**, valamint egy lista, amelyben eldöntheted, hogy a kapcsolat **Névjegy** vagy **Csevegés** legyen (weboldalhoz általában a csevegés a jobb). **Skype**: a **Felhasználónév** |
| **Értesítési pont** | **Igen** esetén piros pont jelzi, hogy a látogatóra üzenet vár |

**Stílus fül**

| Beállítás | Mit csinál |
|---|---|
| **Méret** | A gomb mérete: kicsi, közepes vagy nagy |
| **Normál** és **Rámutatás** | Külön beállítás arra, hogyan néz ki a gomb alapból, és hogyan, ha a látogató fölé viszi az egeret |
| **Színek** | Az alapértelmezett szín általában a platform márkaszíne (a WhatsApp-gomb például zöld). Egyéni szín használatához válaszd az **Egyéni** értéket |
| **Belépő animáció** | Animált megjelenés, amely felhívja a figyelmet a gombra. Bekapcsolva megadható az animáció időtartama és késleltetése is |
| **Dobozárnyék** | Mélységet ad a gombnak |

### Felső sáv

A felső sáv annak a személynek az adatait mutatja, akivel a látogató beszélni fog.

**Tartalom fül:**

- **Név** és **Beosztás**: az ügyintéző neve és beosztása.
- **Profilkép**: az ügyintéző képe.
- **Aktív pont**: **Megjelenítés** esetén jelzi, hogy az ügyintéző elérhető.

**Stílus fül:**

- **Profilkép mérete**: kicsi, közepes vagy nagy.
- **Színek**: az **Egyéni** értékkel módosíthatod a **Név** és a **Beosztás** alapértelmezett színét.
- **Név** és **Beosztás**: **Tipográfia** (méret és betűtípus) és **Szín** (csak egyéni színnél látszik). Lásd: [Betűtípus, méret és szín](https://hub.hellowp.io/hu/plugins/elementor/stilus-betutipus-meret-es-szin/) és [Színválasztó](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szinvalaszto/).

### Üzenetbuborék

Az üzenetbuborék általában a lebegő gomb közepén áll, és alapértelmezett üzenetet vagy üdvözletet tartalmaz.

**Tartalom fül:**

- **Név**: az ügyintéző neve a buborékban. Általában kevésbé hivatalos, mint a felső sávban (ha ott „Kovács Tamás”, itt lehet „Tomi”).
- **Üzenet**: az alapértelmezett üzenet, amelyet a látogató a gomb megnyitásakor lát.
- **Időformátum**: az üzenetbuborék általában az aktuális időt mutatja; a listában választhatsz 12 és 24 órás formátum között.
- **Gépelés animáció**: **Elrejtés** értéknél nem jelenik meg az animáció, amely azt mutatja, hogy az ügyintéző éppen válaszol.

**Stílus fül:**

- **Színek**: az **Egyéni** értékkel módosíthatod a **Név**, az **Üzenet** és az **Idő** alapértelmezett színét.
- **Név** és **Üzenet**: **Tipográfia** és **Szín**; az időnek külön színe van.

### Küldés gomb

A küldés gomb cselekvésre ösztönző elem: megnyomásával elindul egy művelet, például a csevegés vagy az e-mail küldése.

- **Tartalom fül:** **Szöveg**: a gombon megjelenő felirat.
- **Stílus fül:**
  - **Tipográfia**: a gomb szövegének mérete és betűtípusa.
  - **Normál** és **Rámutatás**: külön beállítás az alap és az egér fölé vitt állapotra.
  - **Színek**: az alapértelmezett szín általában a márkaszín. Egyéni szín esetén megadhatod az **Ikon színét** (az ikon a hozzá tartozó szöveget is tartalmazhatja) és a **Háttérszínt**.

### Chatdoboz

A chatdoboz a már megnyitott lebegő gomb. A **Stílus** fülön szabhatod testre.

| Beállítás | Mit csinál |
|---|---|
| **Szín** | A doboz háttere; alapból a márkaszín. Egyéni szín az **Egyéni** értékkel. A lebegő gomb egyes elemeinek saját színe felülírhatja ezt a háttérszínt |
| **Szélesség** | A doboz szélessége csúszkával |
| **Sarkok** | **Kerek**: lágy sarkok. **Lekerekített**: egyenletesen ívelt szélek. **Éles**: téglalap alakú |
| **Dobozárnyék** | Mélységet ad a doboznak. Lásd: [Árnyék](https://hub.hellowp.io/hu/plugins/elementor/stilus-arnyek/) |
| **Megnyitási animáció** | A doboz animációval nyílik ki, nem egyszerűen megjelenik; ilyenkor az animáció időtartama is megadható |

### Elrendezés

Az elrendezés a lebegő gomb helyét határozza meg a **Haladó** fülön.

| Beállítás | Mit csinál |
|---|---|
| **Vízszintes pozíció** | A gomb a képernyő jobb szélére, bal szélére vagy közepére kerül |
| **Eltolás** (vízszintes) | Távolság a képernyő szélétől. Ha a gombot jobbra rakod, és 50 px eltolást adsz meg, a gomb a képernyő jobb szélétől 50 képponttal balra áll |
| **Függőleges pozíció** | A gomb a képernyő tetejére, aljára vagy közepére kerül |
| **Eltolás** (függőleges) | Távolság a képernyő szélétől. Ha a gombot alulra rakod, és 50 px eltolást adsz meg, a gomb a képernyő aljától 50 képponttal feljebb áll |