關於Divi 5模塊組，您需要了解的一切

Divi 5通過新功能和無與倫比的靈活性改進了網站創建。模塊組是Divi 5的最新添加程序之一。此功能使您可以將多個元素組織成一個可管理的組，您可以單擊一次，可以將其樣式，移動或重複。一旦發布了即將發布的功能，此功能將變得特別有用。

在這篇文章中，我們將探討有關Divi 5的模塊組所需的所有信息。從了解它們是什麼以及為什麼它們重要到學習如何有效使用它們，我們就可以為您服務。

注意： Divi 5已準備好在新網站上使用，但我們不建議將現有網站轉換為Divi 5。

讓我們探索模塊組的可能性。

什麼是模塊組？

模塊組是一個新的容器元素，可讓您將多個模塊捆綁到列內的一個凝聚力單元中。一旦分組，可以將模塊進行樣式，重複或重新定位，從而增強您的工作流程並確保設計的一致性。模塊組使您的模塊整齊地包裝，使它們更易於集體處理。

模塊組具有重要的組織優勢。例如，如果您的列帶有標題，文本模塊和按鈕，則將它們分組，可以應用統一的背景，調整間距或以單個操作移動整個構圖。這樣可以節省時間並降低設計不一致的風險，使模塊組成為輕鬆創建精美的專業佈局的重要工具。

為什麼模塊組很重要

Divi 5中的模塊組不僅僅是一個方便的功能 - 它們引入了新的控制和效率層。它們允許設計師和開發人員以更高的精確性和創造力來創造。這就是為什麼他們有可能對您如何設計網站的方式產生重大影響的原因。

1. 它們是Divi未來的一部分：模塊組是在Divi 5的前瞻性架構中構建的。它們用於即將發行的功能，例如Flexbox和查詢循環構建器，這將使創建動態佈局變得輕而易舉。現在，投資模塊組可以為您帶來長期成功，尤其是隨著Divi 5的發展。
2. 他們節省了時間：對於模塊組，您不必處理重複的編輯。您可以在一個動作中進行樣式，重新定位或重複的複雜佈局，從而大大切割設計時間。模塊組的預設通過讓您立即保存和應用預定義的配置來進一步採取。
3. 它們促進設計一致性：模塊組允許您確保組中的每個元素，從按鈕到文本，都遵循相同的樣式規則。對於那些管理品牌網站的人，模塊組可以在整個網站上保持設計和專業的設計。
4. 更具創意的自由：模塊組可讓您進行實驗，而無需單獨編輯每個元素。即使您是Divi的新手，您也可以輕鬆地創建出色的設計。組合嵌套的行和模塊組可以幫助您解鎖無限可嵌套的容器。

無論您是獨奏設計師還是企業主，模塊小組都會提供提升項目所需的控制和效率。

如何在Divi 5中使用模塊組

從模塊組開始很容易。在Divi 5中的頁面中添加新行，然後選擇3列佈局。

在Divi 5中，您會注意到一個新的組模塊。單擊將其添加到第一列。

從那裡，您可以添加任何要構建可重複使用的佈局的模塊。為了證明，我們將創建一個用於特色服務的模塊組。首先將2列嵌套行添加到模塊組。

在嵌套行的第一列中，添加圖像模塊。

在嵌套行的第二列中，添加標題模塊並根據需要進行樣式。

接下來，添加一個單列嵌套行，然後再添加另一個標題，文本和按鈕模塊。添加後，您的佈局應與下圖相似。

模塊組可以像單個模塊一樣樣式，添加背景顏色或漸變，調整間距或添加邊框效果。您還可以通過訪問模塊組設置，單擊預設選項並保存配置來保存模塊組作為預設。然後，可以單擊一次將此預設應用於其他模塊組，以確保您的網站或多個項目之間的相同樣式和結構。創建模塊組後，您可以將其複制，將其保存到Divi Cloud，或在整個網站中重複使用預設。

模塊組的實際用例

Divi 5中的模塊組非常適合構建專業，高效的網站。將模塊捆綁到可重複使用的樣式單元中，可以節省時間，並將您的設計提升到新的高度。無論是構建登陸頁面還是管理客戶網站的投資組合，模塊組都使復雜的佈局毫不費力。以下是一些實用的用例，可以展示其功能並簡化設計過程。

1。未來用例：帖子和產品

模塊組的建造旨在通過Divi 5的即將到來的循環構建器發光。立即通過對動態佈局進行分組元素來準備，例如博客文章預覽或WooCommerce產品列表。循環構建器到達後，這些組將毫不費力地填充動態內容，從而節省您的時間，並確保完美無瑕，可擴展的設計。

