Tworzenie witryny zarządzania nauczaniem (LMS) z Divi

Uwielbiam brać udział w kursach online. Jest coś w rozpoczęciu dobrze zaprojektowanego, dobrze zorganizowanego e-kursu ze świetną treścią. Jeśli zrobione dobrze, te e-kursy mogą motywować Cię poczuciem spełnienia. Ale nauka ze świetnego e-kursu i stworzenie takiego to dwa zupełnie różne doświadczenia. Z mojego doświadczenia wynika, że ​​tworzenie strony internetowej poświęconej zarządzaniu nauką lub e-kursowi może być przytłaczającym procesem.

W tym poście mam nadzieję, że złagodzi strach przed budowaniem własnego e-kursu, pokazując, jak korzystać z gotowego pakietu Divi Learning Management Layout, aby stworzyć w pełni funkcjonalną stronę internetową e-kursu.

Zanim przejdziemy do budowania, oto zestawienie tego, co wspólnie osiągniemy:

1. Utwórz stronę lekcji, używając fragmentów istniejącego układu.
2. Utwórz Menu Kursu, które będzie wyświetlane na każdej stronie lekcji, która pokazuje wszystkie lekcje danego kursu.
3. Użyj wtyczki WP Complete, aby umożliwić użytkownikom śledzenie postępów w każdym kursie.
4. Użyj wtyczki Restrict Content Pro, aby skonfigurować zarówno darmowe, jak i płatne poziomy członkostwa.
5. Dowiedz się, jak szybko zaprojektować strony członkostwa, aby pasowały do ​​witryny, używając elementów z istniejącego układu.
i więcej…

Aby zaspokoić twoją ciekawość, oto zajawka strony lekcji, którą będziesz tworzyć, z pełnym przyciskiem i paskiem postępu nad menu kursu na pasku bocznym…

Ale najpierw przygotujmy wszystko.

Tworzenie witryny zarządzania nauczaniem (LMS) z Divi

Subskrybuj nasz kanał YouTube

Konfiguracja wszystkiego

#1 – Zainstaluj Divi

Upewnij się, że masz zainstalowaną najnowszą wersję Divi. I zawsze dobrze jest mieć również aktywny motyw potomny.

#2 – Prześlij pakiet układów do swojej biblioteki Divi

Będziemy korzystać z pakietu układu Divi's Learning Management (LMS). Pobierz pakiet układu, rozpakuj go i zainstaluj plik coding-school_All.json do swojej biblioteki Divi. Następnie utwórz dziewięć nowych stron, używając każdego z odpowiadających im układów.

#3 – Zainstaluj i aktywuj wtyczkę Restrict Content Pro Plugin

Jest to wtyczka, której będziemy używać do funkcji członkostwa w witrynie e-kursów. Wykorzystamy to, aby skonfigurować bezpłatną i premium (płatną) subskrypcję kursu.

#4 - Zainstaluj i aktywuj wtyczkę WP Complete Pro

Ta wtyczka będzie używana do informowania członków (lub uczniów) o ich postępach, gdy kończą każdą lekcję każdego kursu. Ma fajną grafikę w postaci koła i wykresu słupkowego, aby pokazać postęp, a także przydatny znacznik wyboru obok każdej ukończonej lekcji w menu nawigacyjnym.

Gdy wszystko jest już skonfigurowane, jesteś gotowy do zbudowania swojego e-kursu.

Zacznijmy.

Zmień nazwę strony kursu

Twój pakiet układu zawiera układ strony kursów.

Każdy z kursów wymienionych w tym układzie powinien (jeśli planujesz nauczać wszystkich tych kursów) link do określonej strony kursu, która korzysta z układu strony kursu.

Uwaga: Zwróć uwagę, że zastąpiłem przycisk w nagłówku powyższej strony kursu modułem wideo. W ten sposób nie muszę przekierowywać na inną stronę, aby wyświetlić podgląd kursu. Tylko pomysł.

