如何使用 Divi 将绝对定位的底部栏添加到您的英雄部分

在英雄部分构建元素的方式有时会变得棘手。 您希望获得良好的平衡，而不必大幅减少要共享的内容量。 幸运的是，一些简化的方法已经在整个网络上证明了它们的价值。 其中一种方法是在您的英雄部分添加一个绝对定位的底部栏。 它不仅在设计方面看起来不错，而且还可以帮助您添加多个号召性用语，而不会使设计失去平衡。

在本教程中，我们将向您展示如何向 Divi 中的英雄部分添加绝对定位的底部栏。 我们将添加的底部栏将包含四个部分； 三个按钮和一个联系表格。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载绝对定位的底栏英雄部分布局

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

让我们开始重建吧！

添加新部分

渐变背景

首先向您正在处理的页面添加一个新部分。 打开部分设置并应用渐变背景。

• 颜色 1：RGBA(0,0,0,0.62)
• 颜色 2：RGBA(0,0,0,0.97)
• 将渐变放在背景图像上方：是

背景图片

接下来上传您选择的背景图片。

间距

转到该部分的设计选项卡并删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

溢出

我们也隐藏了该部分的溢出。

• 水平溢出：隐藏
• 垂直溢出：隐藏

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

间距

尚未添加任何模块，打开行设置并应用一些顶部和底部边距。

• 最高利润率：20%
• 底边距：20%

将文本模块 #1 添加到列

添加H1内容

是时候添加模块了，从包含您选择的一些 H1 内容的第一个文本模块开始。

H1 文本设置

转到模块的设计选项卡并按如下方式设置 H1 文本的样式：

• 标题字体：Work Sans
• 标题文字颜色：#ffffff
• 标题文字大小：
  • 桌面：80px
  • 平板电脑：50px
  • 电话：40px
• 标题字母间距：
  • 桌面：-4px
  • 平板电脑和手机：-2px

将文本模块 #2 添加到列

添加内容

在上一个文本模块的正下方添加另一个文本模块，并包含您选择的一些描述内容。

文字设置

相应地修改模块的文本设置：

• 文字字体：Open Sans
• 文字颜色：#a0a0a0

浆纱

还要修改大小设置。

• 宽度：
  • 台式机：68%
  • 平板电脑和手机：100%

将按钮模块添加到列

添加副本

我们在这一行中需要的最后一个模块是按钮模块。 包括您选择的一些副本。

添加链接

添加按钮链接。

• 按钮链接网址：#

按钮设置

转到模块的设计选项卡并按如下所示设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字颜色：#ffffff
• 按钮边框宽度：0px

• 按钮字体：Work Sans
• 显示按钮图标：是
• 按钮图标位置：左

添加第 2 行

列结构

是时候创建我们的底部英雄栏了！ 为此，我们将使用以下列结构添加一个新行：

浆纱

在不添加模块的情况下，打开行设置并修改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是
• 宽度：
  • 台式机：100%
  • 平板电脑和手机：80%
• 最大宽度：2560px

间距

接下来删除所有默认的顶部和底部填充。

• 顶部填充：0px
• 底部填充：0px

盒子阴影

还包括一个框阴影。

• 框阴影模糊强度：80px
• 框阴影传播强度：50px
• 阴影颜色：rgba(135,135,135,0.08)

位置

然后，转到高级选项卡并在桌面上重新定位整行。 在较小的屏幕尺寸上将其恢复为默认值。 此行的位置设置将确保该行粘在节容器的底部。

• 位置：
  • 桌面：绝对
  • 平板电脑和手机：默认
• 位置：底部中心

第 1 列设置

间距

继续打开第 1 列设置并应用一些自定义填充值。

• 顶部填充：3%
• 底部填充：3%
• 左填充：3%
• 右填充：3%

边界

我们也为此列使用了一些响应式边框设置。

• 顶部边框：
  • 顶部边框宽度：5px
  • 顶部边框颜色：
    • 默认值：rgba(255,255,255,0)
    • 悬停：#ffffff
• 底部边框：
  • 底部边框宽度：
    • 台式机和平板电脑：0px
    • 电话：3px
  • 底部边框颜色：rgba(255,255,255,0.11)
• 左边框：
  • 左边框宽度：
    • 桌面：0px
    • 平板电脑：3px
    • 电话：0px
  • 左边框颜色：rgba(255,255,255,0.11)

第 2 列设置

间距

进入第二列的设置。 在间距设置中添加一些填充值。

