WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧!

包括什么

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

迪维销售横幅

迪维销售横幅

迪维销售横幅

迪维销售横幅

迪维销售横幅

免费下载销售横幅设计

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

将布局加载到 Divi 库

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

WordPress divi主题

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

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

添加部分背景

要开始,请创建一个新页面。 为页面命名后,部署可视化构建器并选择“从头开始构建”选项。 然后添加一个具有一列行的新部分。

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

迪维销售横幅

自定义销售横幅的行

在我们将模块添加到行之前,让我们首先给行自定义宽度 700px 并取出任何顶部或底部间距,以便我们的行将很好地位于我们将在下面添加的另一行的顶部。 转到行设置并更新以下内容:

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

迪维销售横幅

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

fiverr建站WordPress程序员

迪维销售横幅

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

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

内容:“仅限在线”

迪维销售横幅

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

独立站选品工具

文字字体粗细:粗体
文字字体样式: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 底部

JasperAI 10000字免费额度试用

迪维销售横幅

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

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

迪维销售横幅

接下来,从顶行复制较长的分隔器模块并将其粘贴到底行的 15px 分隔器下。 然后进行以下调整:

宽度:75%(台式机)、70%(平板电脑)、50%(智能手机)
模块对齐:左

WordPress备份工具updrafplus

迪维销售横幅

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

内容:“11月1日开始”
宽度:25%(台式机)、30%(平板电脑)、50%(智能手机)
模块对齐:右
自定义边距:-15px 顶部,0px 底部
自定义填充:左 15 像素

迪维销售横幅

将文本模块添加到中间行

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

迪维销售横幅

然后更新以下内容:

内容:“全部 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 即可重定向到您想要的页面。

迪维销售横幅

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

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

这里有一些例子。

迪维销售横幅

迪维销售横幅

迪维销售横幅

迪维销售横幅

最后的想法

我希望这种销售横幅设计对全年所需的所有网络促销活动都派上用场。 该设计旨在用作多功能销售横幅,可以使用新文本和部分背景图像轻松更新,以获得全新的外观。 您甚至还可以添加视频背景!

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

干杯!

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