WordPress divi主题

如何使用 Divi 创建倒计时“每日交易”产品部分

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

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

在寻找提高在线转化率的方法时,您会注意到许多网站在其着陆页上都有“每日特卖”产品部分。 这给游客一种紧迫感,并可以缩短决策过程。 在这篇文章中,我们将向您展示如何仅使用 Divi 的内置选项创建令人惊叹的当日产品部分设计倒计时交易。 我们使用的设计风格优雅而干净,并包含一抹色彩以强调设计中的不同元素。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

今日特卖

移动的

今日特卖

免费下载倒计时“每日特卖”产品部分

要接触免费的倒计时“每日特卖”产品部分,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

订阅我们的 Youtube 频道

让我们开始重建吧!

添加新部分

打开您要添加当日特卖产品部分的页面并添加新的常规部分。

今日特卖

WordPress divi主题

添加新行

立柱结构

继续使用以下列结构添加新行:

今日特卖

浆纱

在不添加任何模块的情况下,打开行设置并允许行在大小设置中占据屏幕的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:100%
  • 最大宽度:100%

今日特卖

间距

通过在间距设置中删除行的默认顶部和底部填充继续。

  • 顶部填充:0px
  • 底部填充:0px

今日特卖

第 1 列

接下来打开第 1 列设置。

今日特卖

默认渐变背景

并为其添加默认渐变背景。

  • 颜色1:#1c1c1c
  • 颜色2:#ffffff
  • 渐变方向:90度
  • 起始位置:66%
  • 结束位置:66%

今日特卖

fiverr建站WordPress程序员

删除悬停渐变背景

在悬停时删除相同的渐变背景。

今日特卖

第 2 栏

接下来打开第 2 列设置。

今日特卖

间距

并在不同的屏幕尺寸上添加一些自定义的左右填充。

独立站选品工具
  • 左填充:5vw
  • 右填充:8vw(桌面)、5vw(平板电脑和手机)

今日特卖

将 Woo 图像模块添加到第 1 列

动态内容

现在我们已经完成了行列设置,我们可以开始添加模块了。 将 Woo 图像模块添加到第 1 列并选择您选择的产品。

今日特卖

元素

接下来移除销售徽章。

今日特卖

高质量外链购买

间距

还添加一些自定义间距值。

  • 最高边距:6vw
  • 左填充:3vw(平板电脑和手机)
  • 右填充:3vw

今日特卖

将文本模块添加到第 1 列

添加内容

第 1 列中我们需要的下一个也是最后一个模块是文本模块。 输入您选择的一些内容。

今日特卖

背景颜色

更改模块的背景颜色。

JasperAI 10000字免费额度试用
  • 背景颜色:rgba(165,255,250,0.4)

今日特卖

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文字字体:Playfair Display
  • 文字字体粗细:重
  • 文本字体样式:大写
  • 文字颜色:#ffffff
  • 文字大小:1.5vw(桌面)、3vw(平板电脑)、3.5vw(手机)

今日特卖

浆纱

也可以使用不同屏幕尺寸的宽度。

  • 宽度:20vw(台式机)、40vw(平板电脑)、45vw(手机)

今日特卖

WordPress备份工具updrafplus

间距

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

  • 顶部填充:3vw
  • 底部填充:3vw

今日特卖

盒子阴影

为了给设计一些深度,我们也将添加一个盒子阴影。

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

今日特卖

转换翻译

通过使用变换翻译值重新定位模块来完成文本模块。

  • 右:-38vw(台式机)、-74vw(平板电脑和手机)

今日特卖

将文本模块添加到第 2 列

添加内容

进入下一栏! 在那里,我们需要的第一个模块是一个常规的文本模块。 插入您选择的一些内容。

今日特卖

文字设置

转到设计选项卡并更改文本设置,如下所示:

  • 文字字体:Open Sans
  • 文字字体粗细:轻
  • 文本字体样式:大写
  • 文字颜色:#000000
  • 文字大小:1vw(桌面)、3vw(平板电脑)、4vw(手机)

今日特卖

间距

也修改间距设置。

  • 最高利润:8vw(桌面),12vw(平板电脑和手机)
  • 底部填充:2vw(桌面)、5vw(平板电脑)、7vw(手机)
  • 左填充:2vw

今日特卖

边界

接下来我们将添加一个左边框。

  • 左边框宽度:2px
  • 左边框颜色:rgba(0,219,193,0.4)

今日特卖

将倒数计时器模块添加到第 2 列

将标题框留空并设置日期

进入下一个模块,即倒数计时器模块。 确保将标题框留空并选择您选择的日期。

今日特卖

删除背景颜色

接下来打开背景设置并禁用背景颜色。

今日特卖

文字设置

转到设计选项卡并更改文本对齐方式。

今日特卖

数字文本设置

