WordPress divi主题

如何在其他 Divi 模块中插入 Divi 模块或行(无需插件)

by | Apr 30, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

抢先看

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

切换模块内的联系表

将 divi 模块或行插入其他模块

Blurb 模块中的切换模块和按钮模块(右栏)

将 divi 模块或行插入其他模块

切换模块内的 Divi 行

将 divi 模块或行插入其他模块

WordPress divi主题

免费下载布局

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

订阅我们的 Youtube 频道

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

单击导入按钮。

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

然后单击导入按钮。

迪维通知框

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

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

fiverr建站WordPress程序员

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

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

要记住的事情

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

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

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

独立站选品工具

此外,正如我们稍后将解释的,您可以在列或部分中拥有的实例数量(插入另一个模块的模块或行)有一定的限制。 将模块插入另一个模块时,每列只能使用一个“目标”模块(该模块将容纳您要插入的模块)。 而且,在将行插入另一个模块时,每个部分只能使用一个“目标”模块。 尽管这在某种意义上是一种限制,但它确实让您可以在需要时在页面上拥有多个实例。

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

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

示例 1:在切换模块内插入联系表单模块

添加新行

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

将 divi 模块或行插入其他模块

添加切换模块(目标模块)

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

高质量外链购买

将 divi 模块或行插入其他模块

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

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

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

将 divi 模块或行插入其他模块

添加联系表单模块(便携式模块)

接下来,我们需要将要插入的模块添加到切换模块中。 在本例中,我们将在切换模块的主体中​​插入一个合同表单模块。 在与目标模块相同的列中添加新的“便携式”模块很重要。

JasperAI 10000字免费额度试用

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

将 divi 模块或行插入其他模块

单击联系表单(您要插入的任何模块的)设置下的高级选项卡,然后添加以下 CSS 类:

  • CSS 类:divi-portable-module

将 divi 模块或行插入其他模块

添加列类

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

WordPress备份工具updrafplus

将 divi 模块或行插入其他模块

添加代码

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

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

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

将 divi 模块或行插入其他模块

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

将 divi 模块或行插入其他模块

然后将以下代码粘贴到 脚本 标签:

(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 模块或行插入其他模块

了解功能

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

将 divi 模块或行插入其他模块

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

将 divi 模块或行插入其他模块

样式化模块

正如我们之前提到的,这些模块将在后端 Divi Builder 上保持独立。 但是,您添加到每个样式中的样式仍然适用。 因此,请随时使用 Divi Builder 添加更新目标模块和可移植模块的样式。

将 divi 模块或行插入其他模块

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

结果

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

将 divi 模块或行插入其他模块

示例 2:在 Blurb 模块中插入切换模块

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

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

将新列添加到行

首先,在现有行中添加一个新列。

将 divi 模块或行插入其他模块

添加列类

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

将 divi 模块或行插入其他模块

添加 Blurb 模块(目标模块)

在新列中,添加一个作为我们的目标模块的简介模块。

将 divi 模块或行插入其他模块

在简介的正文中,粘贴以下包含相同内容的 HTML div 使用“divi-module-destination”类,您希望在其中插入可移植模块(在这种情况下,在模拟正文文本下):

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

将 divi 模块或行插入其他模块

添加切换模块(便携式模块)

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

将 divi 模块或行插入其他模块

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

  • CSS 类:divi-portable-module

将 divi 模块或行插入其他模块

结果

现在检查实时页面以查看结果。 切换现在将驻留在简介模块中。

将 divi 模块或行插入其他模块

将 divi 模块或行插入其他模块

示例 3:在 Blurb 模块中插入按钮模块

对于下一个示例,我们将在上一个示例中的同一个简介模块中插入一个按钮模块。 通常,对于任何其他模块,我们会重复相同的过程以将新的可移植模块添加到简介中。 但是,因为按钮模块在后端的构建略有不同,我们需要为按钮模块添加一个不同的类。

添加按钮模块(便携式模块#2)

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

将 divi 模块或行插入其他模块

然后,将以下 CSS 类添加到按钮模块:

  • CSS 类:divi-portable-button

将 divi 模块或行插入其他模块

结果

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

将 divi 模块或行插入其他模块

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

将 divi 模块或行插入其他模块

第 2 部分:如何将 Divi 行插入到模块中

如果您想在一个模块中插入一整行(或多行),该过程与将一个模块插入另一个模块非常相似。 我们需要将类“parent-section”添加到包含目标模块和我们想要插入的可移植行的部分。 我们需要添加 div 与班级…

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题