Kuponkód widget: felugró ablak, átirányítás és maszkolt hivatkozás

A Kuponkód widget gombként jelenít meg egy kuponkódot: a látogató rákattint, és megkapja a kódot, igény szerint egy másik oldalra is továbbmegy. Ez a fejezet a Normál típusú kuponról szól. A kártyás típusokról (lehúzható, kaparós, kicsúszó) a Kuponkód widget: kártyák 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 a widgetet: 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 widget neve Kuponkód.

A kupontípus kiválasztása

A panel többi része ettől az egy vezérlőtől függ. Nyisd meg az Elrendezés szakaszt, és válassz képet a Kupon típusa alatt.

https://minta-bolt.hu/wp-admin/post.php?post=102&action=elementor

A képen felül a négy kupontípus, alatta a Normál stílus öt előnézete látszik. Az alapérték a Normál.

Kupon típusa	Mit csinál a látogató	Hol van a kód
Normál	Rákattint egy gombra.	A helyén megjelenik, vagy felugró ablakban.
Lehúzás	A kártya sarkát lehúzza.	A kártya hátoldalán.
Kaparás	A kártya elejét kaparja.	A kártya hátoldalán.
Kicsúszás	A kártya elejét félretolja.	A kártya hátoldalán.

A három kártyatípus közös beállításokat használ, a külön fejezetük a kártyákról szól.

A Normál típus beállításai

A Normál stílus öt képet kínál, soronként hármat: képválasztó, nem legördülő. A Tartalom illesztése és a Doboz illesztése az oszlopon belül igazítja a kupont, mindkettő reszponzív.

A Tartalom → Tartalom szakasz magát a kupont tartalmazza.

Beállítás	Mit csinál	Alapérték
Cím	A gomb felirata a kód felfedése előtt.	Show Code
Átirányítási hivatkozás	Hová küldi a látogatót. Kattintásnál új lapon nyílik, Felugró ablaknál ezt használja a Felkeresés gomb.	üres
Kódmásolás stílusa	A felfedett kód kinézete. Legördülő.	5 közül az első
Kód	Maga a kuponkód.	X246-17GT-OL57
Művelet kiválasztása	Kattintás: a kód a helyén jelenik meg. Felugró ablak: modális ablak másoló gombbal.	Kattintás
Link elrejtése	A hivatkozást saját szöveg mögé rejti, és több címet is megnyithat egyszerre. Csak Kattintásnál látszik.	ki
Fülváltás megfordítása	Az átirányítási hivatkozás az aktuális lapra, a felugró ablak új lapra kerül. Csak Felugró ablaknál látszik.	ki
Ismétlés	Minden megjelenített példánynak az oldalon egyedi azonosítót ad, ettől működik a widget listában. Ez teszi láthatóvá a Felugró ablak háttérképe mezőt is.	ki

A kártyatípusok beállításai

Lehúzás, Kaparás vagy Kicsúszás esetén a Normál beállítások helyett kártyabeállítások jelennek meg. A Szélesség és a Magasság reszponzív csúszka (1 és 1000 képpont között, a szélesség legnagyobb értékként érvényesül). A Kaparás a Kitöltési százalék felfedéskor mezőt, a Kicsúszás a Kicsúszás iránya (Bal, Jobb, Felül, Alul) és az Irányjelző ikon mezőt adja.

Az Előlap és a Hátoldal is Tartalomtípust kér: Alapértelmezett vagy Sablon. Az Alapértelmezett sima mezőket ad: az előlapon Tartalom és Tartalomcímke, a hátoldalon Cím, Cím HTML-címke és Leírás. A Sablon helyettük egy Sablon legördülőt ad a mentett Elementor-sablonokkal.

A Stílus fül

Hogy mely szakaszok látszanak, a választott kupontípustól és műveletől függ.

Kupon típusa	Stílus szakaszok
Normál, művelet Kattintás	Normál
Normál, művelet Felugró ablak	Normál, a felugró ablak szakaszai (bezáró ikon, cím és leírás, kód másolása, másoló gomb, felkeresés gomb, görgetősáv, modális doboz), valamint az Extra opciók (Fedvény színe és Átfedés háttérszűrője)
Lehúzás, Kaparás, Kicsúszás	Előlap tartalma, Hátoldal tartalma, Doboz tartalma

Hogyan viselkedik

