下载 Divi 的免费多用途销售横幅设计

在一年中促销风靡一时的关键时期，拥有多功能销售横幅肯定会派上用场（并节省您的时间）。 这就是为什么我们为 Divi 提供这个多用途销售横幅作为免费下载！ 这个销售横幅可以很容易地定制以满足您的需求，只需对一些文本和背景图像进行一些调整。 在 Divi 中设计销售横幅很容易，您不必满足于在网络上通常看起来有点颗粒感的图像横幅。 因此，除了免费下载之外，我还将向您展示如何从头开始在 Divi 中设计销售横幅。

让我们开始吧！

包括什么

这是下载中包含的销售横幅设计的一瞥。

免费下载销售横幅设计

要免费体验销售横幅设计，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您很快就会成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

将布局加载到 Divi 库

下载文件后，将其解压缩。 您会发现它包含一个名为“sales-banner-design.json”的文件。 这是您将加载到 Divi 库的内容。 现在转到您的 wordpress 仪表板并导航到 Divi > Divi Library。 然后单击页面顶部的导入按钮。 从可移植性弹出窗口中，选择导入选项卡并选择 sales-banner-design.json 文件。 然后单击“导入 Divi Builder 布局”按钮。

现在要将布局导入您的页面，只需创建一个新页面并部署可视化构建器。 然后选择“选择预制布局”。 从库加载弹出窗口中，选择“您保存的布局”选项卡，然后从列表中单击“销售横幅设计”布局。 就是这样！

如何在 Divi 中从头开始创建销售横幅

添加节背景

要开始工作，请创建一个新页面。 为页面指定标题后，部署可视化构建器并选择“从头开始构建”选项。 然后添加一个具有一列行的新部分。

在开始向该行添加任何模块之前，为您的部分设置背景渐变色（此时颜色无关紧要。我们只需要一个背景色即可查看我们将用于销售的所有白色设计元素横幅。）

自定义销售横幅的行

在我们将模块添加到行之前，让我们首先给我们的行一个 700px 的自定义宽度并去掉任何顶部或底部的间距，这样我们的行就会很好地坐在我们将在下面添加的另一行的顶部。 转到行设置并更新以下内容：

自定义宽度：700px
天沟宽度：1
自定义边距：0px 顶部，0px，底部
自定义填充：0px 顶部，0px 底部

现在将该行复制两次，以便您总共拥有三行相同的行。 这些将用于构建我们的销售横幅。

添加带有相邻文本的顶部边​​框

为了构建我们的销售横幅，我们从顶部边框开始，左侧有一些文本。 为此，我们将使用分隔模块和文本模块。 首先，新建一个文本模块，在内容框中添加几个字的内容。

内容：“仅限在线”

继续到设计选项卡并更新以下内容：

文字字体粗细：粗体
文字字体样式：TT
文字文字颜色：rgba(255,255,255,0.9)
文字文字大小：15px
文字字母间距：2px
文本行高：1em
宽度：22%（桌面）、25%（平板电脑）、40%（智能手机）
模块对齐方式：左
自定义边距：顶部 0px，底部 -15px
自定义填充：0px 顶部，0px 底部

这个自定义边距有点早，因为我们的分隔线还没有添加，但有必要将文本对齐，以便它与即将添加的分隔线完美相邻。

现在在同一行的文本模块下添加一个分隔模块。 然后按如下方式更新分隔线设置：

颜色：RGBA(255,255,255,0.9)
分隔位置：底部
分隔线重量：15px
高度：15px
宽度：78%（桌面）、75%（平板电脑）、60%（智能手机）
模块对齐：右
自定义边距：0px 顶部，0px 底部
自定义填充：0px 顶部，0px 底部

当然，在根据自己的需要自定义设计时，您需要根据文本模块的宽度来调整边框的宽度。

接下来，我们需要再添加一个分隔器模块，将分隔器连接到我们接下来要设计的行的右边框。

