Elementor: kurzusadat-, ár- és beiratkozás-widgetek

Ez a fejezet az Elementor-integráció további kurzus-widgetjeit írja le. A követelményeket, a bejegyzéstípusok bekapcsolását, az egyedi kurzussablon létrehozását és a közös beállításokat (Typography, Border Type, Border Radius) az Elementor: első lépések és kurzus-widgetek fejezet tartalmazza. A widgetek a kurzussablonba (Tutor LMS Single Course Template) húzhatók be.

A widgetek többsége a Content és a Style fülön kínál beállítást. A „reszponzív” beállítást eszközönként (asztali gép, táblagép, telefon) külön is megadhatod.

Címke és érték párosok

A Kategóriák, Időtartam, Beiratkozottak és Utolsó frissítés widget egy címkét és egy értéket jelenít meg.

Course Categories (kurzuskategóriák)

Megmutatja, mely kategóriákba tartozik a kurzus.

Content fül:

Beállítás	Mit csinál
Layout	Vízszintes vagy függőleges elrendezés.
Alignment	Balra, középre vagy jobbra igazítás, eszközönként.
Gap	A kategóriacímkék közötti távolság.

Style fül: a Normal és Hover állapotra külön állíthatod be a Label Color (a „Categories” felirat színe), Label Typography, Value Color (az értékek színe) és Typography értékeket.

Course Duration (kurzus időtartama)

A kurzus időtartamát jeleníti meg.

Beállítás	Mit csinál
Label	Egyéni felirat a widgethez.
Layout	Vízszintes vagy függőleges elrendezés, eszközönként.
Alignment	Balra, középre vagy jobbra igazítás, eszközönként.
Gap	A felirat és az érték közötti távolság, eszközönként.

A Style fülön a Label és a Value részben is megadhatod a Color és Typography értéket.

Course Total Enrolled (beiratkozottak száma)

A kurzusra beiratkozott hallgatók számát mutatja. A beállításai megegyeznek a Course Duration widgetével: Label, Layout, Alignment és Gap a Content fülön, a Style fülön pedig a Label és a Value színe és betűstílusa.

Course Last Updated (utolsó frissítés)

Azt mutatja, mikor frissült utoljára a kurzus, így a leendő hallgatók látják, hogy a tananyag friss. A beállításai megegyeznek a Course Duration widgetével: Label, Layout, Alignment, Gap, valamint a Label és a Value színe és betűstílusa a Style fülön.

Course Status (haladás)

A beiratkozott hallgatónak megmutatja, mennyit végzett el a kurzusból.

Content fül:

Beállítás	Mit csinál
Title	A widget címe.
Display Percentage	A haladás százalékos értékének megjelenítése vagy elrejtése.

Style fül:

Rész	Beállítások
Course Progress Title	Color, Typography, Gap (a cím és a folyamatjelző közötti függőleges távolság, eszközönként).
Progress Bar	Color (a teljesített rész színe), Background Color (a még hátralévő rész színe), Height (magasság), Border Radius (lekerekítés; csak kb. 3 px vagy nagyobb magasságnál látszik jól, a lánc ikonnal a sarkok külön is állíthatók).
Progress Text	Color, Typography.

Course Thumbnail (bélyegkép)

A kurzus kiemelt képét (vagy a videó bélyegképét) jeleníti meg. Csak Style fülön van beállítása, amelyet a Normal és a Hover állapotra külön adhatsz meg:

Beállítás	Mit csinál
CSS Filters	A szerkesztő ikonnal: Blur, Brightness, Saturation, Hue.
Border Type	Default, None, Solid, Double, Dotted, Dashed, Groove.
Border Radius	Lekerekítés, eszközönként; a lánc ikonnal a sarkok külön is.
Box Shadow	Szín, vízszintes és függőleges eltolás, elmosás, szórás.

Course Price (kurzus ára)

A kurzus árát jeleníti meg.

A Content fülön az Alignment (balra, középre, jobbra; eszközönként) állítható.

A Style fülön két lap van:

• Normal: az ár Color és Typography értéke.
• Strike: akkor érvényes, ha a kurzus akciós; az áthúzott eredeti ár Color és Typography értéke.

Beiratkozási doboz és vásárlás

Ez a két widget a kurzus oldalán a beiratkozás vagy a vásárlás gombját adja. A gomb a kurzus típusától függ: Enroll Now (ingyenes kurzus) vagy Add To Cart (fizetős kurzus). Beiratkozás után a doboz átvált „beiratkozott” módra, és a Start, Continue vagy Retake, illetve Complete gombot mutatja, a beiratkozás dátumával együtt.

Mindkét widget Preview Mode részében a Select Mode listából választhatod ki, melyik állapotot lásd a szerkesztő előnézetében: Enrolment Box vagy Enrolled Box.

Course Enrolment Box (beiratkozási doboz)

Content fül:

Rész	Beállítás	Mit csinál
Enrolment Box	Show	Bekapcsolva kiegészítő kurzusadatokat is mutat: nehézségi szint, időtartam, utolsó frissítés, tanúsítvány.
Preview Mode	Select Mode	Az előnézet módja, lásd fent.
Button	Alignment	Balra, középre vagy jobbra igazítás, eszközönként.
Button	Size	Small, Medium vagy Large.
Button	Width	Auto, Fill vagy Fixed.

Style fül:

Rész	Beállítások
Add To Cart Button	Normal és Hover állapotra külön: Text Color, Background Color, Typography, Padding (négy oldal, a lánc ikonnal külön is), Border Type, Border Radius, Box Shadow (szín, vízszintes és függőleges eltolás, elmosás, szórás, kívül vagy belül).
Enroll Button	Ugyanezek a beállítások az Enroll gombra.
Start/Continue/Retake Button	Ugyanezek a beállítások a Start, Continue és Retake gombra.
Complete Button	Ugyanezek a beállítások a Complete gombra.
Enrolled Info	Icon Color és Icon Size (a „You enrolled in this course on …” üzenet ikonja, a méret reszponzív), Text Color, Text Typography, Date Color, Date Typography.
Enrolment Box	Background Color, Border Type, Border Radius, Icon Size és Icon Color (a kurzusadatok melletti ikonok), Label Color, Label Typography, Value Color, Value Typography.

Course Purchase (kurzus vásárlása)

Ugyanazt a vásárlási és beiratkozási dobozt adja, mint az előző widget, de az ár és a haladásjelző is a részét képezi.

Content fül:

Rész	Beállítás	Mit csinál
Enrolment Box	Show	Bekapcsolva kiegészítő kurzusadatokat is mutat: nehézségi szint, időtartam, utolsó frissítés, tanúsítvány.
Preview Mode	Select Mode	Az előnézet módja: Enrolment Box vagy Enrolled Box.
Course Price	Alignment	Az ár igazítása, eszközönként.
Course Progress	Title	A haladásjelző címe (beiratkozott módban látszik).
Course Progress	Display Percentage	A százalékos érték megjelenítése.
Button	Alignment, Size, Width	Mint a Course Enrolment Box widgetnél.

Style fül:

Rész	Beállítások
Course Progress Title	Color, Typography, Gap (a cím és a többi elem közötti függőleges távolság, eszközönként).
Progress Bar	Color, Background Color, Height, Border Radius, valamint a Progress Text Color és Typography értéke.
Course Price	Normal lap: Color, Typography. Strike lap (akciós kurzusnál az eredeti ár): Color, Typography.
Add To Cart Button, Enroll Button, Start/Continue/Retake Button, Complete Button	Normal és Hover állapotra külön: Text Color, Background Color, Typography, Padding, Border Type, Border Radius, Box Shadow.
View Cart Button	Ugyanezek a beállítások a „kosár megtekintése” gombra.
View Certificate Button	Ugyanezek a beállítások a „tanúsítvány megtekintése” gombra.
Enrolled Info	Icon Color, Icon Size, Text Color, Text Typography, Date Color, Date Typography.
Enrolment Box	Content Background (a tartalmi rész háttere), Meta Info Background (a kurzusadatok részének háttere), Border Type, Border Radius, Icon Color, Icon Size, Label Color, Label Typography, Value Color, Value Typography.

Listaszerű widgetek

Course Materials (kurzusanyagok)

Megmutatja a látogatóknak, milyen anyagokhoz kapnak hozzáférést a beiratkozás után.

Course Requirements (követelmények)

Felsorolja a kurzus követelményeit, hogy a látogató eldönthesse, megfelel-e azoknak.

A két widget beállításai megegyeznek.

Content fül:

Beállítás	Mit csinál
Title	A widget címe.
Layout	Lista vagy egy sorban (inline) megjelenítés, eszközönként.
List Icon	A listaelemek jele: az ikonkönyvtárból vagy saját SVG-fájlból.
Alignment	Balra, középre vagy jobbra igazítás, eszközönként.

Style fül:

Rész	Beállítások
Section Title	Color, Typography, Gap (a cím és a lista közötti függőleges távolság, eszközönként).
List	Space Between (az elemek közti távolság, eszközönként), Border Type, Border Radius (eszközönként), Padding (négy oldal, a lánc ikonnal külön is).
Icon	Color, Size (eszközönként).
Text	Color, Text Indent (behúzás, eszközönként), Typography.

Course Tags (kurzuscímkék)

A címkék kulcsszavak, amelyek leírják a kurzust, és segítenek megtalálni a keresett kurzusokat.

A Content fülön a Title mezőben adhatod meg a widget címét.

Style fül:

Rész	Beállítások
Section Title	Color, Typography, Gap (a cím és a címkék közötti függőleges távolság, eszközönként).
Tags	A Normal és Hover állapotra külön: Color, Typography, Background Color, Padding, Margin (négy oldal, a lánc ikonnal külön is), Border Type (típus kiválasztása után Border Width és Color is megadható), Border Radius, Box Shadow (szín, vízszintes és függőleges eltolás, elmosás, szórás, kívül vagy belül).