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

我喜歡在線學習課程。 開始一個精心設計、組織良好的電子課程，其中包含一些很棒的內容。 如果做得好，這些電子課程可以讓你充滿成就感。 但是從優秀的電子課程中學習和創建一個是兩種完全不同的體驗。 根據我的經驗，創建學習管理或電子課程網站可能是一個壓倒性的過程。

在這篇文章中，我希望通過向您展示如何使用 Divi 的預製學習管理佈局包來創建一個功能齊全的電子課程網站，從而擺脫構建自己的電子課程的恐懼。

在我們開始建造之前，以下是我們將共同完成的工作的細分：

1. 使用現有佈局的一部分創建課程頁面。
2. 創建一個課程菜單，顯示在每個課程頁面上，顯示該課程的所有課程。
3. 使用 WP Complete Plugin 讓用戶能夠跟踪他們每門課程的進度。
4. 使用 Restrict Content Pro 插件設置免費和付費會員級別。
5. 了解如何使用現有佈局中的元素快速設計會員頁面以匹配網站。
和更多…

而且，為了滿足您的好奇心，這裡是您將使用側邊欄中課程菜單上方的完整按鈕和進度條創建的課程頁面的先睹為快……

但首先，讓我們把事情做好。

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

訂閱我們的 YouTube 頻道

設置一切

#1 – 安裝 Divi

確保您安裝了最新版本的 Divi。 而且，讓兒童主題也處於活動狀態總是好的。

#2 – 將佈局包上傳到您的 Divi 庫

我們將使用 Divi 的學習管理 (LMS) 佈局包。 下載佈局包，解壓縮，然後將 coding-school_All.json 文件安裝到您的 Divi 庫中。 然後使用每個相應的佈局創建九個新頁面。

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

這是我們將用於電子課程網站會員功能的插件。 我們將使用它來設置課程的免費和高級（付費）訂閱。

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

該插件將用於讓成員（或學生）在完成每門課程的每一節課時了解他們的進度。 它有很酷的圓形和條形圖視覺效果來顯示進度以及導航菜單中每個已完成課程旁邊的方便的複選標記。

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

讓我們開始吧。

重命名課程頁面

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

該佈局上列出的每門課程都應該（如果您計劃教授所有這些課程）鏈接到使用課程頁面佈局的特定課程頁面。

注意：請注意，我用視頻模塊替換了上面課程頁面標題中的按鈕。 這樣我就不必重定向到不同的頁面來顯示課程的預覽。 只是一個想法。

如您所見，對於此示例，課程頁面佈局使用 UX 設計課程，因此請繼續編輯頁面並將課程頁面名稱從“課程”更改為“用戶體驗設計”。 並更新您的永久鏈接。

構建課程頁面

你的新課程頁面，現在命名為“用戶體驗設計”，由章節（你也可以將它們視為課程）分解，每個章節都有簡短的描述。 這些章節/課程中的每一個都需要重定向到自己的課程頁面。 為了構建本課程頁面，我們將使用課程頁面佈局並進行一些調整。

UX 設計課程頁面中列出的第一章/課程稱為“第 1 章：基礎介紹”。 讓我們為此建立我們的課程頁面。

繼續添加一個新頁面並輸入“第 1 章：基礎介紹”作為標題。

由於本課程是 UX Design 課程頁面的子頁面，因此單擊右側邊欄中的 Page Attributes 框內的父級下拉列表，然後選擇 UX Design 作為父級。

接下來單擊以使用 Divi Builder，單擊從庫中添加，然後選擇課程佈局。

保存草稿

調整標題佈局

現在單擊以使用 Visual Builder 對頁面佈局進行一些調整。 首先，讓我們稍微改變一下頂部標題的佈局。 從可視化構建器中，刪除右列中的圖像模塊和第一列底部的綠色按鈕。

接下來點擊編輯第一列頂部文本模塊的設置，並將h1標題文本更改為“第1章：基礎介紹”。

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

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

更改模糊內容

在下面的專業部分，編輯左側內容部分中第一個簡介的設置並更新以下內容：

內容標籤

標題：第 1 部分
內容：[這將成為您課程的內容； 我現在將模擬內容留在那裡]
使用圖標：是
圖標：選擇右箭頭圖標

