# Divi integráció

> A Tutor LMS Divi Modules telepítése, a Divi builder bekapcsolása kurzusokhoz és leckékhez, a kész elrendezés importálása, mentése, valamint az összes Divi modul beállításai, a Course Wishlist modullal együtt.

A Divi-integrációval a kurzusoldalakat és a leckéket a Divi builderben szerkesztheted. Ehhez a Divi téma és a Tutor LMS Divi Modules bővítmény kell.

## Beállítás

1. Menj a **Bővítmények → Új hozzáadása** oldalra, keresd meg a **Tutor LMS Divi Modules** bővítményt, telepítsd és aktiváld. Ettől a Tutor LMS modulok megjelennek a Diviben.
2. Menj a **Divi → Theme Options → Builder** oldalra.
3. Kapcsold be a Divi-kompatibilitást a „Courses” (kurzusok) és a „Lessons” (leckék) bejegyzéstípusnál.
4. Mostantól a kurzusok és leckék szerkesztőjében megjelenik a Divi builderrel való szerkesztés lehetősége.

Tipp: gyorsabb szerkesztéshez kapcsold ki a **Static CSS File Generation** beállítást a builder beállításainak **Advanced** részén.

## A kész elrendezés importálása

Ha egy meglévő kurzusoldalt szerkesztesz a Divi builderben, néhány elem hiányozni fog. A tartalom teljes szerkeszthetőségéhez importáld a `layout.json` fájlt a Divi szerkesztőjének hordozhatósági (portability) gombjával. A fájl a bővítmény mappájában van:

```text
wp-content/plugins/tutor-lms-divi-modules/pre-built-templates/layout.json
```

Importáláskor kattints a hordozhatósági gombra a builderben, válaszd ki a `layout.json` fájlt, és importáld.

## Saját sablon mentése

Ha a kurzusoldal elrendezését később újra fel akarod használni:

1. A builderben kattints az **Add to Library** gombra.
2. Adj nevet az elrendezésnek, és mentsd.
3. A mentett elrendezést a **Divi → Divi Library** oldalon találod, és legközelebb Tutor LMS-es oldal vagy bejegyzés készítésekor betöltheted.

## Modulok

Minden modul beállításánál a név fölé víve a „?” ikon rövid leírást ad az adott mezőről.

### Course About

A kurzus bemutatását jeleníti meg: a kurzus kivonatába írt szöveget olvassa be.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus tartalma jelenjen meg. |
| **Module Link URL** | A modulra kattintva ide visz a hivatkozás. |
| **Module Link Target** | Ugyanabban vagy új ablakban nyíljon-e meg a hivatkozás. |
| **Admin Label** | A modul neve a builderben, az azonosítás megkönnyítésére. |

### Course Author

A kurzus szerzőjének adatait mutatja, hogy a tanulók lássák, ki tartja a kurzust.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus szerzője jelenjen meg. |
| **Profile Picture** | A profilkép megjelenítése vagy elrejtése. |
| **Display name** | A név megjelenítése vagy elrejtése. |
| **Link** | A szerző hivatkozásának megnyitása ugyanabban vagy új ablakban. |
| **Layout** | A modul elrendezése. |
| **Alignment** | A tartalom igazítása. |
| **Module Link URL** és **Module Link Target** | A modulra kattintva megnyíló cím, és hogy ugyanabban vagy új ablakban nyíljon meg. |
| **Admin Label** | A modul neve a builderben. |

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

Minden modulban megtalálható három csoport, ezért a lenti táblázatok ezeket nem ismétlik:

| Beállítás | Mit csinál |
|---|---|
| **Module Link URL** | A modulra kattintva ide visz a hivatkozás. |
| **Module Link Target** | Ugyanabban vagy új ablakban nyíljon-e meg a hivatkozás. |
| **Admin Label** | A modul neve a builderben, az azonosítás megkönnyítésére. |

A **Course** mező mindenhol azt adja meg, melyik kurzus adatai jelenjenek meg. A **Label** a modul címkéjének szövege.

### Course Benefits

A kurzus előnyeit listázza, hogy a tanuló lássa, mit kap a beiratkozással.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus előnyei jelenjenek meg. |
| **Label** | A lista címe. |
| **Layout** | Lista vagy egy sorban (inline) megjelenítés. |
| **Icon** | A lista felsorolásjele. |
| **Alignment** | A szöveg igazítása. |

### Course Carousel

Több kurzust mutat testre szabható karusszelben.

