# Lebegő sáv

> Lebegő sáv (Floating Bar) létrehozása sablonból, a tartalom, a stílus és a haladó beállítások.

A lebegő sávok az oldal tetején vagy alján megjelenő szalagok. Promóciókra, bejelentésekre és felhívásokra használd őket: felhívják a látogatók figyelmét, és interakcióra ösztönzik őket anélkül, hogy megzavarnák a böngészést.

A lebegő sáv **sablon**, nem widget vagy egyéb elem. A WordPress admin felületéről hozod létre, nem a szerkesztő elemei közül.

## Mire jó?

- **Akciók:** kuponkóddal hirdess akciót a lebegő sávból.
- **Navigáció:** az oldal új vagy kiemelt részére irányíthatod a látogatókat.
- **Cselekvésre ösztönzés:** a sáv gombjával hírlevélre iratkoztathatod fel a látogatókat, vagy más műveletre buzdíthatod őket.

Egy példa: egy ruhaüzlet tulajdonosa esős időt jósló előrejelzés miatt az esernyőkínálatra akarja felhívni a figyelmet, ezért lebegő sávot tesz az oldalra, amely minden oldalon látszik.

## Lebegő sáv létrehozása lépésről lépésre

A lebegő sáv előre elkészített sablonra épül. A sablont testre szabhatod, de nulláról nem készíthetsz új sablont.

### 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). A lista üres, amíg nem hozol létre elemet.
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ő sávok** lehetőséget. (A másik lehetőség a **Lebegő gombok**.)
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ő sávok kiválasztva, névvel](./kepek/widgetek-lebego-sav-uj.webp)

*Az Új lebegő elemek ablak: Lebegő sávok 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ő sávok** áll, alatta a sablon neve, majd a **Lebegő elem létrehozása** gomb.

6. A szerkesztő megnyílik, és előtte megjelenik a sablontár ablak a **Lebegő sávok** 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ő sávok fülje: kártyák, az elsőn a Beszúrás gomb](./kepek/widgetek-lebego-sav-konyvtar.webp)

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

A képen a lebegő sáv sablonok kártyái láthatók; a fölé vitt kártyán megjelenik a **Beszúrás** gomb.

A sablontárból a beszúráshoz az Elementor egy ingyenes személyes fiókhoz való kapcsolódást kér: ha a webhely még nincs csatlakoztatva, a **Beszúrás** után megjelenik a „Csatlakozás a sablontárhoz” képernyő, és a **Kezdés** gombbal kezdheted el a csatlakozást. A Pro jelölésű sablonok csak Elementor Pro felhasználóknak érhetők el.

### A lebegő sáv szerkesztése

A panel beállításai a választott sablontól függnek. Példánkban megváltoztatjuk a sáv üzenetét, az ikont, a gombot és a sáv helyét.

1. A panelen keresd meg az **Ikon** mezőt, kattints a jobb oldali ikonra, és válassz az ikonkönyvtárból (például esernyőt), majd kattints a **Beszúrás** gombra.
2. A bejelentés mezőbe írd be az üzenetet, például: „Viharos idő? Nézd meg az esernyőinket.”
3. Nyisd meg a **CTA gomb** mezőt, és a **Szöveg** mezőt írd át (például „Maradj szárazon!”). Egy valódi webáruházban ide a megfelelő oldalra mutató linket tennéd.
4. Nyisd meg a **Haladó** fület, és kattints az alsó ikonra: a lebegő sáv a képernyő aljára kerül.
5. A jobb felső sarokban kattints a **Közzététel** gombra.
6. Kattints a feltétel hozzáadására.
7. (Csak Elementor Pro felhasználóknak) Állíts be feltételeket, hogy a sáv hol jelenjen meg az oldalon. Részletek: a globális sablonok megjelenítési feltételeiről szóló fejezetben.
8. Kattints a **Mentés és bezárás** gombra. A lebegő sáv ezután a kijelölt oldalakon megjelenik.

## A lebegő sáv beállításai

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

### Tartalom fül

| Beállítás | Mit csinál |
|---|---|
| **Ikon** | Ikon beszúrása a sávba |
| Szöveg (bejelentés) | Rövid szöveg a sávban; általában ne legyen hosszabb egy sornál |
| CTA gomb: **Szöveg** | A gombon megjelenő felirat, általában két-három szó |
| CTA gomb: **Link** | A gomb linkje: popup, az oldal egy lapja vagy bármilyen más művelet, amit link indíthat |
| CTA gomb: **Ikon** | A gomb ikonja |
| **Bezáró gomb** | Rejtett értéknél a látogatók nem tudják bezárni a sávot |
| **Elérhető név** | A sáv neve, amelyet a képernyőolvasók felolvasnak a korlátozott látású látogatóknak |

### Stílus fül

| Szekció | Beállítások |
|---|---|
| Ikon | **Szín**, **Pozíció** (a bejelentés szövegének jobb vagy bal oldalán), **Méret** |
| Szöveg | **Tipográfia** (méret és betűtípus), **Szín** |
| CTA gomb | **Típus** (**Gomb** vagy **Link**); **Tipográfia**; **Normál** és **Rámutatás** állapot (a szöveg és a háttér színe); **Szegély** (ha bekapcsolod, színt és vastagságot is meg kell adnod); **Sarkok** (kerek, lekerekített vagy éles); **Padding**; **Belépő animáció** (az animáció stílusa és időtartama) |
| Bezáró gomb | **Vízszintes pozíció** (a sáv jobb vagy bal oldala), **Szín**, **Méret** |
| Elemek igazítása | A bejelentés szövege, az ikon és a CTA gomb igazítása: balra, középre, jobbra vagy **Nyújtás** (szétterülnek a sávon) |
| Elemek közti térköz | Mennyi hely legyen a szöveg, az ikon és a gomb között |
| Padding | Belső térköz a szövegnek, az ikonnak és a gombnak |
| Háttér | A sáv háttere |
| Háttér-fedés | Áttetsző háttér a sávhoz |

A szín és a térközök beállításáról lásd: [Színválasztó](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szinvalaszto/) és [Térköz, margó és belső térköz](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-terkoz-margo-padding/).

### Haladó fül

| Beállítás | Mit csinál |
|---|---|
| **Függőleges pozíció** | A sáv a képernyő tetején vagy alján jelenik meg |
| **Ragadós (Sticky)** | Ha kikapcsolod, a sáv eltűnik, ahogy a látogató lefelé görget az oldalon. Ez a hatás csak a weboldalon látszik, a szerkesztőben nem |
| **Megnyitás** | A legördülő menü aktiválása: kattintásra vagy rámutatásra |
| **Animáció** | A sáv lassú megjelenése; az animáció időtartama szabályozza, mennyi idő alatt jelenik meg teljesen |
| **CSS ID** | Azonosító a sávnak. Lásd: [CSS-osztály és azonosító](https://hub.hellowp.io/hu/plugins/elementor/stilus-css-osztaly-es-azonosito/) |
| **CSS-osztályok** | Osztály a sávnak. Lásd: [CSS-osztály és azonosító](https://hub.hellowp.io/hu/plugins/elementor/stilus-css-osztaly-es-azonosito/) |
| Egyedi CSS | Egyedi CSS a sávhoz |
| Attribútumok | Egyedi attribútumok a sávhoz |