WordPress divi主题

当 Divi 中的倒数计时器到期时如何显示时间条件内容

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

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

在倒数计时器到期时显示时间条件内容可能是一种强大的营销工具。 我们知道这些倒数计时器是激励用户在网站上采取行动的最佳方式之一。 它们非常适合为会员、产品、黑色星期五促销等提供限时优惠。但是当计时器结束时,您有很好的机会通过时间条件内容重新定位访问者。 时间条件内容是在设定的日期和时间之前或之后在网页上显示(或隐藏)的内容。 因此,准备好新内容以向错过交易或时间用完的访问者展示是有意义的。

google广告开户

在本教程中,我们将向您展示如何在 Divi 中的倒数计时器到期时显示时间条件内容。 为此,我们将使用 Divi 的新条件选项在与倒数计时器一致的设定日期和时间之前和之后显示某些内容。 在计时器用完之前,访问者将能够利用限时优惠。 计时器用完后,将邀请访问者订阅时事通讯以获取交易通知。

让我们开始吧!

抢先看

以下是我们将在本教程中构建的时间条件内容和倒数计时器的快速浏览。

这是倒数计时器到期之前的部分。

倒数计时器到期时的时间条件内容

这是倒数计时器到期后的部分。

倒数计时器到期时的时间条件内容

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

WordPress divi主题

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

当 Divi 中的倒数计时器到期时如何显示时间条件内容

第 1 步:上传预制的 Divi 布局

打开页面设置菜单,然后单击加号图标以弹出从库加载弹出窗口。 找到工艺学校布局包,然后单击以使用工艺学校主页布局。

fiverr建站WordPress程序员

倒数计时器到期时的时间条件内容

添加布局后,删除布局的前 3 个部分,以便仅保留倒计时部分和页脚部分。 我们将使用这些部分来构建我们的时间条件内容和倒数计时器。

倒数计时器到期时的时间条件内容

第 2 步:在倒数计时器上设置日期和时间

接下来,找到倒数计时器模块并打开设置。 在内容选项卡下,添加您希望交易到期的日期和时间。 在此示例中,我们将日期设置为 10 月 15 日,将时间设置为 12:00。

注意:我们稍后添加时间条件内容时将使用相同的日期和时间。

独立站选品工具

倒数计时器到期时的时间条件内容

第 3 部分:在设置日期和时间之前将时间条件添加到显示部分

为了在倒数计时器到期时更改内容,我们需要添加一个时间条件来显示整个部分 之前添加到倒数计时器的设置日期和时间。

为此,请打开包含倒数计时器的部分的设置。

在高级选项卡下,单击以添加新的显示条件。 从下拉列表中,选择日期和时间条件。

倒数计时器到期时的时间条件内容

高质量外链购买

在同一框中,更新日期和时间条件的设置,如下所示:

  • 确保选项 仅在当前日期时显示 设定为 是之前.
  • 选择与之前添加到倒数计时器的日期和时间相匹配的日期和时间。

倒数计时器到期时的时间条件内容

第 5 步:为 Timer Expires 后创建时间条件内容

我们已经有一段内容将在计时器到期之前显示。 现在我们需要创建一个新的内容部分,它将在计时器到期后显示。 为此,请复制具有时间条件的部分。 在新部分中,您可以将管理标签调整为“Countdown After”,这样您就不会混淆两者。

倒数计时器到期时的时间条件内容

打开重复部分的设置并更新日期和时间显示条件选项 仅在当前日期时显示是在之后. 确保日期和时间与倒数计时器完全相同。 我们希望在倒数计时器到期后显示此部分。

JasperAI 10000字免费额度试用

倒数计时器到期时的时间条件内容

第 6 步:添加/更新时间条件内容

交易结束后,我们希望通过在标题中添加删除线以及赋予其浅灰色来反映这一点。

为此,请打开包含主标题的文本模块的设置并更新以下内容:

  • 标题 2 字体样式:删除线
  • 标题 2 文本颜色:#ddd

倒数计时器到期时的时间条件内容

接下来,打开第二个文本模块的设置,更改内容如下:

WordPress备份工具updrafplus
html

倒数计时器到期时的时间条件内容

在设计选项卡下,更新文本样式如下:

  • 文本字体粗细:半粗体
  • 文字文字大小:18px
  • 文本行高:1.8emHeading 3 文本颜色:#000
  • 标题 3 文字大小:44px(桌面),38px(平板电脑和手机)

倒数计时器到期时的时间条件内容

接下来,将倒数计时器向上移动一个位置,位于带有主标题的顶部文本模块的正下方。 然后删除底部的按钮模块。 我们将用电子邮件选项模块替换它。

倒数计时器到期时的时间条件内容

要创建电子邮件选项,请将现有电子邮件选项模块移动(或复制并粘贴)到预制布局的底部页脚部分,并将其放置在底部文本模块下包含后续内容的部分中

倒数计时器到期时的时间条件内容

打开电子邮件选择加入设置并根据需要更新按钮文本和电子邮件帐户信息。

倒数计时器到期时的时间条件内容

在设计选项卡下,更新字段和按钮颜色,如下所示:

  • 字段背景颜色:#f8f8f8
  • 按钮背景颜色:#de6561

倒数计时器到期时的时间条件内容

最后结果

就是这样! 让我们回顾一下我们所做的。

  1. 我们将倒计时设置为在 10 月 15 日 12:00 结束。
  2. 我们在第一部分添加了日期和时间显示条件,以便显示 10 月 15 日 12:00。
  3. 我们创建了一个新的内容部分,其中包含显示该部分的日期和时间显示条件 10 月 15 日 12:00。

倒数计时器到期时的时间条件内容

这是倒数计时器到期之前的部分。

倒数计时器到期时的时间条件内容

这是倒数计时器到期后的部分。

倒数计时器到期时的时间条件内容

最后的想法

在推广限时优惠时,时间条件内容和倒数计时器是一个有用的组合。 使用 Divi,您可以轻松控制两者。 一旦倒数计时器的日期和。 时间已设置,您需要做的就是选择要在同一日期和时间之前和/或之后显示的内容。 希望这将有助于您的访问者在看到这些过期交易时获得更好的体验。

我期待在评论中收到您的来信。

干杯!

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