如何在其他 Divi 模块中插入 Divi 模块或行（无插件）

如果您已经使用了一段时间的 Divi，那么您可能会想到在另一个模块中插入一个 Divi 模块（或行）。 大多数情况下，如果你知道如何熟练使用Divi，这种事情并不是真正必要的。 Divi 模块已经是功能强大的元素，包含功能和内置设计设置。 但是，有时通过使用 Divi 设计两个模块然后将一个插入另一个模块来增强这些功能会很好。 一个很好的例子是将一个模块（如联系表单）插入到切换模块中，以便在单击切换时显示该表单。

在本教程中，我们将分享如何将 Divi 模块或行插入另一个 Divi 模块。 为此，需要添加一些 JQuery 小片段。 一旦代码就位，我们可以使用 Divi Builder 添加适当的 CSS 类来定位我们想要插入/移动的元素以及我们想要放置它们的模块。

让我们开始吧！

抢先看

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

Toggle 模块内的联系表

Blurb 模块中的切换模块和按钮模块（右列）

切换模块内的 Divi 行

免费下载布局

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

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

单击导入按钮。

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

然后点击导入按钮。

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

让我们进入教程，好吗？

你需要什么开始

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

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

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

要记住的事情

对于本教程，您仍然可以使用 Divi Builder 内置设置直观地完成此过程中要使用的所有模块的样式化过程，因此我们将把这部分留给您。 我们将更多地关注如何将正确的 CSS 类和 HTML 应用于每个 Divi 元素，以便将模块/行插入另一个模块中。

请记住，我们只能在实时页面上看到最终结果，而不能在从可视化 Divi Builder 进行编辑时看到。 换句话说，我们可以使用 Divi 设计模块，但在您查看页面的实时版本之前，它们将在构建器中保持独立。

您只能在能够添加文本/html 的模块中插入模块或行。

此外，正如我们稍后将解释的那样，您可以在列或部分中拥有的实例（模块或行插入到另一个模块中）的数量有一定的限制。 将模块插入另一个模块时，每列仅限于一个“目标”模块（该模块将保存要插入的模块）。 而且，当将行插入另一个模块时，每个部分仅限于一个“目标”模块。 尽管从某种意义上说这是一种限制，但它确实让您可以在需要时选择在页面上拥有多个实例。

第 1 部分：如何将 Divi 模块插入另一个模块

在本教程的第一部分，我们将向您展示如何将 Divi 模块插入到另一个模块中。 首先，我们将向您展示如何在切换模块中添加联系人模块。 然后，我们将向您展示如何在 Blurb 模块中添加切换模块和按钮模块。

示例 1：在 Toggle 模块内插入联系表单模块

添加新行

首先，向该部分添加一个新的单列行。

添加切换模块（目标模块）

在列内，添加一个切换模块。

在这个例子中，我们想在这个 Toggle Module 中插入一个模块，我们可以将其称为我们的目标模块。 从技术上讲，实际目标将在切换模块的正文内容中（您可以在其中添加文本/HTML）。 为了指定目标位置，我们需要插入一个带有必要 CSS 类的新div ，它将作为我们的可移植模块（我们要插入的模块）的目标位置。

在切换设置的内容选项卡下，将以下 HTML 添加到正文。 确保在插入 HTML 之前单击文本选项卡。

<div class="divi-module-destination"></div>

添加联系表单模块（便携式模块）

接下来，我们需要将要插入的模块添加到 Toggle 模块中。 在这个例子中，我们将在 Toggle 模块的主体中​​插入一个合约表单模块。 在目标模块所在的列中添加新的“便携式”模块很重要。

为此，请直接在切换模块下添加一个新的联系表单模块。

单击联系表单（您要插入的任何模块的）设置下的高级选项卡并添加以下 CSS 类：

• CSS 类：divi-portable-module

添加列类

接下来，我们需要向包含两个模块的列添加一个自定义类。 打开列设置并添加以下 CSS 类：

• CSS 类：父列

添加代码

完成这项工作所需的代码非常简短。 基本上，我们想使用 JQuery 来查找每个具有“divi-portable-module”类和父列（具有“parent-column”类的模块）的模块，并将这些模块中的每一个附加到div中的类“分模块目的地”。

该代码还包括将按钮模块插入另一个模块的代码段和将 Divi 行插入模块的代码段。

要添加代码，请在联系表单模块下添加一个新的代码模块。

在粘贴必要的代码之前，在代码框中添加将 JS 嵌入 HTML 所需的脚本标签：

然后在脚本标签之间粘贴以下代码：

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

了解功能

在后端的 Divi Builder 中，模块将保持独立。 但是，如果您在前端的实时页面上查看结果，您会看到联系表单已插入到 Toggle 模块中。

如果您检查实时页面上的代码，您可以看到联系表单模块已成功插入到具有“divi-module-destination”类的div 中。

设计模块

就像我们之前提到的，模块将在后端 Divi Builder 上保持独立。 但是，您添加到每个样式的样式仍然适用。 因此，您可以使用 Divi Builder 随意添加更新目标模块和便携式模块的样式。

