# Számláló widget

> Animált számláló készítése: kezdő és befejező érték, előtag, utótag, ezres elválasztó, cím és stílus.

A **Számláló** widget egy számot jelenít meg, amely az oldal betöltésekor animálva halad a kezdő értéktől a befejező értékig (növekedhet vagy csökkenhet is). Akkor hasznos, ha az oldalon szereplő számokra, például elkészült munkák, ügyfelek vagy szakértők számára szeretnéd felhívni a figyelmet.

## A widget hozzáadása

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjen az összes widget.
2. Kattints a **Számláló** elemre, vagy húzd a vászonra. A részleteket lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

## Példa: három számláló egymás mellett

Egy tanácsadó cég három adatot mutat: az elkészült weboldalak, az ügyfelek és a szakértők számát.

1. Hozz létre egy rácsos konténert három egymás melletti konténerrel, és mindegyiket állítsd úgy, hogy az elemeit függőlegesen rendezze. Lásd: [Rácskonténer létrehozása](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-racs-letrehozasa/).
2. Tegyél mindegyik konténerbe egy **Számláló** widgetet.
3. Jelöld ki az elsőt. A nagy szám miatt ne nulláról indulj: a **Kezdő darabszám** mezőbe írj 500-at, a **Befejező darabszám** mezőbe 2000-et.
4. A **Darabszám utótag** mezőbe írj egy `+` jelet, mert a cég folyamatosan új weboldalakat készít.
5. A **Cím** mezőbe írd: „Elkészült weboldal”.
6. Jelöld ki a középső számlálót: **Befejező darabszám** 200, **Darabszám utótag** `+`, **Cím** „Ügyfél”.
7. Jelöld ki az utolsót: **Befejező darabszám** 35, **Animáció időtartama (ms)** 4000, **Cím** „Szakértő”. Az időtartam növelésével a számláló lassabban éri el a végértéket.
8. A **Stílus** fülön a **Cím pozíciója** mellett kattints az „elöl” ikonra, a **Szám** szekcióban pedig állítsd át a szöveg színét, hogy ez a számláló kiemelkedjen. A színválasztóról lásd: [Színválasztó](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-szinvalaszto/).

![A Számláló widget Tartalom füle: kezdő és befejező darabszám, előtag, utótag, animáció időtartama, ezres elválasztó, cím](./kepek/widgetek-szamlalo-tartalom.webp)

*A Számláló widget Tartalom füle: kezdő és befejező darabszám, előtag, utótag, animáció időtartama, ezres elválasztó, cím* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

A képen a **Kezdő darabszám**, a **Befejező darabszám**, a **Darabszám előtag**, a **Darabszám utótag**, az **Animáció időtartama (ms)**, az **Ezres elválasztó** és a **Cím** mező látszik.

![Három számláló és egy elválasztó az oldalon](./kepek/widgetek-szamlalo-elol.webp)

*Három számláló és egy elválasztó az oldalon* (https://minta-bolt.hu/widget-demo-2/)

Az oldalon a számok az animáció végén a befejező értéken állnak meg, alattuk a cím látszik.

## Tartalom fül

| Beállítás | Mit csinál |
|---|---|
| **Kezdő darabszám** | A számláló kezdőértéke |
| **Befejező darabszám** | A számláló végértéke |
| **Darabszám előtag** | Szöveg a szám előtt, például pénznem jele |
| **Darabszám utótag** | Szöveg a szám után, például `+` jel |
| **Animáció időtartama (ms)** | Az animáció hossza ezredmásodpercben (alapérték: 2000) |
| **Ezres elválasztó** | Megjeleníti vagy elrejti az ezres tagolást |
| **Elválasztó** | Az ezres elválasztó karaktere: alapértelmezett, pont vagy szóköz |
| **Cím** | A szám alatt megjelenő szöveg |
| **Cím HTML-címkéje** | A cím HTML-címkéje: H1 és H6 között, `div` (alapérték), `span` vagy `p` |

## Stílus fül

Ha nem adsz meg címet, a cím beállításai nem jelennek meg.

![A Számláló widget Stílus füle: cím pozíciója, vízszintes illesztése, térköze, darabszám pozíciója](./kepek/widgetek-szamlalo-stilus.webp)

*A Számláló widget Stílus füle: cím pozíciója, vízszintes illesztése, térköze, darabszám pozíciója* (https://minta-bolt.hu/wp-admin/post.php?post=58&action=elementor)

A képen a **Számláló** szekció látszik, alatta a **Szám** és a **Cím** szekció.

**Számláló** szekció:

| Beállítás | Mit csinál |
|---|---|
| **Cím pozíciója** | A cím a szám felett, alatt, jobb vagy bal oldalán áll |
| **Cím vízszintes illesztése** | A cím balra, középre vagy jobbra igazodik a widgeten belül |
| **Cím térköze** | A cím és a szám közti távolság |
| **Darabszám pozíciója** | A szám balra, középre vagy jobbra igazodik; a nyújtott (stretch) beállítás az előtag és az utótag térközét is érinti |
| **Számköz** | A szám és az előtag, utótag közti távolság |

**Szám** és **Cím** szekció (mindkettőben ugyanazok a beállítások):

- **Szöveg színe**: a szám vagy a cím színe.
- **Tipográfia**: betűtípus és méret. Lásd: [Betűtípus, méret és szín](https://hub.hellowp.io/hu/plugins/elementor/stilus-betutipus-meret-es-szin/).
- **Szöveg körvonal** (text stroke): a szöveg körvonalának színezése.
- **Szövegárnyék**: mélységet ad a szövegnek. Lásd: [Árnyék](https://hub.hellowp.io/hu/plugins/elementor/stilus-arnyek/).

## Haladó fül

A **Haladó** fülön a widget pozícióját, térközeit és egyedi kódját állíthatod, mint a többi widgetnél.