如何使用 Divi 的粘性选项创建粘性页脚栏

如果您正在寻找一种方法来添加 CTA，以在访问者浏览您的网站时跟随他们，您可能会考虑使用粘性页脚栏。 浏览器底部使用粘性页脚栏，您可以包含您选择的任何号召性用语，无论是按钮还是联系信息。 一旦访问者滚动到页面的页脚区域，页脚栏和页脚设计就会合并，同时更改粘性页脚栏的样式。 这种美丽的美学可能会帮助您提高页面的转化率！ 您也可以免费下载模板 JSON 文件。

让我们开始吧。

预览

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

桌面

移动的

免费下载全局页脚模板

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

下载文件

免费下载

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

下载

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

1. 创建新的页脚模板

转到 Divi 主题生成器并添加新的全局或自定义页脚

首先转到 WordPress 网站后端的 Divi Theme Builder。 在那里，添加一个新的全局或自定义页脚。

从头开始构建

从头开始构建页脚模板。

2. 构建页脚设计

部分设置

背景颜色

进入模板编辑器后，您会注意到一个部分。 打开该部分并应用黑色背景色。

• 背景颜色：#000000

添加第 1 行

列结构

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

背景颜色

还没有添加模块，打开行设置并更改背景颜色。

• 背景颜色：#ea6c01

浆纱

移至行的设计选项卡，然后更改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：90%
• 最大宽度：2580px
• 行对齐：居中

间距

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

• 顶部填充：5px（仅限平板电脑和手机）
• 底部填充：5px（仅限平板电脑和手机）

边界

接下来，在边框设置中添加一些响应式圆角。

• 所有角落：
  • 桌面：30px
  • 平板电脑和手机：15px

溢出

为了确保我们可以在本教程的后面创建重叠，我们将行溢出设置为可见。

• 水平溢出：可见
• 垂直溢出：可见

第 1 列和第 3 列可见性

为了防止在较小的屏幕尺寸上显示过多的页脚栏项目，我们将在平板电脑和手机上隐藏行中的第一列和最后一列。

将 Blurb 模块添加到第 1 列

添加内容

是时候添加模块了，从第 1 列中的 Blurb 模块开始。添加一些您选择的内容。

选择图标

接下来选择一个图标。

图标设置

转到模块的设计选项卡并相应地设置图标样式：

• 图标颜色：#f5d72e
• 圆形图标：是
• 圆圈颜色：#000000
• 图像/图标放置：顶部
• 图像/图标对齐方式：居中
• 使用图标字体大小：是
• 图标字体大小：32px

文字设置

接下来，更改文本设置。

• 文本对齐：居中
• 文字颜色：浅

标题文字设置

也对标题文本设置进行一些更改。

• 标题字体: Poppins
• 标题文字颜色：#000000

正文设置

还要修改正文设置。

• 正文字体： Poppins
• 正文字体粗细：超粗体
• 正文文字大小：20px

浆纱

接下来在大小设置中将内容宽度设置为“100%”。

• 内容宽度：100%

间距

要创建重叠，请在间距设置中添加一些负上边距。

• 上边距：-60px

动画片

并通过去除动画设置中的图标动画来完成模块设置。

• 图像/图标动画：无动画

克隆 Blurb 模块并在第 3 列中放置重复项

完成第 1 列中的第一个 Blurb 模块后，将其克隆一次并将副本放置在第 3 列中。

更改内容和图标

更改副本的内容和图标。

将 Blurb 模块添加到第 2 列

选择图标

接下来，将新的 Blurb 模块添加到第 2 列。将内容框留空并选择您选择的图标。

背景颜色

接下来添加背景颜色。

• 背景颜色：#000000

图标设置

转到模块的设计选项卡并相应地更改图标设置：

• 图标颜色：#ffffff
• 图像/图标放置：顶部
• 图像/图标对齐方式：居中
• 使用图标字体大小：是
• 图标字体大小：30px

浆纱

接下来对大小设置进行一些更改。

• 宽度：70px
• 模块对齐：居中
• 高度：40px

间距

然后，在不同的屏幕尺寸上应用自定义边距和填充值。

• 上边距：-20px（仅限平板电脑和手机）
• 顶部填充：5px
• 底部填充：0px

边界

接下来，在边框设置中添加一些圆角。

• 所有角：10px

动画片

并删除动画设置中的默认动画。

• 图像/图标动画：无动画

将文本模块添加到第 2 列

添加内容

我们在这一行中需要的下一个也是最后一个模块是第 2 列中的文本模块。添加一些您选择的内容。

文字设置

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

• 文字字体粗细：半粗体
• 文字大小：18px
• 文本行高：1.8em
• 文本对齐：居中

添加第 2 行

列结构

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

浆纱

在不添加模块的情况下，打开行设置，转到设计选项卡并更改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 最大宽度：2580px

间距

接下来添加一些顶部和底部边距。

• 上边距：50px
• 下边距：50px

将图像模块添加到第 1 列

