天天看點

使用Divi建立線上學習管理 (LMS) 網站

作者:WP建站指南

我喜歡線上學習課程。開始一個設計良好、組織良好、内容豐富的線上課程是有道理的。如果做得好,這些線上課程可以讓您充滿成就感。但是學習一門很棒的線上課程和建立一個線上課程是兩種完全不同的體驗。根據我的經驗,建立學習管理/線上課程網站可能是一個艱苦的過程。

在這篇文章中,我希望通過向您展示如何使用Divi及其預制的學習管理布局包來建立一個功能齊全的線上課程網站,來消除建構您自己的線上課程的恐懼。

在我們開始建構網站之前,以下是我們将共同完成的工作的細目分類:

本文網址:https://wpzhanzhang.eastfu.com/shi-yong-divi-chuang-jian-zai-xian-xue-xi-guan-li-lms-wang-zhan/

要建立免費網站和部落格?從易服客建站平台( https://eastfu.cn/ )開始

500M免費空間,可更新為20GB電子商務網站

0元建立免費網站

  1. 使用現有布局的片段建立課程頁面
  2. 建立一個課程菜單,顯示在每個課程頁面上,顯示該課程的所有課程
  3. 使用WP Complete 插件讓使用者能夠跟蹤每門課程的進度
  4. 使用Restrict Content Pro 插件建立免費和付費會員級别
  5. 了解如何使用現有布局中的元素快速設計會員頁面以比對網站

而且,為了滿足您的好奇心,先睹為快,下面是你将使用側邊欄中課程菜單上方的完成按鈕和進度條建立的課程頁面。

使用Divi建立線上學習管理 (LMS) 網站

但首先,讓我們設定一下。

目錄

使用 Divi 建立學習管理 (LMS) 網站

設定一切#1 – 安裝 Divi#2 – 将布局包上傳到您的 Divi 庫#3 – 安裝并激活 Restrict Content Pro 插件#4 – 安裝并激活 WP Complete Pro 插件

重命名課程頁面

建構課程頁面更改簡介内容

建立自定義小部件區域

添加課程進度跟蹤

啟用課程頁面的完整按鈕

将完成按鈕添加到課程頁面

建立會員頁面

添加免費訂閱級别

添加進階訂閱級别

根據訂閱級别限制課程

更改受限内容的重定向頁面

添加您的支付網關

自定義您的電子郵件通知

可選的電子郵件營銷內建

現在怎麼辦?

最後的總結

使用 Divi 建立學習管理 (LMS) 網站

設定一切

#1 – 安裝 Divi

確定您安裝了最新版本的 Divi。而且,讓子主題也處于活動狀态總是好的。

#2 – 将布局包上傳到您的 Divi 庫

我們将使用Divi 的學習管理 (LMS) 布局包。下載下傳布局包,解壓縮,然後将 coding-school_All.json 檔案安裝到您的 Divi 庫中。然後使用每個相應的布局建立九個新頁面。

#3 – 安裝并激活 Restrict Content Pro 插件

Restrict Content Pro是我們将用于線上課程網站會員功能的插件。我們将使用它來設定課程的免費和進階(付費)訂閱。

#4 – 安裝并激活 WP Complete Pro 插件

該插件将用于讓成員(或學生)在完成每門課程的每節課時了解他們的進度。它有很酷的圓圈和條形圖視覺效果來顯示進度,并在導航菜單中每個已完成的課程旁邊有一個友善的複選标記。

一切就緒後,您就可以開始建構電子課程了。

讓我們開始吧。

重命名課程頁面

您的布局包帶有課程頁面布局。

使用Divi建立線上學習管理 (LMS) 網站

該布局上列出的每門課程(如果您計劃教授所有這些課程)都應連結到使用課程頁面布局的特定課程頁面。

使用Divi建立線上學習管理 (LMS) 網站

注意:請注意,我用視訊子產品替換了上面課程頁面标題中的按鈕。這樣我就不必重定向到不同的頁面來顯示課程的預覽。隻是一個想法。

如您所見,對于此示例,課程頁面布局使用的是使用者體驗設計課程,是以繼續編輯頁面并将課程頁面名稱從“課程”更改為“使用者體驗設計”。并更新您的永久連結。

使用Divi建立線上學習管理 (LMS) 網站

建構課程頁面

您的新課程頁面現在命名為“UX 設計”,按章節(您也可以将它們視為課程)分解,并對每個章節進行簡短描述。這些章節/課程中的每一個都需要重定向到其自己的課程頁面。要建構此課程頁面,我們将使用課程頁面布局并進行一些調整。

UX 設計課程頁面中列出的第一章/課程稱為“第 1 章:基礎知識簡介”。讓我們為此建構我們的課程頁面。

繼續并添加一個新頁面并輸入“Chapter 1 : An Introduction to the Basics”作為标題。

由于本課是 UX 設計課程頁面的子頁面,是以單擊右側欄中頁面屬性框内的父級下拉菜單,然後選擇 UX 設計作為父級。

接下來單擊以使用 Divi Builder,單擊“從庫中添加”,然後選擇“課程布局”。

使用Divi建立線上學習管理 (LMS) 網站

儲存草稿

現在單擊以使用 Visual Builder 對頁面布局進行一些調整。首先,讓我們稍微改變一下頂部的頁眉布局。從可視化建構器中,删除右欄中的圖像子產品和第一欄底部的綠色按鈕。

使用Divi建立線上學習管理 (LMS) 網站

接下來單擊以編輯第一列頂部文本子產品的設定,并将 h1 标題文本更改為“第 1 章:基礎知識簡介”。

使用Divi建立線上學習管理 (LMS) 網站

然後将行的列結構更改為一列而不是兩列。

使用Divi建立線上學習管理 (LMS) 網站

現在你的标題應該是這樣的。

使用Divi建立線上學習管理 (LMS) 網站

更改簡介内容

在下面的專業部分,編輯左側内容部分中第一個簡介的設定并更新以下内容:

内容标簽

标題:第 1 部分

内容:[這将成為您的課程内容;我暫時将模拟内容留在這裡]

使用圖示:是

圖示:選擇右箭頭圖示

使用Divi建立線上學習管理 (LMS) 網站

注意:圖示顔色将取自主題定制器中設定的主題強調色,是以請確定使用與網站比對的顔色更新那裡的顔色。

儲存設定

現在您已經建立了一個 blurb 子產品,我們可以使用它作為模闆來分解頁面上課程的每個部分。繼續複制您剛剛建立的子產品兩次(或您想要的任何部分)并用不同的标題更新每個子產品(即第 2 部分、第 3 部分等)。

然後删除我們不再需要的其他簡介。

現在你的布局應該是這樣的。

使用Divi建立線上學習管理 (LMS) 網站

在專業部分右側邊欄的按鈕子產品下添加一個側邊欄子產品。而且,現在,隻需保留拉出側邊欄小部件區域内容的預設内容設定。我們最終會在建立包含課程菜單的自定義小部件區域後立即更改它。

在内容頁籤下,為您的子產品添加白色背景。

要使側邊欄子產品與頁面設計相比對,請按如下方式更新設計頁籤中的設定:

自定義邊距:-80px 頂部

自定義填充:30px 頂部,40px 右側,30px 底部,40px 左側

框陰影水準位置:0px

框陰影垂直位置:0px

框陰影模糊強度:60px

框陰影擴散強度:0px

陰影顔色:rgba(71) ,74,182,0.12)