注意：圖標顏色將取自主題定制器中設置的主題重點顏色，因此請確保使用與站點匹配的顏色更新那裡的顏色。

保存設置

現在您已經創建了一個簡介模塊，我們可以將其用作模板來分解頁面上課程的每個部分。 繼續複製您剛剛創建的模塊兩次（或您想要的任何部分），並用不同的標題更新每個模塊（即第 2 部分、第 3 部分等……）。

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

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

添加側邊欄小部件

在專業部分右側邊欄的按鈕模塊下添加一個邊欄模塊。 並且，現在，只需保留拉取側邊欄小部件區域內容的默認內容設置即可。 我們最終會在創建包含課程菜單的自定義小部件區域後立即更改它。

在內容選項卡下，為您的模塊添加白色背景。

要使側邊欄模塊與頁面設計相匹配，請按如下方式更新設計選項卡中的設置：

自定義邊距：-80px 頂部
自定義填充：頂部 30 像素，右側 40 像素，底部 30 像素，左側 40 像素
框陰影水平位置：0px
Box Shadwo 垂直位置：0px
框陰影模糊強度：60px
框陰影傳播強度：0px
陰影顏色：rgba(71,74,182,0.12)

動畫風格：縮放
動畫方向：向上
動畫強度：20%
動畫開始不透明度：100%

保存設置

注意：最好繼續將其設為全局模塊，這樣您只需對一個模塊進行調整以備將來更新。 為此，請選擇添加到庫，將其命名為“課程菜單側邊欄模塊”，選擇使其成為全局模塊，然後單擊“保存”。

最後，刪除帶有講師和“完整資料”按鈕模塊的簡介模塊。 您的頁面應如下所示：

保存頁面

現在我們已經構建了其中一個課程頁面，讓我們將其保存到我們的庫中，以便我們可以將其用於其他課程。 在可視化構建器中，單擊底部菜單中的“添加到庫”按鈕，輸入“課程頁面佈局”作為模板名稱，然後保存。

繼續並重複上述步驟以添加另外兩個課程頁面。 只是這一次，不是使用課程頁面佈局，而是使用您創建的名為“課程頁面佈局”的新佈局。

完成後，您應該創建三個課程頁面，標題如下：

1. 第 1 章：基礎介紹
2. 第 2 章：信息架構
3. 第 3 章：響應式設計

創建課程菜單

現在您已經創建了課程，我們可以構建我們的課程菜單。 從 WordPress 儀表板，轉到外觀 > 菜單。

從“菜單”頁面，完成以下步驟：

1. 選擇“創建新菜單”
2. 將其命名為“用戶體驗設計”
3. 在您剛剛創建的菜單中選擇三個課程頁面/章節。
4. 單擊添加到菜單
5. 保存菜單

創建自定義小部件區域

要將菜單添加到我們的課程頁面，我們首先需要為其創建一個自定義小部件區域。 從 WordPress 儀表板，轉到外觀 > 小部件。 在現有小部件區域下，找到用於創建新小部件區域的框。 輸入名稱“UX Design”，然後單擊“創建”。 現在刷新頁面。 您現在應該會看到新的自定義“UX Design”小部件區域。 將自定義菜單小部件拖到“UX 設計”小部件區域內。 在自定義菜單小部件中，選擇菜單“UX Design”。 然後點擊保存。

使用新的小部件區域更新課程頁面側邊欄模塊

現在您已經使用課程菜單創建了小部件區域，返回您創建的課程頁面並更新側邊欄模塊以選擇小部件區域“UX Design”。 現在您的菜單應該出現在側邊欄中。

注意：如果您將側邊欄模塊設為全局，則只需對此模塊進行一次調整，其他兩個將自動更新。

在這一點上，我們有一個很好的基礎來創建我們的課程和課程，所以讓我們通過結合課程進度跟踪來改進我們的用戶體驗。

添加課程進度跟踪

將課程進度跟踪添加到您的電子課程網站是在您參加課程時提高用戶體驗、參與度和動力的好方法。 為了顯示我們每門課程的進度，我將使用 WP Complete Pro 插件。 如果您還沒有確保安裝並激活插件。

