在 Divi 中创建自定义显示更多切换的 2 种方法

显示更多切换可以为网站上的许多不同应用程序派上用场。 传统上，显示更多切换用于在单击显示更多链接时显示更多文本（如阅读更多切换）。 这有助于保持初始设计更加紧凑和简洁，让访问者在需要时单击以获取更多信息。

在本教程中，我们将向您展示两种为您的 Divi 站点创建自定义 Show More Toggles 的方法。 第一种方法包括将 Divi 切换模块转换为位于模块下的显示更多切换，准备显示/隐藏添加文本。 第二种方法将涉及创建一个显示更多切换，可以显示/隐藏整个 Divi 行或模块。 可以想象，这为显示或隐藏您想要的任何内容打开了大门！

让我们开始吧。

抢先看

这是我们将在本教程中构建的显示更多切换的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

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

单击导入按钮。

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

然后点击导入按钮。

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

让我们进入教程，好吗？

你需要什么开始

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

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第一种方式：使用 Divi Toggle 模块构建 Show More Toggle

首先，向您的部分添加一个两列的行。

在左栏中，添加一个模糊模块。

在模糊模块下，添加一个切换模块。 我们将把切换模块变成一个显示更多的切换，这样当点击切换时它会在模糊模块下显示/隐藏更多的文本。

为此，请打开切换模块设置并更新标题文本：

• 标题：显示更多

在设计选项卡下，更新以下内容以去除默认样式：

• 打开切换背景颜色：rgba(0,0,0,0);
• 关闭切换背景颜色：rgba(0,0,0,0)；

• 填充：顶部 0px，底部 0px，左侧 0px
• 边框宽度：0px

在“高级”选项卡下，更新以下自定义 CSS：

对于主要元素……

display:flex;
flex-direction: column;
align-items: flex-end;

对于切换标题...

order:2;
padding-right:25px !important;

对于切换内容...

order:1;
padding: 0px;

此切换标题和切换内容使用带有 display:flex 的 order 属性进行不同排序。 现在可点击的标题位于内容下方，这样它的功能就像显示更多切换。

现在，将以下 CSS 类添加到切换模块：

• CSS 类：et-readmore-toggle

这是使用我们的 JQuery 代码定位模块所必需的，我们将添加该代码以在单击切换时更改标题文本。

我们已经清理了切换模块并移除了所有填充，以便切换应该直接位于上面的模糊模块下方。 但是，顶部简介中的底部边距仍然太多，因此切换中的文本与上一段相距太远。

打开切换上方的模糊模块的设置并更新边距：

• 边距底部：10px；

现在我们准备添加 JQuery 所需的更改切换标题文本以在单击时读取“显示更多”或“显示更少”。

要添加代码，请在切换模块下添加代码模块。

然后粘贴以下 JQuery，确保将代码包装在必要的脚本标签中。

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

这是结果。

这种设计显然是基本的。 随意使用内置的 Divi 选项为切换添加更多设计以满足您的需求。

第二种方式：构建 Show More Toggle 以显示/隐藏任何 Divi 模块或行

如果第一个使用切换模块显示更多切换似乎有点过于局限，那么下一个方法会让您感兴趣。 我们将构建一个自定义显示更多切换，您可以使用它来显示/隐藏和 Divi 模块甚至整行！

为 Divi 模块构建 Show More Toggle

这是如何做到的。

首先，就像在第一个示例中所做的那样，创建另一个两列行。

然后将一个模糊模块添加到第 1 列。

在 blurb 模块下，我们将添加一个联系表单模块。

此联系表将是我们在单击“显示更多”按钮时将显示/隐藏的模块。

要在代码中定位此模块，请打开联系表单的设置并添加以下 CSS 类：

• CSS 类：et-show-more-content

我们还需要定位我们想要显示/隐藏的模块的父容器。 如果需要，这将允许我们在页面上添加多个显示更多切换实例。 在这种情况下，此联系表单模块的父容器是第 1 列。打开第 1 列的设置并添加以下 CSS 类：

• CSS 类：et-show-more-container

要创建显示更多切换按钮，请在联系表单模块下添加一个按钮模块。

您可以随意设计按钮。 完成后，将按钮模块设置设为 0pen 并添加以下 CSS 类：

• CSS 类：et-show-more-toggle

然后将按钮文本更改为“显示更多”。

现在我们已准备好添加所需的代码，以使我们的 show more 切换正常工作。

在按钮下，添加一个代码模块，以便我们可以放入 CSS 和 JQuery。

首先将以下 CSS 粘贴到代码框中，确保将代码包装在必要的样式标签中：

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

然后在 CSS 下，粘贴以下 JQuery，确保将代码包装在脚本标签中：

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

为了平衡我们的设计，复制第 1 列以创建另一个相同的列。 确保删除空的第三列和重复的额外代码模块。

这是结果。

为 Divi 行创建显示更多切换

现在我们为 Divi 模块设置了更多显示切换，让我们在此基础上添加一个新的显示更多切换来切换整行。

首先，创建一个新的一列行来保存我们的新按钮。

然后复制现有的显示更多按钮模块之一并将其粘贴到新行中。 然后打开按钮设置并更改按钮对齐方式：

• 按钮对齐：居中

由于我们希望将该行作为我们想要显示/隐藏的内容，打开包含显示更多联系表单模块切换的行的设置。 然后将以下 CSS 类添加到该行：

• et-show-more-content

并且我们还需要向行（即节）的父容器添加一个自定义 CSS 类。 打开部分设置并添加以下 CSS 类：

• et-show-more-container

这是结果。

最终结果

以下是我们构建的三个显示更多切换的最终结果。

最后的想法

本教程的目的是向您展示一些在 Divi 中创建自己的显示更多切换的方法。 希望其中一个会在以后派上用场，这样您就不必使用插件了。 尽管我们没有为这些示例添加任何壮观的设计，但这并不意味着它无法完成。 有了这个功能，你可以使用 Divi builder 设计这些显示更多的切换。 或者您甚至可以使用我们的一些预制布局进行试验。

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

干杯!