動畫風格:縮放

動畫方向:向上

動畫強度:20%

動畫起始不透明度:100%

儲存設定

注意:最好繼續将其作為一個全局子產品,這樣您隻需對一個子產品進行調整以供将來更新。為此,選擇添加到庫,将其命名為“課程菜單側邊欄子產品”,選擇使其成為全局子產品,然後單擊“儲存”。

最後,删除帶有講師和“完整配置檔案”按鈕子產品的簡介子產品。您的頁面應如下所示:

使用Divi建立線上學習管理 (LMS) 網站

儲存頁面

現在我們已經建構了我們的課程頁面之一,讓我們将它儲存到我們的庫中,以便我們可以将它用于其他課程。從可視化建構器中,單擊底部菜單中的“添加到庫”按鈕,輸入“課程頁面布局”作為模闆名稱,然後儲存。

使用Divi建立線上學習管理 (LMS) 網站

繼續并重複上述步驟以添加另外兩個課程頁面。隻是這一次,不使用課程頁面布局,而是使用您建立的稱為“課程頁面布局”的新布局。

完成後,您應該建立了三個具有以下标題的課程頁面:

第 1 章:基礎知識介紹

第 2 章:資訊架構

第 3 章:響應式設計

使用Divi建立線上學習管理 (LMS) 網站

