朝阳做网站：如何使用divi构建成员站点-第2部分

欢迎来到这个由2部分组成的系列的第2部分，在这里我将向您展示如何通过合并MemberPress和Divi来构建一个完整的成员站点。当我向您介绍如何使用销售在线课程或产品所需的所有内容，包括自定义注册页、电子邮件通知和在一段时间内滴落内容的三个级别的成员资格时，请加入我。再加上更多。我还将向您展示如何结合Divi构建器使用成员短代码来设计您的成员页面。你不会想错过的！

我很高兴继续我们的使命，建立一个完整的会员网站与Divi。在上一篇文章中，我向您介绍了如何使用MemberPress构建您的成员站点的所有功能。因此，如果您加入了这个过程，您应该非常适合今天的教程。

朝阳做网站今天的主题是设计。更具体地说，我将向您展示如何使用DiviBuilder设计您的成员站点(甚至是MemberPress创建的成员页面)。我将使用学习管理系统Divi布局包来大大加快设计过程，在那些很少的时候，当MemberPress将我们排除在寒冷中而我们不能使用Divi Builder时，我也有一些CSS。但总的来说，我的目标是减少定制的CSS和更多的DiviBuilder。

偷窥

核对表

在开始本教程之前，以下是一些您想要的东西。

学习管理系统布局包

我将使用学习管理系统布局包来设计本教程中的成员页面。如果您还没有找到您的副本，请确保它并导入到您的Divi库。

有关如何设置Divi布局包的额外帮助，看看这些小窍门.

创建的成员页面

到目前为止，您应该创建以下页面。你还不需要在这些页面上有内容。它们只需在WordPress仪表板中创建即可。其中一些页面是专门针对提供在线课程的成员网站的。您可能需要调整这些为您自己的网站。

· 会员网页

· 定价页

· 会员课程概览页

· 课页

· 登记页

创建MemberPress前端(预留)页

· 帐户页

· 登录页

· 谢谢佩奇

如何使用divi构建成员站点-第2部分

主题定制程序设置

即使您可能使用其中一个美化divi布局，您也不想忽略您的主题自定义设置。当然，您需要在这里设计页眉、导航和页脚，因为导入的Divi布局对这些元素没有任何影响。另外，由于您不可避免地会有DiviBuilder无法自定义的页面或内容，因此设置主题定制器默认设置是针对Divi Builder之外的那些元素的方法。

若要更新主题定制程序，请转到Divi>主题自定义程序。我只打算做一些改变，但可以自由地做更多。

改变主题重音颜色

主题重音颜色将影响整个网站的许多不同元素。更具体地说，对于本教程，您将注意到，无论您将此颜色设置为什么，都将是链接的默认颜色，甚至是MemberPress短代码中找到的链接(如帐户页)中的默认颜色。若要更新主题重音颜色，请从“主题定制程序”菜单转到“常规设置”>“布局设置”。我正在添加整个编码学校布局中使用的紫色：#7272 ff。

更改排版设置

在我为本教程使用的编码学校布局包的情况下，在模块级别上确实没有特定的字体设置，因此我可以从主题自定义器中设置默认字体，并且它将应用于所有布局。无论如何，在这里设置您的排版设置是一个好主意，作为您的站点的后盾。若要更新排版设置，请从“主题自定义程序”菜单转到“常规设置”>“排版”。

生成要用于成员资格页的通用布局。

泛型布局基本上是一个多用途布局，您可以使用这些额外的页面，您可能需要。要构建我们的通用布局，我将使用帐户页。您应该已经创建了一个帐户页，并将其指定为MemberPress选项中的默认帐户页(如果不是，请参阅本教程的第1部分)。

注意：有一个默认帐户页面，MemberPress可以自动为您创建。但是，由于此页面无法部署DiviBuilder，所以最好创建自己的帐户页面并将其指定为默认帐户页。通过这种方式，您可以使用DiviBuilder设计它，然后添加短代码以生成带有模块的用户帐户信息表单。

