使用Divi 5模塊組構建自己的模塊

您是否要在不觸摸代碼行的情況下創建自定義Divi模塊？借助Divi 5的新模塊組，您現在可以將多個元素組合為一個可重複使用的佈局 - 全部來自視覺構建器內部。沒有JavaScript。沒有PHP。只是拖動，掉落和設計。

在此快速指南中，我們將向您展示如何使用Divi的新組來創建自己的模塊。您將看到如何從頭開始構建貼花，定價表，推薦或您可以想像的任何其他類型的模塊。

注意： Divi 5已準備好在新網站上使用，但我們不建議將現有網站轉換為Divi 5。當我們對更新過程充滿信心時，您會從我們這裡看到一些東西。

Divi的新模塊組是什麼？

組或模塊組是一個新的容器元素，將多個模塊和/或行配對成列中的單個單元。這具有分組多個較小元素的優勢，並允許您在頁面上需要將整個組移動到任何地方。

可以在整個頁面上移動模塊組，而釋放Flexbox和Loop Builder功能時，將變得特別有用。循環構建器發布後，您將可以使用組來創建自定義的博客佈局，頁腳菜單，圖像畫廊等。因此，現在很有用，但是在幾個月後，使用它會更令人印象深刻。

嵌套行是我們添加到Divi 5中的另一個高度要求的Divi功能。它們讓您將行插入內心的內容。儘管“模塊組”的名稱可能使您似乎只能分組模塊，但情況恰恰相反。實際上，您可以在組內使用嵌套行，這為建立無限嵌套的佈局結構並使它們成為可重複使用的組的一部分。

如何創建自己的分區模塊

模塊組允許您在編輯器內部創建自己的模塊。您可以將模塊和嵌套行分組在一起，以創建類似於我們一些較大模塊的複雜佈置。

1。創建自己的藍圖模塊

我們內置的藍圖模塊

Blurb模塊是許多Divi設計中的主食。這是一個首選模塊，但是當您分解時，它只有幾件事可以單擊它。這些是：

圖像/圖標，標題/標題和身體內容。我們可以創建一個模塊組並將這些模塊放在其中：圖像或圖標，標題和文本模塊。一起，這三個模塊可以復制在Blurb模塊中可用的相同內容。

bl

創建自己的藍圖模塊組

這是一個示例的示例，該示例在左側具有圖標，並且使用A：

組，內行，列（1）帶有圖標模塊，以及帶標題和文本模塊的列（2）。

X射線被打開以查看每個骨骼的骨骼，以看到它們的相似性，即使它們的構造方式不同。

這種安排唯一的特殊之處在於，第一列設置為18％的寬度，第二列的寬度為82％（列尺寸尺寸選項是新的，具有嵌套行功能更新）。

建立這樣的模塊具有為每個元素提供更多設計樣式選項的額外好處。 Blurb模塊使圖像/圖標放置更加容易，但具有權衡。使用最接近所需設計的方法。

2。創建自己的定價表模塊

我們內置的定價表模塊

一些Divi模塊還有很多事情要做。定價表模塊就是這種情況。如下所示，每個定價表有幾個字段。

定價表模塊的解剖結構

創建自己的定價表模塊組

如果我們使用模塊組和單個模塊重新創建定價表模塊，我們將獲得此結果。

注意每個表七個單獨的文本/選項字段。從視覺上講，每個桌子都有三個主要部分（標題，價格和細節）。在一個組內，有幾種方法可以做到這一點，但是在下面，我們為每個組使用了三個嵌套行。從那裡，我們使用每個部分內部的標題和文本模塊來重新創建定價表。

使用定價表模塊的好處是，它處理大部分佈局，並且您可以從頭開始。但是有時候，這意味著當您希望使用特定的事情完成時，很難使用。通過更簡單的模塊來創建這個定價表佈局，為我們提供了更多的設計控制和自由。

3。創建自己的推薦模塊

我們內置的推薦模塊

Divi的推薦模塊是另一個正在進行的模塊。它最多包括四個不同的文本元素和一對圖像/圖標選項。

創建自己的證明模塊組

重新創建推薦模塊最耗時的方面是正確的間距（尤其是在多個斷點上）。但是一旦您得到了，事情就會很簡單。在整個組佈局中，我們使用了幾行，以及圖標，圖像，標題和文本模塊。

重新創建其中一些模塊的好處是，您為更多的可能性開放。一些更複雜的模塊具有一個自以為是的佈局，只有廣泛的CSS才能操縱。但是，當您自己構建它時，您有更多的自由來四處移動許多子元素。

在這樣的設計時，更多的佈局可能性打開了。例如，您可以通過將元素轉移到更大的組佈局中的完全不同的位置，從而使用推薦模塊（至少不容易）做不可能的事情。如果您的設計需要一定的靈活性，則構建其中一些零碎的方法可能會幫助您達到所追求的精度。

我也喜歡您能夠像上面的一個自定義的推薦模塊創建自定義的推薦模塊的想法，並使用即將到來的循環構建器從CPT中提取證明。它將為您提供設計自由 +通過結構化數據和內容更快地構建的能力。

將您的自定義模塊保存為全局元素

當您的新模塊感覺正確時，將其作為用於網站其他地方使用的全局元素。打開“組設置”菜單。單擊“保存到庫”選項。

將出現一種模態，您可以在其中命名模塊以稍後輕鬆使用。切換“另存為全局”以將其存儲在Divi庫中。您以後進行的任何更改都會在您的網站上進行每個副本。

您的全球元素現在將具有獨特的綠色，以幫助您注意到它是全球的。

您可以在儀表板> Divi> Divi庫中訪問所有保存的全局元素和其他庫項目。在此處編輯全局元素將在整個網站上更新。您還可以直接在使用它們上使用的頁面上編輯全局元素（並且將在範圍內更新）。

需要您構建的每個站點上的模塊嗎？切換“保存到Divi Cloud ”。該模塊現在在您的雲庫中，可以在任何地方進行任何項目。圖書館項目在一個站點上保留東西，而Divi Cloud則可以從站點到您一起旅行。使用兩者來加快構建並引導更大的一致性。

獲取Divi Cloud

今天建立新的東西

模塊組將新的力量掌握在您的手中。您可以塑造原始的佈局，也可以塑造所需的佈局。首先重新創建虛擬模塊，然後查看過程的擬合方式。當您習慣這種方式使用Divi時，您會注意到自己創建更複雜的設計，因為您可以使用標準模塊或創建自己的模塊。

在小組下降之前，上面涵蓋的大部分內容都是可能的，但它們使事情變得更容易。尤其是當我們推出Flex和Loop Builder時，小組將成為您與Divi設計的主食。

準備升級了嗎？抓住一個新的網站並立即測試您的第一個自定義模塊。