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

2019.05.27 朝阳做网站

109

欢迎来到这个由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:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

/*Account page nav buttons, and other buttons used by MemberPress*/

.mepr-submit, .button-primary, .mepr-active-nav-tab a {

    color: #ffffff!important;

    border-width: 10px!important;

    border-color: #7272ff;

    border-radius: 100px;

    letter-spacing: 1px;

    font-size: 16px;

    font-weight: 700!important;

    text-transform: uppercase!important;

    padding-left: 2em;

    padding-right: 2em;

    background-color: #7272ff !important;

}

 

#mepr-account-nav {

    text-align: center;

}

 

.mepr-nav-item a, .mepr-payments a {

    background: #eeeeee;

    padding: 0.5em 1em;

  border-radius: 100px;

}

/*styles form fields and text form field text*/

.mp_wrapper textarea, .mp_wrapper select, .mp_wrapper input[type=text], .mp_wrapper input[type=url], .mp_wrapper input[type=email], .mp_wrapper input[type=tel], .mp_wrapper input[type=number], .mp_wrapper input[type=password] {

    border: 1px solid rgba(71,74,182,0.12)!important;

    color: rgba(114,114,255,0.91)!important;

    padding: 12px 10px !important;

    background: #f8f8f8

}

此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来修饰整个会员网站并不太糟糕。

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

干杯!

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP