# Folyamatjelző sáv és kör alakú folyamatjelző

> Folyamat állapotának, haladásnak vagy összehasonlításnak a megjelenítése sávval és kördiagrammal: típusok, értékek, stílus.

A **Folyamatjelző sáv** és a **Kör alakú folyamatjelző** widget egy folyamat állapotát, egy haladást mutatja, vagy több elemet hasonlít össze (például szakértelmi szinteket).

## Követelmények

- Elementor (az ingyenes változat is elég).
- Aktív JetElements bővítmény.

Mindkét widget egyetlen sávot, illetve kört ad az oldalhoz, és minden újnál újra be kell állítani. Több sáv vagy kör esetén állítsd be az elsőt, majd duplikáld.

## Widget hozzáadása

Keresd meg a widgetet az Elementor elemek panelén, és húzd egy szakaszba.

## Folyamatjelző sáv

A **Tartalom → Folyamatjelző sáv** szakasz alapból nyitva van, és az alapsáv már látszik.

![A Folyamatjelző sáv widget szerkesztőpanelje](./kepek/diagramok-es-idovonalak-folyamatjelzo-sav-panel.webp)

*A Folyamatjelző sáv widget szerkesztőpanelje* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

![A Folyamatjelző sáv widget a WordPress címmel](./kepek/diagramok-es-idovonalak-folyamatjelzo-sav.webp)

*A Folyamatjelző sáv widget a WordPress címmel* (https://minta-bolt.hu/widget-teszt-2/)

| Beállítás | Mit csinál |
| --- | --- |
| **Típus** | A sáv elrendezése és a tartalom helye: **A sávon belül**, **Placed above**, **Tippként megjelenítve**, **Jobbra**, **Az üres sávon belül**, **A címmel ellátott sávon belül**, **A függőleges sávon belül**. |
| **Cím** | A sáv neve. Dinamikus érték is választható a dinamikus címke ikonnal. |
| **Ikon** | Ikon a könyvtárból, vagy feltöltött SVG. |
| **Folyamatérték típusa** | **Százalék** vagy **Abszolút**. |

A **Folyamatérték típusa** két módja:

- **Százalék**: a **Százalék** mezőben a sáv állapotát adod meg. Dinamikus értékkel is.
- **Abszolút**: az **Aktuális érték** és a **Maximális érték** mezőt töltöd ki, szintén dinamikus értékkel is.

### Stílus

A **Stílus → Folyamatjelző sáv** szakasz alapból nyitva van. Itt állítható a sáv magassága, margója, háttere (klasszikus, színátmenetes vagy kép; képnél a **Rögzített** csatolás is választható), a keret típusa, vastagsága és színe. A **Cím** szakasz a címet és az ikont stílusozza (igazítás, szín, háttér, keret, tipográfia), a **Százalék** szakasz ugyanezt a számjegyekre adja.

### Haladó

A **Haladó** fülön az **Elrendezés** szakasz van nyitva: margó, térköz, szélesség, pozíció, Z-index, CSS-azonosító és CSS-osztály. A többi beállítás a telepített bővítményektől függ: mozgáseffektek, átalakítás, háttér, reszponzív megjelenés, attribútumok és egyéni CSS.

## Kör alakú folyamatjelző

A **Tartalom → Értékek** szakasz alapból nyitva van, és az alapdiagram már látszik.

![A Kör alakú folyamatjelző widget szerkesztőpanelje](./kepek/diagramok-es-idovonalak-kor-folyamatjelzo-panel.webp)

*A Kör alakú folyamatjelző widget szerkesztőpanelje* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

![Az alapértelmezett kör alakú folyamatjelző 50 százalékkal](./kepek/diagramok-es-idovonalak-kor-folyamatjelzo.webp)

*Az alapértelmezett kör alakú folyamatjelző 50 százalékkal* (https://minta-bolt.hu/widget-teszt-2/)

Az **Értékek** szakaszban ugyanaz a **Százalék** és **Abszolút** választási lehetőség van, mint a sávnál.

A **Tartalom** szakasz:

| Beállítás | Mit csinál |
| --- | --- |
| **Érték előtagja** / **Érték utótagja** | A szám előtt vagy után megjelenő szöveg. |
| **Ezreselválasztó mutatása az értékben** | Bekapcsolva az érték ezreselválasztót kap. |
| **Számláló címe** és **Számláló alcíme** | A körben megjelenő cím és alcím, dinamikus értékkel is. |
| **Százalék pozíciója** | **Körön belül** vagy **Körön kívül**. |
| **Címke pozíciója** | **Körön belül** vagy **Körön kívül**. |

A **Beállítások** szakasz:

| Beállítás | Mit csinál |
| --- | --- |
| **Kör mérete** | A kör átmérője. |
| **Értékkörvonal vastagsága** | A haladást jelző vonal vastagsága. |
| **Háttérkörvonal vastagsága** | A háttérkör vonalának vastagsága. |
| **Háttérkörvonal típusa** és **színe** | A háttérkör vonalának megjelenése. |
| **Értékkörvonal típusa** és **színe** | A haladást mutató vonal megjelenése. |
| **Animáció időtartama** | Minél kisebb a szám, annál gyorsabb az animáció. |

### Stílus

A **Stílus** fülön az első szakasz a körre vonatkozik: kör kitöltési színe, a haladásvonal vége és a kör árnyéka. A második szakasz a tartalmat stílusozza: a szám, a cím és az alcím színe, árnyéka, tipográfiája.

A **Haladó** fül ugyanaz, mint a sávnál.