WordPress divi主题

如何使用 Divi 创建定期促销横幅

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

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

随着 Divi 的条件选项更新,您可以比以往更好地控制内容的显示方式。 您可以向部分、行和模块添加条件,以仅在满足您设置的条件时显示您的内容。 今天,我们将向您展示如何使用 Divi 的日期和时间条件向您的网站添加定期促销横幅。 这样您就可以设置它并忘记它,但您的客户和客户会一直提醒它。 让我们开始吧!

google广告开户

如何创建定期促销横幅

您的第一步需要决定您希望在哪些页面上重复出现横幅。 对于此示例,我们将使用加载了 Artisan Pizzeria 布局包的页面,您可以在 Divi 构建器中找到该布局包。 要使用我们的预制布局之一,请选择 Divi Builder 中的紫色 + 图标 并找到您想要的布局。

预制布局

无论您使用什么布局,您都可以按照这些步骤操作。

添加新部分

由于此横幅只会在某些时候显示,因此您不希望将其添加到页面上的现有元素中。 您将需要一个全新的部分。 点击 蓝色 + 图标 将新部分添加到页面。 选择 常规的 在弹出的窗口中键入部分。

添加常规部分

本节将成为您经常出现的横幅。

选择您的列布局

同样,您希望横幅具有任何布局都可以,但我们将使用 3 列布局,在此示例中,中心列是最大的。

反复出现的横幅栏结构

设计你的横幅

这是一个促销横幅,因此您需要花时间让它引人注目。 我们将把背景设置为醒目的颜色,使用一些引人注目的字体,并突出客户如何利用该优惠。

WordPress divi主题

选择背景颜色

首先,进入 部分 设置 并导航到 背景 在下面 内容选项卡. 我们正在使用颜色 #B23F19 作为背景。

背景颜色

调整行间距

保存后,进入 行设置. 从那里,点击进入 设计选项卡尺寸选项. 设置 宽度最大宽度100%. 这样做会将行的绿色边框拉伸到视口的边缘。

经常性横幅宽度

添加按钮模块并为其设置样式

接下来点击进入 第三栏 并添加一个 按键模块 使用 黑色 + 图标.

添加按钮

然后点击进入 按钮设置 并调整 按钮链接 URL 在下面 内容选项卡. 这应该是客户能够定期兑换您将获得的任何促销活动的地方。

按钮链接

之后,进入 设计 选项卡并选择 为按钮使用自定义样式. 您的具体情况可能会有所不同,但对于本文,我们希望使文本使用相同 #B23F19 作为上面的背景,然后我们将背景颜色设置为 白色的。

自定义按钮样式

fiverr建站WordPress程序员

将文本添加到其他列

设计中的其他两列将是重复横幅的促销文字,您将只是使用标准 文本模块 来实现这一点。

文本模块

在第一列中,您将添加 标题文本 表示促销的名称。 在本例中, 星期五披萨.

星期五比萨饼

然后进入 设计选项卡. 对于这个特殊的设计,我们选择 尤多拉脚本 作为 标题字体, 胆大 字体粗细, 3雷姆 作为 字体大小, 和 白色的 文字颜色中央 结盟.

独立站选品工具

星期五比萨饼

在中心栏中,重复相同的步骤,只使用 正常正文 为内容。

主体

然后,调整它的设置,就像你在上面所做的那样。 在这个例子中,我们选择 波平斯 作为 正文字体1.5rem 字体大小,但将其他设置为与促销文字相同。

促销横幅

高质量外链购买

现在我们有了促销横幅本身,让我们开始设置它以重复出现!

将固定位置添加到横幅部分

因为您希望它被注意到,所以您需要将该部分固定到页面顶部。 您可以通过进入 高级选项卡部分设置. 在下面 位置, 选择 固定的,然后单击 顶部中心正方形 指示 Divi 应在何处粘贴该部分。 我们还包括一个 Z指数99 帮助确保横幅浮动在页面上的其他内容之上。

反复出现的横幅

请注意,该部分将保留在 Divi Builder 中,而不是显示在顶部。 因此,当您编辑页面时,您可以将部分放置在您想要的任何位置。 但是,位置选项将始终显示它固定在实时站点上。

为循环横幅设置动画

您还可以通过使用 Divi 的内置动画功能来吸引客户的注意力。 前往 设计 标签 并找到 动画选项. 对于重复出现的横幅,您可以使用简单的滑入效果做很多事情。 所以选择 滑动 在下面 动画风格,设置 动画方向向下,然后设置 动画延迟500毫秒 (半秒)以防止它像任何其他内容一样立即出现。 延迟向客户表明它很特别并且需要注意。

JasperAI 10000字免费额度试用

动画片

设置条件逻辑

有了定位和动画设置,就该使用 条件逻辑 所以经常性的促销横幅实际上会再次出现。 这些选项位于 部分设置, 在下面 高级选项卡, 在里面 条件 区域。 点击 添加条件 开始。

重复条件显示

滚动直到找到 日期和时间 在下面 相互作用 副标题。 然后,选择显示 在一周中的特定日子 在下一个下拉列表中。 只需选择一周中的哪一天,促销横幅就会再次出现。

重复横幅的条件逻辑日期和时间

WordPress备份工具updrafplus

保存您的更改,您的定期促销活动就完成了。 你现在已经设置好了,所以你可以忘记它。 像(比萨)馅饼一样简单!

包起来

使用 Divi 的条件选项,您可以创建重复的促销横幅,您的网站只会在您选择的一组情况下显示。 它不必只是日期和时间,就像这个例子一样。 它可以像您想象的那样健壮,因为条件选项允许嵌套逻辑。 但是对于重复出现的促销横幅,您会看到将一个部分固定到您的网站顶部然后使用 Divi 的条件选项使其每周仅显示一天是多么简单。 设置好后,如果您不想再触碰它,就不必再触碰它。

您将使用 Divi 的条件选项和经常性横幅进行什么样的促销活动?

Killroy79 / shutterstock.com 的文章特色图片

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