现在去编辑帐户页。部署可视化构建器并将联系人页布局导入到页中。更新页面标题，说“我的帐户”。

将包含联系人表单和信息的行的列布局更新为一个列布局。

接下来，删除列中的所有模块，以便在一列行中没有任何内容。

使用右键单击菜单，复制文本模块，在“常见问题”下保留文本片段。然后使用右键单击菜单将其粘贴到您刚刚创建的一列行中。

现在，使用以下选项在“设计”选项卡下更新刚才添加的文本模块的设置：

文本方向：左
宽度：100%(默认)

保存你的页面。

如果您愿意，可以删除下面的其余部分，但最好保留它们，以防某些页面需要这些元素。

注意：您的帐户页面还没有完全完成(我们仍然需要添加短代码)，但这很快就会到来。现在，我们只需要为我们的通用布局模板保存这个布局。

接下来，您需要将此布局保存到Divi库中。打开页面设置菜单(可视化生成器底部的紫色图标)。选择SavetoLibrary并给新模板命名为“泛型布局”。然后单击“保存到库”。

就这样。现在，您可以使用一个通用的全宽度布局，用于整个站点可能需要的其他成员页面。您所需要做的就是从库中提取这个通用布局，以便有一个方便的开始。

现在我们有了我们的通用布局，让我们来处理那些MemberPress前端页面。

关于会员前端页面设计的几点看法

成员资格的前端页面是那些特定于成员资格功能的页面。通常，这些页面包括管理用户帐户信息的帐户页面、结帐页面(用于付费成员身份)和登录或注册页面。可能会有更多的网页取决于插件。

通常情况下，Divi对第三方插件生成的页面所能做的事情有一定的限制。如果页面内容是由一个短代码(例如WooCommerce或MemberPress)生成的，则可以在能够部署DiviBuilder的页面上使用模块中的短代码。这样，您就可以通过将短代码添加到文本模块并修改模块的“设计”选项卡中的设计设置来调整生成内容的设计。

设计MemberPress前端页面

正如我在本教程第1部分中所介绍的，MemberPress有三个必须保留的前端页面：谢谢页面、帐户页和登录页。这些页面是在MemberPress选项卡的Pages选项卡下选择的。因为我们不会使用默认的注册页面，我们也需要设计一个注册页面。但是首先，让我们完成我们从帐户页面开始的工作。

帐户页

使用的布局：通用布局

使用的短代码：[mepr-帐户-表单]

设计修改：由于我们在构建泛型布局时已经设计了帐户页面，所以这里要做的主要工作是将短代码添加到文本模块中，然后更新设计设置，以针对从短代码显示的表单中的文本和链接。例如，将文本大小更改为18 px将所有帐户信息文本更改为18 px。而自定义链接文本也会影响帐户导航、菜单链接和其他链接的整个帐户信息。

自定义CSS：由于针对帐户信息的某些元素的限制，我建议在其他CSS下的主题定制程序中添加以下自定义CSS：

此CSS将样式添加到帐户页导航、表单字段、窗体按钮和链接中。它还将添加类似的样式到您的注册表格和按钮以及。

谢谢佩奇

使用的布局：通用布局

设计修改：真正要做的就是用新的内容更新布局。一个重要的补充是CTA，它引导用户到他们注册的课程。

“谢谢”页面是用户完成注册过程后被重定向到的位置。它不是一个插件特定的页面，所以您有DiviBuilder的力量为这一个。只需从DiviLibrary将通用布局导入页面，更新页面标题并添加内容即可。

可以在MemberPress选项中指定默认的“谢谢”页面。您可以通过在页面底部的“成员资格选项”的“注册”选项卡中选择“启用自定义感谢页消息”来覆盖创建的每个成员资格。

提示：您可能需要继续为其他成员创建其他感谢页面，以便为每个成员定制CTA。

登录页

使用的布局：编码联系人布局

使用的短代码：[mepr-登录-表单]