• A Kattintás felfed, nem másol. A közzétett oldalon a Show Code gomb helyén a kód jelent meg, a vágólapra semmi nem került. Másoló gomb csak a felugró ablakban van.
• A felugró ablak tényleg másol. A Kód másolása kattintás után a rendszer vágólapján ott volt a kód, a gomb két másodpercre Másolva! feliratra váltott.
• A Kattintás és az Átirányítási hivatkozás pontosan egy új lapot nyit, és a látogató előtt álló lapon felfedi a kódot.
• Mindhárom kártyatípust egérrel kipróbáltuk, és mindhárom megmutatta a hátoldalt. A Lehúzás eltávolítja az előlapot az oldalról, a Kaparás vásznat rajzol a kártyára, és eltávolítja, ha elég részt kapartak le, a Kicsúszás az előlapot oldalra mozgatja.
• A hátoldalon lévő sablon valódi sablonként jelenik meg, a saját Elementor-stílusával, nem sima szövegként.

Korlátok és hibaelhárítás az áttekintéshez

• A Kitöltési százalék felfedéskor képpontos egységgel jelenik meg, de a szám a kártya lekaparandó részének százaléka. Hagyd az egységet, és csak a számot állítsd.
• A kaparós felület a böngészőben, az oldal betöltése után jön létre az előlap tartalmából, ezért kissé később jelenik meg, és az előlap lapos képként látszik: a benne lévő hivatkozások, videók és minden interaktív elem megszűnik működni.
• A widget nincs az Elementor panelen: nyisd meg a The Plus Addons → Widgets oldalt, keress rá a Coupon Code szóra, kapcsold be a kapcsolóját, és töltsd újra a szerkesztőt. Ez a Widgets képernyő, nem az Extensions.
• A leírt beállítások fele hiányzik: majdnem minden beállítás a Kupon típusa értékétől függ, a felugró ablak beállításaihoz a Művelet kiválasztása értéke Felugró ablak kell. A Link elrejtése csak Kattintásnál, a Fülváltás megfordítása csak Felugró ablaknál létezik.
• A felugró ablak háttérképe sehol nincs: három feltétel kell egyszerre: Kupon típusa Normál, Művelet kiválasztása Felugró ablak, és az Ismétlés bekapcsolva.

Felugró ablak (popup)

A felugró ablak elég helyet ad egy címnek, egy sornyi magyarázatnak, magának a kódnak, egy másoló gombnak és egy gombnak, amely a boltba visz. A widgetnek ez az egyetlen helye, ahol a kód a vágólapra is kerül. A sima Kattintás művelet csak megmutatja a kódot.

1. Szerkeszd az oldalt Elementorral, és húzd rá a Kuponkód widgetet.
2. Az Elrendezés szakaszban a Kupon típusa maradjon Normál, és válassz egyet az öt kép közül a Normál stílus alatt.
3. A Tartalom szakaszban a Cím mezőbe írd a gomb feliratát, az Átirányítási hivatkozás mezőbe a bolt címét, válassz Kódmásolás stílusa értéket, és a Kód mezőbe írd a kupont.
4. A Művelet kiválasztása értéke legyen Felugró ablak. Alatta megjelennek a felugró ablak mezői.
5. Töltsd ki a Cím, Leírás, Másolás gomb, Másolás után, Felkeresés gomb, Bezáró ikon és Kód illesztése mezőket.

https://minta-bolt.hu/tp-kupon-popup/

A kattintás után az oldal fölött felugró ablak nyílik: a címe, a leírása, a kód, a Kód másolása és a Webhely megtekintése gomb látszik, a sarokban a bezáró gombbal. (A képen a bezáró ikon fekete négyzet: a widget nem tölti be a Font Awesome-ot, ezért az ikon az oldalon üres lehet.)

https://minta-bolt.hu/tp-kupon-popup/

Az ablak megnyitása előtt a gomb a Cím mezőben megadott feliratot mutatja.

A felugró ablak mezői

Beállítás	Mit csinál	Alapérték
Cím	Az ablak címsora.	Itt a kuponkódod
Leírás	Egy sor a cím alatt.	Használd a kódot a webhelyen
Másolás gomb	A másoló gomb felirata.	Kód másolása
Másolás után	A gomb felirata a másolás utáni két másodpercben.	Másolva!
Felkeresés gomb	Az Átirányítási hivatkozás címét megnyitó gomb felirata.	Webhely megtekintése
Bezáró ikon	A bezáró gomb ikonja.	üres
Kód illesztése	A kód helye az ablakon belül.	középre, reszponzív
Fülváltás megfordítása	Az átirányítási hivatkozás az aktuális fülön nyílik, a felugró ablak új fülön.	ki
Ismétlés	Minden megjelenített példánynak egyedi azonosítót ad az oldalon, listában kell. Bekapcsolva megjelenik a Felugró ablak háttérképe mező is.	ki

