Visszaszámláló widget: blokk és sorközi stílus, tartalomcsere lejárat után

A Visszaszámláló (angolul Countdown) widget egy megadott időpontig számolja vissza a napokat, órákat, perceket és másodperceket. A fixen megadott dátumig tartó visszaszámláló, a három stílus és a sorközi megjelenés az ingyenes bővítményben is megvan; a lejárat utáni tartalomcsere a Pro változat funkciója.

Használat előtt kapcsold be: The Plus Addons → Widgets, keress rá a Countdown szóra, és kapcsold be a kapcsolóját. Az Elementor szerkesztőjében a Visszaszámláló nevet keresd.

Az Elrendezés szakasz

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

A képen a Visszaszámlálás beállítása, a három stílusminta, az Indítás dátuma és a Sorközi stílus kapcsoló látszik.

1. Húzd a Visszaszámláló widgetet az oldalra.
2. Az Elrendezés szakaszban a Visszaszámlálás beállítása listában válaszd a normál visszaszámlálást, és add meg az Indítás dátuma mezőben a lejárat időpontját. A dátum a webhely időzónája szerint értendő (itt: Europe/Budapest).
3. Válaszd ki a Visszaszámláló stílusa értékét a három minta közül.
4. Mentsd el az oldalt.

Blokk és sorközi stílus

Egy oldal közepén lehet nagy, egymás alá rendezett a visszaszámláló, de a fejlécsávban egy sorba kell férnie. Erre szolgál a Sorközi stílus kapcsoló és a három stílus.

Beállítás	Mit csinál	Alapérték
Visszaszámláló stílusa	Stílus 1: a szám a felirata fölött áll. Stílus 2: lapozós óralap, osztott számjegyekkel. Stílus 3: magasabb elrendezés, mondatszerű feliratokkal.	Stílus 1
Sorközi stílus	A számokat és a feliratokat egy sorba teszi, egymás alá helyezés helyett. Csak a Stílus 1 esetén érhető el.	Ki

https://minta-bolt.hu/tp-szamlalo-blokk/

A Sorközi stílus nélkül minden egység külön, kerettel övezett blokk: a szám fölött, a felirat alatt.

https://minta-bolt.hu/tp-szamlalo-sorban/

Bekapcsolt Sorközi stílus mellett a számok és a feliratok egy sorban állnak, így a widget jóval alacsonyabb.

Mérés szerint (1200 képpont széles nézetben) a blokk elrendezés magassága 124 képpont, a sorközi elrendezésé 37 képpont. A sorközi változat tehát nagyjából harmad akkora magas, és elfér egy navigációs sávban vagy vékony akciósávban; a blokk elrendezés önálló elem, bőven van helye a formázásra.

Korlátozások

• A Sorközi stílus csak a Stílus 1 esetén jelenik meg. Ha Stílus 2 vagy Stílus 3 van kiválasztva, a kapcsoló eltűnik a panelről. Egysoros időzítőhöz tehát a Stílus 1 kell.
• A Stílus 2 lapozós óralap, ahol minden számjegy külön kártya, ezért nincs egységenkénti felirat-elem. A saját feliratszöveg így is érvényesül, de a feliratok elrendezését vezérlő beállításoknak nincs mire hatniuk. Ha a feliratok számítanak, használd a Stílus 1 stílust.
• A blokk és a sorközi elrendezés között nem lehet eszközönként váltani: a Sorközi stílus egyetlen be- vagy kikapcsolt érték. Ha mindkettő kell, használj Elementor saját reszponzív beállításait, vagy egy második widgetet, amelyet más méreteknél elrejtesz.
• Állítsd az Elementor elemgyorsítótárát kikapcsoltra ennél a widgetnél. Az Elementor elemgyorsítótára alapból be van kapcsolva, és egy napig tárolja a megjelenített kódot, ezért elavult határidő is megjelenhet. A widget Haladó fülén az Elrendezés szakasz gyorsítótár-beállítását állítsd Inaktív értékre, vagy kapcsold ki az egész webhelyen az Elementor → Beállítások → Teljesítmény oldalon.

Hibaelhárítás

Jelenség	Ok és megoldás
Nem találod a Sorközi stílus kapcsolót.	A Visszaszámláló stílusa Stílus 2 vagy Stílus 3. Válts vissza Stílus 1 stílusra, és a kapcsoló előbukkan.
A sorközi időzítő még mindig két sorba tör.	A tároló túl keskeny a négy egységhez és feliratukhoz. Szélesítsd, rövidítsd a felirat szövegét a Tartalom forrása szakaszban, vagy rejtsd el a nem kellő egységeket.
A Stílus 2 nem veszi figyelembe a felirat-beállításokat.	A Stílus 2 osztott számjegy-kártyákat rajzol, nem szám-felirat párokat. Használd a Stílus 1 stílust.

Tartalomcsere lejárat után CSS-osztályokkal

Egy oldal, amely az akció lejárta után is az akciót hirdeti, kárt okoz. Ugyanígy a teljes áras rész sem látszódhat, amíg az akció tart. A Visszaszámláló két, általad választott CSS-osztállyal megoldja: a visszaszámlálás alatt az egyik szakaszt mutatja, a lejárat után a másikat. Ez a funkció a Pro változat része.

