# Popup Builder: áttekintés és beállítások

> A Popup Builder / képernyőn kívüli panel widget: popup-típusok, tartalomtípusok, megnyitó elem, extra opciók és a stílusbeállítások.

A **Popup Builder / képernyőn kívüli panel** widgettel felugró ablakot, oldalsó panelt vagy menüt készíthetsz az Elementorban. A megnyitó elemet (gomb, ikon, Lottie) a widget maga adja, ezért nem kell külön gombot beállítanod hozzá.

## Előkészületek

- Az Elementor és a The Plus Addons bővítmény legyen telepítve és aktív.
- A widget a Pro bővítmény része, az ingyenes változat Elementor-paneljében nem jelenik meg.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **Popup Builder** névre, és kapcsold be a kapcsolót.
- Ha a popupnak az oldal minden lapján meg kell jelennie, a widgetet a fejléc- vagy a lábléc-sablonba tedd.

## Mit tud a widget

- Négy popup-típus: csúsztatás, tartalom felfedése, sarokdoboz és modális felugró ablak.
- A tartalom lehet Elementor-sablon, szabadon írt szöveg vagy sablon-rövidkód.
- A megnyitó elem lehet ikon, gomb, Lottie, vagy rejtett is.
- Több bezárási mód, rögzített kapcsológomb, tartalom-átalakítás és megnyitási/bezárási animáció.
- Kilenc megjelenítési beállítás, amelyekkel a popup kinyílása időhöz, görgetéshez, érkezési oldalhoz vagy látogatói viselkedéshez köthető.

## A tartalom beállítása

Húzd a widgetet az oldalra. A **Tartalom** szakaszban először a popup típusát válaszd ki.

![A Popup Builder Tartalom szakasza: felugró ablak típusa, irány, méretek, tartalomtípus és megnyitó elem](./kepek/popup-builder-panel-tartalom.webp)

