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

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

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

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

让我们开始吧！

抢先看

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

免费下载布局

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

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

单击导入按钮。

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

然后单击导入按钮。

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

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

让我们进入教程，好吗？

你需要什么开始

要开始，您需要执行以下操作：

1. 如果您还没有，请安装并激活 Divi 主题。
2. 在 WordPress 中创建一个新页面，并使用 Divi 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”将使用简介模块构建。 第二个是主切换按钮，我们将使用一个使用垂直文本旋转并定位在侧边栏/部分绝对相邻的blurb 模块来构建它。

让我们开始吧。

为按钮创建行

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

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

• 天沟宽度：1
• 宽度：100%
• 内边距：0px 顶部，0px 底部

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

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

创建“X”关闭图标

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

内容

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

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

设计

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

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

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

• 变换平移 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：-90 度
• 变换原点：右上角

先进的

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

• 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%

在 Advanced 选项卡下，更新溢出选项，如下所示：

• 水平溢出：滚动（台式机和平板电脑）、自动（手机）
• 垂直溢出：滚动（台式机和平板电脑）、自动（手机）

用内容/模块填充侧边栏

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

最后结果

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

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

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

将部分布局保存到 Divi 库

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

创建新页面模板

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

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

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

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

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

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

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

保存主题生成器设置

确保将更改保存到主题生成器。

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

最后的想法

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

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

干杯!