A Tartalom → Extra opciók szakaszban két további beállítás van: a Felugró ablak szélessége (képpontban vagy százalékban) és a Görgetésre, amely a felugró ablaknak külön Magasságot és görgetősávot ad, ha a tartalom magasabb a megadottnál.

Működés

• A felugró ablak a lap fölött nyílik meg. A közzétett oldalon a kattintás egy 500 × 300 képpontos ablakot nyitott a címmel, a leírással, a kóddal, a Kód másolása és a Webhely megtekintése gombbal, a sarokban bezáró gombbal.
• A Kód másolása valóban a vágólapra másol. A kattintás után a vágólap pontosan a kuponkódot tartalmazta, a gomb felirata pedig Másolva!-ra váltott, majd visszaállt.
• A Webhely megtekintése gomb az Átirányítási hivatkozás címére visz. Ha az üres, a gombnak nincs hová mennie.
• A bezáró gomb az ablakot és a háttérréteget is eltünteti, és az oldal olyan, mint előtte volt.

Korlátok

• Az ablak bezárása átírja a böngésző címsorát: a lekérdezési karakterlánc (például ?utm_source=…, szűrő vagy lapozás) törlődik. Aki ilyen címen érkezett, bezáráskor elveszíti. Ha a kampányparaméterekre szükséged van, olvasd ki őket az ablak bezárása előtt, vagy használd a Kattintás műveletet.
• Egy oldalra egy felugró ablakos kupont tegyél. A megnyitás és bezárás kezelői, valamint a Felugró ablak szélessége az oldal összes kuponablakára vonatkozik, ezért két ilyen kupon zavarja egymást.
• Ez nem általános felugró ablak rendszer: csak ennek a kuponnak a kattintására nyílik meg. Időzített, kilépési szándékra vagy görgetésre induló felugró ablakhoz a Popup widgetet használd.
• Az ikonok üres négyzetként jelenhetnek meg. A widget ollóikonja és a Bezáró ikon Font Awesome-ot használ, amelyet a The Plus Addons magától nem tölt be. Ha az oldalon más Font Awesome-ikon nincs, üresek lehetnek.

Hibaelhárítás

• Kattintásra nem történik semmi: a közzétett oldalon próbáld, ne az Elementor előnézetében. Nézd meg, hogy a Művelet kiválasztása még Felugró ablak-e: ha a Kupon típusa nem Normál, az egész felugró rész eltűnik.
• A másoló gomb nem csinál semmit: a másolás a legtöbb böngészőben HTTPS-t kér. Sima HTTP-s tesztoldalon a gomb átválthat Másolva!-ra úgy, hogy a vágólapra nem kerül semmi.
• A látogató elveszíti a követőparamétereit: lásd fent, az ablak bezárása törli a lekérdezési karakterláncot.
• A bezáró ikon üres négyzet: válassz ikont a Bezáró ikon mezőben, és gondoskodj róla, hogy az oldalon betöltődjön a Font Awesome.

Átirányítás: új fülön vagy ugyanazon a lapon

A kupon gyakran csak a feladat fele: a látogató elviszi a kódot, aztán el kell jutnia a boltba, sokszor egy partneroldalra. A Kuponkód widget ezt egy kattintással elvégzi, és egyetlen beállítás dönti el, melyik fülön nyílik a bolt.

Új fülön

1. Szerkeszd az oldalt Elementorral, és húzd rá a Kuponkód widgetet.
2. Az Elrendezés szakaszban a Kupon típusa maradjon Normál, és válassz egy képet a Normál stílus alatt.
3. A Tartalom szakaszban a Cím mezőbe írd a gomb feliratát, az Átirányítási hivatkozás mezőbe a célt.
4. A Kód mezőbe írd a kupont.
5. A Művelet kiválasztása maradjon Kattintás.

A közzétett oldalon a kattintás két dolgot csinál egyszerre: a gomb helyén megjelenik a kód, a cél pedig új fülön nyílik meg. A látogatónak a kód ott marad előtte abban a fülben, ahol éppen volt.

https://minta-bolt.hu/tp-kupon-atiranyitas/

A képen a gomb helyén már a kód látszik.