現在您已經建立了課程,我們可以建構我們的課程菜單。在 WordPress 儀表闆中,轉到外觀 > 菜單。

在“菜單”頁面中,完成以下步驟:

1. 選擇“建立新菜單”

2. 将其命名為“UX 設計”

3. 選擇您剛剛建立的菜單的三個課程頁面/章節。

4. 單擊添加到菜單

5. 儲存菜單

使用Divi建立線上學習管理 (LMS) 網站

建立自定義小部件區域

要将菜單添加到我們的課程頁面,我們首先需要為其建立一個自定義小部件區域。從 WordPress 儀表闆,轉到外觀 > 小部件。在現有小部件區域下,找到用于建立新小部件區域的框。輸入名稱“UX Design”并單擊“Create”。現在重新整理頁面。您現在應該看到新的自定義“UX 設計”小部件區域。将自定義菜單小部件拖到“UX 設計”小部件區域的内部。在自定義菜單小部件中,選擇菜單“UX 設計”。然後單擊儲存。

使用Divi建立線上學習管理 (LMS) 網站

現在您已經使用課程菜單建立了小部件區域,傳回到您建立的課程頁面并更新側邊欄子產品以選擇小部件區域“UX Design”。現在您的菜單應該出現在側邊欄中。

使用Divi建立線上學習管理 (LMS) 網站

注意:如果您将側邊欄子產品設為全局,則隻需對該子產品進行一次此調整,其他兩個将自動更新。

在這一點上,我們已經為建立我們的課程和我們的課程打下了良好的基礎,是以讓我們通過合并課程進度跟蹤來改進我們的使用者體驗。

添加課程進度跟蹤

在您的線上課程網站上添加課程進度跟蹤是提升使用者體驗、參與度和參加課程積極性的好方法。為了顯示我們每門課程的進度,我将使用 WP Complete Pro 插件。如果您還沒有確定安裝并啟用插件。

啟用插件後,從您的 WordPress 儀表闆轉到設定 > WPComplete。這将帶您進入插件設定。

更新以下設定:

學生角色類型:訂戶

課程内容類型:頁面類型(因為我們是用頁面而不是文章來建構課程)

取消選中“自動為我啟用的文章和頁面添加完整按鈕”選項。(我們将使用短代碼手動添加這些按鈕。)

标記完成按鈕顔色:#7377fc

圖形設定原色:#7377fc

然後單擊儲存更改。

使用Divi建立線上學習管理 (LMS) 網站

啟用課程頁面的完整按鈕

現在我們已經完成了 WP Complete 設定。讓我們将我們的“完成”按鈕添加到我們的課程頁面。

轉到我們建立的标題為“第 1 章:基礎知識簡介”的第一課頁面,然後單擊以編輯該頁面。在預設頁面編輯器中,找到頁面底部的 WPComplete 框。在框内,單擊“啟用完成按鈕”選項。這将告訴插件您要為使用者跟蹤此頁面。接下來,在“This is a part of:”後面的輸入框中輸入“UX Design”,這是您要跟蹤的課程的名稱。這就是您在每門課程下對課程進行分組的方式。例如,如果您有三節課,并且在每節課頁面上都選擇“UX 設計”作為課程,當使用者通過單擊完成按鈕完成頁面時,插件能夠記錄使用者已完成 33%該課程的(3 節課中的 1 節)。如果你有多門課程,

使用Divi建立線上學習管理 (LMS) 網站

将完成按鈕添加到課程頁面

要将“完成”按鈕添加到您的課程頁面,請在您剛剛編輯的同一課程頁面上部署可視化建構器。

在頁面底部的最後一個 blurb 子產品下添加一個文本子產品。在文本設定中,在内容框中輸入以下簡碼:

[wpc_button text=”點我完成!” completed_text=”耶!完成了”]

