# Folyamat/lépések widget: függőleges és vízszintes elrendezés, számláló, Lottie

> A Folyamat/lépések widget beállításai: két elrendezés, a lépések számozása, a kör tartalma (ikon, kép, szöveg, Lottie) és a Carousel Anything-kapcsolat.

A **Folyamat/lépések** widget egy munkafolyamatot mutat be lépésről lépésre: regisztráció, feltöltés, közzététel. A lépések sorban vagy oszlopban követik egymást, mindegyik körében ikon, kép, szöveg vagy Lottie-animáció lehet.

## Előkészületek

- A widget az ingyenes kiadásban is megvan, Pro nélkül is teljesen megjelenik. Három része igényel Pro-t: a **Carousel Anything-kapcsolat**, az **Icons Mind ( PRO )** ikonkönyvtár és a Lottie-ikon.
- Az Elementor (ingyenes) legyen telepítve és aktív.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **Process Steps** szóra, és kapcsold be a kapcsolóját. A szerkesztőben a widget neve **Folyamat/lépések**.

## Az elrendezés kiválasztása

Húzd a **Folyamat/lépések** widgetet az oldalra. A **Tartalom** fül **Elrendezés** szakaszában állíthatsz be mindent, ami az elrendezést érinti.

![A Folyamat/lépések widget Elrendezés szakasza](./kepek/dobozok-gombok-5-folyamat-panel.webp)

*A Folyamat/lépések widget Elrendezés szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=120&action=elementor)

A képen a **Stílus** két képe, alattuk a számláló és az aktív elem beállításai látszanak.

1. A **Stílus** a két elrendezés közül választ: **Függőleges** (az alapérték) vagy **Vízszintes**.
2. A **Számláló megjelenítése** (alapból ki) megszámozza a lépéseket. Bekapcsolva megjelenik a **Számláló stílusa**: **Normál**, **Tizedes számozás vezető nullával**, **Nagybetűs latin betűk**, **Kisbetűs latin betűk**, **Kisbetűs római számok**, **Nagybetűs római számok**, **Kisbetűs görög betűk** és **Egyéni szöveg**.
3. A **Speciális háttér** (alapból ki) díszítő hátteret ad a lépéskörök mögé.
4. Az **Alapértelmezett aktív elem** azt a lépést emeli ki, amelyik az oldal betöltésekor aktív. Az alapérték az **1**, vagyis az első lépés eleve ki van emelve. Ha nem akarsz kiemelt lépést, válaszd a **Nincs** értéket.

A **Normál elrendezés mobilon**, a **Kör illesztése** és a **Tartalom illesztése** csak **Vízszintes** stílusnál jelenik meg, a két illesztés pedig csak akkor, ha a **Normál elrendezés mobilon** be van kapcsolva. Mindhárom csak a mobil megjelenést érinti.

### Vízszintes elrendezés

Három lépésnél a három blokk egy sorban áll, azonos magasságban, mindegyik a szélesség harmadát kapja, és egy vonal köti össze őket. A számláló bekapcsolva 1, 2, 3 sorszámot ad.

![Három vízszintes folyamatlépés, számozva 1-től 3-ig](./kepek/dobozok-gombok-5-folyamat-vizszintes.webp)

