# Elementor: első lépések és kurzus-widgetek

> A Tutor LMS Elementor-integrációjának követelményei, a bejegyzéstípusok bekapcsolása, az egyedi kurzussablon, valamint a Cím, Értékelés, Szerző, Szint és Megosztás widgetek beállításai.

A Tutor LMS Elementor-integrációja több mint 35 saját widgetet ad, amelyekkel a kurzusok, leckék és más Tutor oldalak kinézetét Elementorral szabhatod testre.

## Követelmények

- Tutor LMS
- Elementor
- Tutor LMS Elementor Addons (a wordpress.org-ról)

Mindhárom bővítmény friss verziója legyen telepítve és aktív.

## Első lépések

### Bejegyzéstípusok bekapcsolása

1. Menj az **Elementor → Settings** oldalra.
2. A **General** fülön kapcsold be a Tutor LMS bejegyzéstípusait: Courses, Lessons, Quizzes, Assignments, Tutor Course Bundle stb.
3. Mentsd a módosítást.

### Egyedi kurzussablon létrehozása

1. A **Templates** menüben kattints az **Add New** gombra.
2. A listából válaszd a **Page** típust, és kapcsold be a **Tutor LMS Single Course Template** lehetőséget.
3. Adj nevet a sablonnak, és kattints a **Create Template** gombra.
4. Megnyílik az Elementor sablonszerkesztője, ahol a több mint 35 widgettel felépítheted a kurzusoldalt. Mentsd el a sablont, mielőtt kilépsz.

Tipp: a sablont érdemes **Page** típussal készíteni, nem **Section** típussal.

### A sablon használata kurzuson

1. Nyisd meg a kurzus (vagy oldal, bejegyzés) szerkesztőjét, és kattints az **Edit with Elementor** gombra.
2. Kattints a sablon hozzáadására (**Add Template**), és keresd meg a most létrehozott sablont.
3. Kattints az **Insert** gombra: a sablon bekerül az oldalra.

### Melyik sablon érvényesül?

Ha nem állítasz be külön prioritást, a kurzusoldal kinézetét ez a sorrend dönti el:

1. A Tutor LMS alapbővítményének beépített sablonja.
2. A sablonod vagy egy egyedi bővítmény egyedi kurzussablonja, ha felülírtad a beépítettet.
3. Az Elementor sablonjai közül létrehozott globális sablon: ez lesz az alapértelmezett minden kurzusoldalnál.

Ha egy kurzusnak egyedi kinézetet akarsz adni, a sablont az adott kurzus szerkesztőjében alkalmazd.

## Közös beállítások

Sok widget ugyanazokat a mezőket használja:

- **Layout, Alignment, Gap:** reszponzív beállítások, eszközönként (asztali gép, táblagép, telefon) más értéket adhatsz meg az eszköz ikonjára kattintva.
- **Color:** a színpalettáról választasz, globális vagy egyedi színt.
- **Typography:** vagy a globális betűstílusok közül választasz, vagy az egyedi panelen állítod be a **Family** (betűcsalád), **Size** (méret), **Weight** (vastagság, 100 Thin és 900 Black között), **Transform** (Uppercase, Lowercase, Capitalize, Normal), **Style** (Normal, Italic, Oblique), **Decoration** (Underline, Overline, Line Through, None), **Line-Height**, **Letter Spacing** és **Word Spacing** értékeket. A méret, a sortávolság és a térközök reszponzívak.
- **Border Type:** Default, None, Solid, Double, Dotted, Dashed, Groove.
- **Border Radius:** 0 esetén szögletes a forma, nagyobb értéknél lekerekített. A lánc ikonnal az éleket külön is megadhatod.

## Widgetek

Húzd a widgetet a kívánt szakaszba, vagy kattints a szakaszon belüli plusz gombra.

### Course Title (kurzuscím)

| Beállítás | Mit csinál |
|---|---|
| **Select Tag** | A cím HTML-címkéje, H1-től H6-ig. |
| **Alignment** | Balra, középre vagy jobbra igazítás, eszközönként. |
| **Color** (Style fül) | A szöveg színe. |
| **Typography** (Style fül) | A betűstílus, lásd fent. |

### Course Rating (kurzusértékelés)

A kurzus csillagos értékelését jeleníti meg.

| Beállítás | Mit csinál |
|---|---|
| **Layout** | Vízszintes vagy függőleges elrendezés, eszközönként. |
| **Alignment** | Balra, középre vagy jobbra igazítás. |
| **Star Color** | A csillagok színe. |
| **Star Size** | A csillagok mérete, eszközönként. |
| **Typography** | Az értékelés szövegének betűstílusa. |
| **Text Color** | A szöveg színe. |
| **Gap** | A csillagok közötti távolság, eszközönként. |

### Course Author (kurzus szerzője)

A **Content** fülön:

| Beállítás | Mit csinál |
|---|---|
| **Profile Picture** | A szerző profilképe miniatűrként. |
| **Display Name** | A szerző megjelenített neve. |
| **Link** | A szerző hivatkozása új vagy ugyanabban az ablakban nyíljon meg. |
| **Layout** | Függőleges vagy vízszintes elrendezés, eszközönként. |
| **Alignment** | Balra, középre vagy jobbra igazítás. |

A **Style** fül három részből áll:

- **Image:** **Size** (méret) és **Gap** (távolság a kép és a felirat között, mindkettő reszponzív), **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).
- **Label:** **Color** és **Typography**.
- **Name:** **Color** és **Typography**.

### Course Level (kurzusszint)

A kurzus nehézségi szintjét jeleníti meg.

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

A **Style** fülön a **Label** és a **Value** (érték) részben is megadhatod a **Color** és **Typography** értékeket.

### Course Social Share (kurzus megosztása)

Lehetővé teszi, hogy a felhasználók a kedvenc platformjukon megosszák a kurzust.

A **Content** fül **Social Icons** része:

| Beállítás | Mit csinál |
|---|---|
| **Icon** | Ikon az ikonkönyvtárból, vagy saját SVG-fájl. |
| **Label** | A „Share” felirat az ikon mellett. |
| **Alignment** | Az ikonok igazítása, eszközönként. |

A **Content** fül **Share Popup** része (a megosztás gombra megjelenő ablak):

| Beállítás | Mit csinál |
|---|---|
| **Section Title** | Az ablak címe. |
| **Share Title** | A megosztás gomb címe az ablakban. |
| **Shape** | A gombok alakja: Rounded, Square vagy Circle. |
| **Show Icon** | A közösségi platform ikonja a gombon. |
| **Show Icon Text** | A platform neve a gombon. |

A **Style** fül:

| Rész | Beállítások |
|---|---|
| **Label** | **Color**, **Typography**. |
| **Share Icon** | **Icon Color**, **Size**. |
| **Social Icon** | **Icon Color**, **Shape Color**, **Size** (reszponzív), **Padding** (négy oldal, a lánc ikonnal külön is), **Spacing** (ikon és felirat között, reszponzív), **Border Type**, **Border Radius**. |
| **Social Icon on Hover** | **Icon Color**, **Shape Color**, **Hover Animation** (az x ikonnal törölhető). |
| **Popup** | **Section Title**, **Share Title**, **Close Icon** és **Page Link** felirat színe, **Background Color**, **Border Type**, **Border Radius**, **Input Text Color**, **Input Background Color**, a Page Link mező **Border Type** értéke, **Width** (a szegély vastagsága, ha a típus nem Default vagy None), **Input Border Radius**. |