使用 Divi 的新背景选项构建响应式横幅

已发表: 2017-08-03

在我的上一篇文章中，我向您展示了如何使用 Divi 的背景选项界面通过在列和行背景上分层按钮模块来设置按钮样式。 今天，我将向您展示如何使用 Divi 的背景选项界面设计响应式可点击横幅。

我们将使用与按钮背景相同的技术，并稍作调整。 基本上，我将向您展示如何创建非常大的按钮并将它们设计得更像横幅。 这里的重要因素是横幅的整个表面区域保持可点击。 但是，您应该从一开始就知道我们只能使用这种方法制作简单的横幅。 因为我们受限于按钮模块的文本输入，所以我们只能用一串文本创建横幅。 但是，通过使用列背景选项，我们可以使用 Visual Builder 立即创建一些非常酷的横幅。

Html 横幅与图像横幅

使用 html 横幅（使用 html 元素构建的横幅）比图像横幅（作为没有任何 html 元素的单个图像构建的横幅）有很多优点。 对于 html 横幅，网络浏览器可以识别文本（页面翻译器和屏幕阅读器必不可少）。 它们随着浏览器窗口的大小而缩放，因此它们总是看起来很清晰，不像可能会变形或难以辨认的图像。 也许我最喜欢使用 html 横幅而不是图像横幅的方面是 html 真的很容易改变。 我可以通过几次按键更改文本，而不是在我的硬盘驱动器的深处搜索我需要在照片编辑器中编辑的原始文件。 而且，我可以快速制作另一个版本的横幅，以使用 Divi Leads 进行拆分测试。

这种将按钮变成横幅的方法为一些有用的应用程序打开了大门，例如为您的博客（或播客）创建自定义的特色帖子、类别或系列。

让我们开始吧。

抢先看

在我们正式开始之前。 这是我们将在这篇文章中构建的横幅的先睹为快。

横幅

使用 Divi 实现设计

订阅我们的 YouTube 频道

示例 #1：徽标横幅

使用 Visual Builder，添加一个包含一列和一行的常规部分。

横幅

接下来向该行添加一个按钮模块。

横幅

然后更新按钮模块设置如下：

内容选项

按钮文本：[输入要用于横幅消息的文本]
按钮网址：[输入网址]

设计选项

按钮对齐：居中
文字颜色：浅
为按钮使用自定义样式：是
按钮文字大小：32px
按钮边框宽度：0px
按钮字体：Arvo
按钮图标：[添加图标。 我正在使用光标图标]
仅在悬停按钮时显示图标：否

高级选项

我们需要将按钮的宽度设置为 100% 以填充列的宽度。 我们还需要扩大按钮的高度，为我们的横幅内容提供足够的空间。 为此，请在 Main Element 框中输入以下自定义 CSS：

 Width: 100%;
padding: 20px 0 200px;

注意：这里的自定义填充是调整横幅文本显示位置的关键。 由于按钮对齐已经居中，我需要做的就是垂直调整文本。 因此，给按钮文本一个较短的顶部填充和一个较长的底部填充将向横幅顶部调整文本。

保存设置

现在一切仍然是白色的，看不见，但这没关系。 我们将在行和列设置中为按钮模块添加背景。

转到按钮模块所在的行设置并更新以下内容：

内容选项

在背景图像选项卡下

背景图片：[插入图片]
背景图像位置：[使用此选项调整横幅的图像。 我想显示图像的底部，所以我选择了“底部中心”。]

横幅

现在向下滚动一点以更新第 1 列背景选项。

选择第 1 列背景渐变选项卡，然后单击带有白色加号的灰色圆形按钮。

横幅

更新以下内容：

背景渐变色：rgba(131,0,233,0.92), rgba(0,0,0,0.69)
柱梯度方向：180度
列起始位置：50%
列结束位置：0%

横幅

保存设置

接下来，我们将向横幅添加徽标。 单击背景图像选项卡并更新以下内容：

第 1 列背景图像大小：实际大小（我的徽标是 120 x 120 png）

第 1 列背景图像位置：居中

横幅

就是这样。 现在您有了一个可点击且响应迅速的简单横幅。 您可以使用按钮模块设置来添加任何您想让横幅脱颖而出的悬停效果。

横幅

让我们再举一个例子。

示例 2：简单的文本横幅

对于下一个横幅，让我们复制包含您刚刚设计的第一个横幅的整个部分。 这将节省一些设置时间。

然后转到行设置并更新以下内容：

内容选项

