Visszaszámláló widget: fejlécsáv és tapadó időzítő

Egy hosszú értékesítési oldal közepén lévő visszaszámlálót csak az látja, aki odáig görget. Egy vékony sáv a fejléc fölött vagy az oldal tetejére tapadó időzítő mindenkinek látszik. A Visszaszámláló widgetnek nincs saját pozíciós beállítása: a tapadást és az egész webhelyre kiterjedő megjelenést a tároló és a fejlécsablon adja. A widget dolga, hogy elég kicsi legyen a sávhoz, és számoljon tovább.

Minden, amit itt leírunk, az ingyenes változatban is elérhető: a rögzített Indítás dátuma, a három Visszaszámláló stílusa minta és a Sorközi stílus. Előfeltétel az Elementor, és a widget bekapcsolása a The Plus Addons → Widgets oldalon.

Akciósáv a fejléc fölött

Az egész webhelyre kiterjedő sávhoz a fejlécet globálisan szerkesztő sablon kell: ezt az Elementor Pro Theme Builderje vagy a Nexter Builder adja. Enélkül a sáv csak azon az egy oldalon lesz meg, ahová építed.

1. Nyisd meg szerkesztésre a fejlécsablonodat.
2. Adj hozzá egy tárolót a meglévő fejlécsor fölé. Adj neki háttérszínt és szűk kitöltést, kb. 15 képpontot fent és lent.
3. Húzd a Visszaszámláló widgetet a tárolóba.
4. Az Elrendezés szakaszban a Visszaszámlálás beállítása maradjon Normál visszaszámlálás, és állítsd be az Indítás dátuma mezőt az akció végére.
5. A Visszaszámláló stílusa maradjon Stílus 1, és kapcsold be a Sorközi stílus kapcsolót. Ettől fér el az időzítő egy sávban.
6. Tedd közzé a fejlécsablont, és nézd meg egy olyan oldalon, amelyre érvényes.

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

A képen a Sorközi stílus kapcsoló látszik, amely a négy egységet egy sorba teszi.

Beállítás	Mit csinál	Alapérték
Sorközi stílus	A négy egységet egy sorba teszi: kb. 37 képpont magas 124 helyett. Csak a Stílus 1 esetén érhető el.	Ki
Visszaszámlálás beállítása	A Normál visszaszámlálás mindenkinek ugyanabban a pillanatban jár le.	Normál visszaszámlálás
A napok szakaszának szövege és a többi három	Rövidítsd a feliratokat (például N, Ó, P, M), ha szűk a sáv.	Nap, Óra, Perc, Másodperc

Hogyan viselkedik:

• A widget ugyanúgy működik fejlécben, mint bárhol máshol.
• A Sorközi stílus mellett a négy egység egy sorban áll, a widget magassága az eredeti harmada.
• Ha a fejléctároló tapad, az időzítő látszik marad, és görgetés közben is számol.
• A határidő a WordPress időzónájából jön, ezért mindenki ugyanabban a pillanatban látja lejárni a sávot.

Korlátozások:

• A webhelyre kiterjedő megjelenés nem a widget érdeme. Ha nincs témaszerkesztős fejlécsablonod, a sáv csak azon az oldalon lesz, amelyiken megépítetted.
• A Sorközi stílus nem reszponzív: egyetlen be- vagy kikapcsolt érték. Keskeny telefonon a sáv még törhet; rövidítsd a feliratokat, vagy rejts el egy egységet.
• Az Indítás dátuma percre pontos, és a Stílus 2 meg a Stílus 3 a látogató időzónájában olvassa a határidőt (lásd a beállítások áttekintését). Ha a pontos végidő számít, maradj a Stílus 1 stílusnál.
• Állítsd a widget gyorsítótárát Inaktív értékre a Haladó fülön, hogy ne jelenjen meg elavult határidő.

Tapadó időzítő

Egy határidő addig hat, amíg látszik. Ha az olvasó elgörget mellette, a sürgetés is elmegy.

