如何使用 Divi 创建固定的移动页脚栏

我们知道确保一切都经过定制以适应移动体验是多么重要。 为了帮助您将移动体验提升到另一个层次，我们将在这篇分步帖子中向您展示如何使用 Divi 创建固定的移动页脚栏。

本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 这一次，我们将使用 Health Clinic Layout Pack 并使固定的移动页脚栏与布局包的样式相匹配。 但是，您可以将这种方法用于您正在处理的任何类型的设计，并创建您自己的固定移动页脚栏替代品。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下我们将逐步重新创建的三个示例。 这些示例只会显示在移动设备上（如果您愿意，也可以显示在平板电脑上）。

重新创建示例 #1

将新部分添加到页面底部

让我们开始重新创建第一个固定移动页脚栏！ 我们建议为 Health Clinic Layout Pack 中包含的三个布局创建一个页面。 每个示例一个。 打开要添加第一个页脚栏的页面。 向下滚动到页面末尾并在最后一个部分之后添加一个新部分。

间距

打开行设置并删除间距设置中的所有自定义顶部和底部填充。

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

能见度

我们也在桌面上隐藏此部分。 如果您希望移动页脚栏仅显示在移动设备上，请继续在平板电脑上隐藏该部分。

添加新行

列结构

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

浆纱

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

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

间距

删除下一行的所有默认顶部和底部填充。

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

自定义 CSS

最后，我们在行中添加了一些自定义 CSS 行。 这些行将有助于将行变成固定的页脚栏。

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

将文本模块添加到第 1 列

添加内容

是时候开始添加模块了！ 我们需要的第一个模块是第 1 列中的文本模块。添加一些选择的内容。

背景颜色

转到模块的背景设置并更改背景颜色。

• 背景颜色：#5e89fb

文字设置

还要修改文本设置。

• 文字字体：Work Sans
• 文字字体粗细：轻
• 文字颜色：#ffffff
• 文字大小：16px
• 文字字母间距：-1px

间距

接下来添加一些自定义填充值。

• 顶部填充：16px
• 底部填充：16px
• 左填充：15px
• 右填充：15px

边界

还有一些圆角。

• 左上角：10px
• 右上角：10px

盒子阴影

通过添加微妙的框阴影来完成模块的设置。

• 框阴影模糊强度：80px

将 Blurb 模块添加到第 2 列

添加内容

将 Blurb 模块添加到第二列并添加选择的标题。

选择图标

继续选择 Blurb 模块的图标。

背景颜色

还要为模块添加背景颜色。

• 背景颜色：#62de9d

图标设置

移至设计选项卡并更改图标设置。

• 图标颜色：#ffffff
• 图标位置：左
• 使用图标字体大小：是
• 图标字体大小：19px

标题文字设置

继续修改标题文本设置。

• 标题字体：Work Sans
• 标题文字颜色：#ffffff
• 标题文字大小：16px
• 标题字母间距：-1px

间距

也向模块添加一些自定义填充。

• 顶部填充：20px
• 底部填充：10px
• 左填充：30px
• 右填充：30px

边界

并在左上角和右上角添加“10px”。

• 左上角：10px
• 右上角：10px

盒子阴影

最后但并非最不重要的一点是，为模块添加一个微妙的框阴影。

• 框阴影模糊强度：80px

重新创建示例 #2

将新部分添加到页面底部

进入第二个例子！ 再次打开您选择的页面，向下滚动到页面末尾并添加一个新部分。

间距

打开部分设置并删除默认的顶部和底部填充。

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

能见度

隐藏桌面上的部分（如果您愿意，也可以隐藏平板电脑）。

添加新行

列结构

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

浆纱

不添加任何模块，打开行设置并更改大小设置。

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

间距

也删除行的默认顶部和底部填充。

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

自定义 CSS

将一些自定义 css 行添加到下一行。 这些 CSS 代码行将有助于创建固定的移动页脚栏。

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

将 Blurb 模块添加到第 1 列

添加内容

继续向第一列添加一个 Blurb 模块。 添加选择的标题。

选择图标

然后，选择一个图标。

背景颜色

接下来为模块添加背景颜色。

• 背景颜色：#62de9d

图标设置

转到设计选项卡并更改模块的图标设置。

• 图标颜色：#ffffff
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：25px

标题文字设置

也更改标题文本设置。

• 标题字体：Work Sans
• 标题文本对齐：居中
• 标题文字颜色：#ffffff
• 标题字母间距：-1px

间距

并添加一些顶部和底部填充物，为模块提供一些呼吸空间。

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

边界

我们还在模块的左上角添加了“15px”。

• 左上角：15px

盒子阴影

我们将用一个微妙的盒子阴影来完成这个模块。

• 框阴影模糊强度：80px

克隆 Blurb 模块两次并在剩余列中放置重复项

完成第一个 Blurb 模块的修改后，您可以继续克隆该模块两次，并将重复项放置在剩余的两列中。

更改重复 #1 的背景颜色

更改第一个副本的背景颜色。

• 背景颜色：#3d3d3d

更改重复 #1 的间距设置

随着间距设置。

• 上边距：-20px
• 顶部填充：50px
• 底部填充：30px

更改副本 #1 的边框

还有圆角。

更改副本 #2 的背景颜色

也更改第三列中第二个副本的背景颜色。

• 背景颜色：#000000

更改重复 #2 的边框

随着圆角。

• 右上角：15px

重新创建示例 #3

将新部分添加到页面底部

继续下一个也是最后一个例子！ 打开其中一个页面，向下滚动页面并添加一个新部分。

顶部分隔线

打开部分设置并添加顶部分隔线。

• 分隔线颜色：#62de9d
• 分隔线高度：110px

间距

删除该部分的所有默认顶部和底部填充。

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

盒子阴影

在接下来的部分添加一个微妙的框阴影。

• 框阴影模糊强度：80px

自定义 CSS

并在高级选项卡中包含一些自定义 CSS 行。 这将有助于将该部分变成固定的移动页脚栏。

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

能见度

最后，禁用台式机（和平板电脑，如果您愿意）上的部分。

添加新行

列结构

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

浆纱

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

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

间距

接下来添加一些自定义的顶部和底部填充。

• 顶部填充：30px
• 底部填充：20px

自定义 CSS

为了确保所有三列保持相同的高度，我们还将向该行的高级选项卡添加一行 CSS 代码。

display: flex;

将 Blurb 模块添加到第 1 列

添加内容

现在我们可以开始添加模块了！ 将 Blurb Module 添加到第一列并为其指定标题。

选择图标

接下来选择一个图标。

图标设置

移至设计选项卡并更改图标设置。

• 图标颜色：#ffffff
• 图标位置：顶部
• 使用图标字体大小：是
• 图标字体大小：25px

标题文字设置

还要修改标题文本设置。

• 标题字体：Work Sans
• 标题文本方向：居中
• 标题字母间距：-1px

克隆 Blurb 模块两次并放置

修改完第 1 列中的 Blurb 模块后，您可以继续克隆该模块两次。 将重复项放在剩余的两列中。

更改重复 #1 的图标颜色

不要忘记更改位于第二列中的副本的图标颜色。

• 图标颜色：#000000

预览

现在我们已经完成了所有不同的步骤，让我们最后看看我们在上面处理的所有三个示例的结果。

最后的想法

在这篇文章中，我们处理了三种不同的固定移动页脚栏设计，您可以按照教程逐步重新创建它们。 移动页脚栏将跟随访问者在页面上的整个滚动体验。 本教程是正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议，请务必在下方评论区留言！