注意：无论您在MemberPress选项中的Page选项卡下选择了什么登录页面，在编辑页面时，都将有一个手动将登录表单放在页面上的选项。

朝阳做网站设计修改：我使用编码联系人布局，因为我希望使用联系人表单部分的两列布局来包含登录表单，并使用相邻的CTA注册成员资格。

自定义CSS：谢天谢地，我们之前为我们的帐户表单输入的自定义CSS给了我们一个漂亮的登录表单。

登记页

使用的布局：编码课程布局

使用的短代码：取决于成员资格

设计修改：我将标题部分行更改为一列行，并删除了图像。然后，我删除了左侧内容部分中的除一个之外的所有内容，并将注册表单短代码添加到blurb模块内容中。

Memberpress会自动创建一个注册页面，包含您创建的每个成员。在每个页面上使用的注册表单都是从MemberPress选项中的字段选项卡下构建的注册表单中提取的。

但是，您不必使用此注册页面。当设置您的成员资格时，您可以在“注册”选项卡下的“成员资格选项”框中的“编辑成员资格”页的底部通过单击“成员资格短代码”找到一个短代码列表。其中一个短代码允许您为该特定成员生成登记表。

这是您需要添加到为该成员资格创建的注册页的短代码。

这是注册页面的样子。

注意：不幸的是，如果会员是付费的，并且需要退房处理，用户将被重定向到默认的注册页面模板以完成购买。因此，最好在默认注册页面中添加一些自定义CSS，以便通过签出保持设计的一致性。

不，让我向您展示我用来创建我的其余成员页面的布局和修改。

设计会员网站网页

主页

使用的布局：编码主页

设计修改：我拿出了显示图形的图像模块。我把标题部分写成“简单如1.2.3.”第一栏布局。我把按钮改为文字。用我提供的三种课程(免费的、银色的和黄金的)更新课程部分。我花了大约3分钟，所以不要太苛刻地判断：)。

会员网页

使用的布局：编码课程

设计修改：我更改了标题。对于包含课程的行，我将列布局更改为一列，自定义宽度为680 px。然后，我删除了所有的三个盒子(他们实际上是脱口模块)。在每个链接下添加一个链接，该链接将转到相应的注册页面或定价页面。

定价页

使用的布局：编码定价

修改：这很容易。我所做的就是更新定价表的内容，并添加链接到每个会员的注册页面。

会员课程概览页

使用的布局：编码课程

修改：这也很简单。对于标题部分，我更新了内容，使列完全宽度，并将文本居中。然后，我更新页面左侧的内容，并添加一个链接来查看每个页面的课程页面。

下图显示了免费成员资格的成员资格课程概述页面。您需要为您提供的每个成员创建一个。另外，我应该提醒您，这是本课程所有课程页(子页)的父页(请参阅第1部分)。

课页

使用的布局：编码课程

修改：基本上，除了更新内容和侧栏内容之外，我还做了与会员课程概述页面相同的修改。

下面的图片显示了我的免费课程第一课第一页。此页面与该课程的其他课程页一起，是“父页免费成员资格课程概述”的子页。

包起来

当这个2部分系列接近尾声时，我希望你能看到MemberPress和Divi在构建一个成员站点时是多么强大。MemberPress有很多东西可以提供，我不得不说它很容易使用。在我看来，有几件事情是MemberPress保护内容和创建滴漏序列的规则系统。电子邮件通知也非常容易定制和编辑。我喜欢把会员组合在一起的能力，这样会员就可以在他们的帐户页面上改变/购买不同的会员身份。

朝阳做网站在设计方面，我认为Divi和MemberPress非常匹配。MemberPress前端页面不是自动为您创建的(这是令人耳目一新的)，并且可以使用短代码来生成DiviModules中的内容。是的，我们仍然有设计上的限制，因为某些内容不能成为DiviBuilder的目标。但是，如果你问我的话，必须添加几行自定义CSS来修饰整个会员网站并不太糟糕。

我期待着在评论中听到你的意见。

干杯!