Divi 的底部页脚栏是您网站的一小部分但很重要。 对于某些页面布局，可能需要在底部栏添加最后的创意。
在本教程中，我将向您展示如何为 Divi 的底部页脚栏添加自定义背景设计。 通过去除底部页脚栏的默认背景颜色并为部分添加一些自定义边距，您可以利用部分的设计设置来创建很酷的背景设计。
让我们开始吧。
先睹为快
以下是您可以使用本教程构建的一些示例设计的预览。
在主题定制器中自定义底部页脚栏
在我们可以在底部页脚栏后面添加自定义背景之前，我们需要摆脱使用的默认背景颜色。
转到主题定制器并导航到页脚 > 底栏。 然后将背景颜色更改为完全透明。
您可能不会注意到预览中的太大变化，因为底部栏后面仍然有页脚背景颜色。 可以在页脚 > 布局下更改页脚背景颜色，但最好让该背景颜色保持活动状态作为后备。 自定义背景将使用一个部分逐页添加到底部栏。 因此，拥有此背景将确保您的底栏内容在没有自定义背景的页面上具有背景。
如果您打算使用较暗的背景设计，您还可以将底部栏文本颜色和社交图标颜色更改为白色。 这将确保内容更具可读性。
为底栏创建截面背景设计
现在页脚底部栏具有透明背景，我们准备设计我们的部分背景并将其放置在栏后面。
如果您还没有，请创建一个新页面并选择“从头开始构建”。 然后为节行插入一列布局。
无需在行中添加模块，因为我们只需要背景设计的部分和行。
接下来，转到行设置并添加一些间距，如下所示：
自定义边距：0px 顶部，0px 底部
自定义填充（桌面）：80px 顶部，80px 底部
自定义填充（平板电脑）：100px 顶部，100px 底部
需要这个间距来为我们的部分提供一些高度，同时保留我们将为我们的背景设计添加的部分分隔器所需的空间。
现在，转到部分设置并更新间距，如下所示：
自定义边距（桌面）：-55px 底部
自定义边距（平板电脑）：-94px 底部
自定义填充：0px 顶部，0px 底部
-55px 底部边距将底部栏拉入截面区域，因此我们添加到截面中的任何设计都将位于底部栏后面。 默认情况下，底部栏在桌面上的高度为 54 像素，在平板电脑上的高度约为 94 像素，因此您需要为平板电脑设置更大的负边距。
去掉顶部和底部的填充可以最大化我们稍后将添加的部分分隔线所需的空间。
添加底部分隔线
接下来，将底部分隔线添加到该部分以框住您的页脚内容，如下所示：
底部分隔线样式：见截图
分隔线颜色：#121212
分隔线高度：120px（桌面）、150px（平板电脑）、150px（智能手机）
分频器水平重复：0.9x（台式机）、0.5x（平板电脑）、0.5x（智能手机）
分频器翻转：垂直
现在，底部栏内容（文本和社交图标）被隐藏在分隔线后面，即使分隔线排列设置为部分内容下方。 这是因为底部页脚在技术上不是部分内容的一部分。 为了解决这个问题，我们需要向我们的部分添加一个自定义 z-index，使其位于底部页脚后面。
在高级选项卡下，将以下自定义 CSS 片段添加到主元素：
z-index: 0;
现在您的页脚栏内容将位于您的部分上方，并且您有一个漂亮的背景设计来框住您的页脚栏。
它也可以在移动设备上很好地调整。
有了这个基本结构，您就可以建立一个很好的截面设计。 考虑到这一点，继续将此部分保存到您的库中，以便您可以使用此结构作为探索现在设计的起点。
现在您已准备好探索新设计。 您可以将底部分隔线更改为不同的样式和颜色，以创建无数背景框架设计。您可能需要根据您选择的分隔线样式添加调整分隔线高度和水平重复值。
这里有一些例子。
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
使用带有自定义背景渐变的顶部分隔线
使用单个底部分隔线作为底部页脚的背景框架设计有些限制。 但是，如果您使用顶部分隔线作为框架设计，则可以为您的部分使用自定义背景渐变。 这将为探索打开新的大门。
转到您的部分设置并将底部分隔线样式设置为无。 然后添加背景渐变作为您的部分背景。
现在，您可以将顶部分隔线样式添加到您的部分以创建全新的外观。
以下是一些示例设计，只需更改渐变背景和分隔线样式即可。
将分隔线与背景渐变相结合，实现多色边框设计
现在是时候把它提升一个档次了。 请记住，在部分和行内创建独特的背景设计有很多可能性。 因此，对于最后一个示例，我将向您展示如何结合这些功能来创建一个完全独特的设计。
要快速启动此设计，请继续使用您保存到库中的部分，方法是在可视化构建器中单击以添加新部分，选择从库选项卡添加，然后选择部分布局。
将该部分添加到页面后，我们就可以进行自定义了。
对于初学者，请转到设置部分并更新以下内容：
背景渐变左颜色：#29c4a9
背景渐变左颜色：#2b87da
渐变方向：90度
起始位置：50%
结束位置：0%
现在添加一个顶部分隔线，如下所示：
顶部分隔线样式：见截图
分隔线颜色：#ffffff
分隔线高度：120px（桌面）、150px（平板电脑）、150px（智能手机）
分频器水平重复：0.9x（台式机）、0.5x（平板电脑）、0.5x（智能手机）
分频器翻转：垂直
这些分隔线设置完全反映了底部分隔线，因此它创建了围绕底部分隔线的边框。 由于分隔线本身是白色的，因此给人的印象是背景渐变是底部分隔线的延伸。
现在转到行设置并添加背景渐变，如下所示：
背景渐变左颜色：#df52ff
背景渐变左颜色：#2b87da
渐变方向：90度
起始位置：50%
结束位置：0%
要使背景的每个颜色段的宽度相等，请为该行指定 50% 的自定义宽度。
这是最终的设计！
最后的想法
为 Divi 的底部页脚栏定制背景设计可以使您的页面焕然一新。 只需对页面底部的部分进行一些自定义即可。 不幸的是，该设计仅限于单个页面，无法在整个站点范围内应用。 这就是为什么使用页脚背景颜色作为后备。 但是，一旦您将该部分保存到您的库中，您就可以轻松地将其放到您想要的任何页面中。 您甚至可以添加到我们的任何预制布局中，以便在您的下一个项目中使用。 您需要做的就是确保将该部分添加到页面的最底部。 希望您会发现它很有用！
此外，您可能对使用类似技术构建导航菜单感兴趣。
我期待在评论中收到您的来信。
干杯!