*A Popup Builder Tartalom szakasza: felugró ablak típusa, irány, méretek, tartalomtípus és megnyitó elem* (https://minta-bolt.hu/wp-admin/post.php?post=333&action=elementor)

A képen a négy típusválasztó, a **Megnyitás iránya**, a méretezők, a **Tartalomtípus** és a **Válaszd ki az opciót** mező látszik. Az **Import Presets** gombbal kész előbeállítást tölthetsz be, és utána átszabhatod.

### Felugró ablak típusa

| Típus | Mit csinál |
| --- | --- |
| **Csúsztatás** | Az oldalról becsúszó panel, az oldal tartalmát nem tolja el. Oldalsó (off canvas) menühöz ezt használd. |
| **Tartalom felfedése** | A teljes oldal tartalma elmozdul, és felfedi a panelt. |
| **Sarokdoboz** | Kis doboz az oldal sarkában. |
| **Modális felugró ablak** | A megszokott felugró ablak az oldal közepén, háttérréteggel. |

A típustól függően más méret- és irányvezérlők jelennek meg:

- **Megnyitás iránya**: a csúsztatásnál és a tartalom felfedésénél **Bal**, **Jobb**, **Felül** vagy **Alul**; a modális ablaknál alapból **Középre**, ahol az ablak a képernyő közepén nyílik.
- **Felugró ablak szélessége**: a csúsztatás és a tartalom felfedése esetén a panel szélessége, px-ben vagy %-ban, eszközönként külön. Felül vagy alul nyíló panelnél ez a panel magassága.
- **Felugró ablak szélessége** és **Felugró ablak magassága**: a modális ablak legnagyobb mérete.
- **Felugró ablak bal és jobb oldali térköze**, **Felugró ablak felső és alsó térköze**: a modális ablak távolsága a böngészőablak szélétől.

### Tartalomtípus

| Tartalomtípus | Mit kell tenned |
| --- | --- |
| **Sablon** | A **Tartalom kiválasztása** mezőben válassz egy mentett Elementor-sablont. Ez az alapértelmezett. |
| **Tartalom** | A megjelenő szerkesztőbe közvetlenül írd a szöveget, képet. Rövid üzenethez jó. |
| **Rövidkód** | Az **Add meg az Elementor-sablon shortcode-ot** mezőbe írd az Elementor-sablon rövidkódját. |

Részletek: [Popup Elementor-sablonból](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/popup-builder-sablon-tartalom/).

### A megnyitó elem

A **Válaszd ki az opciót** mezőben döntöd el, mi nyissa a popupot:

| Érték | Mit jelent |
| --- | --- |
| **Ikon** | Ikon (például hamburger) a megnyitáshoz. Menühöz jó. Az **Ikon stílusa** mezőben a **Stílus 1**, **Stílus 2**, **Stílus 3** vagy **Egyéni** (saját kép) közül választhatsz. |
| **Felhívás cselekvésre** | Gomb az oldalon, rákattintva nyílik a popup. Ez az alapérték. |
| **Rejtett** | Nincs megnyitó elem. Akkor használd, ha a popup magától nyílik (például oldalbetöltéskor) vagy másik elem kattintására. |
| **Lottie** | Lottie-animáció a megnyitáshoz. |

A választástól függően a megfelelő testreszabási mezők jelennek meg.

### Popup megnyitása gombkattintásra

A leggyakoribb eset: a látogató egy gombra kattint, és megnyílik például egy hírlevél- vagy foglalási űrlap. A widget a gombot és a popupot együtt hozza létre, ezért nem kell külön gomb widgetet hozzáadnod és összekötnöd.

1. Húzd a **Popup Builder** widgetet az oldalra, és a **Tartalom → Tartalom** szakaszban válaszd ki a **Felugró ablak típusát**: **Modális felugró ablak** a középre kerülő dobozhoz, **Csúsztatás** vagy **Tartalom felfedése** az oldalpanelhez, **Sarokdoboz** a sarokban lévő kis dobozhoz.
2. Add meg a tartalmat. Űrlapnál és minden szerkesztett elrendezésnél a **Sablon** tartalomtípus a jobb választás, a **Tartalom kiválasztása** mezőben válaszd ki a mentett Elementor-sablont. Ha a sablon nincs kiválasztva, a popup üresen nyílik meg.
3. A **Válaszd ki az opciót** legyen **Felhívás cselekvésre**. Ez az alapérték, és gombot tesz az oldalra. Ha a gomb nem látszik, az opció **Rejtett** vagy **Ikon**.
4. A gomb felirata, ikonja, az ikon helye (a felirat előtt vagy után) és az igazítás (balra, középre, jobbra, eszközönként külön) ugyanitt állítható. A feliratnak érdemes cselekvésre hívó szót írni, például „Kérem az útmutatót”.
5. A gomb színe, tipográfiája, térköze és szegélye a **Stílus** fülön, a **Váltógomb** szakaszban van.
6. Tedd közzé az oldalt, és próbáld ki a gombot. A popupot alapból bezárhatja a bezáró ikon, az Esc billentyű és a popupon kívüli kattintás.

Korlátok:

- Widgetenként egy gomb van. Ha ugyanazt a popupot az oldal több pontjáról is meg kell nyitni, használd a **Bármely más elemre kattintáskor** indítót: [Mikor nyíljon a popup](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/popup-builder-megjelenitesi-feltetelek/).
- A gomb ott van, ahol a widget. Ha a képernyőhöz szeretnéd rögzíteni, kapcsold be a **Rögzített kapcsológomb** beállítást az **Extra opciók** szakaszban.
- Ha másik gomb vagy kép nyissa a popupot, adj neki CSS-osztályt, és használd a **Bármely más elemre kattintáskor** beállítást.

## Extra opciók

Az **Extra opciók** szakaszban további viselkedést állíthatsz be.

![Az Extra opciók szakasz a bezárási kapcsolókkal, a rögzített kapcsológombbal és az animációkkal](./kepek/popup-builder-panel-extra.webp)

*Az Extra opciók szakasz a bezárási kapcsolókkal, a rögzített kapcsológombbal és az animációkkal* (https://minta-bolt.hu/wp-admin/post.php?post=333&action=elementor)

A képen az első három kapcsoló (Esc, külső kattintás, link) alapból be van kapcsolva.

| Beállítás | Mit csinál |
| --- | --- |
| **Tartalom bezárása az Esc gombbal** | Az Esc billentyű bezárja a popupot. |
| **Tartalom bezárása külső kattintásra** | A popupon kívüli kattintás bezárja. |
| **Felugró ablak bezárása linkre kattintáskor** | A popupban lévő linkre kattintva bezáródik. Akkor hasznos, ha a beépített bezáró ikont elrejted, és saját bezáró gombot teszel a tartalomba. |
| **Rögzített kapcsológomb** | A megnyitó elem rögzített helyre kerül az oldalon, eszközönként külön pozícióval. A **Menü görgetési eltolásának megjelenítése** opcióval a gomb csak görgetés után látszik. |
| **Tartalom átalakítása** | Átalakító effektet adhatsz az oldalnak a popup nyitásakor és zárásakor, finomhangolható beállításokkal. |
| **Felugró ablak megnyitási és bezárási animációja** | Modális felugró ablaknál jelenik meg: **Bejövő animáció**, **Kilépő animáció**, **Késleltetés** és **Sebesség**. |

A bezárás módjairól bővebben: [A popup bezárása](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/popup-builder-bezaras/).

## Megjelenítési beállítások

A **Megjelenítési beállítások** szakasz mondja meg, mikor és kinek nyíljon ki a popup.

![A Megjelenítési beállítások szakasz a kilenc beállítással](./kepek/popup-builder-panel-megjelenites.webp)

*A Megjelenítési beállítások szakasz a kilenc beállítással* (https://minta-bolt.hu/wp-admin/post.php?post=333&action=elementor)

A képen az **Oldal betöltésekor** és a **Kilépési szándék esetén** kapcsoló, alattuk a szerkesztő (ceruza) ikonnal nyíló beállítások látszanak.

| Beállítás | Fajta | Mit csinál |
| --- | --- | --- |
| **Oldal betöltésekor** | Indító | Az oldal betöltése után kb. fél másodperccel nyílik. |
| **Kilépési szándék esetén** | Indító | Akkor nyílik, amikor a kurzor elhagyja az oldalt. Csak asztali gépen működik. |
| **Görgetésre** | Indító | Akkor nyílik, ha az oldalt a megadott távolságnál tovább görgetik. |
| **Tétlenség után** | Indító | Az oldal betöltése után a megadott ezredmásodperc elteltével nyílik. A látogató aktivitása nem nullázza az időzítőt. |
| **Adott URL-ről érkezéskor** | Indító | Akkor nyílik, ha a látogató pontosan a megadott címről érkezett. |
| **Bármely más elemre kattintáskor** | Indító | Akkor nyílik, ha rákattintanak egy megadott osztályú elemre. |
| **X oldalmegtekintés után** | Feltétel | A böngészőben a megadott számú oldalbetöltéstől engedi a megjelenést. |
| **Megjelenítés meghatározott ideig** | Feltétel | Csak a kezdő és a befejező dátum között jelenik meg a popup, a webhely időzónájában. |
| **Megjelenítés felhasználónként X alkalommal** | Feltétel | Korlátozza, hányszor jelenhet meg ugyanannak a látogatónak. |

Az indítók megnyitják a popupot, a feltételek csak azt döntik el, hogy megjelenhet-e. Több beállítást együtt is használhatsz, de a három feltételt (**X oldalmegtekintés után**, **Megjelenítés meghatározott ideig**, **Megjelenítés felhasználónként X alkalommal**) mindig párosítsd egy indítóval, például az **Oldal betöltésekor** kapcsolóval.

Az oldalbetöltés, a görgetés és a kilépési szándék oldalmegtekintésenként legfeljebb egyszer nyitja meg a popupot. Ha egyikük megnyitotta, a többi már nem nyitja újra ugyanazon az oldalbetöltésen.

A beállítások részletei: [Mikor nyíljon a popup](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/popup-builder-megjelenitesi-feltetelek/) és [Időzítés és megjelenési korlát](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/popup-builder-idozites-korlatozas/).

### Tétlenség után, X oldalmegtekintés után

- **Tétlenség után**: az **Inaktivitás ezredmásodpercben** mezőt (0 és 10 000 között, 100-as lépésekkel) töltsd ki.
- **X oldalmegtekintés után**: az **Oldalmegtekintések száma** mező (0 és 50 között) adja meg, hányadik oldalbetöltéstől jelenhet meg a popup abban a böngészőben. Önmagában nem nyitja meg a popupot, ezért kapcsold mellé az **Oldal betöltésekor** beállítást.

## A stílus beállítása

A **Stílus** fülön a popup kinézetét állíthatod, a szakaszok a popup beállításaitól függően változnak:

- **Megnyitott tartalom**: a popup és tartalmának stílusa (térköz, háttér, tipográfia, szövegszín), valamint két alszakasz: a **Bezáró ikon** (elrejtheted, vagy saját képet, ikont adhatsz neki, és állíthatod a hátterét, szegélyét, árnyékát) és a **Felugró ablak háttérrétege**.
- **Váltógomb**: ha a megnyitó elem a **Felhívás cselekvésre**. Itt teljes szélességűvé teheted a gombot, és állíthatod a térközét, tipográfiáját, színét, hátterét, szegélyét.
- **Váltó ikon/hamburger**: ha a megnyitó elem az **Ikon**. Az ikon színe, szegélye, háttere.
- **Tartalom görgetősávja**: a popup görgetősávjának külön részeit stílusozhatod.
- **Kapcsolat a rögzített navigációval**: ha a Popup Builder és a Navigációs menü widget együtt van, a rögzített (sticky) menü mellett itt állíthatod a megnyitó elem stílusát.

A **Haladó** fül minden widgetnél ugyanaz.

## Korlátok

- A Popup Builder csak a Pro bővítményben van.
- A popup csak azokon az oldalakon jelenik meg, amelyek tartalmazzák a widgetet. Az egész webhelyen jelenjen meg? Tedd fejléc- vagy lábléc-sablonba.