接下来修改数字文本设置。

  • 数字字体:Open Sans
  • 数字字体粗细:半粗体
  • 数字文本颜色:#00dbc1
  • 数字文本大小:2vw(桌面)、4vw(平板电脑)、6vw(手机)

今日特卖

分隔符文本设置

然后,更改分隔符文本颜色。

  • 分隔符文本颜色:#ffffff

今日特卖

标签文本设置

并更改标签文本的外观和感觉。

  • 标签文本颜色:#282828
  • 标签文字大小:0.8vw(桌面)、1.3vw(平板电脑)、2vw(手机)

今日特卖

浆纱

在不同的屏幕尺寸上缩小模块的宽度。

  • 宽度:30vw(桌面)、45vw(平板电脑)、65vw(手机)

今日特卖

间距

并修改间距设置中的填充值。

  • 顶部填充:0px
  • 底部填充:0px
  • 左填充:2vw
  • 右填充:0px

今日特卖

边界

通过添加左边框来完成模块的设置。

  • 左边框宽度:2px
  • 左边框颜色:rgba(0,219,193,0.4)

今日特卖

将 Woo 标题模块添加到第 2 列

动态内容

进入下一个模块,即 Woo Title Module。 选择您喜欢的产品。

今日特卖

关联

接下来为模块添加产品链接。

  • 产品链接:在列表中查找

今日特卖

标题文本设置

继续修改模块的标题文本设置。

  • 标题标题级别:H2
  • 标题字体:Playfair Display
  • 标题字体粗细:重
  • 标题字体样式:大写
  • 标题文字颜色:#1c1c1c
  • 标题文字大小:2.9vw(桌面)、10vw(平板电脑)、12vw(手机)

今日特卖

间距

继续进行间距设置并使用边距值。

  • 最高边距:4vw(台式机)、10vw(平板电脑和手机)
  • 底边距:3vw(桌面)、6vw(平板电脑和手机)

今日特卖

将 Woo 描述模块添加到第 2 列

动态内容

我们需要的下一个模块是 Woo 描述模块。 选择您喜欢的产品。

  • 产品:在列表中查找
  • 描述类型:简短描述

今日特卖

文字设置

转到设计选项卡并更改文本设置,如下所示:

  • 文字字体:Open Sans
  • 文字大小:0.8vw(桌面)、1.9vw(平板电脑)、2.5vw(手机)
  • 文字行高:1.8em
  • 文本对齐:对齐

今日特卖

将 Woo 价格模块添加到第 2 列

动态内容

在 Woo 描述模块下方添加一个 Woo 价格模块并选择您的产品。

今日特卖

销售旧价格文本设置

转到设计选项卡并更改销售旧价格文本设置,如下所示:

  • 出售旧价格字体:Open Sans
  • 销售旧价格文本颜色:#00dbc1
  • 销售旧价格文本大小:1vw(桌面)、4vw(平板电脑)、6vw(手机)
  • 销售旧价格线高度:1.8em

今日特卖

销售新价格文本设置

继续修改销售新价格文本设置。

  • 销售新价格字体:Open Sans
  • 销售新价格文本颜色:#000000
  • 销售新价格文本大小:2vw(台式机)、6vw(平板电脑)、8vw(手机)
  • 销售新价格线高度:1.8em

今日特卖

浆纱

然后,转到尺寸设置并修改不同屏幕尺寸的宽度。

  • 宽度:10vw(桌面),35vw(平板电脑和手机)

今日特卖

间距

也添加一些自定义的顶部和底部边距值。

  • 最高利润率:6vw(桌面)
  • 底边距:4vw(桌面)、10vw(平板电脑和手机)

今日特卖

将 Woo 添加到购物车模块添加到第 2 列

动态内容

进入下一个也是最后一个模块,即 Woo 添加到购物车模块。 选择您的产品。

今日特卖

字段文本设置

接下来更改字段背景颜色。

  • 字段背景颜色:rgba(0,219,193,0.4)

今日特卖

按钮设置

通过设置按钮的样式来完成模块的设计,您就完成了!

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#1c1c1c

今日特卖

  • 按钮边框半径:0px
  • 按钮字体:Open Sans
  • 按钮字体样式:大写

今日特卖

  • 顶部填充:1vw(桌面)、3vw(平板电脑)、4vw(手机)
  • 底部填充:1vw(桌面)、3vw(平板电脑)、4vw(手机)
  • 左填充:5vw(桌面)、8vw(平板电脑)、10vw(手机)
  • 右填充:5vw(桌面)、8vw(平板电脑)、10vw(手机)

今日特卖

预览

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

桌面

今日特卖

移动的

今日特卖

最后的想法

在这篇文章中,我们向您展示了如何创建令人惊叹的当日产品部分设计倒计时交易。 我们仅使用 Divi 的内置 woo 模块和选项构建了此设计。 这是为您的产品增加紧迫感的好方法。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请务必在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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