2。呼籲行動部分

組大膽的標題，有說服力的子標題和一個充滿活力的按鈕，具有懸停效果，可以創建可重複使用的CTA。在多個頁面上需要相同的CTA嗎？在幾秒鐘內復制該組或將其保存到Divi Cloud以進行即時訪問。這削減了設置時間，同時確保每個CTA都與您品牌的外觀保持一致。

3。證明部分

將客戶的報價，圖像和名稱組合到單個模塊組中，以進行一致的專業證明佈局。將小組拖放到重新排列部分，或單擊一次統一樣式（例如圓角或微妙的陰影）。

4。產品類別

模塊組非常適合展示產品類別。例如，創建一個組，以突出類別，標題，圖像和按鈕中的產品數量，然後將其複制為其他類別。這種方法確保了產品頁面之間的視覺一致性，並加快了電子商務網站的設計。

5。餐廳菜單

使用模塊組的另一種好方法是用於需要配備菜單的網站。動態構造文本可能是耗時的，因此使用模塊組非常適合加速過程。您可以將群組和嵌套行組合起來，使一個部分看起來令人難以置信且易於復制。

在Divi 5的背景下的模塊組

Divi 5是WordPress設計的大膽飛躍，優先考慮快速性能，靈活性和創新功能（例如模塊組）。 Divi 5以現代建築為基礎，可讓您創建既有美麗的網站又有效率。模塊組是該願景的基石，與其他Divi 5功能無縫集成以提高您的工作流程。隨著Divi 5在其公共alpha階段的發展，每兩週更新，模塊組就可以重新定義您的構建方式。這就是它們適合更大的情況的方式。

嵌套行

將模塊組與Divi 5的無限行嵌套配對，以創建複雜的，有條理的佈局。例如，將A標題，圖像和按鈕組成帶有嵌套行的按鈕，以構建定價表或團隊成員展示的部分。

設計變量

您可以通過在模塊組中應用可重複使用的樣式值，例如品牌顏色，字體或夾具（）計算來保持設計一致性。您可以一次更新一個變量，每個組立即反映更改，使其非常適合大規模項目。

高級單位

您可以使用CSS單元REM，EM，VW，VH或其他人來為模塊組構建響應的間距和尺寸。這確保了分組的元素在每個設備上看起來都令人驚嘆，從台式機到智能手機。

最大化模塊組的提示

為了充分利用模塊組，一些明智的策略可以將您的設計能力提升到一個新的水平。這是使它們為您努力工作的方法。

1. 計劃佈局：在分組模塊之前，繪製部分的結構或使用原型工具來幫助您計劃要使用的元素。這種前期計劃可防止額外的工作，並確保您的團隊合理且可重複使用。
2. 利用Divi Cloud：將您喜歡的模塊組保存到Divi Cloud，以將其變成交叉項目的資產。例如，您可以保存一個拋光的團隊成員組，並單擊幾下將其拉入任何站點。
3. 帶有斷點的測試響應能力：使用Divi 5的可自定義斷點，以確保您的模塊組在每個設備上看起來都很完美。調整小組設置中移動設備的間距或字體尺寸，以避免進行手動調整。
4. 利用設計變量：為您的設計增加內聚力，為顏色，文本，字體或數字規則（例如Clamp（）計算）設置設計變量，以使小更改更加容易。
5. 通過樣式發揮創造力：嘗試大膽效果，例如懸停動畫或模塊組中的同步過渡。例如，為動態CTA的分組按鈕和圖像添加比例效果。
6. Divi 5： Divi 5的公共alpha是您的操場 - 建立一個測試網站來探索模塊組。嘗試分組不同的模塊組合或測試新的樣式想法以發現可能的方法。

在Divi 5中使用模塊組的設計更聰明

Divi 5的模塊組簡化了您的工作流程，確保設計一致性並為您的動態佈局做準備。無論是將可重複使用的CTA的設計元素捆綁，創建具有凝聚力的推薦部分，還是嘗試大膽的樣式，模塊組都可以使您更聰明地工作並更快地創建網站。隨著Divi 5的發展，此功能使您能夠構建高效而美麗的網站。

開始在Divi 5的公共Alpha中嘗試模塊組，並體驗一種使用Divi建立網站的新方法。如前所述，Divi 5已準備好用於新的網站，但我們暫時不建議現有網站。

我們鼓勵您加入Divi社區，分享您的模塊組創作。將您的設計發佈在Divi Facebook組或X上的@elegantThemes中。

讓我們一起建造一些驚人的東西！