如何创建漂亮的页脚滚动显示在 Divi 的部分分隔线下方

在所有设计趋势中，页脚仍然必不可少。 人们已经习惯了它们，这反过来又使它们非常用户友好。 它们帮助访问者组织他们在您网站上的停留并导航到他们正在寻找的准确页面。 使用 Divi，您可以在一个部分中轻松创建任何类型的页脚。

现在，如果你想给你的页脚一些额外的维度和互动，你会喜欢这篇文章。 我们将创造性地将页脚部分与部分分隔符组合起来，以创建页脚滚动显示。

让我们开始吧！

预览

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

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

1.创建新的空白页面并上传选择的布局

添加新的空白页

您需要做的第一件事是创建一个新的空白页面。

上传 SaaS 公司布局包登陆页面

切换到 Visual Builder 并上传 SaaS 公司布局包的登录页面。 尽管我们正在使用这种特定的布局，但您可以使该技术在您正在处理的任何类型的页面上工作。

2.为每个部分添加Z索引并删除部分动画

将 Z 索引添加到英雄部分

继续更改页面上英雄部分的 z 索引。

• Z指数：3

复制 Z 索引并粘贴到页面上的所有其他部分

复制 z 索引并将其粘贴到页面上的所有其他部分。 增加每个部分的 z 索引是使教程工作的关键步骤。 它将允许每个部分出现在我们稍后将在帖子中添加的页脚部分的顶部。

删除英雄部分动画

为了确保页脚一直隐藏到页面底部，我们还将删除所有部分动画。 打开英雄部分并删除动画。

• 动画风格：无

将动画扩展到页面上的所有部分

将动画样式扩展到整个页面的所有部分。

3.修改页面最后一节

更改背景颜色

移至页面的最后一部分并更改背景颜色。

• 背景颜色：#f2f2f2

4. 将常规部分 #1 添加到页面底部

部分设置

背景颜色

正如您在这篇文章的预览中所注意到的，页脚将出现在分区分隔符下方。 我们将在页面底部专门为该部分分隔线创建一个新部分。 打开部分设置并使用完全透明的背景颜色。 这将允许页脚通过节容器显示，即使其位置将在其下方。

• 背景颜色：rgba(0,0,0,0)

顶部分隔线

转到该部分的设计选项卡并添加您选择的顶部分隔线。

• 分隔线样式：在列表中查找
• 分隔线高度：250 像素（桌面）、150 像素（平板电脑）、100 像素（手机）
• 分隔线水平重复：2x

Z索引

这个新部分也需要增加 z 索引。

• Z指数：3

5. 将常规部分 #2 添加到页面底部

部分设置

背景颜色

是时候创建页脚部分了！ 在页面底部添加另一个新的常规部分，然后选择您选择的背景颜色。

• 背景颜色：#202332

浆纱

转到设计选项卡并确保宽度为“100%”。

• 宽度：100%

间距

我们还需要增加该部分的顶部填充。

• 顶部填充：500px

Z索引

我们分配给此部分的 z 索引低于页面上其他部分的 z 索引。 这将帮助我们隐藏该部分，直到我们到达页面底部。

• Z指数：2

添加新行

列结构

继续使用以下列结构添加新行：

浆纱

打开行设置并相应地更改大小设置：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是

列间距

接下来打开第 1 列设置并添加一些左填充。

• 左填充：20px

列右边框

向列添加右边框。

• 右边框宽度：1px
• 右边框颜色：#515151

复制粘贴列样式

通过扩展样式或使用复制粘贴选项将更改应用于所有列。

将图像模块添加到第 1 列

上传图片

是时候开始添加模块了！ 将新的图像模块添加到第一列并上传您的徽标。

浆纱

转到设计选项卡并更改不同屏幕尺寸的宽度。

• 宽度：35%（桌面）、30%（平板电脑）、25%（手机）
• 模块对齐：左

间距

添加一些底部边距。

• 在图像下方显示空间：是
• 下边距：50px

将文本模块 #1 添加到第 2 列

添加内容

进入第二列！ 添加具有您选择的某些内容的第一个文本模块。

文字设置

修改文本设置。

• 文字字体：Nunito Sans
• 文字字体粗细：半粗体
• 文字颜色：#ffffff
• 文字大小：19px

间距

并在不同的屏幕尺寸上添加一些自定义的顶部和底部边距。

• 上边距：15px（桌面和平板电脑），10px（手机）
• 下边距：15px（桌面和平板电脑），10px（手机）

将文本模块 #2 添加到第 2 列

添加内容

将第二个文本模块添加到第二列并输入您选择的一些内容。

添加链接

添加与页脚项目匹配的链接。

• 模块链接网址：#

文字设置

接下来修改文本设置。

• 文字字体：Nunito Sans
• 文字颜色：#dbdbdb
• 文字大小：17px

间距

并在不同的屏幕尺寸上添加一些自定义的顶部和底部填充。

• 上边距：15px（桌面和平板电脑），10px（手机）
• 下边距：15px（桌面和平板电脑），10px（手机）

根据需要多次克隆文本模块 #2

根据需要多次克隆第 2 列中的第二个文本模块。

更改内容

确保更改内容。

更改链接

随着链接。

• 模块链接网址：#

克隆第 2 列中的模块并放置在其余列中

完成第二列后，您可以根据需要最多克隆这两个模块，并将重复项放置在该行的其余两列中。

更改内容

更改每个副本的内容。

更改链接

随着链接。

• 模块链接网址：#

6. 将第 2 部分固定在页面底部

添加自定义 CSS

现在，为了创建滚动显示，我们将通过向页脚部分的主要元素添加两行 CSS 代码来确保页脚部分粘在页面底部。

position: fixed;
bottom: 0;

7. 将底部边距添加到部分 #1 以创建显示效果

在不同的屏幕尺寸上添加底部边距

我们还需要在页面底部留出一些空间，以便显示页脚。 打开包含部分分隔符的部分，并在不同的屏幕尺寸之间添加一些底部边距，您就完成了！

• 下边距：400px（桌面）、700px（平板）、800px（手机）

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何创建漂亮的页脚滚动显示在部分分隔线下方以创建独特的效果。 这是使任何页脚具有交互性并引起对页脚中列出的项目的注意的好方法。 我们希望本教程也能激发您创建自己的分区分隔页脚显示！ 如果您有任何问题或建议，请务必在下面的评论部分留言。

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