使用 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 输入您保存到剪贴板的短代码 [re​​gister_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 版本，因为在我看来，最终结果值得每一分钱。

我期待在评论中收到您的来信

干杯!