插件激活後，從您的 WordPress 儀表板，轉到Settings > WPComplete 。 這將帶您進入插件設置。

更新以下設置：

學生角色類型：訂閱者
課程內容類型：頁麵類型（因為我們使用頁面而不是帖子來構建我們的課程）
取消選中“自動為我啟用的帖子和頁面添加完整按鈕”選項。 （我們將使用短代碼手動添加這些按鈕。）
標記完整按鈕顏色：#7377fc
圖形設置原色：#7377fc

然後單擊保存更改。

啟用課程頁面的完整按鈕

現在我們有 WP Complete 設置。 讓我們將“完成”按鈕添加到我們的課程頁面。

轉到我們創建的第一個課程頁面，標題為“第 1 章：基礎介紹”，然後單擊以編輯該頁面。 在默認頁面編輯器中，找到頁面底部的 WPComplete 框。 在框中，單擊“啟用完成按鈕”選項。 這將告訴插件您要為用戶跟踪此頁面。 接下來，在“This is a part of:”後面的輸入框中輸入“UX Design”，這是您要跟踪的課程的名稱。 這就是您對每門課程下的課程進行分組的方式。 例如，如果您有三節課並且在每個課程頁面上選擇“UX Design”作為課程，則當用戶通過單擊完成按鈕完成頁面時，插件能夠記錄用戶已完成 33% （3 節課中的 1 節課）。 如果你有多個課程，你可以簡單地在框中輸入一個新的課程名稱，它就會開始一個新的課程組。

將完整按鈕添加到課程頁面

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

在頁面底部的最後一個模糊模塊下添加一個文本模塊。 在文本設置中，在內容框中輸入以下短代碼：