上传图片

将图像模块添加到第 1 列并上传您的徽标或您选择的任何类型的图像。

浆纱

转到模块的设计选项卡并按如下方式更改大小设置：

• 宽度：59%
• 模块对齐：左

将文本模块添加到第 2 列

添加H3内容

接下来，将文本模块添加到第 2 列，其中包含您选择的一些 H3 内容。

H3 文本设置

更改模块的 H3 文本设置如下：

• 标题 3 字体：Poppins
• 标题 3 字体粗细：粗体
• 标题 3 文本颜色：#6d6d6d

克隆文本模块 3x 并分布在第 3 和第 4 列

完成此文本模块后，您可以克隆 3 次并将重复项分布在行的剩余两列中。

更改内容

确保更改每个重复文本模块中的内容。

将文本模块添加到第 2 列

添加内容

在第 2 列中前一个文本模块的正下方添加另一个文本模块，并添加一些您选择的链接内容。

文字设置

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

• 文字字体： Poppins
• 文字大小：30px
• 文本行高：1em
• 文本对齐方式：左
• 文字颜色：浅

链接文字设置

也更改链接文本颜色。

• 链接文字颜色：#ffffff

根据需要克隆文本模块

完成文本模块后，您可以根据需要将其克隆多次。

更改内容

确保更改每个重复模块中的内容和链接。

将文本模块添加到第 3 列

添加内容

然后，将另一个文本模块添加到第 3 列。添加一些您选择的链接内容。

文字设置

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

• 文字字体： Poppins
• 文字大小：22px
• 文本行高：1em
• 文本对齐方式：左
• 文字颜色：浅

链接文字设置

也修改链接文本颜色。

• 链接文字颜色：#ea6c01

根据需要克隆文本模块

根据需要多次克隆此模块。

更改内容

当然，根据需要更改内容和链接。

将文本模块添加到第 4 列

添加内容

在第 4 列中，我们将在第一个文本模块下方添加另一个文本模块。 添加一些您选择的内容。

文字设置

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

• 文字字体： Poppins
• 文字大小：16px
• 文本行高：1.8em
• 文本对齐方式：左
• 文字颜色：浅

将社交媒体关注添加到第 4 列

添加选择的社交网络

然后，在列的末尾添加社交媒体关注模块。 添加您选择的社交网络。

单独删除每个社交网络的背景颜色

单独删除每个社交网络的背景颜色。

间距

返回常规模块设置，转到间距设置并添加一些自定义边距值。

• 上边距：-15px
• 左边距：-8px

添加第 3 行

列结构

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

浆纱

在不添加模块的情况下，打开行设置，转到设计选项卡并按如下方式更改大小设置：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 均衡柱高：是
• 最大宽度：2580px

将文本模块添加到第 1 列

添加内容

然后，将文本模块添加到第 1 列。插入您选择的一些内容。

文字设置

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

• 文字字体： Poppins
• 文字颜色：#595959
• 文字大小：13px
• 文本对齐：居中

链接文字设置

也修改链接文本颜色。

• 链接文字颜色：#595959

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

完成第 1 列中的模块后，您可以将其克隆两次并将重复项放置在该行的其余两列中。

更改文本对齐方式

相应地更改每个重复文本模块的文本对齐方式：

• 第 2 列中的文本模块：
  • 桌面：中心
  • 平板电脑和手机：左

• 第 3 列中的文本模块：
  • 桌面：右
  • 平板电脑和手机：左

更改内容

并更改两个重复模块中的内容。

3. 对页脚栏应用粘性效果

打开第 1 行并应用粘性设置

现在我们的设计基础已经到位，是时候应用粘性效果了。 打开该部分的第一行，转到高级选项卡并应用以下粘性设置：

• 粘性位置：粘在底部
• 粘性底部偏移：
  • 桌面：50px
  • 平板电脑和手机：20px

行粘滞样式

背景颜色

现在我们已经将行设置为粘性，我们可以将粘性样式应用于行及其所有子元素。 首先向第 1 行添加粘性背景色。

• 粘性背景颜色：#000000

将粘性样式应用于第 1 列和第 3 列中的模糊模块

图标设置

接下来，打开第 1 列和第 3 列中的 Blurb 模块并添加粘性圆圈颜色。

• 粘性圆圈颜色：#ea6c01

标题文字设置

也添加粘性标题文本颜色。

• 粘性标题文字颜色：#ea6c01

将粘性样式应用于第 2 列中的 Blurb 模块

背景颜色

然后，打开第 2 列中的 Blurb 模块并应用粘性背景颜色。

• 粘性背景颜色：#ea6c01

4. 保存所有模板和主题生成器更改

完成粘性步骤后，请确保在您的网站上查看结果之前保存您的模板和主题构建器更改！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的粘性选项发挥创意。 更具体地说，我们已经向您展示了如何构建一个粘性页脚栏，一旦人们向下滚动他们所在的页面，它就会与主页脚区域合并。 您还可以免费下载模板 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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