如何在其他 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 庫的每個佈局生成一個可嵌入的短代碼。

最後的想法

在大多數情況下，除非有特殊需要，否則不需要將模塊或行插入其他模塊。 通常，您無需執行此類操作即可獲得所需的佈局/設計。 但是，對於那些正在尋找一種無需借助插件的簡單方法來執行此操作的人，希望此解決方案會派上用場。

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

我期待在評論中收到您的來信。

乾杯!