Jak widać, w tym przykładzie układ strony kursu korzysta z kursu UX Design, więc edytuj stronę i zmień nazwę strony kursu z „Kurs” na „Projektowanie UX”. I zaktualizuj również swój permalink.

Tworzenie strony lekcji

Twoja nowa strona kursu, teraz o nazwie „Projektowanie UX”, jest podzielona na rozdziały (możesz też traktować je jako lekcje) z krótkim opisem każdego z nich. Każdy z tych rozdziałów/lekcji będzie musiał przekierować do własnej strony lekcji. Aby zbudować tę stronę lekcji, użyjemy układu strony kursu i dokonamy pewnych zmian.

Pierwszy rozdział/lekcja wymieniona na stronie kursu UX Design nosi nazwę „Rozdział 1: Wprowadzenie do podstaw”. Zbudujmy naszą stronę lekcji dla tego.

Śmiało, dodaj nową stronę i wpisz „Rozdział 1: Wprowadzenie do podstaw” jako tytuł.

Ponieważ ta lekcja jest stroną podrzędną strony kursu UX Design, kliknij listę rozwijaną nadrzędną w polu Atrybuty strony na prawym pasku bocznym i wybierz UX Design jako element nadrzędny.

Następnie kliknij, aby użyć Divi Builder, kliknij Dodaj z biblioteki i wybierz Układ kursu.

Zapisz Projekt

Dostosuj układ nagłówka

Teraz kliknij, aby użyć programu Visual Builder do wprowadzenia pewnych zmian w układzie strony. Najpierw zmieńmy nieco układ naszego nagłówka w górnej sekcji. Z konstruktora wizualnego usuń moduł obrazu w prawej kolumnie i zielony przycisk u dołu pierwszej kolumny.

Następnie kliknij, aby edytować ustawienia górnego modułu tekstowego w pierwszej kolumnie i zmień tekst nagłówka h1 na „Rozdział 1: Wprowadzenie do podstaw”.

Następnie zmień strukturę kolumn wiersza na jedną kolumnę zamiast dwóch.

Teraz twój nagłówek powinien wyglądać tak.

Zmień zawartość Blubba

W poniższej sekcji specjalistycznej edytuj ustawienia pierwszej notki w lewej sekcji treści i zaktualizuj następujące elementy:

Karta treści

Tytuł: Część 1
Treść: [To stanie się treścią kursu; Na razie zostawiam tam fałszywą treść]
Użyj ikony: TAK
Ikona: wybierz ikonę strzałki w prawo

Uwaga: kolor ikony zostanie pobrany z zestawu Kolor akcentu motywu w konfiguratorze motywu, więc upewnij się, że aktualizujesz tam kolor o kolor pasujący do witryny.

Zapisz ustawienia

Teraz, gdy masz już utworzony jeden moduł notki, możemy użyć go jako szablonu do dzielenia każdej części lekcji na stronie. Śmiało, skopiuj właśnie utworzony moduł dwa razy (lub dowolną liczbę części) i zaktualizuj każdy z innym tytułem (np. Część 2, Część 3, itd…).

Następnie usuń inne notki, których już nie będziemy potrzebować.

Teraz twój układ powinien wyglądać tak.

Dodawanie widżetu paska bocznego

Dodaj moduł paska bocznego pod modułem przycisku na prawym pasku bocznym sekcji specjalności. Na razie po prostu pozostaw domyślne ustawienia treści, które pobierają zawartość obszaru widżetów paska bocznego. Ostatecznie zmienimy to, gdy tylko utworzymy niestandardowy obszar widżetów, który zawiera menu kursu.

Pod zakładką treści dodaj białe tło do swojego modułu.

Aby Twój moduł paska bocznego był zgodny z wyglądem strony, zaktualizuj ustawienia na karcie Projekt w następujący sposób:

Margines niestandardowy: -80px Top
Niestandardowe dopełnienie: 30px u góry, 40px w prawo, 30px w dół, 40px w lewo
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa pudełka Shadwo: 0px
Siła rozmycia cieni w pudełku: 60px
Siła rozprzestrzeniania się cieni w pudełku: 0px
Kolor cienia: rgba (71,74,182,0.12)

Styl animacji: Zoom
Kierunek animacji: w górę
Intensywność animacji: 20%
Początkowe krycie animacji: 100%

Zapisz ustawienia

Uwaga: dobrym pomysłem jest przekształcenie tego modułu w moduł globalny, dzięki czemu będziesz musiał wprowadzać poprawki tylko w jednym module na potrzeby przyszłych aktualizacji. Aby to zrobić, wybierz dodaj do biblioteki, nazwij go „moduł paska bocznego menu lekcji”, wybierz, aby ustawić go jako moduł globalny, i kliknij Zapisz.

Na koniec usuń moduł notatek z instruktorem i moduł przycisku „Pełny profil”. Twoja strona powinna wyglądać tak:

Zapisz stronę

Teraz, gdy mamy już zbudowaną jedną z naszych stron lekcji, zapiszmy ją w naszej bibliotece, abyśmy mogli używać jej na innych lekcjach. W kreatorze wizualnym kliknij przycisk "Dodaj do biblioteki" w menu dolnym, wpisz "Układ strony lekcji" jako nazwę szablonu, a następnie zapisz go.

Śmiało i powtórz powyższe kroki, aby dodać dwie kolejne strony lekcji. Tylko tym razem, zamiast używać układu strony kursu, użyj nowo utworzonego układu o nazwie „układ strony lekcji”.

Gdy skończysz, powinieneś mieć utworzone trzy strony lekcji z następującymi tytułami:

1. Rozdział 1: Wprowadzenie do podstaw
2. Rozdział 2: Architektura informacji
3. Rozdział 3: Projektowanie responsywne

Tworzenie menu kursu

Teraz, gdy masz już utworzone lekcje, możemy zbudować nasze menu kursów. Z pulpitu WordPress przejdź do Wygląd > Menu .

Na stronie Menu wykonaj następujące czynności:

1. Wybierz „Utwórz nowe menu”
2. Nazwij go „Projektowanie UX”
3. Wybierz trzy strony/rozdziały lekcji do menu, które właśnie utworzyłeś.
4. Kliknij Dodaj do menu
5. Zapisz menu

Utwórz niestandardowy obszar widżetów

Aby dodać menu do naszej strony lekcji, najpierw musimy utworzyć dla niego niestandardowy obszar widżetów. Z pulpitu nawigacyjnego WordPress przejdź do Wygląd > Widgety . Pod istniejącymi obszarami widżetów zlokalizuj pole używane do tworzenia nowego obszaru widżetów. Wpisz nazwę „UX Design” i kliknij „Utwórz”. Teraz odśwież stronę. Powinieneś teraz zobaczyć nowy niestandardowy obszar widżetów „UX Design”. Przeciągnij widżet menu niestandardowego do obszaru widżetów „UX Design”. W widżecie Menu niestandardowe wybierz menu „Projektowanie UX”. Następnie kliknij Zapisz.

Zaktualizuj moduł paska bocznego strony lekcji o nowy obszar widżetów

Teraz, gdy masz utworzony obszar widżetów za pomocą menu kursu, wróć do utworzonych stron kursu i zaktualizuj moduł paska bocznego, aby wybrać obszar widżetów „Projektowanie UX”. Teraz twoje menu powinno pojawić się na pasku bocznym.

Uwaga: jeśli ustawiłeś moduł paska bocznego jako globalny, będziesz musiał dokonać tej zmiany tylko raz w tym module, pozostałe dwa zostaną automatycznie zaktualizowane.

W tym momencie mamy całkiem niezłą bazę do tworzenia naszych kursów i lekcji, więc ulepszmy nasz UX, włączając śledzenie postępów w kursie.