为此，复制分隔器模块并更新以下内容：

宽度：15px
自定义边距：-1px 底部

添加带有相邻文本的底部边框

要创建底部边框，我们可以使用在顶行的顶部边框中创建的相同元素。 只是这一次我们将从 15px 宽的分隔器模块开始。 继续并复制 15px 分隔器模块并将其粘贴到第三（底部）行中。 然后将模块对齐更新为左而不是右。

接下来，从顶行复制较长的分隔线模块并将其粘贴到底行的 15px 分隔线下方。 然后调整以下内容：

宽度：75%（桌面）、70%（平板电脑）、50%（智能手机）
模块对齐方式：左

最后，复制顶行的文本模块并粘贴到底行的两个分隔模块下方。 然后更新以下内容：

内容：“11 月 1 日开始”
宽度：25%（桌面）、30%（平板电脑）、50%（智能手机）
模块对齐：右
自定义边距：-15px 顶部，0px 底部
自定义填充：左 15px

将文本模块添加到中间行

现在我们准备开始将文本模块添加到我们的中间行，该行将保存我们的主要销售横幅文本。 我们将堆叠三个文本模块。 继续将第一个文本模块添加到中间行。

然后更新以下内容：

内容：“一切20%折扣”
背景颜色：rgba(255,255,255,0.9)

文字字体粗细：半粗体
文字字体样式：TT
文字文字颜色：#000000
文字文字大小：34px（桌面），20px（智能手机）
文字字母间距：2px
文本行高：1em
文字方向：居中
自定义填充：2vw 顶部，2vw 底部，5vw 左，5vw 右

在白色背景上为文本提供黑色对于最大化屏幕混合模式效果至关重要，这将使文本与部分背景混合。 稍后我们将在行中添加屏幕混合模式。

现在复制文本模块以启动下一个文本模块的设计。 然后使用以下 html 更新内容：

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

内联样式只是在标题文本周围添加黑色边框。 同样，黑色将与屏幕混合模式一起使用，以显示带有文本的部分背景。

然后更新以下内容：

标题 2 字体粗细：粗体
标题 2 字体样式：TT
标题 2 文本颜色：#000000
标题 2 文字大小：100 像素（桌面）、80 像素（平板电脑）、60 像素（智能手机）
标题 2 字母间距：2px
自定义边距：0px 顶部
自定义填充：0px 顶部，0px 底部

对于最后一个文本模块，复制中间行中的第一个文本模块并将其粘贴到第二个文本模块下。

然后更新以下内容：

内容：“立即购买”
文本字体样式：TT、U（下划线）
自定义边距：0px 顶部
自定义填充：1vw 顶部，2vw 底部

中间行的样式

此设计的最后阶段是在中间行添加边框和屏幕混合模式效果。 为此，请打开中间行设置并更新以下内容：

自定义填充：左 15 像素，右 15 像素
右边框宽度：15px
右边框颜色：rgba(255,255,255,0.9)
左边框宽度：15px
左边框颜色：rgba(255,255,255,0.9)
混合模式：屏幕

屏幕混合模式允许文本混合背景图像以通过文本显示以获得酷炫的效果！

查看最终结果。

添加链接到您的销售横幅

由于这是一个销售横幅，您需要最大化横幅上的可点击空间以增加转化率。 为此，您可以添加指向整个中间行的链接。 只需打开中间行设置并输入行链接 URL 即可重定向到所需页面。

为独特的设计添加不同的部分背景

使用这种新的销售横幅设计，您可以轻松更新背景图像以创建独特的设计。

这里有一些例子。

最后的想法

我希望这个销售横幅设计能在全年所需的所有网络促销活动中派上用场。 该设计旨在作为一个多用途的销售横幅，可以轻松地使用新的文本和部分背景图像进行更新，以获得全新的外观。 您甚至还可以添加视频背景！

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

干杯!