| Beállítás | Mit csinál |
|---|---|
| **Skin** | A kártyák megjelenése. |
| **Slides to show** | Hány kártya látszik egyszerre. |
| **Show Animation** | Animáció be- vagy kikapcsolása. |
| **Image size** | A kártyák képének mérete. |
| **Meta Data**, **Rating**, **Avatar**, **Author**, **Difficulty Label**, **Wish List**, **Category**, **Footer** | A kártya egy-egy részének megjelenítése vagy elrejtése (kapcsolók). |
| **Order by** | Mi szerint rendezze a kurzusokat. |
| **Order** | Csökkenő vagy növekvő sorrend. |
| **Limit** | A kurzusok száma; a -1 mindet megjeleníti. |
| **Category** | Mely kategóriák kurzusai jöhetnek szóba; ha egyet sem jelölsz be, mind. |
| **Author** | Mely szerzők kurzusai jelenjenek meg. |

### Course Categories

A kurzus kategóriáit mutatja.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus kategóriái jelenjenek meg. |
| **Label** | A címke szövege. |
| **Layout** | A tartalom elrendezése. |
| **Alignment** | A szöveg igazítása. |
| **Gap** | A szövegek közti távolság képpontban. |

### Course Content

A kurzus leírásoldalán mutatja, mit tartalmaz a kurzus, hogy könnyebb legyen a vásárlási döntés. Három részből áll.

| Rész | Beállítás | Mit csinál |
|---|---|---|
| Course Benefits | **Course** | Melyik kurzushoz tartozik a modul. |
| Course Benefits | **Label** | A Course Benefits szekció címe. |
| Course Benefits | **Layout** | Lista vagy egy sorban megjelenítés. |
| Course Benefits | **Icon** | A lista ikonja az ikontárból. |
| Course Benefits | **Alignment** | A cím igazítása a három előre megadott lehetőség közül. |
| Course Curriculum | **Label** | A tanterv szekciójának címe. |
| Course Reviews | **Label** | Az értékelések szekciójának címe. |

### Course Curriculum

A kurzus tantervét, vagyis a tanulási útvonalat mutatja, hogy a beiratkozás előtt látszódjon, mit ölel fel a kurzus.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus tanterve jelenjen meg. |
| **Label** | A tanterv címe. |
| **Collapse Icon** | Az összecsukás ikonja. |
| **Expand Icon** | A kinyitás ikonja. |
| **Icon Position** | Az ikon helye. |

### Course Duration

A kurzus teljes időtartamát mutatja.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus időtartama jelenjen meg. |
| **Label** | A címke szövege. |
| **Layout** | Hol jelenjen meg az időtartam a címkéhez képest. |
| **Alignment** | A szöveg igazítása. |
| **Gap** | A címke és az időtartam közti távolság képpontban. |

### Course Enrollment

Azt mutatja, hogy a tanuló be van-e iratkozva az adott kurzusra.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus beiratkozási állapota jelenjen meg. |
| **Preview Mode** | Az előnézet módja: beiratkozott vagy beiratkozás előtti állapot. |
| **Enrollment Box** | A beiratkozási doboz megjelenítése vagy elrejtése. |
| **Alignment** | A beiratkozási gomb igazítása. |
| **Size** | A gomb mérete. |
| **Width** | A gomb szélessége. |
| **Background** | A gomb háttere: szín, színátmenet, kép stb. |

### Course Instructor

A kurzus oktatójának rövid profilját mutatja.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus oktatója jelenjen meg. |
| **Label** | A címke szövege. |
| **Profile Picture** | Az oktató profilképének megjelenítése vagy elrejtése. |
| **Display Name** | A név megjelenítése vagy elrejtése. |
| **Designation** | A titulus (beosztás) megjelenítése vagy elrejtése. |
| **Link** | Az oktatóra mutató hivatkozás új vagy ugyanabban az ablakban nyíljon. |
| **Background** | A modul háttere: szín, színátmenet, kép stb. |

### Course Last Update

A kurzus utolsó frissítésének dátumát mutatja. A rendszeresen frissített kurzus azt jelzi a tanulónak, hogy az oktató aktív.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus dátuma jelenjen meg. |
| **Label** | A címke szövege. |
| **Layout** | A dátum a címke mellett (balra) vagy alatta (fent) jelenjen meg. |
| **Alignment** | A szöveg igazítása. |
| **Gap** | A szövegek közti távolság képpontban. |

### Course Level

A kurzus szintjét (például kezdő, középhaladó) mutatja.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus szintje jelenjen meg. |
| **Label** | A címke szövege. |
| **Layout** | A szint a címke mellett (balra) vagy alatta (fent) jelenjen meg. |
| **Alignment** | A szöveg igazítása. |
| **Gap** | A szövegek közti távolság képpontban. |

