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

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.

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.

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.

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:

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.