# Kuponkód widget: lehúzható, kaparós és kicsúszó kártya, sablon a hátoldalon

> A három kártyás kupontípus felépítése, beállításai és működése, valamint Elementor-sablon használata a kártya oldalain.

A **Kuponkód** widget a **Normál** típus mellett három kártyás típust is tud: **Lehúzás**, **Kaparás** és **Kicsúszás**. Mindegyiknek van előlapja és hátoldala: a látogató az előlapot elhúzza, lekaparja vagy kitolja, és alatta megjelenik a kód. A normál típusról a [Kuponkód widget: felugró ablak, átirányítás és maszkolt hivatkozás](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-kuponkod-akciok/) fejezet szól.

## Előkészületek

- A widget a Pro kiadás része, az ingyenes bővítményben nincs kuponwidget.
- Az Elementor (ingyenes) telepítve és aktív legyen.
- Kapcsold be: **The Plus Addons → Widgets**, keress rá a **Coupon Code** szóra, és kapcsold be a kapcsolóját. Ez a **Widgets** képernyő, nem az **Extensions**. A szerkesztőben a neve **Kuponkód**.

A kártyákra közös, hogy a **Normál stílus** választó nem létezik náluk: a megjelenést a **Stílus** lap adja. Másoló gombjuk sincs, a kódot a látogatónak kell kijelölnie. A másolás a **Normál** típus felugró ablakának szolgáltatása.

## Lehúzható kártya (Peel)

A lehúzható kártyánál a látogató egy sarkot elhúz, és alatta megjelenik a kód. A kártya két szakaszból áll: mi van elöl, és mi van alatta.

1. Szerkeszd az oldalt Elementorral, és húzd rá a **Kuponkód** widgetet.
2. Az **Elrendezés** szakaszban a **Kupon típusa** legyen **Lehúzás**. A normál beállítások eltűnnek, a kártyabeállítások jelennek meg.
3. A **Tartalom** szakaszban állítsd be a **Szélesség** és a **Magasság** értékét. Mindkettő képpontos, reszponzív csúszka. A szélesség felső korlátként érvényes: a kártya kisebb képernyőn keskenyebb lehet, de szélesebb nem.
4. Nyisd meg a **Tartalom → Előlap** szakaszt. A **Tartalomtípus** maradjon **Alapértelmezett**, a **Tartalom** mezőbe írd a csalogató szöveget, a **Tartalomcímke** mezőben válaszd ki a címsor szintjét (alapértéke H3).
5. Nyisd meg a **Tartalom → Hátoldal** szakaszt, és töltsd ki a **Cím** (ide a kód is jó), a **Cím HTML-címke** és a **Leírás** mezőt.

![A lehúzható kártya lehúzás előtt](./kepek/dobozok-gombok-4-kupon-lehuzas.webp)

