Lebegő gomb

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.

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.

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.

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 és Színválasztó.

Ü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
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