Ugyanazon a lapon

Ez a megoldás a felugró ablakot használja, és a két felet külön fülre küldi: a hivatkozás az aktuális fület veszi át, a kódot tartalmazó ablak új fülön nyílik.

1. Állítsd be a widgetet az előzőek szerint: Normál, egy Normál stílus, Cím, Átirányítási hivatkozás és Kód.
2. A Művelet kiválasztása legyen Felugró ablak. Megjelennek a felugró ablak mezői.
3. Kapcsold be a Fülváltás megfordítása kapcsolót. Csak Felugró ablak műveletnél létezik.
4. Töltsd ki, ahogy akarod, a felugró ablak Cím, Leírás, Másolás gomb, Másolás után és Felkeresés gomb mezőit.

A közzétett oldalon a kattintás után az eredeti fül az Átirányítási hivatkozás címére lépett, és új fülön megnyílt ugyanez az oldal a már nyitott kuponablakkal: a címmel, a leírással, a kóddal, a Kód másolása és a Webhely megtekintése gombbal.

Melyiket válaszd

Beállítás	Hol nyílik a bolt	Hol van a kód
Művelet kiválasztása: Kattintás	Új fülön.	A helyén, abban a fülben, ahol a látogató volt.
Művelet kiválasztása: Felugró ablak	Csak ha a látogató a Webhely megtekintése gombra kattint.	A felugró ablakban, másoló gombbal.
Felugró ablak + Fülváltás megfordítása	Abban a fülben, ahol a látogató volt.	Egy új fülön megnyíló felugró ablakban.

Működés

• A Kattintás pontosan egy új fület nyit. Beállított Átirányítási hivatkozással egy kattintás egy új fület hozott a megadott címen, és az eredeti fülben megjelent a kód.
• Átirányítási hivatkozás nélkül a Kattintás semmit sem nyit meg, a kód ettől még megjelenik.
• A Fülváltás megfordítása valóban megcseréli a kettőt: a hivatkozás az aktuális fület veszi át, a felugró ablak pedig új fülre kerül, és nem fordítva.
• Fülváltás megfordítása nélkül a felugró ablak hivatkozása kézi: mindaddig nem nyílik meg semmi, amíg a látogató a Webhely megtekintése gombra nem kattint.

Korlátok

• A Kattintás művelet megmutatja a kódot, de nem másolja. Másoló gombja csak a Felugró ablak műveletnek van. Kattintásnál a kód csak ki van írva, és a látogatónak kell kijelölnie.
• A felfedés nem vonható vissza: a kód megjelenése után a Kód megjelenítése feliratú gomb helyén maga a kód áll, és az oldal újratöltéséig nincs út vissza.
• A felugró ablak bezárása átírja a címsort (lásd fent): a lekérdezési karakterlánc elvész. Például a /?page_id=4610 címen megnyitott oldal bezárás után / lett.
• Mindkét megoldás JavaScriptből, kattintásra nyit fület. Ez rendszerint engedélyezett, de a szigorú felugróablak-blokkoló vagy egy alkalmazáson belüli böngésző megakadályozhatja.
• A widget nem tesz a hivatkozásra nofollow vagy szponzorált jelölést. Ha a cél partnerlink, nézd meg a saját oldalad közzétételi kötelezettségeit.

Hibaelhárítás

• A Fülváltás megfordítása nincs a panelen: a Kupon típusa legyen Normál, a Művelet kiválasztása pedig Felugró ablak. Kattintásnál helyette a Link elrejtése látszik.
• Kattintásra semmi sem nyílik meg: ellenőrizd, hogy az Átirányítási hivatkozás ki van-e töltve, és hogy a böngésző nem tiltotta-e le az új fület. A közzétett oldalon próbáld, ne az előnézetben.
• A látogató látja a felugró ablakot, de a bolt sosem nyílik meg: Fülváltás megfordítása nélkül a felugró ablak magától sehová sem navigál, a látogatónak kell a Webhely megtekintése gombra nyomnia. Adj a gombnak olyan feliratot, amely ezt mondja.

Maszkolt hivatkozás

Egy hosszú követőcím a böngésző sarkában nem ösztönöz kattintásra. A Link elrejtése beállítással saját szöveget írhatsz oda. Ugyanez a beállítás azt is lehetővé teszi, hogy egy kupon egyszerre több címet nyisson meg: például a boltot és egy követő URL-t egyetlen kattintásra.

