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

> A Visszaszámláló widget három stílusa, a sorközi megjelenés, és két CSS-osztállyal vezérelt szakaszok a visszaszámlálás alatt és 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

![A Visszaszámláló widget Elrendezés szakasza](./kepek/dobozok-gombok-2-szamlalo-panel.webp)

*A Visszaszámláló widget Elrendezés szakasza* (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 |

![A visszaszámláló blokk elrendezésben](./kepek/dobozok-gombok-2-szamlalo-blokk.webp)

*A visszaszámláló blokk elrendezésben* (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.

![A visszaszámláló sorközi elrendezésben](./kepek/dobozok-gombok-2-szamlalo-sorban.webp)

*A visszaszámláló sorközi elrendezésben* (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.

![A Visszaszámláló Egyéb opció szakasza a két CSS-osztállyal](./kepek/dobozok-gombok-2-szamlalo-osztaly-panel.webp)

*A Visszaszámláló Egyéb opció szakasza a két CSS-osztállyal* (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 |

![A visszaszámláló alatt csak az akciós szakasz látszik](./kepek/dobozok-gombok-2-szamlalo-osztaly.webp)

*A visszaszámláló alatt csak az akciós szakasz látszik* (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. |