作为终身会员和黑色星期五新客户，我们为您提供的独家登陆页面之一是令人惊叹的软件销售登陆页面。 这个登陆页面将以其独特的部分分隔符和高质量的模型让您大吃一惊。 在本文中，我们将向您展示如何使用 Divi 的动态内容功能为其添加动态定价表！

如果您是当前的终身客户，或者如果您在我们的黑色星期五促销期间购买了新帐户或升级了，您可以立即下载此布局。

获取独家黑色星期五软件销售登陆页面

在进入此用例之前，您需要进入独家黑色星期五软件销售登陆页面，您可以通过成为新的 Elegant Themes 会员、升级您现有的帐户或已经成为我们的终身会员来获得该登陆页面。 如果您确实已经是终身会员，您可以登录我们的会员区并在此处下载我们所有的专属登陆页面。 其他所有人都需要使用下面的按钮购买或升级，然后才能学习我们教程的其余部分。

在它消失之前声明交易！

使用如何使用 Divi 创建动态定价表

对于本文的其余部分，我们假设您已经利用了我们的黑色星期五优惠，或者您已经是终身会员并且可以访问黑色星期五软件销售登陆页面

从我们的会员区下载新的软件销售登陆页面后，​​您可以观看下面的视频，了解它的设置是多么容易。 我们还鼓励您按照本教程进行操作，以使您的网站为进一步定制做好准备。

在这个用例帖子中，我们将向您展示如何使用 Divi 和免费的高级自定义字段插件创建动态定价表。 如果您的客户经常更改订阅价格，并且您希望允许他们在不访问 Divi 的情况下自行更改价格，那么创建动态定价表非常有用。 这将帮助您确保他们不会弄乱页面本身的任何内容，同时仍然可以更改某个套餐的价格、描述和会员级别。

预览

在我们深入研究之前，让我们快速浏览一下最终结果。

让我们开始吧！

安装高级自定义字段插件

您需要做的第一件事是在您的 WordPress 网站上安装高级自定义字段插件，方法是转到插件 > 添加新 > 搜索插件并安装它。

创建新字段组

激活插件后，您就可以开始使用了。 添加新的字段组。

姓名 + 地点

为您的新字段组命名。 请记住，在本教程的这一部分结束时，您将拥有三个字段组（等于定价表的数量），因此请确保正确命名。 还要更改此字段组的位置设置。

添加会员级别字段

是时候开始添加字段了！ 我们总共需要三个。 使用以下设置添加会员级别字段：

• 字段标签：会员级别 1
• 字段名称：membership_level_1
• 字段类型：选择
• 选择：添加选择的内容

添加成员资格说明字段

继续添加成员资格描述字段。

• 字段标签：成员资格说明 1
• 字段名称：membership_description_1
• 字段类型：文本

添加价格字段

您需要的最后一个字段是价格字段。

• 字段标签：价格 1
• 字段名称：price_1
• 字段类型：文本

重复字段组两次并将名称和字段调整为定价表编号

一个字段组等于我们页面上的一个定价表。 现在我们已经完成了第一个，我们可以继续克隆它两次，以确保我们有足够的字段组来匹配页面上定价表的数量。

更改组内所有字段的数量

您创建的每个动态字段都将显示在 Visual Builder 中。 为确保您知道要链接到哪些信息，请为重复的字段组及其字段指定不同的编号。

使用 Divi 的软件销售登陆页面创建新页面

在本教程的下一部分中，我们将向我们的软件销售登陆页面添加动态定价表。 使用此布局创建一个新页面。

向页面添加动态内容

切换回此页面的后端并向每个定价表添加动态内容。

在页面上的定价表下方添加新行

列结构

继续启用 Visual Builder 并在此处添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并更改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

然后，转到间距设置并添加一些自定义边距。

• 上边距：100px
• 下边距：100px

将 CTA 模块添加到第 1 列

将标题字段连接到会员级别 1 动态内容

我们在第 1 列中需要的第一个模块是行动号召模块。 将标题字段链接到您在本教程的前一部分中创建的 Membership Level 1 字段。

将内容框连接到会员描述 1 动态内容

同样，将内容框连接到 Membership Description 1。

背景颜色

然后，转到背景设置并更改 CTA 模块的背景颜色。

• 背景颜色：#ffffff

背景图片

添加一个微妙的背景图像。 上传软件销售登陆页面后，​​您将能够在媒体库中找到以下背景图片：

• 背景图片：software-sale-13.png

文字设置

继续转到文本设置并更改模块的文本方向。

• 文本方向：左

标题文字设置

为了与登陆页面的设计风格相匹配，还需要对标题文本设置进行一些更改。

• 标题字体：魔方
• 标题字体粗细：轻
• 标题文字颜色：#4258ff
• 标题文字大小：40px
• 标题行高度：1.3em