[wpc_button text="點擊我完成！" Completed_text="YAY! 完全的”]

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

保存設置

此短代碼創建一個按鈕，允許用戶單擊它並將課程記錄為完成。

請注意，當您單擊按鈕完成課程時，相應課程側邊欄中的菜單項將略微淡出並在其右側顯示一個複選標記。

繼續並使用名稱“完成按鈕”將您剛剛創建的文本模塊保存到您的庫中。 現在，您可以根據需要使用該庫項目在所有頁面上輸入相同的模塊。

注意：您可能想要繼續將新版本的課程頁面佈局保存到您的庫中，並包含完成按鈕，以便在構建未來課程頁面時不必繼續將其添加為次要項目。

將進度條圖添加到側邊欄

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

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

要添加條形圖，請轉到 WordPress 儀表板並導航到Appearence > Widgets 。 然後切換打開您之前創建的“UX Design”自定義小部件，並將一個 HTML 小部件拖入當前存在的自定義菜單小部件頂部的小部件區域。 在 HTML 內容框中，輸入以下短代碼：

[wpc_progress_bar course="UX Design"]

此短代碼將顯示特定課程“UX 設計”的進度條圖。 該課程名稱對應於您在“This is a part of:”旁邊的 WPComplete 框選項中輸入的內容。 如果您將來有其他課程，只需在添加該課程的短代碼時在“UX Design”處輸入新課程名稱即可。

注意：有關此插件可用的短代碼的完整列表，請訪問短代碼備忘單。

現在轉到“第 1 章：基礎介紹”以查看它的外觀。

單擊頁面底部的“完成”按鈕。 現在查看側邊欄，看看發生了什麼變化。 條形圖現在顯示您已經完成了 33% 的課程。 課程頁面的菜單項現在顯示為淡色，右側有一個複選標記，表示該課程已完成。

很酷吧？

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

1. 我們有一個新的課程頁面模板作為我們接下來課程的模板
2. 我們有一個系統可以為每門課程創建自定義菜單。
3. 我們有一個系統可以為每門課程設置自定義小部件區域，以便在課程頁面上顯示該特定課程的自定義菜單。
4. 我們可以在我們的課程頁面中添加一個完整的按鈕，當點擊該按鈕時，會在條形圖和相應的菜單鏈接中表示進度。

將我們的網站轉變為功能性電子課程的最後階段是整合會員級別，以將我們的內容限制為付費客戶。

建立會員頁面

如果您還沒有這樣做，請安裝並激活 Restrict Content Pro 插件。 安裝後，插件將自動創建 5 個頁面來處理會員流程。

如果您在默認頁面編輯器中查看每個頁面，您將看到添加到每個頁面內容中的唯一內容是短代碼。 例如，如果您轉到註冊頁面，您將看到內容編輯器中唯一的內容是顯示註冊表格的短代碼“[register_form]”。

由於顯示這些自動生成的每個頁面的內容所需的只是短代碼，因此您可以使用 Divi Builder 輕鬆地為這些頁面構建佈局。 例如，如果您想要一種快速簡便的方法來自定義您的註冊頁面，請轉到您的課程頁面並部署可視化構建器。 使用名稱“電子課程頁眉”（或類似名稱）將佈局的頂部保存到您的庫中。

然後單擊顯示課程的簡介之一，並將該模塊以“電子課程簡介內容框”（或類似名稱）的名稱保存到您的庫中。

現在轉到您的註冊頁面，將短代碼複製到剪貼板（突出顯示短代碼並單擊 ctrl + c）。 然後部署 Divi Builder，然後是可視化構建器。 從您的庫中添加名為“電子課程頁眉”的新保存部分。

將包含標題的文本模塊更新為“註冊”而不是“課程”。

然後單擊以在該部分的當前模塊下添加庫中的模塊。 選擇您剛剛保存到庫中的“電子課程簡介內容框”模塊。

然後按如下方式更新設置：

在內容選項卡下...

刪除標題
內容：按 ctrl + v 輸入您保存到剪貼板的短代碼 [register_form]。
刪除圖片網址

保存設置

注意：這是快速簡便的方法。 我使用了一個模糊模塊，因為這是引入模塊風格的最快方法。 您可能希望改用文本模塊。

現在在隱身瀏覽器中查看您的註冊頁面。

您仍然需要自定義表單的設計（在本教程中不會這樣做），但這可以通過一些檢查和自定義 CSS 輕鬆完成。

您可以按照相同的過程更新插件生成的所有 5 個會員頁面。 要查看正在使用哪些頁面來處理會員資格，請轉到 WordPress 儀表板並導航至限制 > 設置，您將在“常規”選項卡下看到正在使用的所有頁面的列表。

添加免費訂閱級別

將免費訂閱級別添加到您的電子課程是捕獲潛在客戶、將其添加到電子郵件營銷活動中並以高級會員身份向他們追加銷售的好方法。 要添加免費訂閱級別，請轉到 WordPress 儀表板並導航到限制 > 訂閱級別。 然後填寫設置以創建您的免費會員資格。 以下是免費訂閱級別輸入內容的示例：

名稱：免費
描述：這是對 Coding School 的免費訂閱。
用戶角色：訂閱者

將其他選項保留為默認設置。

然後點擊添加會員級別

添加高級訂閱級別

高級會員資格通常是您可以收費以訪問免費會員資格無法訪問的更高級別內容的地方。 就像免費會員一樣，用戶必須在註冊表上註冊。 唯一的區別是他們將被定向到付款表格以購買訂閱。 如果用戶已經是免費會員，他們可以使用他們當前的註冊信息升級到高級訂閱，然後支付升級費用。

要添加 Premiumn 訂閱級別，請轉到 WordPress 儀表板並導航到限制 > 訂閱級別。 然後填寫設置以創建您的高級訂閱。 以下是高級訂閱級別輸入內容的示例：

名稱： 高級
描述：這是 Coding School 的高級訂閱
持續時間：1年
價格：29
用戶角色：訂閱者

根據訂閱級別限制課程

現在我們已經創建了免費和高級訂閱級別。 我們可以根據用戶訂閱級別選擇限制頁面/帖子甚至特定內容。 該插件使這個過程非常簡單。 讓我們先把對我們創建的第一課的訪問限制為免費訂閱。 為此，請編輯標題為“第 1 章：基礎知識簡介”的課程頁面。 請注意頁面編輯器頂部的“限制此內容”框。 在該框中，您有一個下拉輸入框，可讓您選擇應有權訪問內容的人員。 您將選擇訂閱級別的成員。 選擇後，您將看到更多選項出現。 選擇第一個選項“任何訂閱級別的成員。 那是因為我們希望擁有高級訂閱的會員也可以訪問此內容。

注意：此設置將對非訂閱用戶隱藏整個頁面。 如果您想隱藏頁面上的某些內容並使其僅供免費或高級訂閱者使用，您可以使用短代碼來包裝您想要隱藏的內容。 由於我們使用的是 divi 構建器，因此使用短代碼來包裝內容可能具有挑戰性，但您可以考慮做的一件事是僅用短代碼包裝宣傳語的實際內容框中的內容，並使標題可見。

在下一節題為“第 2 章：信息架構”的課程中，我們將把頁面限制為僅限高級訂閱者。 為此，請轉到編輯頁面，然後在頁面編輯器頂部的“限制此內容”框中，選擇訂閱級別的成員。 然後選擇選項“特定訂閱級別的成員。 然後選擇“高級”。 現在只有擁有高級訂閱的人才能訪問該頁面。

通過更新頁面來保存您的更改。

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

當用戶嘗試訪問受限制的內容時，您可以將用戶重定向到某個頁面。 由於我們希望用戶註冊以獲得課程的訪問權限，因此我們將用戶重定向到註冊頁面是有意義的。 為此，請轉到 WordPress 儀表板並導航到限制 > 設置，然後單擊其他選項卡。 找到重定向頁面選項並從下拉輸入框中選擇註冊頁面。

保存選項

現在，每次非訂閱用戶嘗試訪問受限頁面時，他們都會自動重定向到註冊頁面。

你可以快速測試這個。 保存頁面並在隱身瀏覽器中打開頁面，以查看用戶尚未註冊時看到的內容。

注意：如果您願意，可以為此用例創建一個額外的註冊頁面，以便您可以包含更具體的號召性用語，例如“抱歉，您目前無權訪問此內容，請在下方註冊。” 與下面的註冊表單。

添加您的支付網關

此時，您需要確保您的支付網關與 Restrict Content Pro 集成。 您可以通過導航到限制 > 設置並單擊付款選項卡來執行此操作。 在那裡您可以選擇要啟用的網關以及輸入集成網關所需的信息。 您有九個選項可供選擇，包括 Stripe 和 Paypal。

我不會詳細介紹這些設置所涉及的細節，但我的建議是確保並徹底測試您的支付網關以確保它們正常工作。 你不想虧錢。

自定義您的電子郵件通知

Restrict Content Pro 允許您在新成員註冊時為新成員和管理員自定義通知電子郵件。 通過在電子郵件正文中包含一個很好的號召性用語來鼓勵用戶通過指向第一課的鏈接開始課程，從而利用此選項。 您可以通過轉至限制 > 設置並單擊電子郵件選項卡來找到電子郵件設置。

可選的電子郵件營銷集成

您可能有一個 Mailchimp 或 Aweber 帳戶，您希望在他們註冊時將其添加到其中。 您可以使用 Restrict Content Pro 插件提供的眾多附加組件之一來做到這一點。 只需導航到“限制”>“加載項”並找到您想要的電子郵件平台。

現在怎麼辦？

現在您已經設置了您的電子課程網站，您仍然需要為每個頁面完成所有內容的設置，將 url 添加到按鈕，以及許多其他調整。 但是已經奠定了基礎。 希望這能讓您建立一個可以輕鬆構建的平台。

最後的想法

有人可能會爭辯說，借助 WordPress 世界中所有出色的工具，您可以輕鬆啟動和運行在線課程。 但隨之而來的是設計的挑戰。 如果設計不是您的強項，那麼讓這些網站看起來不錯並不容易。 幸運的是，像“學習管理佈局包”這樣的預製 Divi 佈局為設計問題提供了很好的解決方案。 佈局實用且開箱即用。

但是，找到合適的插件將您漂亮的佈局轉換為實用的在線課程是一個問題。 有許多很棒的會員插件和學習管理系統，它們的成本和復雜性各不相同。 這篇文章的目標是讓您以低成本啟動並運行一個外觀漂亮的電子課程網站，並且具有簡單的會員資格。 對於那些希望使用免費插件創建它的人，很抱歉讓您失望。 我只關心免費插件，但我認為最好在本教程中使用 Pro 版本，因為在我看來，最終結果值得每一分錢。

我期待在評論中收到您的來信

乾杯!