WordPress divi主题

如何使用 Divi 和我们独家的黑色星期五软件销售登陆页面创建动态定价表

by | May 16, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

在它消失之前获得交易!

google广告开户

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

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

软件销售登陆页面

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

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

在交易消失之前索取交易!

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

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

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

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

WordPress divi主题

预览

在我们深入研究它之前,让我们快速看一下最终结果。

软件销售登陆页面

让我们开始吧!

安装高级自定义字段插件

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

软件销售登陆页面

创建新字段组

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

软件销售登陆页面

姓名+地点

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

软件销售登陆页面

添加会员级别字段

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

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

软件销售登陆页面

fiverr建站WordPress程序员

软件销售登陆页面

添加成员资格描述字段

继续添加成员描述字段。

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

软件销售登陆页面

添加价格字段

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

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

软件销售登陆页面

独立站选品工具

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

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

软件销售登陆页面

软件销售登陆页面

更改组内所有字段的数量

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

软件销售登陆页面

高质量外链购买

软件销售登陆页面

软件销售登陆页面

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

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

软件销售登陆页面

将动态内容添加到页面

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

JasperAI 10000字免费额度试用

软件销售登陆页面

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

立柱结构

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

软件销售登陆页面

浆纱

尚未添加任何模块,打开行设置并更改大小设置。

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

软件销售登陆页面

WordPress备份工具updrafplus

间距

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

  • 上边距:100px
  • 下边距:100px

软件销售登陆页面

将 CTA 模块添加到第 1 列

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

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

软件销售登陆页面

软件销售登陆页面

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

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

软件销售登陆页面

背景颜色

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

  • 背景颜色:#ffffff

软件销售登陆页面

背景图片

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

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

软件销售登陆页面

文字设置

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

软件销售登陆页面

标题文本设置

为了匹配登陆页面的设计风格,也对标题文本设置进行一些更改。

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

软件销售登陆页面

正文文本设置

正文设置也是如此。

  • 正文字体:魔方
  • 正文字体粗细:中
  • 正文文本颜色:rgba(0,0,0,0.34)
  • 正文大小:15px
  • 车身线高:1.8em

软件销售登陆页面

间距

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

软件销售登陆页面

边界

并将“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 列中的模块

号召性用语模块

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

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

软件销售登陆页面

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

对内容框做同样的事情。

软件销售登陆页面

添加渐变背景

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

  • 颜色1:#6959ff
  • 颜色 2:#c1bff
  • 渐变方向:15度
  • 起始位置:22%
  • 结束位置:95%

软件销售登陆页面

更改标题文本颜色

更改标题文本颜色。

  • 标题文字颜色:#ffffff

软件销售登陆页面

更改正文文本颜色

正文颜色也是如此。

软件销售登陆页面

更改间距

为了将这个特定的定价表放在聚光灯下,我们还将使用间距值。

  • 上边距:-50px(台式机),0px(平板电脑和手机)
  • 上边距:100px

软件销售登陆页面

文本模块

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

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

软件销售登陆页面

更改背景颜色

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

  • 背景颜色:#6959ff

软件销售登陆页面

更改文本颜色

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

软件销售登陆页面

更改间距

最后但同样重要的是,更改间距设置中的自定义填充值。

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

软件销售登陆页面

修改第 3 列中的模块

号召性用语模块

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

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

软件销售登陆页面

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

内容框也是如此。

软件销售登陆页面

添加渐变背景

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

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

软件销售登陆页面

更改标题文本颜色

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

  • 标题文字颜色:#ffffff

软件销售登陆页面

更改正文文本颜色

对正文文本颜色执行相同的操作。

软件销售登陆页面

文本模块

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

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

软件销售登陆页面

更改背景颜色

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

  • 背景颜色:#c87cff

软件销售登陆页面

更改文本颜色

最后但同样重要的是,将文本颜色更改为白色,您就完成了! 现在,您的页面上有三个完全动态的定价表!

软件销售登陆页面

最后的想法

此用例是我们黑色星期五优惠的一部分,我们与黑色星期五客户和终身会员共享 6 个免费限量版登录页面。 通过在这些日子里加入我们强大的社区并成为会员,您将获得:

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

抓住机会,今天就成为会员吧!