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

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

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ásra
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.

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ásra
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ágot: 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.

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ágot, é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 Szakaszt, 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 Sablont.
4. A Hátoldal szakaszban állítsd a Tartalomtípus értékét Sablonra. 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.

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ásra, Kaparásra vagy Kicsúszásra.
• 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.