Dodaj śledzenie postępów w kursie

Dodanie śledzenia postępów w kursie do witryny e-kursu to świetny sposób na zwiększenie zadowolenia użytkownika, zaangażowania i motywacji podczas udziału w kursie. Aby pokazać postęp na każdym z naszych kursów, użyję wtyczki WP Complete Pro. Jeśli jeszcze tego nie zrobiłeś, upewnij się, że zainstalowałeś i aktywowałeś wtyczkę.

Po aktywacji wtyczki z pulpitu nawigacyjnego WordPress przejdź do Ustawienia> WPComplete . Spowoduje to przejście do ustawień wtyczki.

Zaktualizuj następujące ustawienia:

Typ roli ucznia: Subskrybent
Typ treści lekcji: Rodzaje stron (ponieważ budujemy nasze lekcje ze stronami zamiast postami)
Odznacz opcję „Automatycznie dodawaj pełny przycisk do włączonych postów i stron dla mnie”. (zamierzamy ręcznie dodać te przyciski za pomocą krótkiego kodu.)
Oznacz pełny kolor przycisku: #7377fc
Ustawienia wykresu Kolor podstawowy: #7377fc

Następnie kliknij Zapisz zmiany.

Włącz kompletne przyciski na stronach lekcji

Teraz, gdy mamy konfigurację WP Complete. Dodajmy nasze przyciski „zakończmy” do naszych stron z lekcjami.

Przejdź do pierwszej utworzonej przez nas strony lekcji zatytułowanej „Rozdział 1: Wprowadzenie do podstaw” i kliknij, aby edytować stronę. W domyślnym edytorze stron znajdź pole WPComplete u dołu strony. W polu kliknij opcję „Włącz przycisk Complete”. To powie wtyczce, że chcesz śledzić tę stronę dla użytkownika. Następnie w polu tekstowym zaraz po napisie „To jest część:” wpisz „UX Design”, czyli nazwę kursu, który chcesz śledzić. W ten sposób grupujesz lekcje w ramach każdego kursu. Na przykład, jeśli masz trzy lekcje i na każdej z tych stron lekcji wybierzesz jako kurs „Projektowanie UX”, gdy użytkownik ukończy stronę, klikając przycisk ukończenia, wtyczka jest w stanie zarejestrować, że użytkownik ukończył 33% (1 z 3 lekcji) tego kursu. Jeśli masz wiele kursów, możesz po prostu wpisać w polu nową nazwę kursu, co spowoduje rozpoczęcie nowej grupy kursów.

Dodaj kompletne przyciski do stron lekcji

Aby dodać przycisk „Zakończ” do strony lekcji, wdróż wizualny kreator na tej samej stronie lekcji, którą właśnie edytowałeś.

Dodaj moduł tekstowy pod ostatnim modułem notki na dole strony. W ustawieniach tekstu wprowadź następujący krótki kod w polu treści:

[wpc_button text=”Kliknij mnie, aby zakończyć!” complete_text=”YAY! Zakończony"]

Uwaga: Możesz zmienić tekst i uzupełniony tekst wyświetlany na przycisku, modyfikując tekst w krótkim kodzie.

Zapisz ustawienia

Ten krótki kod tworzy przycisk, który pozwala użytkownikowi go kliknąć i nagrać lekcję jako ukończoną.

Zauważ, że kiedy klikniesz przycisk, aby zakończyć lekcję, pozycja menu na pasku bocznym odpowiedniej lekcji zniknie i wyświetli znacznik wyboru po prawej stronie.

Śmiało i zapisz ten moduł tekstowy, który właśnie utworzyłeś w swojej bibliotece pod nazwą „Przycisk Zakończ”. Teraz możesz użyć tego elementu biblioteki, aby w razie potrzeby wejść do tego samego modułu na wszystkich swoich stronach.

Uwaga: Możesz chcieć zapisać nową wersję układu strony lekcji w swojej bibliotece z dołączonym przyciskiem ukończenia, aby nie trzeba było dodawać go jako dodatkowego elementu podczas tworzenia przyszłych stron lekcji.

Dodaj wykres paska postępu do paska bocznego

Wtyczka WPComplete umożliwia również wyświetlanie wykresów, które pokazują użytkownikowi postępy w określonym kursie. Dodamy wykres słupkowy, aby pokazać postęp kursu UX Design na pasku bocznym naszych lekcji.

Pamiętasz, jak stworzyliśmy niestandardowy obszar widżetów dla naszego kursu UX Design, aby wyświetlać menu kursu na pasku bocznym strony lekcji? Teraz dodamy pasek postępu tuż nad naszym menu kursu. W ten sposób użytkownik może zobaczyć swoje postępy na ciekawym wyświetlaczu wizualnym.

Aby dodać wykres słupkowy, przejdź do pulpitu WordPress i przejdź do opcji Wygląd > Widgety . Następnie otwórz utworzony wcześniej niestandardowy widżet „UX Design” i przeciągnij widżet HTML do obszaru widżetów na widżet niestandardowego menu, który obecnie się tam znajduje. W polu treści HTML wprowadź następujący krótki kod:

[wpc_progress_bar course=”projekt UX”]

Ten krótki kod wyświetli wykres słupkowy postępu dla konkretnego kursu „Projektowanie UX”. Ta nazwa kursu odpowiada temu, co umieściłeś w opcji pola WPComplete obok "To jest część:". Jeśli masz w przyszłości inny kurs, po prostu wpisz nazwę nowego kursu w miejscu „UX Design” podczas dodawania shortcode dla tego kursu.

Uwaga: Aby uzyskać pełną listę skrótów dostępnych dla tej wtyczki, przejdź do ściągawki shortcodes.

Teraz przejdź do „Rozdziału 1: Wprowadzenie do podstaw”, aby zobaczyć, jak to wygląda.

Kliknij przycisk Zakończ na dole strony. Teraz sprawdź pasek boczny, aby zobaczyć, co się zmieniło. Wykres słupkowy pokazuje teraz, że ukończyłeś 33% kursu. A pozycja menu dla strony lekcji jest teraz wyblakła z zaznaczeniem po prawej stronie, aby pokazać, że lekcja została ukończona.

Całkiem fajnie, co?

Przyjrzyjmy się, co mamy do tej pory:

1. Mamy nowy szablon strony lekcji, który będzie służył jako szablon dla przyszłych lekcji
2. Posiadamy system do tworzenia niestandardowego menu dla każdego kursu.
3. Mamy system do konfigurowania niestandardowych obszarów widżetów dla każdego kursu, aby wyświetlić niestandardowe menu dla tego konkretnego kursu na stronie lekcji.
4. Mamy możliwość dodania kompletnego przycisku do naszych stron lekcji, który po kliknięciu przedstawia postęp na wykresie słupkowym oraz w odpowiednim łączu menu.

Ostatnim etapem przekształcenia naszej witryny w działający e-kurs jest integracja poziomów członkostwa w celu ograniczenia naszych treści do płacących klientów.

Budowanie stron członkowskich

Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj wtyczkę Restrict Content Pro. Po zainstalowaniu wtyczka automatycznie utworzy 5 stron do obsługi procesu członkostwa.

Jeśli spojrzysz na każdą stronę w domyślnym edytorze stron, zobaczysz, że jedyną rzeczą dodaną do treści dla każdej strony jest krótki kod. Na przykład, jeśli przejdziesz do strony Zarejestruj się, zobaczysz, że jedyną rzeczą w edytorze treści jest krótki kod „[formularz_rejestru]”, który wyświetli formularz rejestracyjny.

Ponieważ wszystko, czego potrzebujesz do wyświetlenia treści dla każdej z tych automatycznie generowanych stron, to skróty, możesz łatwo zbudować układ dla tych stron za pomocą Divi Builder. Na przykład, jeśli chcesz szybko i łatwo dostosować swoją stronę rejestracji, przejdź do strony kursów i wdróż konstruktor wizualny. Zapisz górną sekcję układu w swojej bibliotece pod nazwą „nagłówek strony e-kursu” (lub coś w tym stylu).

Następnie kliknij jedną z notatek przedstawiających kurs i zapisz ten moduł w swojej bibliotece pod nazwą „pole treści notatek e-kursu” (lub coś w tym stylu).

Teraz przejdź do strony Zarejestruj się, skopiuj krótki kod do schowka (zaznacz skrót i kliknij ctrl + c). Następnie wdróż Divi Builder, a następnie Visual Builder. Dodaj swoją nową zapisaną sekcję o nazwie „nagłówek strony e-kursu” ze swojej biblioteki.

Zaktualizuj moduł tekstowy zawierający tytuł, aby mówił „Zarejestruj się” zamiast „Kursy”.

Następnie kliknij, aby dodać moduł z biblioteki pod bieżącymi modułami w sekcji. Wybierz moduł „Pole treści notatek e-kursu”, który właśnie zapisałeś w bibliotece.

Następnie zaktualizuj ustawienia w następujący sposób:

W zakładce treści…

Usuń tytuł
Treść: wprowadź krótki kod [register_form], który zapisałeś w schowku, naciskając ctrl + v.
Usuń adres URL obrazu

Zapisz ustawienia

Uwaga: to był szybki i łatwy sposób. Użyłem modułu notki, ponieważ był to najszybszy sposób na przeniesienie stylu modułu. Prawdopodobnie będziesz chciał zamiast tego użyć modułu tekstowego.

Teraz spójrz na swoją stronę rejestracji w przeglądarce incognito.

Nadal musisz dostosować projekt formularza (nie zrobisz tego w tym samouczku), ale można to łatwo zrobić za pomocą pewnej inspekcji i niestandardowego CSS.

Możesz wykonać ten sam proces, aby zaktualizować wszystkie 5 stron członkostwa wygenerowanych przez wtyczkę. Aby zobaczyć, które strony są używane do obsługi członkostwa, przejdź do pulpitu nawigacyjnego WordPress i nawigacji do Ogranicz> Ustawienia, a zobaczysz listę wszystkich stron, które są używane w zakładce Ogólne.

Dodawanie DARMOWEGO poziomu subskrypcji

Dodanie BEZPŁATNEGO poziomu subskrypcji do e-kursu to świetny sposób na pozyskiwanie potencjalnych klientów, dodawanie ich do kampanii e-mail marketingowej i sprzedawanie ich w ramach członkostwa premium. Aby dodać DARMOWY poziom subskrypcji, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Ogranicz > Poziomy subskrypcji . Następnie wypełnij ustawienia, aby utworzyć DARMOWE członkostwo. Oto przykład, w co wejść, aby uzyskać bezpłatny poziom subskrypcji:

Nazwa: ZA DARMO
Opis: Jest to BEZPŁATNA subskrypcja Szkoły Kodowania.
Rola użytkownika: subskrybent

Pozostałe opcje pozostaw domyślnie.

Następnie kliknij Dodaj poziom członkostwa

Dodawanie poziomu subskrypcji Premium

Członkostwo Premium to zazwyczaj miejsce, w którym można pobierać opłaty, aby uzyskać dostęp do treści wyższego poziomu, do których nie można uzyskać dostępu z bezpłatnym członkostwem. Podobnie jak w przypadku DARMOWEGO członkostwa, użytkownik musiałby zarejestrować się w formularzu rejestracyjnym. Jedyną różnicą jest to, że zostaną przekierowani do formularza płatności w celu zakupu abonamentu. Jeśli użytkownik jest już DARMOWYM członkiem, może przejść na subskrypcję Premium, używając swoich aktualnych danych rejestracyjnych, a następnie zapłacić za aktualizację.

Aby dodać poziom subskrypcji Premiumn, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Ogranicz > Poziomy subskrypcji. Następnie wypełnij ustawienia, aby utworzyć subskrypcję Premium. Oto przykład tego, co należy wprowadzić, aby uzyskać poziom subskrypcji Premium:

Nazwa: Premium
Opis: To jest subskrypcja premium Szkoły kodowania
Czas trwania: 1 rok
Cena: 29
Rola użytkownika: subskrybent

Ogranicz lekcje na podstawie poziomu subskrypcji

Teraz, gdy stworzyliśmy nasze poziomy subskrypcji Darmowy i Premium. Możemy ograniczyć strony/posty, a nawet określone treści na podstawie poziomu subskrypcji użytkowników. Wtyczka sprawia, że ​​ten proces jest naprawdę prosty. Przejdźmy dalej i ogranicz dostęp do pierwszej utworzonej przez nas lekcji do DARMOWEJ subskrypcji. Aby to zrobić, przejdź do edycji strony lekcji zatytułowanej „Rozdział 1: Wprowadzenie do podstaw”. Zwróć uwagę na pole „Ogranicz tę zawartość” w górnej części edytora strony. W polu znajduje się rozwijane pole wprowadzania, które pozwala wybrać, kto powinien mieć dostęp do treści. Zamierzasz wybrać członków poziomu(ów) subskrypcji . Po wybraniu zobaczysz więcej opcji. Wybierz pierwszą opcję, która mówi „Członkowie dowolnego poziomu subskrypcji. To dlatego, że chcemy, aby członkowie, którzy będą mieli subskrypcję premium, również mieli dostęp do tych treści.

Uwaga: to ustawienie spowoduje ukrycie całej strony przed niesubskrybowanymi użytkownikami. Jeśli chcesz ukryć określone fragmenty treści na stronie i udostępnić je tylko subskrybentom Free lub Premium, możesz użyć krótkich kodów, aby zawinąć treść, którą chcesz ukryć. Ponieważ używamy konstruktora divi, używanie skrótów do zawijania treści może być trudne, ale jedną z rzeczy, które możesz rozważyć, jest zawijanie tylko treści w rzeczywiste pola treści notek za pomocą krótkich kodów i pozostawienie widocznych tytułów.

W kolejnej lekcji zatytułowanej „Rozdział 2: Architektura informacji” zamierzamy ograniczyć stronę tylko do subskrybentów Premium. Aby to zrobić, przejdź do edycji strony i w polu „Ogranicz tę zawartość” w górnej części edytora strony wybierz Członkowie poziomu(ów) subskrypcji . Następnie wybierz opcję „Członkowie określonych poziomów subskrypcji. Następnie wybierz „Premium”. Teraz tylko osoby z subskrypcją Premium będą mogły uzyskać dostęp do tej strony.

Zapisz zmiany, aktualizując stronę.

Zmień stronę przekierowującą na treści objęte ograniczeniami

Gdy użytkownik próbuje uzyskać dostęp do treści objętych ograniczeniami, możesz przekierować go na określoną stronę. Ponieważ chcemy, aby użytkownik zarejestrował się w celu uzyskania dostępu do kursu, sensowne jest przekierowanie go na stronę rejestracji. Aby to zrobić, przejdź do pulpitu WordPress i przejdź do Ogranicz > Ustawienia i kliknij kartę Różne. Znajdź opcję Strona przekierowania i wybierz stronę Zarejestruj z rozwijanego pola wprowadzania.

Zapisz opcje

Teraz za każdym razem, gdy użytkownik bez subskrypcji próbuje uzyskać dostęp do stron z ograniczeniami, zostanie automatycznie przekierowany na stronę rejestracji.

Możesz to szybko przetestować. Zapisz stronę i otwórz ją w przeglądarce incognito, aby zobaczyć, co widzi użytkownik, gdy nie jest jeszcze zarejestrowany.

Uwaga: jeśli chcesz, możesz utworzyć dodatkową stronę rejestracji dla tego przypadku użycia, aby móc dołączyć bardziej szczegółowe wezwanie do działania, takie jak „Przepraszamy, obecnie nie masz dostępu do tej zawartości, zarejestruj się poniżej”. z formularzem rejestracyjnym poniżej.

Dodawanie bramki płatności

W tym momencie będziesz chciał się upewnić, że Twoja bramka płatności jest zintegrowana z Restrict Content Pro. Możesz to zrobić, przechodząc do Ogranicz > Ustawienia i klikając kartę Płatności . Tam możesz wybrać, które bramy chcesz włączyć, a także wprowadzić informacje potrzebne do integracji bramy. Masz do wyboru dziewięć opcji, w tym Stripe i Paypal.

Nie będę wchodzić w szczegóły związane z ich konfiguracją, ale radzę upewnić się i dokładnie przetestować swoje bramki płatnicze, aby upewnić się, że działają. Nie chcesz stracić pieniędzy.

Dostosowywanie powiadomień e-mail

Restrict Content Pro pozwala dostosować wiadomość e-mail z powiadomieniem zarówno dla nowego członka, jak i administratora, za każdym razem, gdy nowy członek się zarejestruje. Skorzystaj z tej opcji, umieszczając w treści wiadomości e-mail dobre wezwanie do działania, które zachęca użytkownika do rozpoczęcia kursu z linkiem do pierwszej lekcji. Możesz znaleźć ustawienie poczty e-mail, przechodząc do Ogranicz > Ustawienia i kliknij kartę E - maile .

Opcjonalna integracja z e-mail marketingiem

Możesz mieć konto Mailchimp lub Aweber, do którego chcesz dodać członków podczas rejestracji. Możesz to zrobić za pomocą jednego z wielu dodatków dostępnych we wtyczce Restrict Content Pro. Po prostu przejdź do Ogranicz> Dodatki i znajdź żądaną platformę e-mail.

Co teraz?

Teraz, gdy masz już skonfigurowaną witrynę z e-kursem, nadal będziesz musiał dokończyć konfigurowanie całej zawartości dla każdej strony, dodając adresy URL do przycisków i wiele innych poprawek. Ale podstawa została ustalona. Mam nadzieję, że dzięki temu skonfigurujesz platformę, na której możesz łatwo budować.

Końcowe przemyślenia

Można argumentować, że dzięki wszystkim wspaniałym narzędziom dostępnym w świecie WordPressa można łatwo uruchomić kurs online. Ale jest też wyzwanie związane z projektowaniem. Sprawienie, by te witryny wyglądały przyzwoicie, nie jest łatwe, jeśli design nie jest twoją mocną stroną. Na szczęście gotowe układy Divi, takie jak „Learning Management Layout Pack”, oferują świetne rozwiązanie problemu projektowego. Układ jest funkcjonalny i piękny zaraz po wyjęciu z pudełka.

Ale potem pojawia się problem ze znalezieniem odpowiednich wtyczek, które przekształcą Twój piękny układ w funkcjonalny kurs online. Istnieje wiele wspaniałych wtyczek członkowskich i systemów zarządzania nauczaniem o różnym stopniu kosztów i złożoności. Celem tego posta było umożliwienie Ci rozpoczęcia korzystania ze świetnie wyglądającej strony z e-kursami z prostym członkostwem i niskim kosztem. Dla tych z was, którzy mają nadzieję stworzyć to za pomocą darmowych wtyczek, przepraszam, że się rozczaruję. Chodzi mi o darmowe wtyczki, ale pomyślałem, że najlepiej użyć wersji Pro do tego samouczka, ponieważ moim zdaniem efekt końcowy jest wart każdego grosza.

Czekam na kontakt z Państwem w komentarzach

Pozdrawiam!