*Három vízszintes folyamatlépés, számozva 1-től 3-ig* (https://minta-bolt.hu/tp-ps-vizszintes/)

A képen a három lépéskör egy vonalon sorakozik, a kör sarkában a sorszámmal. Az első kör sötétebb: ez az **Alapértelmezett aktív elem**.

### Függőleges elrendezés

A **Függőleges** stílus a lépéseket egymás alá rakja, a körök között függőleges vonallal. Hosszú folyamathoz, oldalsávhoz vagy keskeny oszlophoz ez a jó. Minden lépés teljes szélességű blokk, az egyik a másik alatt, azonos bal széllel.

![Három függőleges folyamatlépés vonallal összekötve](./kepek/dobozok-gombok-5-folyamat-fuggoleges.webp)

*Három függőleges folyamatlépés vonallal összekötve* (https://minta-bolt.hu/tp-ps-fuggoleges/)

A képen az első kör már aktív állapotú: ezt az **Alapértelmezett aktív elem** okozza, amely alapból az **1**.

A függőleges elrendezést a **Stílus** egyetlen beállítása adja, a többit a lépések tartalma szabja meg. Ebben az elrendezésben a **Normál elrendezés mobilon**, a **Kör illesztése** és a **Tartalom illesztése** nem érhető el, a **Stílus** fül **Vízszintes háttér** szakasza pedig rejtve marad.

## A lépések felvétele

Nyisd meg a **Tartalom** szakaszt. A **Folyamat/lépések** lista három elemmel indul. Nyiss meg egyet:

![Egy megnyitott lépés a Folyamat/lépések listában](./kepek/dobozok-gombok-5-folyamat-panel-elem.webp)

*Egy megnyitott lépés a Folyamat/lépések listában* (https://minta-bolt.hu/wp-admin/post.php?post=120&action=elementor)

A képen a lépés **Cím** és **Leírás** mezője, az **Ikon kiválasztása** legördülő és az alatta lévő beállítások láthatók.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Cím**, **Leírás** | A lépés szövege. | |
| **Ikon kiválasztása** | Mi legyen a lépés körében: **Nincs**, **Ikon**, **Kép**, **Szöveg** vagy **Lottie**. | **Ikon** |
| **Ikonbetűkészlet** | Ikonnál a könyvtár: **Font Awesome** vagy **Icons Mind ( PRO )**. Utána kiválasztod magát az ikont. | **Font Awesome** |
| **Ikon linkje** | A kört hivatkozássá teszi, és megjelenik a **Link** mező. | ki |
| **Normal Background Option**, **Hover Background Option** | A kör háttere normál és rámutatásos állapotban. | |
| **Egyéni szöveg** | Ha a **Számláló stílusa** **Egyéni szöveg**, minden lépés saját címkét kaphat szám helyett. | |

Az **Elem hozzáadása** gombbal új lépést veszel fel.

## Lottie-animáció a lépés körében

A Lottie kis vektoros animáció, JSON-fájlból töltődik be. Éles marad bármekkora méretben, és sokkal kisebb, mint egy GIF.

**Feltételek**

- Ehhez a funkcióhoz Pro kell: a Lottie lehetőség az ingyenes bővítményben is látszik, de a lejátszó szkript a Pro-ban van. Pro nélkül a kör üres marad.
- Kell egy Lottie JSON-fájl URL-je. A widget a kiterjesztést ellenőrzi, ezért a cím `.json`-ra végződjön. Lehet a saját Médiatáradba feltöltött fájl is.
- Az animáció csak akkor játszik le, ha a lista **első** eleme van Lottie-ra állítva (lásd a korlátoknál).

**Lépések**

1. Add hozzá a **Folyamat/lépések** widgetet, és állítsd be a lépéseket a szokásos módon.
2. Nyisd meg a lista első elemét.
3. Az **Ikon kiválasztása** értéke legyen **Lottie**.
4. A **Lottie URL** mezőbe illeszd be a JSON-fájl címét.
5. Állítsd be a **Lottie szélessége** és **Lottie magassága** értékét ehhez a lépéshez. Mindkettő reszponzív, külön adható asztali, táblagépes és mobil méret.

A **Stílus** fül **Lottie** szakasza a következőket tartalmazza: **Szélesség**, **Magasság**, **Sebesség**, **Animáció ismétlése** (alapból be) és **Rámutatáskor megjelenő animáció** (alapból ki). Ezek az egész widgetre érvényesek; a lista elemén belüli **Lottie szélessége** és **Lottie magassága** az adott lépésnél felülírja őket.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Ikon kiválasztása** | **Lottie**-ra állítva az ikon helyett animáció jelenik meg. | **Ikon** |
| **Lottie URL** | A lejátszandó `.json` fájl. | üres |
| **Lottie szélessége**, **Lottie magassága** | Az animáció mérete ebben a lépésben, eszközönként. | 40 px |
| **Animáció ismétlése** (Stílus fül) | Folyamatosan újrajátssza. | be |
| **Rámutatáskor megjelenő animáció** (Stílus fül) | Csak akkor játszik, amíg a látogató a lépés fölött van. | ki |

Az oldalon a lépés körében élő, ismétlődő animáció fut. Egy 80 × 80 képpontos beállításnál a lejátszás ténylegesen mozgott, nem állt.

## Kapcsolat a Carousel Anything widgettel

A **Carousel Anything-kapcsolat** a lista alatt található Pro funkció. Az ingyenes bővítményben a kapcsoló látszik, de bekapcsolva csak egy frissítési értesítést ad a beállítások helyett. Pro-val két mező jelenik meg:

- **Kapcsolódó carousel ID-ja**: egyezzen a Carousel Anything widgeten megadott azonosítóval.
- **Hatás erre**: **Rámutatás** vagy **Kattintás**, alapból **Rámutatás**. Ez dönti el, hogy a lépés fölé vitt egér vagy a kattintás lépteti-e a körhintát.

## A Stílus fül

A **Stílus** fül szakaszai: **Cím stílusa**, **Leírás stílusa**, **Ikon/kép stílusa**, **Lottie**, **Elválasztó/vonal stílusa**, **Számláló megjelenítési stílusa**, **A tartalom hátterének stílusa** és **Vízszintes háttér**. A **Számláló megjelenítési stílusa** csak bekapcsolt **Számláló megjelenítése** mellett látszik, a **Vízszintes háttér** csak **Vízszintes** stíluson.

## Korlátok

- A **Carousel Anything-kapcsolat** Pro funkció: ingyenesben csak az értesítést mutatja.
- Az **Icons Mind ( PRO )** Pro funkció, és a legördülő felirata is ezt mondja.
- A Lottie-lépésikon Pro funkció, és csak az első lépésen működik. A lejátszó szkript csak akkor töltődik be, ha a lista első eleme Lottie-ra van állítva. A második vagy harmadik lépésre téve a kör hibaüzenet nélkül üres marad. Ha az animáció később kell, rendezd át a listát úgy, hogy a Lottie-s lépés legyen az első, vagy használj egy második **Folyamat/lépések** widgetet.
- A **Lottie URL** csak `.json`-ra végződő cím lehet. Más címnél (előnézeti oldal, kép, `.lottie` csomag) a widget az animáció helyén hibaüzenetet ír ki.
- Az **Animáció ismétlése** és a **Rámutatáskor megjelenő animáció** az egész widgetre vonatkozik, nem lépésenként.
- A **Kör illesztése** és a **Tartalom illesztése** csak mobilon hat, és csak **Vízszintes** stílus plusz bekapcsolt **Normál elrendezés mobilon** esetén látszik.

## Hibaelhárítás

- **A lépések egymás alatt vannak, nem egy sorban:** a **Stílus** még az alapértelmezett **Függőleges**. Állítsd **Vízszintes**-re.
- **Nincsenek számok a lépéseken:** a **Számláló megjelenítése** ki van kapcsolva. Kapcsold be, majd válassz **Számláló stílusa** értéket.
- **Az első lépés kiemelt, pedig nem állítottam be:** az **Alapértelmezett aktív elem** alapból **1**. Állítsd **Nincs**-re.
- **Nem találom a Kör illesztése beállítást:** csak **Vízszintes** stílusnál és bekapcsolt **Normál elrendezés mobilon** mellett jelenik meg.
- **A lépés köre üres Lottie-nál:** háromféle ok lehet, valószínűségi sorrendben: a Lottie nem az első lépésen van, a Pro nincs aktiválva, vagy az URL nem `.json`-ra végződik.
- **Hibaüzenet jelenik meg az animáció helyén:** a **Lottie URL** nem `.json` fájlra mutat.
- **Az animáció egyszer lefut, és megáll:** az **Animáció ismétlése** ki van kapcsolva, vagy a **Rámutatáskor megjelenő animáció** be van kapcsolva, ami a rámutatásra vár.
- **A vonal nem látszik a körök között:** az **Elválasztó/vonal stílusa** szakaszban állítható. Ha a színe megegyezik a háttérrel, ott van, de láthatatlan.