• 顶部填充：3%
• 底部填充：3%
• 左填充：3%
• 右填充：3%

边界

并包括以下响应式边框：

• 顶部边框：
  • 顶部边框宽度：5px
  • 顶部边框颜色：
    • 默认值：rgba(255,255,255,0)
    • 悬停：#ffffff
• 底部边框：
  • 底部边框宽度：
    • 台式机和平板电脑：0px
    • 电话：3px
  • 底部边框颜色：rgba(255,255,255,0.11)
• 左边框：
  • 左边框宽度：
    • 桌面：3px
    • 平板电脑：3px
    • 电话：0px
  • 左边框颜色：rgba(255,255,255,0.11)

第 3 列设置

间距

第三列也需要自定义填充值。

• 顶部填充：3%
• 底部填充：3%
• 左填充：3%
• 右填充：3%

边界

以及以下边框设置：

• 顶部边框：
  • 顶部边框宽度：5px
  • 顶部边框颜色：
    • 默认值：rgba(255,255,255,0)
    • 悬停：#ffffff
• 左边框：
  • 左边框宽度：
    • 桌面：3px
    • 平板电脑：3px
    • 电话：0px
  • 左边框颜色：rgba(255,255,255,0.11)

第 4 列设置

背景颜色

到最后一栏。 添加白色背景色。

• 背景颜色：#ffffff

间距

应用一些自定义响应填充值。

• 顶部填充
  • 台式机：3%
  • 平板电脑：3%
  • 电话：10%
• 底部填充：
  • 台式机：3%
  • 平板电脑：3%
  • 电话：10%
• 左填充：
  • 台式机：3%
  • 平板电脑：5%
  • 电话：10%
• 右填充：
  • 台式机：3%
  • 平板电脑：5%
  • 电话：10%

位置

并在桌面上重新定位整个列。 这将使列的大小成为绝对大小，并使其粘在行的底部。

• 位置：
  • 桌面：绝对
  • 平板电脑和手机：默认
• 位置：右下角

上一行中的克隆按钮模块并在新行的第 1 列中放置重复项

完成行和列设置后，就可以开始添加模块了。 我们正在重用作为前一行一部分的按钮模块。 克隆模块并将其副本放在新行的第一列中。

更改按钮对齐方式

打开按钮模块副本并更改对齐方式。

• 按钮对齐：居中

更改副本和链接

接下来修改模块的副本和链接。

第 1 列中的克隆按钮两次并在第 2 列和第 3 列中放置重复项

修改第 1 列中按钮模块的设置后，您可以克隆整个模块两次，并将重复项放在第 2 列和第 3 列中。

更改副本和链接

更改每个副本的副本和链接。

将文本模块添加到第 4 列

添加 H2 内容

到行的最后一列。 在那里，我们需要的第一个模块是带有一些 H2 内容的文本模块。

H2 文本设置

转到模块的设计选项卡并相应地更改 H2 文本设置：

• 标题 2 字体：Work Sans
• 标题 2 文本颜色：#000000
• 标题 2 字母间距：-2px

间距

也添加一些底部边距。

• 底边距：10%

将联系表单模块添加到第 4 列

使字段全宽

接下来，在文本模块正下方添加一个联系表单模块。 分别打开姓名和电子邮件地址字段，并为两者启用“制作全角”选项。

• 制作全角：是

字段设置

转到模块的设计选项卡并按如下方式修改字段设置：

• 字段背景颜色：#ffffff
• 字段文本颜色：#000000
• 字段顶部填充：4%
• 字段底部填充：4%
• 字段字体：Work Sans
• 字段文本大小：13px

验证码文本设置

然后，对验证码文本设置进行一些更改。

• 验证码字体：Work Sans
• 验证码文本颜色：#000000

按钮设置

我们也在设计按钮的样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：17px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#000000
• 按钮边框宽度：0px

• 按钮边框半径：0px
• 按钮字母间距：-1px
• 按钮字体：Work Sans

边界

最后但并非最不重要的是，我们将包括一个底部边框宽度。 就是这样！

• 输入底部边框宽度：1px
• 输入底部边框颜色：#dddddd

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何利用 Divi 中的英雄部分发挥创意。 更具体地说，我们已经向您展示了如何包含和设计一个绝对定位的底部栏。 使用底部栏将帮助您在英雄部分分享更多内容，而不会变得过于压倒性。 使用这种技术，您可以创建任何类型的设计并同时进行多个 CTA！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。