### Course List

A Tutor LMS kurzusait listázza testre szabható kártyákkal.

| Beállítás | Mit csinál |
|---|---|
| **Skin** | A kártyák megjelenése. |
| **Columns** | Hány oszlopban jelenjenek meg. |
| **Show Animation** | Animáció be- vagy kikapcsolása. |
| **Show Image** | A kép megjelenítése. |
| **Image size** | A kártyák képének mérete. |
| **Meta Data**, **Rating**, **Avatar**, **Author**, **Difficulty Label**, **Wish List**, **Category**, **Footer**, **Pagination** | A kártya egy-egy részének, illetve a lapozásnak a megjelenítése vagy elrejtése (kapcsolók). |
| **Order by** | Mi szerint rendezze a kurzusokat. |
| **Order** | Csökkenő vagy növekvő sorrend. |
| **Limit** | A kurzusok száma; a -1 mindet megjeleníti. |
| **Category** | Mely kategóriák kurzusai jöhetnek szóba; ha egyet sem jelölsz be, mind. |
| **Author** | Mely szerzők kurzusai jelenjenek meg. |
| **Pagination Type** | Csak számok, vagy előző/következő gomb számokkal. |
| **Prev Level** | Az „előző” gomb szövege. |
| **Next Level** | A „következő” gomb szövege. |

### Course Materials

A kurzushoz tartozó anyagokat listázza.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus anyagai jelenjenek meg. |
| **Material Label** | Az anyaglista címe. |
| **Layout** | Lista vagy egy sorban megjelenítés. |
| **Icon** | A lista felsorolásjele. |
| **Alignment** | A szöveg igazítása. |
| **Background** | A háttér: szín, színátmenet, kép, videó, minta és maszk. |

### Course Price

A kurzus árát mutatja, azt, amit az oktató a kurzuskészítőben megadott.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus ára jelenjen meg. |
| **Alignment** | A szöveg igazítása. |
| **Background** | A háttér: szín, színátmenet, kép, videó, minta és maszk. |

### Course Purchase

A tagsági csomagot és a kurzus árát mutatja, a már beiratkozott tanulónak pedig a kurzus elvégzettségét százalékban.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzushoz tartozik a modul. |
| **Enrollment Box** | A beiratkozási doboz színe. |
| **Preview Mode** | Az előnézet módja: beiratkozás előtti (Enrollment) vagy beiratkozott (Enrolled) állapot. |
| **Enrollment Box** (kapcsoló) | A beiratkozási doboz megjelenítése vagy elrejtése. |
| **Progress Title** | A haladásjelző címe. |
| **Background** | A háttér: szín, színátmenet, kép, videó, minta és maszk. |

### Course Rating

A kurzus értékelését mutatja csillagokkal.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus értékelése jelenjen meg. |
| **Layout** | Az elrendezés: a csillagok a címke mellett (balra) vagy fölötte (fent) legyenek. |
| **Alignment** | A szöveg igazítása. |

A **Design** részben a csillagok kinézetét állíthatod: **Star Size** (méret képpontban), **Star Gap** (a csillagok közti távolság képpontban) és **Star Color** (szín).

### Course Requirement

Ha az oktató előfeltételeket adott meg a kurzushoz, ez a modul mutatja őket a kurzus oldalán. A kinézetet a **Design** részben módosíthatod.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus előfeltételei jelenjenek meg. |
| **Label** | A lista címe. |
| **Layout** | Lista vagy egy sorban megjelenítés. |
| **Icon** | A lista felsorolásjele. |
| **Alignment** | A szöveg igazítása. |

### Course Reviews

A tanulók értékeléseit mutatja a kurzus oldalán.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus értékelései jelenjenek meg. |
| **Label** | Az értékelések szekciójának címe. |
| **Background** | A háttér: szín, színátmenet, kép, videó, minta és maszk. |

A **Design** részben külön formázhatod a szekció címét, az átlagértékelés címét, szövegét, darabszámát és csillagjait, a jobb oldali értékelési sávot, az értékelések listájában a szerzőt, a szerző nevét, az időpontot, a megjegyzést és a csillagokat, valamint a térközöket.

### Course Share

Megosztás gombot tesz az oldalra, amellyel a látogató egy kattintással megoszthatja a kurzus hivatkozását a kedvenc felületén.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus hivatkozása legyen megosztható. |
| **Label** | A gomb címkéje. |
| **Show Label** | A címke megjelenítése vagy elrejtése. |
| **Show Icon** | Az ikon megjelenítése vagy elrejtése. |
| **Alignment** | A szöveg igazítása. |
| **Space Between** | Az ikonok közti távolság képpontban. |