注意:您可以通過修改短代碼中的文本來更改按鈕上顯示的文本和完成的文本。

儲存設定

使用Divi建立線上學習管理 (LMS) 網站

此簡碼建立一個按鈕,允許使用者單擊它并将課程記錄為完成。

使用Divi建立線上學習管理 (LMS) 網站

請注意,當您單擊按鈕完成課程時,側邊欄中相應課程的菜單項将略微淡化并在其右側顯示一個複選标記。

使用Divi建立線上學習管理 (LMS) 網站

繼續将您剛剛建立的文本子產品儲存到您的庫中,名稱為“Complete Button”。現在,您可以根據需要使用該庫項目在所有頁面上輸入相同的子產品。

注意:您可能希望繼續将包含完成按鈕的新版本課程頁面布局儲存到您的庫中,這樣您在建構未來課程頁面時就不必繼續将其添加為次要項目。

WPComplete 插件還允許您顯示圖表,向使用者顯示他們在特定課程中的進度。我們将在課程的側邊欄中添加一個條形圖來顯示 UX 設計課程的進度。

還記得我們如何為 UX 設計課程建立自定義小部件區域以在課程頁面側邊欄中顯示課程菜單嗎?那麼現在我們要在課程菜單的正上方添加一個進度條圖。這樣使用者就可以在炫酷的視覺顯示中看到他們的進度。

要添加條形圖,請轉到您的 WordPress 儀表闆并導航至Appearence > Widgets。然後切換打開您之前建立的“UX Design”自定義小部件,并将 HTML 小部件拖到目前存在的自定義菜單小部件頂部的小部件區域中。在 HTML 内容框中,輸入以下簡碼:

[wpc_progress_bar course=”使用者體驗設計”]

使用Divi建立線上學習管理 (LMS) 網站

此短代碼将顯示特定課程“UX 設計”的進度條圖。該課程名稱對應于您在“This is a part of:”旁邊的 WPComplete 框選項中輸入的内容。如果您将來有另一門課程,隻需在為該課程添加簡碼時在“UX Design”位置輸入新課程名稱即可。

注意:有關此插件可用的簡碼的完整清單,請轉到簡碼備忘單。

現在轉到“第 1 章:基礎知識簡介”以檢視它的外觀。

單擊頁面底部的完成按鈕。現在檢視側邊欄,看看發生了什麼變化。條形圖現在顯示您已完成課程的 33%。課程頁面的菜單項現在顯示為褪色,右側帶有複選标記,表明該課程已完成。

使用Divi建立線上學習管理 (LMS) 網站

很酷吧?

讓我們回顧一下到目前為止我們所擁有的:

1. 我們有一個新的課程頁面模闆,作為我們未來課程的轉到模闆

2. 我們有一個為每門課程建立自定義菜單的系統。

3. 我們有一個系統可以為每門課程設定自定義小部件區域,以在課程頁面上顯示該特定課程的自定義菜單。

4. 我們可以在我們的課程頁面上添加一個完成按鈕,單擊該按鈕後,會在條形圖和相應的菜單連結中顯示進度。

将我們的網站變成功能性線上課程的最後階段是整合會員級别,以将我們的内容限制為付費客戶。

建立會員頁面

如果您還沒有這樣做,請安裝并啟用 Restrict Content Pro 插件。安裝後,該插件将自動建立 5 個頁面來處理會員流程。

使用Divi建立線上學習管理 (LMS) 網站

如果您在預設頁面編輯器中檢視每個頁面,您會發現每個頁面的内容中唯一添加的是簡碼。例如,如果您轉到“注冊”頁面,您會看到内容編輯器中唯一顯示系統資料庫單的簡碼“[register_form]”。

使用Divi建立線上學習管理 (LMS) 網站

由于您需要顯示每個自動生成頁面的内容的是短代碼,是以您可以使用 Divi Builder 輕松地為這些頁面建構布局。例如,如果您想要一種快速簡便的方法來自定義您的注冊頁面,請轉到您的課程頁面并部署可視化建構器。使用名稱“電子課程頁面标題”(或類似名稱)将布局的頂部部分儲存到您的庫中。

使用Divi建立線上學習管理 (LMS) 網站

