如何将创意背景设计添加到 Divi 的底部页脚栏

Divi 的底部页脚栏是您网站的一小部分但很重要。 对于某些页面布局，可能需要在底部栏上添加创造性的最后润色。

在本教程中，我将向您展示如何为 Divi 的底部页脚栏添加自定义背景设计。 通过去除底部页脚栏的默认背景颜色并向部分添加一些自定义边距，您可以利用部分的设计设置来创建很酷的背景设计。

让我们开始吧。

先睹为快

这是您可以使用本教程构建的一些示例设计的先睹为快。

在主题定制器中定制底部页脚栏

在我们可以在底部页脚栏后面添加自定义背景之前，我们需要摆脱正在使用的默认背景颜色。

转到主题定制器并导航到页脚 > 底部栏。 然后将背景颜色更改为完全透明。

您可能不会注意到预览中的太大变化，因为底部栏后面仍然有一个页脚背景颜色。 可以在页脚 > 布局下更改页脚背景颜色，但最好将该背景颜色作为备用颜色保持活动状态。 自定义背景将使用部分逐页添加到底部栏。 因此，拥有此背景将确保您的底部栏内容在没有自定义背景的页面上具有背景。

如果您打算使用较暗的背景设计，您还可以将底部栏文本颜色和社交图标颜色更改为白色。 这将确保内容更具可读性。

为底部栏创建剖面背景设计

现在页脚底部栏有一个透明的背景，我们准备设计我们的部分背景并将其放置在栏后面。

如果您还没有，请创建一个新页面并选择“从头开始构建”。 然后为节行插入一列布局。

无需向行添加模块，因为我们只需要用于背景设计的部分和行。

接下来，转到行设置并添加一些间距，如下所示：

自定义边距：0px 顶部，0px 底部
自定义填充（桌面）：顶部 80 像素，底部 80 像素
自定义填充（平板电脑）：顶部 100 像素，底部 100 像素

这个间距需要为我们的部分提供一些高度，同时保留我们将为我们的背景设计添加的部分分隔线所需的空间。

现在，转到部分设置并按如下方式更新间距：

自定义边距（桌面）：-55px 底部
自定义边距（平板电脑）：-94px 底部
自定义填充：0px 顶部，0px 底部

-55px 底部边距将底部栏拉入部分区域，以便我们添加到部分的任何设计都将位于底部栏后面。 默认情况下，桌面上的底部栏高 54 像素，平板电脑上的底部栏高约 94 像素，这就是为什么平板电脑需要更大的负边距。

去掉顶部和底部填充可以最大化我们稍后添加的部分分隔符所需的空间。

添加底部分隔线

接下来，将底部分隔线添加到该部分以构建页脚内容，如下所示：

底部分隔线样式：见截图
分隔线颜色：#121212
分隔线高度：120 像素（桌面）、150 像素（平板电脑）、150 像素（智能手机）
分隔线水平重复：0.9x（台式机）、0.5x（平板电脑）、0.5x（智能手机）
分隔线翻转：垂直

现在，底部栏内容（文本和社交图标）隐藏在分隔符后面，即使分隔符排列设置在部分内容下方。 这是因为底部页脚在技术上不是部分内容的一部分。 为了解决这个问题，我们需要向我们的部分添加一个自定义的 z-index，使其位于底部页脚的后面。

在高级选项卡下，将以下自定义 CSS 片段添加到主元素：

z-index: 0;

现在您的页脚栏内容将位于您的部分上方，并且您有一个漂亮的背景设计来框住您的页脚栏。

它也可以在移动设备上很好地调整。

有了这个基本结构，你就有了一个很好的截面设计。 考虑到这一点，继续将此部分保存到您的库中，以便您可以使用此结构作为探索现在设计的起点。

现在您已准备好探索新设计。 您可以将底部分隔线更改为不同的样式和颜色以创建无数的背景框架设计。您可能需要根据您选择的分隔线样式添加调整分隔线高度和水平重复值。

这里有一些例子。

使用带有自定义背景渐变的顶部分隔线

使用单个底部分隔线作为底部页脚的背景框架设计有些限制。 但是，如果您使用顶部分隔线作为框架设计，则可以为您的部分使用自定义背景渐变。 这将为探索打开新的大门。

转到您的部分设置并将底部分隔线样式设置为无。 然后添加一个背景渐变作为您的部分背景。

现在您可以为您的部分添加顶部分隔线样式以创建全新的外观。

以下是一些仅通过更改渐变背景和分隔线样式就可以实现的示例设计。

将分隔线与背景渐变相结合，实现多色边框设计

现在是时候把它提升一个档次了。 请记住，在部分和行中创建独特的背景设计有很多可能性。 因此，对于最后一个示例，我将向您展示如何组合这些功能以创建一个完全独特的设计。

要快速启动此设计，请继续使用您保存到库中的部分，方法是在可视化构建器中单击以添加新部分，选择从库中添加选项卡，然后选择部分布局。

将该部分添加到页面后，我们就可以进行自定义了。

对于初学者，请转到部分设置并更新以下内容：

背景渐变左颜色：#29c4a9
背景渐变左颜色：#2b87da

梯度方向：90度
起始位置：50%
结束位置：0%

现在添加一个顶部分隔线，如下所示：

顶部分隔线样式：见截图
分隔线颜色：#ffffff
分隔线高度：120 像素（桌面）、150 像素（平板电脑）、150 像素（智能手机）
分隔线水平重复：0.9x（台式机）、0.5x（平板电脑）、0.5x（智能手机）
分隔线翻转：垂直

这些分隔线设置完全反映了底部分隔线，因此它在底部分隔线周围创建了一个边框。 由于分隔线本身是白色的，这给人的印象是背景渐变是底部分隔线的延伸。

现在转到行设置并添加背景渐变，如下所示：

背景渐变左颜色：#df52ff
背景渐变左颜色：#2b87da

梯度方向：90度
起始位置：50%
结束位置：0%

要均衡背景的每个颜色段的宽度，请为该行指定 50% 的自定义宽度。

这是最终的设计！

最后的想法

为 Divi 的底部页脚栏定制背景设计可以让您的页面焕然一新。 只需要对位于页面底部的部分进行一些自定义即可。 不幸的是，该设计仅限于单个页面，无法在整个站点范围内应用。 这就是为什么使用页脚背景颜色作为后备。 但是，一旦您将该部分保存到您的库中，您就可以轻松地将其拖放到您想要的任何页面中。 您甚至可以添加到我们的任何预制布局中，以便在您的下一个项目中使用。 您需要做的就是确保将该部分添加到页面的最底部。 希望你会发现它很有用！

此外，您可能对使用类似技术构建导航菜单感兴趣。

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

干杯!