A megosztási felugró ablak beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Section** | A felugró ablak szekciójának címe. |
| **Share Title** | A megosztás címének szövege. |
| **Social Icon** | A közösségi ikonok megjelenítése vagy elrejtése. |
| **Social Text** | A közösségi szöveg megjelenítése vagy elrejtése. |

A **Design** részben a címke és az ikon, a felugró ablak szekciócíme, megosztási címe és hivatkozása, a közösségi gombok, a bezárás gomb, a háttér és a térközök kinézete állítható. A tartalmat csak a **Content** részben módosíthatod.

### Course Status

Megmutatja, hogy a tanuló be van-e iratkozva a kurzusra. Ha nincs, a kosárba tevő gombot jeleníti meg.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus állapota jelenjen meg. |
| **Progress Title** | A haladásjelző címe. |
| **Background** | A háttér: szín, színátmenet, kép, videó, minta és maszk. |

A **Design** részben három csoport van:

- **Progress Title**: a cím betűtípusa, vastagsága, igazítása, színe, mérete, térköze, magassága és szövegárnyéka.
- **Progress Bar**: a sáv színe, háttérszíne, magassága, lekerekítése és a térköz.
- **Progress Text**: a haladásszöveg betűtípusa, vastagsága, stílusa, színe, mérete, betűköze, sormagassága és árnyéka.

### Course Tags

A kurzus szerkesztőjében megadott címkéket jeleníti meg az oldalon.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus címkéi jelenjenek meg. |
| **Label** | A címke szövege. |

A **Design** részben a szekció címét (betűtípus, vastagság, stílus, szín, méret, betűköz, sormagasság, szövegárnyék), a címkéket (háttérszín, szövegformázás, lekerekítés, szegély stílusa, vastagsága és színe), a térközöket (margó, belső margó) és a dobozárnyékot formázhatod.

### Course Target Audience

A kurzus célközönségét listázza, vagyis azt, hogy kinek szól a kurzus.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus célközönsége jelenjen meg. |
| **Label** | A lista címe. |
| **Layout** | Lista vagy egy sorban megjelenítés. |
| **Icon** | A lista felsorolásjele. |
| **Alignment** | A szöveg igazítása. |

A **Design** részben négy csoport van: a **Section Title** (térköz, betűtípus, vastagság, stílus, szín, méret, betűköz, sormagasság, szövegárnyék), a **List** (elemek közti távolság, belső margó, lekerekítés, szegély), az **Icon** (szín, méret) és a **Text** (behúzás és a szöveg formázása).

### Course Thumbnail

A kurzus bélyegképét mutatja az oldalon.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus képe jelenjen meg. |

A **Design** részben a szövegigazítás és árnyék, a méretek (szélesség, legnagyobb szélesség, a modul igazítása, legkisebb, pontos és legnagyobb magasság), a térközök, a szegély (lekerekítés, stílus, vastagság, szín), a dobozárnyék (vízszintes és függőleges helyzet, elmosás, kiterjedés, szín, pozíció) és az átalakítás (Transform) állítható.

### Course Title

A kurzus címét mutatja az oldalon.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus címe jelenjen meg. |

A **Design** részben a címszöveget állíthatod: a címsor szintjét, a betűtípust, a vastagságot, a stílust, az igazítást és a szövegstílust.

### Course Total Enrollment

A beiratkozott tanulók teljes számát mutatja, hogy az érdeklődők lássák, hányan járnak a kurzusra.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus létszáma jelenjen meg. |
| **Label** | A címke szövege. |
| **Layout** | Lista vagy egy sorban megjelenítés. |
| **Icon** | A felsorolásjel ikonja. |
| **Alignment** | A szöveg igazítása. |
| **Gap** | A szövegek közti távolság képpontban. |

### Course Wishlist

A kívánságlista gombját teszi az oldalra, hogy a tanuló egy kattintással elmenthesse a kurzust későbbre.

| Beállítás | Mit csinál |
|---|---|
| **Course** | Melyik kurzus kerüljön a kívánságlistára. |
| **Label** | A gomb címkéjének szövege. |
| **Show Label** | A címke megjelenítése vagy elrejtése. |
| **Show Icon** | A kívánságlista-ikon megjelenítése vagy elrejtése. |
| **Alignment** | A tartalom igazítása a három előre megadott lehetőség közül. |
| **Space Between** | Az ikon és a szöveg közti távolság képpontban (a sáv húzásával). |