页脚抽屉是任何有用的补充 网站Web，因为它们存储了用户可以轻松访问的其他内容。 页脚抽屉是 Web 内容容器（如 Divi 部分），可以通过单击按钮或将鼠标悬停在它们上面来打开和关闭。 这就像为优质内容储备了一些东西。
在本教程中，我们将在 Divi 中设计一个浮动的页脚抽屉。 我们将页脚抽屉添加到全局页脚区域 网站模板 以便使用正常的页脚内容可以在站点范围内访问页脚抽屉。
通过我们将要使用的过程，任何Divi部分（及其内容）都可以在几分钟之内转换为页脚抽屉。
如何将页脚抽屉模板添加到您的Divi网站
添加此模型将替换 网站模板 默认情况下（如果有的话）在您的 Divi 网站上。 我们建议将其添加到测试站点，这样您就不会在实时站点上搞砸任何事情。
自行导入固定页脚抽屉模板 网站Web，解压下载的 zip 文件以访问 JSON 文件。
然后转到WordPress仪表板，然后转到Divi> Theme Builder。
然后单击页面右上方的可移植性图标。
在可移植性窗口中，选择您刚刚解压缩的 JSON 文件并选择“导入前下载备份”选项，以防万一您之前在 网站模板 您不想覆盖的默认值。
然后单击导入按钮。
最后，将更改保存到主题生成器并显示实时页面以查看固定的页脚栏。
现在继续学习教程，好吗？
第1部分：添加全局页脚
Divi主题生成器允许您通过更新默认网站模板，用新的页脚替换默认页脚。
要创建全局页脚，请转到WordPress仪表板，然后转到Divi> Theme Builder。 然后，单击默认网站模板内的“添加全局页脚”空间。
然后从下拉列表中选择“ Build Global Footer”选项。
将预定义的布局添加到全局页脚布局
这将部署“模型布局编辑器”，并在其中立即提示您三个开始构建方式的选择。 选择“选择预定义的布局”选项。
在“从库加载”弹出窗口中，找到文具登陆页面的布局。 然后单击“使用此布局”。
从预制布局中删除不需要的内容
将布局加载到编辑器中后，通过单击设置菜单中的图层图标来展开“图层”弹出框。 然后删除布局中除最后两个部分以外的所有部分。
移动并标记两个部分
删除这些部分后，您应该有两个部分，一个标题为“ Footer”，另一个标题为“ How How work”。 将“页脚”部分移到布局的顶部。
将下部的措辞更改为“页脚抽屉”。 这是我们将用作页脚抽屉内容的部分。
第2部分：创建固定的页脚抽屉
现在，我们已将其中一个部分指定为页脚，另一部分指定为页脚抽屉，我们准备开始构建固定的页脚抽屉。 让我们首先创建将用于切换页脚抽屉的blurb图标。
创建页脚抽屉按钮
添加新行
在底部的页脚部分中，将新行添加到列中。
将新行标记为“抽屉按钮”，因为该行将包含用于切换抽屉打开和关闭的按钮。 然后将线移动到该部分的顶部。
行填充
在添加模块之前，请按以下步骤打开行设置并更新填充：
- 填充：高0像素，低0像素
节填充
然后在“页脚抽屉”部分中打开设置，并按如下所示更新填充：
为了创建可切换页脚抽屉的可点击按钮，我们将使用带有图标的Blubb模块。 而且，我们将通过结合Blurb pod容器的正方形形状和圆圈图标为它提供独特的泪珠形状。
就是这样
添加Blurb模块
将演示文稿文本模块添加到该部分顶部的“抽屉按钮”行。
模糊内容/图标
接下来，删除默认的标题和正文内容，然后选择指向左上角的箭头图标（请参见屏幕截图）。 我们正在使用部分旋转的图标，因为稍后将对其进行旋转。
模糊设计
然后提供演示文稿文本，如下所示：
- 背景颜色：＃081540
然后，如下更新设计参数：
- 图标颜色：#eeeeee
- 圆圈图标：是
- 圆形颜色：＃081540
- 使用图标字体大小：是
- 图标字体大小：17像素
演示文字大小
现在为模块指定高度和宽度，如下所示：
- 宽度：30px
- 高度：30px
这将导致圆圈图标溢出到文本容器中以创建水滴形状。
模糊位置
然后，将演示文稿文本的绝对位置指定为该部分的顶部中心。
- 位置：绝对
- 地点：顶尖中心
模糊转换设置
现在，我们可以使用转换选项将blurb /图标向上旋转并将其定位在section容器上方。 现在，当我们将部分隐藏在浏览器窗口下时，该图标将保持可见/可单击。
更新以下项目：
- 变换变换X轴：-50％
- 转换Y轴平移：-250％
- 变换Z轴旋转角度：-45度
然后删除默认的图标动画：
- 图像/图标动画：无动画
我们将使用JQuery切换抽屉，因此我们需要将文本/图标作为可点击元素的CSS类，我们将在稍后的代码中使用它。 添加以下CSS类：
- CSS类：目标抽屉
页脚抽屉部分设置
现在，我们将使用翻译转换选项隐藏“页脚抽屉”部分。 打开部分设置并更新以下内容：
- 变换变换Y轴：100％
在这里使用转换的好处是百分比值基于项目的实际大小。 因此，Y轴上的100％将直接相对于截面的高度（无论在任何给定时间都等于该高度）。 换句话说，该元素将沿其自身高度精确地向下移动。
为了重新显示“页脚抽屉”，我们将需要反转刚刚添加到此部分的转换转换。 为此，我们需要使用CSS类来定位该元素，并通过单击该图标禁用翻译转换（将整个部分恢复到其原始位置）。
在页脚抽屉部分添加CSS类
在高级选项卡下，添加以下CSS类：
- CSS类：has-transform
页脚抽屉部分固定位置
对于最后一步，我们需要固定页脚抽屉，使其（带有图标）浮动在浏览器窗口的底部。
如下更新“页脚抽屉”部分的位置：
- 位置：固定
- 位置：左下
- Z索引：13
关闭移动内容
由于页脚抽屉中的内容数量有限，无法同时容纳平板电脑和手机（由于屏幕高度有限），因此您需要关闭/隐藏显示器中不必要的项目。 在此示例中，我们将隐藏部分布局的中间行。
打开“页脚抽屉”部分中第二行到最后一行的设置。 在高级标签下，更新可见性选项以关闭手机和平板电脑上的线路。
添加自定义代码
要在页脚抽屉中添加单击和切换功能，我们需要向页面添加自定义CSS和JQuery。 为此，请在用于按钮的Blurb模块下创建一个新的代码模块。
然后将以下代码粘贴到代码区域中：
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
保存更改
在退出编辑器之前，请记住保存布局。
还将更改保存在主题生成器中。
最终结果
现在我们可以转到您的任何页面 网站Web 查看最终结果。
最后的想法
希望浮动页脚抽屉对您有帮助 促进 以有趣且易于理解的方式提供内容。 就像任何抽屉一样，您可以在里面装满任何您能想到的东西。
其他资源
以下是一系列教程，可以帮助您充分利用Divi的内部功能。
翻译自： 优雅的主题