注意：在某些情况下，目标模块（现在是父模块）的样式可能会应用于插入的模块。 如果是这种情况，您应该能够通过更新插入模块的设置来覆盖该样式。

结果

这是查看实时页面时的最终结果。

示例 2：在 Blurb 模块内插入切换模块

对于我们的下一个示例，我们将在 Blurb 模块中插入一个切换模块。 该过程与以前相同。 代码片段限制了每列一个目标模块的使用。 换句话说，你可以有多个类“divi-portable-module”的可移植模块可以添加到目标模块，但你只能有一个类“divi-module-destination”的div实例。柱子。

为了演示这一点，让我们对同一行的另一列中的另一组模块重复相同的过程。

向行添加新列

首先，向现有行添加一个新列。

添加列类

像我们在第一列中所做的那样，为新列提供以下 CSS 类：

• CSS 类：父列

添加 Blurb 模块（目标模块）

在新列中，添加一个模糊模块，它将作为我们的目标模块。

在简介的正文中，粘贴以下 HTML，其中包含与“divi-module-destination”类相同的div ，您希望在其中插入可移植模块（在本例中是在模拟正文文本下）：

<div class="divi-module-destination"></div>

添加切换模块（便携式模块）

由于我们要向简介添加一个切换模块，因此在与简介相同的列中创建一个新的切换模块。

然后将以下 CSS 类添加到 Toggle 模块以将其指定为我们要移动/插入到模糊中的模块：

• CSS 类：divi-portable-module

结果

现在检查实时页面以查看结果。 切换现在将位于模糊模块中。

示例 3：在 Blurb 模块内插入按钮模块

对于下一个示例，我们将在与上一个示例相同的模糊模块中插入一个按钮模块。 通常，对于任何其他模块，我们会重复相同的过程，将新的便携式模块添加到简介中。 但是，因为按钮模块在后端构建的有点不同，所以我们需要向按钮模块添加一个不同的类。

添加按钮模块（便携式模块 #2）

为此，请在已插入到简介中的切换模块下添加一个新按钮模块。

然后，将以下 CSS 类添加到按钮模块：

• CSS 类：divi-portable-button

结果

现在在实时页面上查看结果。 Blurb 模块现在包含切换模块和按钮模块。

这是用于将按钮模块插入具有“目标”div 的模块中的相应代码片段。 与此代码片段的主要区别在于，我们针对的是按钮类“divi-portable-button”的父元素（幕后的按钮包装器div ）。

第 2 部分：如何将 Divi 行插入模块

如果您想在一个模块内插入一整行（或多行），该过程与将一个模块插入另一个模块非常相似。 我们需要将类“parent-section”添加到包含我们要插入的目标模块和可移植行的部分。 我们需要将具有“divi-row-destination”类的div添加到目标模块。 我们需要将类“divi-portable-row”添加到我们想要插入目标模块的行中。

这是如何做到的。

添加部分

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

在部分设置的高级选项卡下，添加以下 CSS 类：

• CSS 类：父节

为目标模块添加行

添加一个新的一列行来保存目标模块。

添加切换模块（行目标模块）

对于这个例子，我们将在 Toggle 模块中插入一行。 因此，向该行添加一个新的切换模块。

由于 Toggle 模块是我们的目标模块，打开切换设置，并将以下 HTML 添加到正文内容：

<div class="divi-row-destination"></div>

创建便携式行

现在目标模块已就位，在前一行下添加一个新行。 这将作为我们将插入到切换模块的便携式行。

用内容填充行

此时，您可以使用 Divi Builder 用您想要的任何内容/模块填充该行。 请记住，该行中的所有内容最终都会插入到切换模块中，因为它位于该行内。

将类添加到行

然后打开该行的设置并将其指定为要插入到切换模块的行，方法是为其提供以下 CSS 类：

• CSS 类：divi-portable-row

这个怎么运作

提醒一下，在后端使用 Divi Builder 编辑布局时，该行将与模块保持分离。 但是功能已经到位，可以在切换模块中插入行。

结果

要查看结果，请查看实时页面并打开切换模块。 它现在包含整行。

这是使这成为可能的相应代码片段。 注意正在使用的相应类。

在模块内插入多行

只要您在每个部分保留一个目标模块的实例（即具有“divi-row-destination”类的div ），您就可以通过给它相同的类“divi-portable-row”来向该目标插入多行”。

例如，您可以在具有先前创建的菜单项的行上方添加带有画廊模块的另一行。 然后给该行相同的类“divi-portable-row”

具有“divi-portable-row”类的两行都将插入到切换模块中。

使用插件/简码

如果您正在寻找具有类似功能并提供更多灵活性或选项的插件，您可以从我们的市场查看 Divi 插件的简码，它允许您使用简码将任何 Divi 布局嵌入到您的页面中。 安装后，该插件将为您保存到 Divi 库的每个布局生成一个可嵌入的短代码。

最后的想法

在大多数情况下，除非有特殊需要，否则不需要将模块或行插入其他模块。 通常，您无需执行此类操作即可获得所需的布局/设计。 但是，对于那些正在寻找一种无需借助插件的简单方法来执行此操作的人，希望此解决方案会派上用场。

另外，想想所有可能的应用程序！

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

干杯!