正文设置

正文文本设置也是如此。

• 正文字体：魔方
• 正文字体重量：中等
• 正文颜色：rgba(0,0,0,0.34)
• 正文文字大小：15px
• 车身线高：1.8em

间距

接下来添加一些顶部填充。

• 顶部填充：60px

边界

并将“8px”添加到模块的每个顶角。

盒子阴影

最后但并非最不重要的一点是，我们将添加一个微妙的框阴影以在页面上创建深度。

• 框阴影垂直位置：50px
• 框阴影模糊强度：100px
• 阴影颜色：rgba(66,88,255,0.2)

将文本模块添加到第 1 列

将内容框连接到价格 1 动态内容

继续并在第 1 列中的号召性用语模块正下方添加一个文本模块。将此模块的内容框链接到价格 1 动态内容。

背景颜色

继续更改此模块的背景颜色。

• 背景颜色：#ffffff

文字设置

还要修改文本设置。

• 文字字体：魔方
• 文字字体粗细：轻
• 文字颜色：#4258ff
• 文字大小：70px
• 文本行高：1em

间距

接下来添加一些自定义填充值。

• 底部填充：60px
• 左填充：40px

边界

继续转到边框设置并在两个底角添加“8px”。

盒子阴影

最后但并非最不重要的是，也给这个文本模块一个框阴影。

• 框阴影垂直位置：80px
• 框阴影模糊强度：100px
• 阴影颜色：rgba(66,88,255,0.2)

将按钮模块拖到第 1 列

第一列中我们需要的最后一个模块是按钮模块。 克隆您可以在前一行中找到的一个按钮模块，并将其放在第 1 列中。

更改间距

打开按钮模块的设置并添加一些自定义边距。

• 上边距：30px
• 下边距：50px

克隆第 1 列中的所有模块并放置在剩余的列中

为了节省时间，我们将克隆第 1 列中的所有三个模块两次，并将重复项放置在该行的其余列中。

修改第 2 列中的模块

CTA 模块

将标题字段连接到会员级别 2 动态内容

我们需要修改重复项，从第二列中的 CTA 模块开始。 将标题字段连接到会员级别 2 动态内容。

将内容框连接到会员描述 2 动态内容

对内容框做同样的事情。

添加渐变背景

接下来为模块添加渐变背景。

• 颜色 1：#6959ff
• 颜色 2：#c1bfff
• 梯度方向：15度
• 起始位置：22%
• 结束位置：95%

更改标题文本颜色

还要更改标题文本颜色。

• 标题文字颜色：#ffffff

更改正文颜色

正文颜色也是如此。

• 正文颜色：#ffffff

更改间距

为了将这个特定的定价表放在聚光灯下，我们还将调整间距值。

• 上边距：-50px（桌面），0px（平板和手机）
• 顶部填充：100px

文本模块

将内容框连接到价格 2 动态内容

继续打开第 2 列中的文本模块并将内容框链接到价格 2 动态内容。

更改背景颜色

接下来更改此模块的背景颜色。

• 背景颜色：#6959ff

更改文本颜色

并将文本颜色更改为白色。

• 文字颜色：#ffffff

更改间距

最后但并非最不重要的是，更改间距设置中的自定义填充值。

• 底部填充：120px
• 左填充：40px

修改第 3 列中的模块

CTA 模块

将标题字段连接到会员级别 3 动态内容

我们还需要更改第 3 列中的模块。 将标题字段链接到会员级别 3 动态内容。

将内容框连接到会员描述 3 动态内容

内容框也是如此。

添加渐变背景

然后，为模块添加渐变背景。

• 颜色 1：#c87cff
• 颜色 2：#ffbcf8
• 梯度方向：18度
• 起始位置：22%
• 结束位置：95%

更改标题文本颜色

将标题文本颜色更改为白色。

• 标题文字颜色：#ffffff

更改正文颜色

对正文文本颜色做同样的事情。

• 正文颜色：#ffffff

文本模块

将内容框连接到价格 3 动态内容

继续打开第 3 列中的文本模块并更改此处的动态内容。

更改背景颜色

接下来添加不同的背景颜色。

• 背景颜色：#c87cff

更改文本颜色

最后但并非最不重要的一点是，将文本颜色更改为白色，您就完成了！ 您的页面上现在拥有三个完全动态的定价表！

• 文字颜色：#ffffff

最后的想法

此用例是我们黑色星期五交易的一部分，我们与黑色星期五客户和终身会员共享 6 个免费的限量版登录页面。 通过在这些天加入我们授权的社区并成为会员，您将获得：

• 25% 关闭一切
• 所有 6 个登陆页面都是免费的
• 访问我们很棒的主题和插件
• 奖金奖品

抓住机会，今天就成为会员！