# Oldalépítők és a LearnDash

> Hogyan működik együtt a LearnDash az oldalépítőkkel (Elementor, Beaver Builder, Divi): mit lehet szerkeszteni, shortcode-ok és widgetek használata, feltételes tartalom.

Ez a fejezet azt mutatja be, hogyan dolgozik együtt a LearnDash az oldalépítő bővítményekkel, és hogyan tervezheted meg velük a kurzusaid, leckéid és témáid oldalát. Három népszerű oldalépítőre koncentrál: Elementor Pro, Beaver Builder és Divi.

Az oldalépítők ingyenes változata sok mindent tud, de korlátozottabb. Ha valamilyen funkciót nem találsz, valószínűleg a Pro változat kell. A teljes LearnDash-integrációhoz az Elementor Pro ajánlott.

A leírás a LearnDash 3.0 aktív sablonjára és a WordPress blokkszerkesztőjére (Gutenberg) épül. Az Elementor integrációhoz a 3.0-s sablon kell, a legtöbb elv a régi (Legacy) sablonnál is igaz, de lehetnek eltérések. A Klasszikus szerkesztő mellett a képernyők mások.

## Hogyan működnek az oldalépítők

- Majdnem minden oldalépítővel az oldal, bejegyzés, kurzus, lecke vagy más egyedi bejegyzéstípus főtartalmát tervezheted, vagyis azt, amit egyébként a WordPress szerkesztőjében adnál meg. A webhely fejléce, oldalsávja és lábléce nem tartozik ide.
- A legtöbb prémium oldalépítő a fejlécet, oldalsávot és láblécet is tervezni engedi (például az Elementor Pro Theme Builder, a Beaver Themer).
- Minden oldalépítő saját elemekkel dolgozik (oszlopok, címsorok, listák, táblázatok, ikonok, képgalériák). Ezek az oldalépítőtől és az ingyenes vagy pro változattól függnek.

## Hogyan kerül a LearnDash tartalma az oldalra

A tartalom többféleképpen kerülhet az oldalra, és ez határozza meg, hogy az oldalépítővel szerkeszthető-e.

### Dinamikus tartalom

Dinamikus tartalmat nem te viszel fel a szerkesztőben: a LearnDash automatikusan adja hozzá, az oldal típusától (kurzus, lecke, téma) és a kurzus beállításától függően. Példák:

- Kurzusoldalon nem beiratkozott felhasználónak az állapot, az ár és az indítás rész az oldal tetején. Beiratkozottnak az utolsó tevékenység dátuma, a haladássáv és az állapotjelző.
- Kurzusoldalon alul a kurzus tartalomjegyzéke, az összes leckével, témával és kvízzel.
- Leckeoldalon a leckéhez rendelt témák listája.
- Lecke- és témaoldalon a feladatok területe, ahol a felhasználó feltölthet, és látja a feltöltött feladatait.
- Fókusz módban a fejléc (logóval, ha van, a kurzus haladásával, navigációs gombokkal és avatarral legördülő menüvel), valamint az oldalsáv a kurzus címével és navigációs hivatkozásokkal.

Ezt a dinamikus tartalmat az Elementorral szerkesztheted (a kompatibilitási kiegészítő segítségével). A Divivel és a Beaver Builderrel nem. Fejlesztőként a LearnDash sablonfájljait felülírhatod HTML és PHP tudással, így a dinamikus tartalom és a helye is módosítható.

### A saját kurzus-, lecke-, téma- és kvíztartalmad

Ezt te vezeted fel, szabadon szerkesztheted, és oldalépítővel is megtervezheted. A helyét viszont a LearnDash határozza meg. Például fókusz módú leckeoldalon a tartalmad mindig a morzsamenü után és az előző/következő lecke gombok előtt jelenik meg. Ha a leckéhez anyagokat adtál, két fül kerül be dinamikusan: **Lecke** és **Anyagok**. A saját leckétartalmad a **Lecke** fül alatt látszik.

Fókusz módban csak ez a saját tartalom szerkeszthető oldalépítővel. A többi elemet a LearnDash vezérli (vagy két külső tervezőbővítmény, a Design Upgrade Pro és a Visual Customizer).

### LearnDash blokkok

A LearnDash blokkok bizonyos LearnDash-információkat adnak a főtartalomhoz, de csak a blokkszerkesztőben működnek. Példák: LearnDash Profile (a felhasználó profilja és kurzusai), LearnDash Course List (kurzuslista, vagy rács a kurzusrács használatakor), LearnDash Course Progress (haladássáv egy kurzushoz). Oldalépítőben nem adhatsz hozzá LearnDash-blokkot.

