Oldalépítők és a LearnDash

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). Példa:

[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). 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 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 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 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:

[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).

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.