A Link elrejtése csak akkor jelenik meg, ha a Művelet kiválasztása értéke Kattintás. A felugró ablaknál nincs.

1. Szerkeszd az oldalt Elementorral, és húzd rá a Kuponkód widgetet.
2. Az Elrendezés szakaszban a Kupon típusa maradjon Normál, és válassz Normál stílus értéket.
3. A Tartalom szakaszban a Cím mezőbe írd a gomb feliratát, a Kód mezőbe a kupont, a Művelet kiválasztása maradjon Kattintás.
4. Kapcsold be a Link elrejtése kapcsolót. Két újabb mező jelenik meg.
5. A A linket elfedő szöveg mezőbe írd azt a szöveget, amelyet a böngésző a cím helyett mutasson. Kezdőértéke #.
6. Nyisd meg az URL-ek megnyitása: egy vagy több alatti sort, a Címke mezőbe írj magadnak egy nevet, a Link mezőbe pedig a valódi címet. Minden további címhez használd az új elem hozzáadását.

A mezők

Beállítás	Mit csinál	Alapérték
Link elrejtése	Bekapcsolja az elfedést.	ki
A linket elfedő szöveg	Ezt mutatja a böngésző a valódi cím helyett.	#
URL-ek megnyitása: egy vagy több	Soronként egy cím, amelyet a kattintás megnyit.	egy sor, a címkéje Wordpress
Címke (a sorban)	A sor neve, saját használatra. A látogató nem látja.	Címke
Link (a sorban)	Az a cím, amelyet a sor megnyit.	#

Ha az Átirányítási hivatkozás mezőben is van cím, azt is elfedi és megnyitja a widget, a sorok után. A sorok nem helyettesítik.

Működés

• A beírt szöveg lesz a hivatkozás címe. A közzétett oldalon, ha a A linket elfedő szöveg értéke legjobb-ajanlat volt, a kupon hivatkozása erre mutatott, a böngésző tehát a saját oldalad címét mutatta /legjobb-ajanlat véggel. A valódi címek külön tárolódnak, nincsenek a hivatkozásban.
• Egy kattintás a lista minden címét megnyitja. Két kitöltött sorral és beállított Átirányítási hivatkozással egy kattintás három új fület nyitott (a két sort és az átirányítást), a kód pedig a helyén megjelent.
• A sorrend számít: a sorok a panelen látható sorrendben nyílnak, az Átirányítási hivatkozás utoljára.
• A kód mindkét esetben megjelenik. Az elfedés azt változtatja, hová visz a kattintás, azt nem, hogy mit mutat a kupon.

Korlátok

• A URL-ek megnyitása: egy vagy több lista üres sora is új fület nyit. A Link mező alapértéke #, és az alapértéken hagyott sor az aktuális oldalt nyitja meg új fülön. A nem használt sorokat töröld, ne üresre állítsd.
• Amit beírsz, az a saját oldalad egy útvonala lesz. Az elfedő szöveget a widget szó szerint címként használja, ezért aki lemásolja a linket, a te domainedre mutató, valószínűleg nem létező címet másol. Tartsd rövidre és beszédesre: ez egy felirat, amelyet a böngésző éppen kiír, nem működő cím.
• Több fület a böngészők gyakran letiltanak. Egy kattintásból rendszerint az első fül nyílhat meg, a többit gyakran blokkolják. Két-három cím is sok: próbáld ki, mi nyílik meg ténylegesen.
• A Kattintás műveletnek nincs másoló gombja: a kódot kiírja, a látogatónak kell kijelölnie. Másoló gombja csak a Felugró ablak műveletnek van.
• A felfedés nem vonható vissza: a kód megjelenése után az oldal újratöltéséig nincs út vissza a gombhoz.

Hibaelhárítás

• A Link elrejtése nincs a panelen: a Kupon típusa legyen Normál, a Művelet kiválasztása pedig Kattintás. Felugró ablaknál helyette a Fülváltás megfordítása látszik.
• A saját oldalam egy füle is megnyílik: valamelyik sor Link értéke még az alapértelmezett #. Töröld a nem használt sorokat, ne csak az értéküket.
• Csak az első cím nyílik meg: a böngésző blokkolta a többit. Csökkentsd a listát, vagy küldd a látogatót egyetlen címre, amely a további követést magától intézi.
• A böngésző még mindig a valódi címet mutatja: a Link elrejtése ki van kapcsolva, vagy az A linket elfedő szöveg üres. Az üres elfedő szöveg teljesen kikapcsolja az elfedést.