### LearnDash shortcode-ok

Minden LearnDash blokkhoz tartozik shortcode. Sok közülük paraméterekkel testre szabható (lásd: [Shortcode-ok és blokkok](https://hub.hellowp.io/hu/plugins/sfwd-lms/beallitasok-funkciok-shortcode-ok-blokkok/)). Példa:

```text
[ld_profile]
```

Ez a profilt adja meg: a profilképpel, névvel, alapadatokkal, valamint a beiratkozott kurzusok listájával és haladásukkal. A shortcode előnye, hogy minden oldalépítővel használható.

### LearnDash widgetek

A widgetek a WordPress magjának részei, könnyen betehetők bármely oldalsáv-területre. A LearnDash is ad néhányat (kurzusnavigáció, kurzuslisták és más elemek; lásd: [Widgetek](https://hub.hellowp.io/hu/plugins/sfwd-lms/beallitasok-funkciok-widgetek/)). Oldalépítőben így érhetők el:

- Elementor: ingyenes és Pro változatban is.
- Beaver Builder: ingyenes és Pro változatban is.
- Divi: nem (teljes oldalsáv-területet adhatsz hozzá, önálló widgetet nem).

### Kivétel: fókusz mód

Fókusz módban a webhely szokásos fejléce, oldalsávja és lábléce el van távolítva.

- A fejléc, az oldalsávi kurzusnavigáció, az oldalcím, a haladásjelző és a morzsamenü dinamikus tartalom, oldalépítővel nem szerkeszthető.
- A morzsamenü alatti lecke-, téma- és kvíztartalom a sajátod, ezt szerkesztheted oldalépítővel.

### Összefoglalva

- A LearnDash által dinamikusan hozzáadott tartalom csak az Elementorral szerkeszthető (a kompatibilitási kiegészítővel).
- A fókusz mód elemei oldalépítővel nem szerkeszthetők.
- A WordPress-szerkesztőben általad felvitt tartalom oldalépítővel szerkeszthető.
- Oldalépítővel való tervezéskor shortcode-ot és widgetet használj, ne blokkot.

## A téma kiválasztása

Majdnem minden WordPress-téma működik az oldalépítőkkel és a LearnDashsel, de egyesek jobban. Az oldalépítő-támogatást kifejezetten nyújtó témák nagyobb szabadságot adnak. Ilyen például az Astra, a GeneratePress és az OceanWP. Nem kötelező ezeket használni, minden szabványos téma működik, csak ezek adják a legnagyobb rugalmasságot.

Az ilyen témák oldalankénti beállításai általában ezek (témánként változnak):

- Tartalomszélesség: keskeny, széles, teljes szélességű vagy 100%-ra nyújtott.
- Oldalsávok: oldalanként be- vagy kikapcsolhatók, és megadható a helyük (jobb vagy bal).
- Oldalcím kikapcsolása: elrejti az oldal tetején lévő alapértelmezett címet, hogy a sajátodat tedd oda oldalépítővel.
- Kiemelt kép kikapcsolása: elrejti a kurzusoldal tetején megjelenő kiemelt képet.

Ha az elrendezést és a térközt teljesen az oldalépítővel akarod vezérelni, állíts be oldalsáv nélküli oldalt, a tartalom szélessége pedig „teljes” vagy „nyújtott” legyen.

## Az oldalépítő bekapcsolása a LearnDash tartalomtípusaihoz

Ha nem találod a módját, hogyan szerkessz egy LearnDash-tartalmat az oldalépítővel, először ellenőrizd, be van-e kapcsolva az adott egyedi bejegyzéstípusokhoz.

### Elementor

Az Elementor-integráció a [Kompatibilitási kiegészítők](https://hub.hellowp.io/hu/plugins/sfwd-lms/integraciok-kompatibilitasi-kiegeszitok/) között is szerepel.

### Beaver Builder

1. Nyisd meg: **Beállítások → Beaver Builder**.
2. Kattints a **Post Types** (bejegyzéstípusok) fülre.
3. Jelöld be a kurzusokat, leckéket, témákat és kvízeket (vagy csak azt, amelyiket használod).
4. Kattints a **Save Post Types** gombra.

### Divi

Alapból a Divi a kurzusokhoz és leckékhez be van kapcsolva. Témákhoz és kvízekhez be kell kapcsolnod.

1. Nyisd meg: **DIVI → Plugin Options**.
2. Kattints a **Post Types Integration** fülre.
3. Jelöld be a témákat és kvízeket (vagy csak amit használsz).
4. Kattints a **Save Settings** gombra.

Ha a Divit témaként használod:

1. Nyisd meg: **Divi → Theme Options**.
2. Kattints a **Builder** fülre, azon belül a **Post Types Integration** fülre.
3. Jelöld be a témákat és kvízeket.
4. Kattints a **Save Changes** gombra.

## Shortcode-ok használata oldalépítőkkel

### Elementor

Lásd a [Kompatibilitási kiegészítők](https://hub.hellowp.io/hu/plugins/sfwd-lms/integraciok-kompatibilitasi-kiegeszitok/) fejezetet.

### Beaver Builder

Egy LearnDash-tartalom szerkesztésekor ott, ahol egyébként a tartalom lenne, egy **Launch Beaver Builder** gomb van. Erre kattintva nyílik meg az oldalépítő. A dinamikus LearnDash-tartalom az előnézetben csak a kurzus közzététele után látszik. A hozzáadott tartalom a LearnDash dinamikus tartalma közé kerül.

1. Keresd meg a bal oldali panelen a **HTML** modult.
2. Húzd az oldal kívánt helyére.
3. A bal panelen írd be a LearnDash-shortcode-ot.
4. Az előnézethez kattints alul a **Save** gombra.
5. Szerkesztés után kattints a jobb felső sarokban a **Done** gombra, majd **Publish** vagy **Update**.

### Divi

Kurzus, lecke, téma vagy kvíz szerkesztésekor az oldal tetején megjelenik a **Use The Divi Builder** gomb. A Divi első indításakor három lehetőséget kínál: építés a semmiből, előre elkészített elrendezés választása, meglévő oldal klónozása. Válaszd a megfelelőt, ezután a Divi vizuális szerkesztője nyílik.

1. Kattints a zöld `+` ikonra új sor felvételéhez.
2. Válaszd ki a sor elrendezését.
3. Válaszd a **Code** modult (a **Text** modul is jó).
4. Írd be a LearnDash-shortcode-ot.
5. Kattints a zöld pipa ikonra.
6. Szerkesztés után kattints a képernyő alján a három pontra, majd a **Save** gombra.

## Widgetek használata oldalépítőkkel

### Elementor

Lásd a [Kompatibilitási kiegészítők](https://hub.hellowp.io/hu/plugins/sfwd-lms/integraciok-kompatibilitasi-kiegeszitok/) fejezetet.

### Beaver Builder

Az ott említett widgetek a Beaver Builderben is elérhetők.

1. Húzd a widgetet az oldal kívánt helyére.
2. A bal panelen váltsd a modulcsoportot „WordPress Widgets”-re, vagy használd a keresőt.
3. (Nem kötelező) Adj címet a widgetnek, és állítsd be a beállításait.
4. Szerkesztés után kattints a jobb felső **Done** gombra, majd **Publish** vagy **Update**.
5. Keresd meg a hozzáadandó widgetet.

## Tartalom feltételes mutatása

Két LearnDash shortcode meghatározott felhasználónak mutat tartalmat:

```text
[student] ... [/student]
[visitor] ... [/visitor]
```

- `[student]`: csak annak látszik, aki be van iratkozva a kurzusra.
- `[visitor]`: csak annak látszik, aki nem iratkozott be a kurzusra.

Hasznosak például a beiratkozottaknak szánt tartalomhoz a kurzusoldalon, vagy mintalecke megtekintésekor a feliratkozásra vagy vásárlásra hívó üzenethez (lásd: [Mintalecke](https://hub.hellowp.io/hu/plugins/sfwd-lms/leckek-temak-hozzaferes/)).

Más LearnDash-shortcode-októl eltérően ezek nem használhatók shortcode-widgeten belül, csak szövegszerkesztő vagy HTML widgetben:

- Elementor: Text Editor vagy HTML widget.
- Beaver Builder: Text Editor vagy HTML widget.
- Divi: Text vagy Code widget.

A két shortcode közé bármilyen tartalmat tehetsz, de az egésznek ugyanabban az elemben kell lennie. Nem teheted a nyitó `[student]` címkét az egyik elembe, a tartalmat másik elemekbe, a záró `[/student]` címkét pedig újabb elembe.

A Beaver Builderben a „Text Editor”, a Diviben a „Text” modul használata ajánlott.

Az ingyenes Uncanny LearnDash Toolkit `[uo_show]` shortcode-ja bejelentkezett és kijelentkezett látogatók szerint mutat tartalmat, a beiratkozástól függetlenül.

## Gyakori kérdés

**Használhatok más, itt nem említett oldalépítőt is?** Igen. Ugyanezek az elvek minden WordPress-oldalépítőre igazak, csak a widgetek és modulok neve lehet más.