然後單擊其中一個顯示課程的簡介,并将該子產品儲存到您的庫中,名稱為“e-course blurb content box”(或類似名稱)。

使用Divi建立線上學習管理 (LMS) 網站

現在轉到您的注冊頁面,将簡碼複制到剪貼闆(突出顯示簡碼并單擊 ctrl + c)。然後部署 Divi Builder,然後部署可視化建構器。從您的圖書館添加名為“電子課程頁眉”的新儲存部分。

使用Divi建立線上學習管理 (LMS) 網站

将包含标題的文本子產品更新為“Register”而不是“Courses”。

使用Divi建立線上學習管理 (LMS) 網站

然後單擊以在該部分的目前子產品下從您的庫中添加一個子產品。選擇您剛剛儲存到庫中的“電子課程簡介内容框”子產品。

使用Divi建立線上學習管理 (LMS) 網站

然後按如下方式更新設定:

在内容頁籤下…

擦除标題

内容:按 ctrl + v 輸入您儲存到剪貼闆的短代碼 [re​gister_form]。

擦除圖像 url

儲存設定

使用Divi建立線上學習管理 (LMS) 網站

注意:這是快速簡便的方法。我使用了一個 blurb 子產品,因為這是引入子產品樣式的最快方法。您可能希望改用文本子產品。

現在在隐身浏覽器中檢視您的注冊頁面。

使用Divi建立線上學習管理 (LMS) 網站

您仍然需要自定義表單的設計(在本教程中不打算這樣做),但這可以通過一些檢查和自定義 CSS 輕松完成。

您可以按照相同的過程來更新插件生成的所有 5 個會員頁面。要檢視哪些頁面被用于處理會員資格,請轉到 WordPress 儀表闆并導航至“Restrict ”>“設定”,您将在“正常”頁籤下看到所有正在使用的頁面的清單。

添加免費訂閱級别

向您的線上課程添加免費訂閱級别是捕獲潛在客戶、将其添加到電子郵件營銷活動并以進階會員資格追加銷售的好方法。要添加免費訂閱級别,請轉到 WordPress 儀表闆并導航至Restrict > 訂閱級别。然後填寫設定以建立您的免費會員資格。以下是免費訂閱級别的輸入示例:

名稱:FREE

描述:這是 Coding School 的免費訂閱。

使用者角色:訂戶

将其他選項保留為預設設定。

然後點選添加會員級别

使用Divi建立線上學習管理 (LMS) 網站

添加進階訂閱級别

進階會員通常是您可以付費通路免費會員無法通路的更進階别内容的地方。與免費會員一樣,使用者必須在系統資料庫上注冊。唯一的差別是他們将被定向到付款表格以購買訂閱。如果使用者已經是免費會員,他們可以使用他們目前的注冊資訊更新到進階訂閱,然後支付更新費用。

要添加 Premium 訂閱級别,請轉到 WordPress 儀表闆并導航至Restrict > 訂閱級别。然後填寫設定以建立您的進階訂閱。以下是為進階訂閱級别輸入内容的示例:

名稱:進階

說明:這是 Coding School 的進階訂閱

持續時間:1 年

價格:29

使用者角色:訂閱者

使用Divi建立線上學習管理 (LMS) 網站

根據訂閱級别限制課程

現在我們已經建立了免費和進階訂閱級别。我們可以根據使用者的訂閱級别選擇限制頁面/文章甚至特定内容。該插件使這個過程非常簡單。讓我們開始吧,将我們建立的第一課的通路權限限制為免費訂閱。為此,請去編輯标題為“第 1 章:基礎知識簡介”的課程頁面。請注意頁面編輯器頂部的“限制此内容”框。在該框中,您有一個下拉輸入框,允許您選擇誰應該有權通路内容。您要選擇訂閱級别的成員. 選擇後,您會看到更多選項出現。選擇第一個選項“任何訂閱級别的成員”。那是因為我們希望擁有進階訂閱的會員也可以通路此内容。

使用Divi建立線上學習管理 (LMS) 網站

