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

> A Kategóriák, Időtartam, Beiratkozottak, Utolsó frissítés, Állapot, Bélyegkép, Ár, Beiratkozási doboz, Vásárlás, Anyagok, Követelmények és Címkék widget beállításai.

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](https://hub.hellowp.io/hu/plugins/tutor-pro/integraciok-elementor/) 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). |