如何在 Divi 中创建滑动推边栏

侧边栏可能很棒，但它们也可能浪费空间。 这就是为什么创建滑动推送侧边栏对于那些希望侧边栏不会分散用户对页面主要内容的注意力的人来说是一个完美的选择。 此外，这种侧边栏使用户可以选择随时查看或隐藏侧边栏。

滑动推送效果的独特之处在于，侧边栏从页面左侧滑入，同时推送（或挤压）页面的主要内容以使侧边栏适合视口。 简而言之，它滑动侧边栏并推动页面。

侧边栏一旦建成，它就成为适用于所有类型应用程序的多功能工具，包括菜单和表单。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

要将其添加到页面或模板，您需要添加一个新部分并从库中选择部分布局。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“选择预制布局”选项。
   
4. 选择 Event Layout Pack 并单击以使用 Event Home Page 布局。
   

如何在 Divi 中创建滑动推边栏

要创建滑动推边栏，我们将需要使用一个新的常规部分。 我们将调整该部分的大小和位置，使其成为单击按钮时打开的固定侧边栏，推动（并挤压）右侧的主要内容区域，为侧边栏腾出空间。

构建部分

首先，让我们向页面添加一个新的常规部分。

然后移动页面顶部的部分。

部分设置

打开截面设置，更新要固定的位置如下：

• 位置：固定
• Z指数：9999

在设计选项卡下，更新大小和间距如下：

• 宽度：350px（桌面和平板电脑），100%（手机）
• 高度：100%
• 填充：顶部 100 像素，底部 0 像素

填充是为页面顶部的标题腾出空间。

接下来，在高级选项卡下，为该部分提供一个 CSS 类：

• CSS 类：et-push-sidebar

一旦 css 类就位，给该部分一个背景颜色：

• 背景颜色：#1a1e36

要创建更明显的分隔，请返回设计选项卡，然后添加右边框。

• 右边框宽度：2px
• 右边框颜色：#eeeeee

这会处理作为侧边栏主要容器的部分。 现在是时候开始构建我们将用来切换侧边栏打开和关闭的两个按钮了。

创建侧边栏切换按钮

将有两个按钮用于切换侧边栏。 第一个按钮将是一个“X”图标，它会在打开侧边栏的移动版本后关闭它。 “X”将使用模糊模块构建。 第二个是主切换按钮，我们将使用一个模糊模块构建它，该模块与垂直文本一起旋转并与侧边栏/部分绝对相邻。

让我们开始吧。

为按钮创建行

在部分/侧边栏中创建一个新的单列行。

打开行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 填充：0px 顶部，0px 底部

在高级选项卡下，更新位置选项如下：

• 位置：绝对
• Z指数：1

创建“X”关闭图标

要创建“X”关闭图标，请向该行添加一个模糊模块。 使用图层模式添加新模块可能更容易，因为点击内容会有些困难。

内容

然后打开模糊设置。 在内容选项卡下，取出标题和正文内容，并将 X 图标添加到简介中。

• 使用图标：是
• 图标：x（见截图）

设计

在设计选项卡下，更新以下内容：

• 图标颜色：#eeeeee
• 图像图标放置：左
• 使用图标字体大小：是
• 图标字体大小：40px
• 宽度：50px

接下来，通过添加以下转换转换属性将图标降低一点：

• 变换 平移 X : 100px
• 变换 平移 Y : -10px

先进的

在“高级”选项卡下，禁用平板电脑和台式机上的简介，以便我们只能在手机显示屏上看到它。

• 禁用：平板电脑和台式机

然后将一个 CSS 类添加到简介中并给它一个固定的位置，以便在手机显示屏上滚动侧边栏内容时它保持在视图中。

• CSS 类：et-slide-push-close
• 位置：固定
• 位置：右上角

这负责“X”关闭图标按钮。

创建主侧边栏切换按钮

要创建主侧边栏切换按钮，请在现有的“X”图标模糊下添加一个模糊模块。

内容

更新标题并单击以使用向下箭头图标。

• 标题：活动信息
• 使用图标：是
• 图标：向下箭头（见截图）

接下来，为简介添加背景颜色。

• 背景颜色：#eeeeee

设计

在设计选项卡下，更新以下内容：

• 图标颜色：#1a1e36
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：25px
• 标题字体：天桥
• 标题字体粗细：粗体
• 标题字体样式：TT
• 标题文字颜色：#1a1e36
• 标题字母间距：2px
• 标题行高度：1.2em
• 填充：顶部 0.6em，左侧 1em，右侧 1em
• 圆角：底部两个角为 5px

要在截面外定位和旋转模糊，请使用如下变换选项：

• 变换 平移 Y : 100px
• 变换旋转 Z : -90deg
• 变换原点：右上角

先进的

在高级选项卡下，更新以下内容：

• CSS 类：et-slide-push-toggle
• 位置：绝对
• 位置：右中心

使用代码模块添加自定义代码

完成两个按钮后，我们就可以添加自定义代码，为侧边栏提供所需的滑动推送功能。

要添加代码，首先，将代码模块添加到同一列。

然后将以下代码粘贴到代码模块中。

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

创建侧边栏内容行

我们创建的第一行是用于制作侧边栏功能的按钮和代码。 下一行将用于侧边栏内容。

要创建侧边栏内容行，请在侧边栏/部分的第一行下方添加一个新的单列行。

行设置

打开新行的设置并更新以下内容：

• 宽度：100%
• 高度：100%
• 填充：顶部 5%，底部 5%，左侧 5%，右侧 5%

在高级选项卡下，更新溢出选项如下：

• 水平溢出：滚动（桌面和平板电脑），自动（手机）
• 垂直溢出：滚动（桌面和平板电脑），自动（手机）

用内容/模块填充侧边栏

现在您的侧边栏已准备就绪，您需要做的就是根据需要将任何模块添加到侧边栏中的第二行。 对于此示例，我只是从活动主页布局中复制模块并将它们粘贴到行的列中。

最后结果

在实时页面上查看最终结果。

将滑动推边栏添加到页面模板

如果您想默认在所有页面上使用此侧边栏，则需要使用 Divi Theme Builder 将侧边栏/部分添加到页面模板中。

将部分布局保存到 Divi 库

为此，首先，将用于创建侧边栏的部分保存到 Divi 库。 您可以通过单击图层模式中侧边栏上的三个点，添加布局名称并将其保存到库中来完成此操作。

创建新页面模板

接下来，转到主题构建器并创建一个新模板并将该模板分配给所有页面。

将侧边栏添加到页面模板

接下来，单击以编辑页面模板。

在模板布局编辑器中，添加一个新的全角部分。

然后将全角帖子内容模块插入该部分。

下一步点击即可。 在全角部分上方创建一个新部分。 然后单击“从库中添加”选项卡并从库中选择“滑动推边栏”部分布局。

完成后，您可以使用正文布局编辑器根据需要编辑侧边栏。

保存主题生成器设置

确保将更改保存到主题构建器。

现在您的所有页面都将具有侧边栏。

最后的想法

对于那些寻求两全其美的人来说，滑动推送侧边栏是一个完美的选择——侧边栏保持在最前沿，而不会带走（或分散）页面的主要内容。 随意将它用于各种事情，例如注册表单、电子邮件选择加入、菜单等等。

我期待在评论中收到您的来信。

干杯!