背景图片：[输入新图片]
背景图片位置：中心
第 1 列背景渐变颜色：rgba(0,0,0,0.41), rgba(12,113,195,0.66)
柱梯度方向：270deg

横幅

接下来单击第1 列背景图像选项卡并删除图像/徽标。

保存设置

转到按钮模块设置并更新以下内容：

内容选项

按钮文字：[为您的横幅输入文字]
按钮 URL：[输入横幅的 URL]

设计选项

按钮文字大小：42px
按钮边框宽度：19px
按钮边框颜色：rgba(0,0,0,0.17)
按钮字母间距：8px
按钮字体：Montserrat，粗体（B）
添加按钮图标：否
按钮悬停边框颜色：rgba(0,0,0,0.46)
按钮悬停边框半径：0px
按钮悬停字母间距：12px

横幅

如您所见，此示例横幅具有独特的悬停效果，可更改边框颜色并增加字母间距：

横幅

如何使您的横幅全宽

要使此横幅全宽，您所要做的就是更新“设计”选项卡下的“部分设置” ，如下所示：

自定义填充：顶部 0px、右侧 0px、底部 0px、左侧 0px

横幅

保存设置

现在转到行设置并更新设计选项，如下所示：

使这一行全宽：是
使用自定义装订线宽度：是
天沟宽度：1

横幅

现在，横幅会在所有设备上拉伸屏幕的全宽。

如何制作粘性横幅

如果您愿意，您可以轻松地将此横幅固定（粘性），并将其固定在浏览器窗口的顶部。 我建议减少填充以使其更短，这样它就不会阻挡太多的窗口。

要降低高度，请转到“高级”选项卡下的“按钮模块设置” ，在“主要元素”框中添加以下 CSS：

padding: 0px 0px !important;

现在要使整个部分具有粘性，请转到“部分设置”并在“主要元素”框中使用以下自定义 CSS更新“高级”选项卡选项：

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

现在，您的整个部分将粘在页面顶部，并在您向下滚动页面时保持在那里。

横幅

这种横幅对于没有导航栏的登陆页面上的促销项目效果很好，因为粘性横幅最终会隐藏导航栏。

向多列布局添加横幅

您还可以在多列行结构上制作横幅。 如果您想在页面或博客的底部展示一些项目，这会很方便。

让我们试一试。

添加另一个具有 1/2 1/2 列行结构的常规部分。

横幅 为了节省时间，请继续复制或复制我们刚刚创建的按钮模块并将其粘贴或拖动到第一列中。

为了获得横幅背景设计，我们将使用行设置中的列背景。 转到行设置并更新以下内容：

内容选项

在背景图像选项卡下

第 1 列背景：[输入背景图片]
第一栏背景图片位置：【根据自己的喜好调整图片的位置】
第 1 列背景图像混合：相乘

横幅

在背景渐变选项卡下

第 1 列渐变颜色：rgba(255,255,255,0), #e02b20
第 1 列梯度方向：180 度
第 1 列起始位置：70%
第 1 列结束位置：0%

横幅

最后一步是更新按钮模块设置：

内容选项

按钮文字：旅行系列

设计选项

按钮文字大小：32px
按钮边框宽度：2px
按钮字母间距：0px
按钮悬停边框颜色：#edf000
按钮悬停字母间距：0px

高级选项

主元素框中的自定义 CSS：

padding: 350px 0px 50px;
width: 100%;

横幅

此自定义 css 调整 Button 模块的填充，以便文本位于底部渐变背景后面。

随意在下一栏中为横幅复制此过程，并根据需要更新内容。

检查结果。

横幅

注意：使用此功能时，我不会使用均衡列高度。 该列将延伸超过按钮模块。 如果您希望横幅高度完美匹配，您可能需要调整按钮模块上的填充以使其正确。

有反应吗？

是的。 因为按钮是在 Divi 的列结构中构建的，所以按钮在所有设备上都会很好地响应。 对于水平横幅，我会小心放置您的徽标和文字，因为它们可能会在移动设备上重叠。

以下是缩小到较小屏幕尺寸时这些外观的示例：

横幅

浏览器兼容性

目前，Internet Explorer 或 Edge 不支持 background-blend-mode CSS 属性，并且 Safari 的混合选项有限。 然而，在大多数情况下，根据我的经验，回退并不重要。

最后的想法

我希望你喜欢这个小而有用的设计技巧来创建响应式横幅。 只要您了解所涉及的限制并保持简单，您就可以创建一些非常酷的横幅。 此外，该解决方案易于实施且可快速定制。

而且，我确信还有其他有用的应用程序。 我期待在评论中听到您的想法。

干杯!