1. Döntsd el, hol lesz a sáv: egy tárolóban az oldal tetején, vagy a fejlécsablonban, ha az egész webhelyre kell.
2. Húzd a Visszaszámláló widgetet a tárolóba.
3. Az Elrendezés szakaszban hagyd a Normál visszaszámlálás értéket, és állítsd be az Indítás dátuma mezőt.
4. A Visszaszámláló stílusa maradjon Stílus 1, és kapcsold be a Sorközi stílus kapcsolót, hogy az időzítő egy sor magas legyen.
5. Jelöld ki a tárolót (ne a widgetet), és a Haladó → Mozgáshatások → Tapadás értékét állítsd Fent-re. Adj a tárolónak háttérszínt és z-indexet, hogy az oldal fölött maradjon.
6. Tedd közzé, és görgess.

Hol	Beállítás	Mit csinál
Visszaszámláló widget	Sorközi stílus	Egy sorba teszi az egységeket. Csak a Stílus 1 esetén érhető el.
Visszaszámláló widget	Indítás dátuma	A határidő, a WordPress időzónája szerint.
Tároló	Mozgáshatások → Tapadás	A tárolót fent vagy lent az oldalhoz rögzíti görgetéskor. Elementor Pro funkció.
Tároló	Z-index	A rögzített sávot az oldal fölött tartja.

• Az időzítő görgetés közben is számol, a mérés szerint 1400 képpontnyi görgetésnél is frissült.
• A Sorközi stílus miatt a widget olyan alacsony, hogy elfér a sávban, és nem takarja az oldalt.
• A rögzítést a tároló végzi. A widget nem tud róla, hogy rögzítve van-e.

Korlátozások:

• A widget nem tud magától tapadni: a Visszaszámláló panelen nincs pozíciós beállítás. Ha a tároló nincs rögzítve, az időzítő sem.
• Az Elementor tapadási beállítása az Elementor Pro-hoz kell. Csak ingyenes Elementorral a tároló nem tapad, a normál folyamatban marad, és elgörög. Alternatíva a Nexter Builder tapadó fejléce, vagy a témád saját tapadó fejléce.
• A lejárat pillanatában Stílus 1 esetén nem történik semmi, az Indítás dátuma percre pontos, és az elemgyorsítótár miatt a határidő elavult lehet. Ezekről a beállítások áttekintésében írunk részletesen.

Hibaelhárítás

Jelenség	Ok és megoldás
A sáv elgörög az oldallal.	A tároló nem tapad. Ellenőrizd, hogy a tárolón (nem a widgeten) állítottad be a Tapadás értéket, és hogy van Elementor Pro vagy más tapadófejléc-eszköz: az ingyenes Elementor nem rögzít tárolót.
A sáv takarja a tartalmat.	Adj a tárolónak z-indexet, és tegyél a fölötte elhelyezkedő szakasz fölé kitöltést, vagy használd az Elementor tapadási eltolását. A Sorközi stílus is jóval alacsonyabbá teszi a sávot.
Az időzítő görgetés után megáll.	Nem szabadna megállnia. Ha mégis, nézd meg a böngészőkonzolt, hogy egy másik bővítmény JavaScript-hibát ad-e, és állítsd a widget gyorsítótárát Inaktív értékre.
A sáv túl magas.	Kapcsold be a Sorközi stílus kapcsolót (csak Stílus 1 esetén látszik), és csökkentsd a tároló kitöltését. A widget maga 37 képpont magas sorközi stílusban, ami ennél magasabb, a tárolóból jön.
Mobilon két sorba tör.	Rövidítsd a feliratokat a Tartalom forrása szakaszban (például A napok szakaszának szövege: N), vagy kapcsold ki a nap kapcsolót, ha az akció egy napnál rövidebb.
A sáv csak egyes oldalakon látszik.	A fejlécsablon megjelenítési feltételei miatt van, nem a widget. Nézd meg, mely oldalakra van kiosztva a sablon.