# Stílusbeállítások

> A popup konténerének, bezárógombjának és takarórétegének megjelenése Elementorban és a blokkszerkesztőben.

A popup megjelenését Elementorban a **JetPopup Beállítások** panel **Stílus** fülén, a blokkszerkesztőben a **Jet Popup** oldalsáv stílus szekcióiban állítod. Az Elementorban a méret, a pozíció és a térközök eszközönként (asztali gép, táblagép, mobil) külön megadhatók.

## Elementor: Stílus fül

A **Stílus** fül négy szekciót tartalmaz: **General Styles**, **Felugró ablak konténere**, **Bezáró gomb** és **Felugró ablak fedőrétege**.

![A popup konténerének stílusbeállításai](./kepek/elementor-stilus-kontener.webp)

*A popup konténerének stílusbeállításai* (https://minta-bolt.hu/wp-admin/post.php?post=11&action=elementor)

A képen a **Felugró ablak konténere** szekció van kinyitva: a méret, a pozíció és a háttér beállításai.

### General Styles

Az itt lévő **Z-Index** mező azt adja meg, hogy a popup az oldal többi eleme előtt vagy mögött jelenjen meg. Nagyobb szám előrébb kerül.

### Felugró ablak konténere

| Csoport | Beállítás | Mit csinál |
|---|---|---|
| **Méret** | **Szélesség** | A popup szélessége (alapérték 800 px) |
| | **Egyéni magasság** | Bekapcsolva megadhatod a popup magasságát |
| **Pozíció** | **Vízszintes pozíció** | **Bal**, **Középre** vagy **Jobb** |
| | **Függőleges pozíció** | **Felül**, **Középen** vagy **Alul** |
| | **Tartalom pozíciója** | A tartalom helye a konténeren belül: **Felül**, **Középen**, **Alul** |
| **Konténer háttere** | **Háttér típusa** | **Klasszikus** (egyszínű vagy képes háttér) vagy **Gradiens** |
| **Egyéb stílusok** | **Padding** | A tartalom és a konténer széle közti tér |
| | **Margó** | A konténeren kívüli tér |
| | **Keretsugár** | A sarkok lekerekítése |
| | **Szegély típusa** | **Alapértelmezett**, **Egyik sem**, **Sima**, **Dupla**, **Pontozott**, **Szaggatott**, **Horony** |
| | **Box Shadow** | Árnyék a konténer körül (a **Szerkesztés** gombbal nyílik) |

### Bezáró gomb

- **Bezárógomb használata**: bekapcsolva a popupban megjelenik egy gomb, amellyel a látogató bezárhatja.
- **Ikon**: a gomb ikonja, az **Ikontár** ikonjaiból, vagy saját SVG feltöltésével (**SVG feltöltése**).
- **Ikon átalakítása**: a **Szerkesztés** ceruzaikonnal egyedi pozícióba mozgathatod a gombot. A visszaállító nyíllal az alaphelyzetet állíthatod vissza.
- **Ikonstílusok**: a gomb megjelenése **Normál** állapotban és **Rámutatás** (egérrel fölé mutatás) közben.

### Felugró ablak fedőrétege

A takaróréteg a popup mögötti, elsötétített képernyőrész.

- **Átfedés használata**: a réteg be- és kikapcsolása.
- **Close On Click**: bekapcsolva a popup bezárul, ha a látogató a takarórétegre kattint.
- **Háttér típusa**: **Klasszikus** (szín vagy kép) vagy **Gradiens**.

## Blokkszerkesztő: stílus szekciók

A blokkszerkesztő oldalsávjában három stílus szekció van: **Container Styles**, **Close Button Styles** és **Overlay Styles**. Külön stílusbővítmény nem kell hozzá.

**Container Styles**

- **Container Width** és **Container Height**: a méret. A magasság módosításához kapcsold be a **Custom Height** kapcsolót.
- **Horizontal Position** és **Vertical Position**: a popup helye az oldalon (például a jobb alsó sarok).
- **Content Vertical Position**: a tartalom függőleges helye a konténeren belül.
- **Background Color**: **Classic** (szín vagy kép) vagy **Gradient** háttér.
- **Horizontal Padding**, **Vertical Padding**: a tartalom és a konténer széle közti tér. **Vertical Margin**, **Horizontal Margin**: a konténeren kívüli tér.
- **BORDER** és **BORDER RADIUS**: a szegély és a sarkok lekerekítése.
- **BOX SHADOW** és **Z INDEX**: árnyék és rétegsorrend.

**Close Button Styles**

- **ICON COLOR**, **ICON SIZE**: az ikon színe és mérete (az alapértelmezett keresztecske vagy a feltöltött SVG).
- **BACKGROUND COLOR**, **BUTTON SIZE**: a gomb háttérszíne és mérete.
- **BORDER**, **BORDER RADIUS**: a gomb szegélye és lekerekítése.
- **BUTTON X TRANSLATE**, **BUTTON Y TRANSLATE**: a gomb eltolása vízszintesen és függőlegesen.

**Overlay Styles**

Ez a szekció csak akkor hat, ha a **USE OVERLAY** kapcsoló be van kapcsolva. A **BACKGROUND COLOR** között választhatsz **Classic** (egyszínű vagy kép) és **Gradient** háttér közt. Az alapértelmezett szín a félig átlátszó fekete.

A módosításokat a szerkesztő előnézetében vagy közvetlenül a popupot használó oldalon ellenőrizheted.