固定页脚栏可以方便地保留重要信息 网站Web 当用户在任何设备上与您的页面内容交互时，在前台显示。
与Divi一样，页脚栏通常作为静态元素存在于主页脚内容之后的页面底部。 其中包括版权文字和社交媒体图标。
但是，如果您没有在页面底部隐藏页脚栏的内容，则可以创建一个自定义的页脚栏，该页脚会在用户滚动时浮动在屏幕底部。
在本教程中，我们将使用Divi主题生成器设计完全个性化的固定页脚栏。 这将使您随时随地保持那些小而重要的内容的方便。
可能的结果
这是我们将要设计的固定页脚栏的概述。
如何添加固定的页脚栏模板以在Divi网站上下载
警告！：添加此模型将替换 网站模板 默认情况下（如果有的话）在您的 Divi 网站上。 我们建议将其添加到测试站点，这样您就不会在实时站点上搞砸任何事情。
自行导入固定页脚栏模板 网站Web，解压下载的 zip 文件以访问 JSON 文件。
然后转到WordPress仪表板，然后转到Divi> Theme Builder。
然后单击页面右上方的可移植性图标。
在可移植性窗口中，选择您刚刚解压缩的 JSON 文件并选择“导入前下载备份”选项，以防万一您之前在 网站模板 您不想覆盖的默认值。
然后单击导入按钮。
最后，将更改保存到主题生成器并显示实时页面以查看固定的页脚栏。
现在继续学习教程，好吗？
第1部分：添加全局页脚
Divi 的主题生成器允许您通过更新 网站模板 默认。
要创建全局页脚，请转到WordPress仪表板，然后转到Divi> Theme Builder。 然后，单击默认网站模板内的“添加全局页脚”空间。
然后从下拉列表中选择“构建自定义页脚”选项。
这将部署“模型布局编辑器”，并在其中立即提示您三个开始构建方式的选择。 选择“从头开始构建”。
第2部分：创建固定的页脚栏
现在，我们正在模板布局编辑器中进行编辑，我们可以开始设计固定的页脚栏。 完成后，您将拥有一个固定的页脚栏，其中包含三列，这些列已准备就绪。
在行中添加三列布局
首先，在行中添加三列布局。
截面高度
添加三列后，让我们为该部分定义一个高度。 这对于在页面底部最终创建固定电话的位置创建空间很重要。 我们还将删除默认的顶部和底部填充。
要设置高度和填充，请打开区域设置并更新以下内容：
- 高度：85px
- 填充：高0像素，低0像素
线路设置
现在我们的部分已经准备好了，我们已经准备好自定义行以用作固定的页脚栏。 打开行设置，然后更新以下内容：
背景
- 背景颜色：＃1a1e36
尺寸和间距
- 装订线宽度：1
- 宽度：100％
- 最大宽度：100％
- 填充：向上0像素，向下0像素，向左3％，向右3％
自定义CSS
尽管该行是固定的，但我们希望该行的高度与父节的高度相匹配，以便页面底部的空间正确地包含该行。 并且，我们要确保该行的内容保持垂直对齐。 为此，请将以下定制CSS添加到该行的主要元素中：
办公室
重要：显示；高度；继承：重要；高度：继承！
电话
重要：显示：阻止；高度：继承！
固定位置
为了使线条固定在屏幕底部，我们需要在底部中心位置给它一个固定的位置，如下所示：
- 位置：固定
- 位置：下中心
第2部分：创建固定页脚栏的内容
至此，我们已经准备好一个固定的页脚栏。 我们可以将所需的任何内容添加到三列中的每列中。 但是，由于这是一个页脚“栏”，其高度限制为85像素，因此我们需要限制内容量。 因此，我们将在第4列中添加一个带有动态徽标的小菜单和1个菜单项。在第2列中，我们将添加具有动态当前年份的版权文本。 在第3列中，我们将添加三个社交媒体跟踪图标。
将菜单添加到第1列
在第1列中，添加菜单模块。
选择菜单
然后选择您已在计算机上创建的菜单之一 网站Web。 确保菜单项不超过 4 个。
将网站徽标添加为动态内容
对于徽标菜单，我们将动态添加站点徽标。 将鼠标悬停在徽标预览区域上时，单击“使用动态内容”图标。 然后从下拉列表中选择站点徽标。
移除背景
然后删除默认菜单背景，使其透明。
菜单设计
至此，我们准备向菜单添加一些设计。 对于此设计，我们将使其简单而又小巧。 更新以下设计参数：
- 字体菜单：立交桥
- 菜单文字颜色：＃b59c61
- 棕褐色图像：100％
- 徽标最大高度：50像素
将版权文字添加到第2列
菜单到位后，请转到第2列以添加版权文本。
添加文本模块
在第2列中添加一个新的文本模块。
动态地在文本前后添加当前日期
在这里，我们将获得具有动态内容的创意，以版权文本显示当前年份。 这将确保在网站的整个生命周期中自动更新年份。
为此，请单击“使用动态内容”图标，然后从列表中选择“当前日期”。
在“当前日期”弹出窗口中，更新以下内容：
- 之前：
- 01
Copyright ©
- 之后：
- 01
| Tous Droits Reservés
- 日期格式 ：自定义
- 自定义日期格式 ：20年
格式化文字
更新文本设计和边距，如下所示：
- 文字字体：立交桥
- 文字颜色：＃b59c61
- 对齐文本：中心
- 边距（仅限手机）：顶部10像素，底部10像素
这支持版权文本。
将社交媒体跟踪图标添加到第3列
在第3列中，添加社交媒体跟踪模块。
添加社交网络
在“内容”选项卡上，向网站添加必要的社交网络。 对于此设计，我们使用其中三个。
社交媒体跟踪设置
接下来，如下更新所有社交媒体跟踪图标的设计设置：
- 模块对齐：笔直（台式机和平板电脑），中心（电话）
- 图标颜色：＃1a1e36
- 使用自定义图标大小：是
- 图标字体大小：16像素（台式机和平板电脑），14像素（电话）
更新社交媒体设置
要更新单个社交网络图标的设计，请打开第一个网络的设置并更新以下内容：
- 背景颜色：#ffffff
- 填充：右侧8像素，左侧8像素
- 圆角：8px
将社交媒体设置扩展到所有人
然后打开第一个网络的其他设置菜单，然后选择“ 扩展项目样式 ”。 在“扩展样式”弹出窗口中，选择“ 本专栏 “然后点击 展开 .
这会将设计扩展到该列中的其余图标。
最后的想法
在某些情况下，添加固定的页脚栏很有意义。 导板的高度足够小，不会分散或占用手机的太多空间。 它使您能够添加重要的CTA，以获得更好的转换和更流畅的用户体验。
对于此设计，页面底部的空间是通过为该部分设置固定高度，然后允许该固定线继承该部分的高度（尽管它是固定的）来创建的。
其他资源
下面是一个列表 RESSOURCES 其他可以帮助您使用 Divi 设计网站的内容。