Előfeltétel: két szakasz (vagy tároló) ugyanazon az oldalon, az egyik az akció idejére, a másik a lejárat utánra.

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

A képen a Szakaszok láthatóságának szabályozása CSS-osztályokkal kapcsoló és a két osztálynév mező látszik.

1. Jelöld ki azt a szakaszt, amelyet a visszaszámlálás alatt akarsz mutatni. A Haladó → Elrendezés részen a CSS-osztályok mezőbe írj egy osztálynevet, például akcio-tart.
2. A lejárat utáni szakasznak adj másik osztályt, például akcio-vege.
3. Jelöld ki a Visszaszámláló widgetet, és nyisd meg az Egyéb opció szakaszt.
4. Kapcsold be a Szakaszok láthatóságának szabályozása CSS-osztályokkal kapcsolót.
5. A Visszaszámlálás alatti CSS-osztály mezőbe írd be az akcio-tart nevet, a Lejárat utáni CSS-osztály mezőbe az akcio-vege nevet. Az osztályneveket pont nélkül add meg, és mindkét mezőt töltsd ki.
6. Tedd közzé az oldalt, és ellenőrizd.

Beállítás	Mit csinál	Alapérték
Szakaszok láthatóságának szabályozása CSS-osztályokkal	Bekapcsolja az egész funkciót.	Ki
Visszaszámlálás alatti CSS-osztály	Annak az elemnek az osztálya, amelyik a visszaszámlálás alatt látszik. A másik ilyenkor el van rejtve.	üres
Lejárat utáni CSS-osztály	Annak az elemnek az osztálya, amelyik a határidő lejárta után látszik.	üres

https://minta-bolt.hu/tp-szamlalo-osztaly/

A képen a visszaszámlálás alatt csak az „Az akció még tart” szakasz látszik, a lejárat utáni szakasz el van rejtve.

Működés

• Futás közben a visszaszámlálás alatti osztályú elem látszik, a lejárat utáni rejtve van. Ez minden betöltésnél és minden pillanatban ugyanígy van.
• A határidő lejárta után egy friss oldalbetöltés megfordítja: az első elem rejtett, a második látszik.
• A widget közvetlenül állítja az elemek megjelenítését, így a rejtett elem nincs kirajzolva (nem csupán átlátszó).
• Működik a normál visszaszámlálással és a hiánykeltő (örökzöld) visszaszámlálással is.

Korlátozások

• Stílus 1 esetén a lejárat pillanatában nem történik semmi: az időzítő 00 00 00 00-nál áll, amíg a látogató nyitva tartja az oldalt, és a tartalomcsere az oldal következő betöltésekor jön. Stílus 2 és Stílus 3 esetén a lejárat utáni beállítások (üzenet, sablon, átirányítás) azonnal, a lejárat pillanatában működnek. Mivel a Stílus 1 az alapérték, számíts rá, hogy a váltás újratöltéskor jön, és ne ígérd a látogatónak, hogy az oldal a szeme előtt változik meg.
• A Stílus 3 és a hamis számláló (Fake Numbers Counter) beállítás kihagyja a funkciót. Használj Stílus 1 vagy Stílus 2 stílust normál vagy hiánykeltő (örökzöld) visszaszámlálással.
• Mindkét osztálymezőt ki kell tölteni. Ha bármelyik üres, a widget semmilyen osztályadatot nem ír az oldalra, és semmi nem jelenik meg vagy tűnik el.
• Osztályonként egy elem: a widget az első elemet kezeli, amelyik az osztályt viseli. Ha több blokknak kell együtt megjelennie, tedd őket egy tárolóba, és annak add az osztályt.
• A rejtett szakasz továbbra is az oldal forrásában van, a tartalma letöltődik, csak nem látszik. Ezért ne rejts el így árat, kuponkódot vagy bármit, ami nem lehet látható.
• Kapcsold ki az Elementor elemgyorsítótárát a widgetnél (lásd fent), különben elavult határidő jelenhet meg.

Hibaelhárítás

Jelenség	Ok és megoldás
Semmi sem jelenik meg vagy tűnik el.	A leggyakoribb ok egy üres mező: mindkét osztálynak ki kell lennie töltve. A másik ok a Stílus 3, amely kihagyja a funkciót.
Ponttal írtam az osztályt, és nem működik.	Csak a nevet add meg (akcio-tart), ne .akcio-tart alakban; az Elementor CSS-osztályok mezője is ezt várja.
A visszaszámlálás lejárt előttem, de a szakaszok nem cserélődtek.	Töltsd újra az oldalt: Stílus 1 esetén a csere az oldal betöltésekor történik, nem a nulla elérésekor.
Betöltéskor egy pillanatra mindkét szakasz látszik.	A cserét JavaScript végzi az oldal kirajzolása után, ezért rövid villanás lehet. Ha a lejárat utáni szakaszhoz a saját CSS-edben display: none értéket adsz, elkerülöd.