注意:此設定将對非訂閱使用者隐藏整個頁面。如果您想隐藏頁面上的某些内容并使其僅對免費或進階訂閱者可用,您可以使用短代碼來包裝您想要隐藏的内容。由于我們使用的是 divi 建構器,是以使用短代碼包裝内容可能具有挑戰性,但您可以考慮做的一件事是僅使用短代碼将内容包裝在 blurbs 的實際内容框中,并使标題可見。

對于标題為“第 2 章:資訊架構”的下一課,我們将把頁面限制為僅限進階訂閱者。為此,請轉到編輯頁面并在頁面編輯器頂部的“限制此内容”框中,選擇訂閱級别的成員。然後選擇“特定訂閱級别的成員”選項。然後選擇“進階”。現在隻有擁有進階訂閱的人才能通路該頁面。

通過更新頁面儲存您的更改。

使用Divi建立線上學習管理 (LMS) 網站

更改受限内容的重定向頁面

當使用者試圖通路受限制的内容時,您可以将使用者重定向到特定頁面。由于我們希望使用者注冊以通路課程,是以我們将使用者重定向到注冊頁面是有道理的。為此,請轉到 WordPress 儀表闆并導航至“Restrict”>“設定”,然後單擊“雜項”頁籤。找到重定向頁面選項,然後從下拉輸入框中選擇注冊頁面。

使用Divi建立線上學習管理 (LMS) 網站

儲存選項

現在,每次非訂閱使用者嘗試通路受限頁面時,他們都會自動重定向到注冊頁面。

你可以很快地測試這個。儲存頁面并在隐身浏覽器中打開頁面,以檢視使用者在尚未注冊時看到的内容。

注意:如果您願意,可以為此用例建立一個額外的注冊頁面,以便您可以包含更具體的号召性用語,例如“抱歉,您目前無權通路此内容,請在下方注冊。” 用下面的登記表。

添加您的支付網關

此時您需要確定您的支付網關已與 Restrict Content Pro 內建。您可以通過導航到“Restrict”>“設定”并單擊“付款”頁籤來執行此操作。在那裡您可以選擇要啟用的網關以及輸入內建網關所需的資訊。您有九個選項可供選擇,包括 Stripe 和 Paypal。

使用Divi建立線上學習管理 (LMS) 網站

我不會詳細介紹設定這些設定所涉及的細節,但我的建議是確定并徹底測試您的支付網關以確定它們正常工作。

自定義您的電子郵件通知

Restrict Content Pro 允許您在新會員注冊時為新會員和管理者自定義通知電子郵件。通過在電子郵件正文中包含一個好的号召性用語來利用此選項,鼓勵使用者通過指向第一課的連結開始課程。您可以通過轉到“Restrict”>“設定”并單擊“電子郵件”頁籤來找到電子郵件設定。

使用Divi建立線上學習管理 (LMS) 網站

可選的電子郵件營銷內建

您可能有一個 Mailchimp 或Aweber帳戶,您希望在他們注冊時将其添加到其中。您可以使用 Restrict Content Pro 插件提供的衆多附加元件之一來做到這一點。隻需導航至“Restrict”>“附加元件”,然後找到您想要的電子郵件平台。

使用Divi建立線上學習管理 (LMS) 網站

現在怎麼辦?

現在您已經設定了您的線上課程網站,您仍然需要完成每個頁面的所有内容設定、向按鈕添加 URL 以及許多其他調整。但是基礎已經打好了。希望這能讓您設定一個可以輕松建構的平台。

最後的總結

有人可能會争辯說,使用 WordPress 世界中所有出色的工具,您可以非常輕松地開始和運作線上課程。但随之而來的是設計的挑戰。如果設計不是您的強項,那麼讓這些網站看起來不錯并不容易。幸運的是, “學習管理布局包”等預制Divi 布局為設計問題提供了很好的解決方案。開箱即用的布局既實用又美觀。

但是接下來的問題是找到合适的插件将您漂亮的布局轉換為實用的線上課程。有許多很棒的 WordPress 會員插件和學習管理系統插件,它們的成本和複雜程度各不相同。這篇文章的目的是讓您以低成本建立并運作一個具有簡單會員資格的精美線上課程網站。對于那些希望使用免費插件建立它的人,很抱歉讓他們失望了。我認為本教程最好使用 Pro 版本,因為在我看來最終結果物有所值。

繼續閱讀