*A lehúzható kártya lehúzás előtt* (https://minta-bolt.hu/tp-kupon-lehuzas/)

A képen a kártya előlapja látszik, a jobb felső sarokban a felhajló sarokkal.

| Beállítás | Hol | Alapérték |
| --- | --- | --- |
| **Kupon típusa** | **Elrendezés** | Normál, állítsd **Lehúzás**ra |
| **Szélesség** | **Tartalom** | üres (a kártya az oszlopa szélességét veszi fel) |
| **Magasság** | **Tartalom** | üres |
| **Tartalomtípus** | **Előlap** és **Hátoldal** | Alapértelmezett, a másik lehetőség a **Sablon** |
| **Tartalom** | **Előlap** | `Elülső tartalom` |
| **Tartalomcímke** | **Előlap** | H3, elérhető még H1-H6, div, p és span |
| **Cím** | **Hátoldal** | `Hátoldali cím` |
| **Leírás** | **Hátoldal** | `Hátoldali leírás` |

### Működés

- Mindkét oldal az elejétől létezik: a hátoldal már az oldalon van az előlap alatt, pontosan ugyanakkora méretben és helyen.
- A sarokból való húzás leszedi az előlapot. A közzétett oldalon a jobb felső saroktól a bal alsó felé húzva az előlap teljesen eltűnt, és a hátoldal címe és leírása maradt látható.
- Egyirányú: ha leszedted, az előlap az oldal újratöltéséig nem tér vissza.
- A stílus megoszlik: a **Stílus → Előoldal tartalma**, **Hátoldal tartalma** és **Doboz tartalma** szakasz a két oldalt és a kártya saját hátterét kezeli.

### Korlátok

- Nincs előre elkészített stílus: a **Normál** típussal ellentétben itt nincs **Normál stílus** választó. Minden megjelenés a **Stílus** lapról jön.
- Nincs másoló gomb. A kódot úgy tedd ki, hogy a látogató könnyen kijelölhesse.
- Az ikonok üres négyzetként jelenhetnek meg: az ollóikon és a **Bezáró ikon** Font Awesome-ot használ, amelyet a The Plus Addons nem tölt be magától.

### Hibaelhárítás

- **A kártya egy vékony csík:** a **Magasság** üres, ezért a kártya csak olyan magas, mint a tartalma. Adj meg magasságot a **Tartalom → Tartalom** alatt.
- **Húzásra nem történik semmi:** a közzétett oldalon próbáld, nem az Elementor előnézetében: a lehúzás az oldal JavaScriptjével működik. A húzást magán a kártyán kezdd, ne mellette.
- **A hátoldal már lehúzás előtt látszik:** az előlapnak nincs tartalma, vagy a szövege ugyanolyan színű, mint a kártya. Töltsd ki az **Előlap → Tartalom** mezőt, és nézd meg a **Stílus → Előoldal tartalma** szakaszt.

## Kaparós kártya (Scratch)

A kaparós kártya a kedvezményt nyereménnyé teszi: a látogató egérrel vagy ujjal letörli az előlapot, és megjelenik alatta a kód. A widget az előlap tartalma fölé egy vásznat (canvas) rajzol, és egy beállítás dönti el, mennyit kell letörölni.

1. Szerkeszd az oldalt Elementorral, és húzd rá a **Kuponkód** widgetet.
2. Az **Elrendezés** szakaszban a **Kupon típusa** legyen **Kaparás**.
3. A **Tartalom** szakaszban állítsd be a **Szélesség** és a **Magasság** értékét (reszponzív, képpontos csúszkák).
4. Ugyanitt állítsd be a **Kitöltési százalék felfedéskor** értéket: ennyit kell letörölni a kártyából, és a maradék ettől magától eltűnik. Alapértéke 70.
5. Töltsd ki az **Előlap** (**Tartalomtípus: Alapértelmezett**, **Tartalom** és **Tartalomcímke**) és a **Hátoldal** (**Cím**, **Cím HTML-címke**, **Leírás**) szakaszt.

![A kaparós kártya kaparás előtt](./kepek/dobozok-gombok-4-kupon-kaparos.webp)

*A kaparós kártya kaparás előtt* (https://minta-bolt.hu/tp-kupon-kaparos/)

A képen a kártya letörlés előtti előlapja látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Kupon típusa** | Kaparós kártyára váltja a widgetet. | Normál, állítsd **Kaparás**ra |
| **Szélesség** / **Magasság** | A kártya mérete, reszponzív. A szélesség felső korlát. | üres |
| **Kitöltési százalék felfedéskor** | Mennyit kell letörölni, hogy a maradék magától eltűnjön. 1-től 100-ig. | 70 |
| **Tartalomtípus** (elöl és hátul) | **Alapértelmezett** a sima mezőkhöz, **Sablon** egy mentett Elementor-sablonhoz. | Alapértelmezett |

### Működés

- A kaparófelület a böngészőben készül. Az oldal betöltése után egy pillanattal a widget képet készít az előlap tartalmáról, a kártyával megegyező méretű vászonra rajzolja, és az eredeti előlapot eltávolítja.
- A húzás töröl. A közzétett oldalon egy 420 × 260 képpontos kártyán nyolc teljes szélességű húzás az egész vásznat eltávolította, és a hátoldal (a kód és a leírása) maradt látható.
- A megadott százalék elérésekor a maradék magától eltűnik. Nem kell minden sarkot kikaparni: a **Kitöltési százalék felfedéskor** értéke után az egész felület eltűnik.
- Egyirányú: az oldal újratöltése hozza vissza a kártyát.

### Korlátok

- A **Kitöltési százalék felfedéskor** értéke százalék, de a csúszkán px egység látszik. Az egységet hagyd békén, csak a számot állítsd.
- A kaparófelület az előlap tartalmából rajzolt vászon. A böngésző az oldal betöltése után hozza létre, ezért késve jelenik meg, és az előlapot lapos képként rajzolja: a benne lévő hivatkozások, videók és minden interaktív elem megszűnik működni.
- A kártya a többi tartalomnál egy pillanattal később jelenik meg: lassú kapcsolatnál rövid ideig a sima előlap látszik.
- Az ikonok üres négyzetként jelenhetnek meg (Font Awesome nincs betöltve).

### Hibaelhárítás

- **Nincs mit lekaparni:** a közzétett oldalt nézd, ne az Elementor előnézetét, és adj a kártyának **Magasság**ot: magasság nélkül szinte nincs felület, amire rajzolni lehetne.
- **Szinte teljesen le kell kaparni:** csökkentsd a **Kitöltési százalék felfedéskor** értékét. Az alapértelmezett 70-nél a kártya nagy részét le kell törölni.
- **Az előlapon gomb volt, és megszűnt működni:** az előlapot képpé lapítja a widget. A kattintható tartalmat tedd a hátoldalra, vagy használd a **Lehúzás** vagy **Kicsúszás** típust, amelyek az előlapot valódi elemként tartják meg.

## Kicsúszó kártya (Slide Out)

A kicsúszó kártya a legszelídebb: a látogató oldalra húzza az előlapot, és mögötte ott a kód. Semmi sem tűnik el, az előlap csak félrecsúszik a megadott irányba.

1. Szerkeszd az oldalt Elementorral, és húzd rá a **Kuponkód** widgetet.
2. Az **Elrendezés** szakaszban a **Kupon típusa** legyen **Kicsúszás**.
3. A **Tartalom** szakaszban állítsd be a **Szélesség** és a **Magasság** értékét (reszponzív, képpontos csúszkák), majd válassz **Kicsúszás iránya** értéket: **Bal**, **Jobb**, **Felül** vagy **Alul**. Alapértéke **Bal**.
4. Kapcsold be az **Irányjelző ikon** kapcsolót, ha a kártyán egy nyilas jelet szeretnél, amely megmutatja a látogatónak, mit kell tennie. Alapból ki van kapcsolva.
5. Az **Előlap** és a **Hátoldal** szakaszt ugyanúgy töltsd ki, mint a többi kártyatípusnál.

![A kicsúszó kártya az irányjelző ikonnal](./kepek/dobozok-gombok-4-kupon-kitolhato.webp)

*A kicsúszó kártya az irányjelző ikonnal* (https://minta-bolt.hu/tp-kupon-kitolhato/)

A jobb felső sarokban a kéz és a két nyíl az **Irányjelző ikon**, amely jelzi, hogy a kártya húzható.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Kicsúszás iránya** | Merre mozdul el az előlap húzáskor. | Bal |
| **Irányjelző ikon** | Kis nyilas jelet rajzol a kártyára útmutatónak. | ki |
| **Szélesség** / **Magasság** | A kártya mérete, reszponzív. A szélesség felső korlát. | üres |
| **Tartalomtípus** (elöl és hátul) | **Alapértelmezett** a sima mezőkhöz, **Sablon** egy mentett Elementor-sablonhoz. | Alapértelmezett |

### Működés

- Az előlap csúszik, nem törlődik. A közzétett oldalon **Bal** iránynál a kártyát balra húzva az előlap jóval a kártya bal szélén túlra csúszott, a hátoldal pedig a helyén maradt és látható volt. **Jobb** iránynál az előlap ugyanennyit mozdult az ellenkező irányba.
- Húzni kell, nem kattintani: a kattintás nem csinál semmit, a kártya a választott tengely mentén történő nyomásra és húzásra reagál.
- Az **Irányjelző ikon** kis nyilas grafikaként jelenik meg a kártyán, az aktuális szövegszínnel.
- A stílust a **Stílus → Előoldal tartalma**, **Hátoldal tartalma** és **Doboz tartalma** szakasz adja.

### Korlátok

- A kártyának nincsenek stílus-előbeállításai. A kicsúszónál nincs képválasztó: a megjelenés teljesen a **Stílus** lapról jön.
- Nincs másoló gomb. A vágólapra másolás a **Normál** típus felugró ablakának szolgáltatása, a kártyán a látogató kézzel jelöli ki a kódot.
- Az ikonok üres négyzetként jelenhetnek meg (Font Awesome nincs betöltve).

### Hibaelhárítás

- **A kártya nem mozdul:** a közzétett oldalon próbáld, mert a húzást az oldal JavaScriptje kezeli, amely az Elementor előnézetében nem fut. Ellenőrizd azt is, hogy a választott tengely mentén húzol-e: a **Bal** irányú kártya a fel-le húzást figyelmen kívül hagyja.
- **A látogató nem érti, hogy húzható:** kapcsold be az **Irányjelző ikon** kapcsolót, és írd ki az **Előlap → Tartalom** mezőben.
- **Az élek körül látszik a hátoldal:** a két oldal ugyanakkora, ezért a kártyánál rövidebb előlap mellett kilátszik a hátoldal. Adj a kártyának **Magasság**ot, és nézd meg az előlap paddingjét a **Stílus → Előoldal tartalma** szakaszban.

## Elementor-sablon a kártya oldalán

A sima mezők egy címet és egy sornyi leírást adnak. Ez egy kódhoz elég, egy ajánlathoz kevés. Ha az oldalt egy mentett Elementor-sablonra állítod, a felfedett rész bármi lehet, amit megépítesz: kép, gomb, visszaszámláló, és ami az ajánlathoz kell.

A **Tartalomtípus** csak kártyás típusnál létezik, a **Normál** típusnál nem: a sablon a kártyák szolgáltatása.

### A sablon megépítése

1. Az irányítópulton menj a **Sablonminták → Elmentett sablonok** oldalra, és kattints az **Új hozzáadása** gombra.
2. Válaszd típusnak a **Szakasz**t, adj nevet, és kattints a **Sablonminta létrehozása** gombra.
3. Tervezd meg az ajánlatot, majd tedd közzé a sablont. Körülbelül a kártya méretű legyen: a kártya nem méreteződik a sablonhoz.

### A kártya rákötése

1. Szerkeszd az oldalt Elementorral, és húzd rá a **Kuponkód** widgetet.
2. Az **Elrendezés → Kupon típusa** legyen a **Normál** kivételével bármelyik: **Lehúzás**, **Kaparás** vagy **Kicsúszás**.
3. Az **Előlap** mezőit töltsd ki a szokott módon, vagy ott is válaszd a **Tartalomtípus** értékének a **Sablon**t.
4. A **Hátoldal** szakaszban állítsd a **Tartalomtípus** értékét **Sablon**ra. A **Cím**, a **Cím HTML-címke** és a **Leírás** helyét egyetlen **Sablon** legördülő lista veszi át.
5. A **Sablon** listából válaszd ki a sablont.

![A sablonnal épített kártya az előlappal](./kepek/dobozok-gombok-4-kupon-sablon.webp)

*A sablonnal épített kártya az előlappal* (https://minta-bolt.hu/tp-kupon-sablon/)

A képen a lehúzható kártya előlapja látszik; a hátoldalán a **Sablon** tartalma van, amely a lehúzás után jelenik meg.

| Beállítás | Hol | Megjegyzés |
| --- | --- | --- |
| **Tartalomtípus** | **Előlap** és **Hátoldal** | **Alapértelmezett** vagy **Sablon**. **Normál** típusnál egyáltalán nem látszik. |
| **Sablon** | **Előlap** és **Hátoldal** | A mentett sablonjaid listája. Csak akkor látszik, ha a **Tartalomtípus** **Sablon**. |
| **Szélesség** / **Magasság** | **Tartalom** | A kártyát igazítsd a sablonhoz, ne fordítva. |

A két oldal egymástól független: lehet sablon a hátoldalon és sima szöveg az előlapon, vagy mindkettőn sablon.

### Működés

- A sablon valódi sablonként jelenik meg. A közzétett oldalon a kártya hátoldala a sablon saját kódját és Elementor-stíluslapját tartalmazta, a benne lévő címsor pontosan úgy jelent meg, ahogy megterveztem, nem kódolt szövegként.
- A felfedés nem változik: a kártyát ugyanúgy lehúzod, lekaparod vagy kitolod, csak alatta cím és leírás helyett a sablon jelenik meg.
- A sablon az elejétől az oldalon van, az előlap alatt. Nem a kártya kinyitásakor töltődik be.
- A sablon módosítása minden kártyán frissül, amely használja, mert a kártya a mentett sablont jeleníti meg, nem másolatot.

### Korlátok

- A **Normál** típus nem használhat sablont: a **Tartalomtípus** a **Normál** típusnál rejtett.
- A kártya nem nő a sablonhoz. A kártyánál magasabb sablon kilóg vagy levágódik. Állítsd be a **Szélesség** és a **Magasság** értékét a tervhez.
- Sablont csak szerkesztő vagy adminisztrátor jogú felhasználó választhat. Aki nem ilyen, a sablon helyén a **Jogosulatlan hozzáférés** üzenetet látja.
- A kaparós kártya felülete a böngészőben, a betöltés után készülő vászon, ezért késve jelenik meg, és az előlapja lapos képpé válik: a benne lévő hivatkozások, videók és interaktív elemek megszűnnek.
- Önálló szkriptet igénylő tartalom (karusszel, visszaszámláló, űrlap) a sablonban külön ellenőrzést kíván.

### Hibaelhárítás

- **A Sablon lista üres:** még nincs mentett sablonod, vagy nincs közzétéve. Hozz létre egyet a **Sablonminták → Elmentett sablonok** oldalon.
- **A Tartalomtípus nincs a panelen:** a **Kupon típusa** még **Normál**. Váltsd **Lehúzás**ra, **Kaparás**ra vagy **Kicsúszás**ra.
- **A sablon levágódik:** növeld a **Magasság** értékét a **Tartalom → Tartalom** alatt, vagy egyszerűsítsd a sablont. A kártya mérete a widgettől függ, nem a sablontól.
- **A terv helyett Jogosulatlan hozzáférés üzenetet látok:** a bejelentkezett felhasználónak nincs szerkesztői vagy adminisztrátori jogosultsága. Ez az üzenet a widgeté, és megszűnik, ha megkapja a jogosultságot.