WordPress divi主题

如何在 Divi 中设计漂亮的定价表

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

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

定价表通常是页面的主要 CTA。 这就是为什么正确设计它们的样式很重要。 使用 Divi,您可以进行多次轮换,并按照您想象的方式创建定价表。 为了让您深思熟虑,我们创建了一个令人惊叹的定价表,您可以将其用于您正在开发的任何类型的网站。 我们将指导您仅使用 Divi 的内置选项创建从 A 到 Z 的结果。

google广告开户

让我们开始吧!

预览

在我们深入教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

设计定价表

移动的

设计定价表

免费下载图片

要掌握本教程中使用的图像,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

如何在 Divi 中设计漂亮的定价表

订阅我们的 Youtube 频道

让我们开始创作吧!

添加新部分

渐变背景

创建一个新页面并使用以下渐变背景添加一个常规部分:

  • 颜色1:#ffffff
  • 颜色 2:#353272
  • 起始位置:50%
  • 结束位置:50%

设计定价表

间距

然后,转到该部分的间距设置并修改自定义边距和填充值。

WordPress divi主题
  • 下边距:50px(桌面),20px(平板电脑和手机)
  • 左边距:50px(桌面),20px(平板电脑和手机)
  • 右边距:50px(桌面),20px(平板电脑和手机)
  • 顶部填充:0px
  • 底部填充:0px

设计定价表

添加新行

立柱结构

修改完部分设置后,您可以继续使用以下列结构添加新行:

设计定价表

浆纱

在尚未添加任何模块的情况下,打开行设置并在设计选项卡中修改尺寸设置。

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

设计定价表

间距

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

  • 上边距:94px
  • 底部填充:177px
  • 左填充:150px(桌面),30px(平板电脑和手机)
  • 右内边距:150 像素(桌面)、30 像素(平板电脑和手机)
  • 第 1、2 和 3 列左填充:10 像素
  • 第 1、2 和 3 列右侧内边距:10 像素

设计定价表

将文本模块 #1 添加到第 1 列

添加内容

是时候开始添加模块了! 我们正在使用各种模块自定义要创建的定价表。 我们需要的第一个模块是文本模块。 在内容框中添加第一个成员类型的名称。

设计定价表

背景颜色

添加内容后,转到背景设置并添加白色背景颜色。

fiverr建站WordPress程序员
  • 背景颜色:#ffffff

设计定价表

背景图片

切换到背景图像选项卡并上传“divi-beautiful-pricing-table-background-pattern-1.png‘ 文件,您可以在本文开头共享的下载文件夹中找到该文件。

  • 背景图片尺寸:封面
  • 背景图像位置:顶部中心
  • 背景图像重复:无重复

设计定价表

文字设置

接下来修改文本设置。

  • 文字字体粗细:超粗体
  • 文字颜色:#ffffff
  • 文字大小:80px
  • 文字字母间距:-3px
  • 文本行高:1em

设计定价表

独立站选品工具

间距

并添加一些自定义边距和填充值。

  • 最高利润:5vw(桌面),0vw(平板电脑和手机)
  • 上边距:20px
  • 底部填充:200px

设计定价表

边界

继续在左上角和右上角添加“20px”。

设计定价表

盒子阴影

最重要的是,给文本模块一个微妙的盒子阴影。

高质量外链购买
  • 盒子阴影垂直位置:-20px
  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:-10px
  • 阴影颜色:rgba(0,0,0,0.15)

设计定价表

将按钮模块添加到第 1 列

添加副本

我们在第 1 列中需要的第二个模块是按钮模块。 添加一些选择的副本。

设计定价表

按钮对齐

然后,转到对齐设置并将对齐更改为居中。

设计定价表

JasperAI 10000字免费额度试用

按钮设置

我们将继续在按钮设置中对按钮的外观进行一些更改。

  • 为按钮使用自定义样式:是
  • 按钮文字颜色:#ffffff
  • 颜色1:#6932ff
  • 颜色2:#30acf4
  • 渐变方向:100度

设计定价表

  • 按钮边框宽度:0px
  • 按钮字母间距:-2px
  • 字体粗细:超粗体

设计定价表

间距

接下来,为按钮添加一些填充以使其看起来不错,并应用负上边距以与列中的前一个模块创建重叠。

  • 上边距:-54px
  • 上边距:10px
  • 底部填充:10px
  • 左内边距:30px
  • 右内边距:30px

设计定价表

WordPress备份工具updrafplus

盒子阴影

最后但同样重要的是,添加一个微妙的盒子阴影。

  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:-14px
  • 阴影颜色:rgba(0,0,0,0.3)

设计定价表

将文本模块 #2 添加到第 1 列

添加内容

我们需要的下一个模块是另一个带有会员类型价格的文本模块。

设计定价表

背景颜色

添加价格后,转到背景设置并应用白色背景颜色。

  • 背景颜色:#ffffff

设计定价表

文字设置

接下来更改文本设置。

  • 文字字体粗细:超粗体
  • 文字颜色:rgba(0,0,0,0.05)
  • 文字大小:120px
  • 文本行高:1em

设计定价表

间距

并在间距设置中应用一些自定义填充值。

  • 上边距:100px
  • 底部填充:100px
  • 左填充:80px

设计定价表

边界

然后,转到边框设置并在左下角和右下角添加“30px”。

设计定价表

盒子阴影

最后但同样重要的是,给模块一个盒子阴影。

  • 盒子阴影水平位置:0px
  • 盒子阴影垂直位置:2px
  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:0px
  • 阴影颜色:rgba(0,0,0,0.21)

设计定价表

将文本模块 #3 添加到第 1 列

添加内容

第 1 列中我们需要的下一个也是最后一个模块是另一个文本模块。 将会员类型的价格添加到内容框中。

设计定价表

文字设置

接下来更改文本设置。

  • 文字字体粗细:超粗体
  • 文字颜色:#000000
  • 文字大小:50px
  • 文本行高:1em

设计定价表

间距

并通过使用自定义间距值在此模块和前一个模块之间创建重叠。

  • 上边距:-180px
  • 底边距:180px(平板电脑和手机)
  • 左填充:100px

设计定价表

将第 1 列中的所有模块克隆两次并将重复项放置在其余列中

完成对第 1 列中的模块的修改后,您可以继续将每个模块克隆两次,并将副本放在剩余的两列中。

设计定价表

更改列中模块的内容

根据您在网站上共享的其他两种会员类型更改副本的内容。

设计定价表

更改第 2 列中的定价表

更改文本模块 #1 的背景图像

我们还强调了中间定价表。 打开第 2 列中的第一个文本模块并将背景图像更改为 ‘divi-beautiful-pricing-table-background-pattern-2.png‘ 文件,您可以在下载文件夹中找到。

设计定价表

删除文本模块 #1 的上边距

为了强调这种成员类型,我们将在间距设置中删除第一个文本模块的上边距。

设计定价表

更改按钮渐变背景

我们还将使用按钮模块的另一个渐变背景来匹配新的背景图像。

  • 颜色 1:#fb32ff
  • 颜色 2:#ff304f
  • 渐变方向:100度

设计定价表

预览

现在我们已经完成了所有步骤,让我们最后看看不同屏幕尺寸的结果。

桌面

设计定价表

移动的

设计定价表

最后的想法

在这篇文章中,我们向您展示了如何为您的下一个 Divi 项目设计漂亮的定价表。 我们已逐步指导您完成教程,并仅使用 Divi 的内置选项取得了惊人的成果! 如果您有任何问题或建议,请务必在下面的评论部分发表评论。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题