使用Divi 5的嵌套行和模塊組創建的9張卡片佈局

有了Divi 5，建立令人驚嘆的專業網站比以往任何時候都容易。借助嵌套行和模塊組之類的功能，您只需單擊幾下即可在整個網站中創建高級卡佈局。 Divi 5引入了現代化的代碼庫和改進的性能，非常適合構建複雜的佈局。這些新功能將使您能夠以無限的靈活性構建。

在這篇文章中，我們將展示使用Divi 5的嵌套行和模塊組構建的9張卡片佈局，以說明創建靈活，可重複使用的設計非常容易。無論是展示服務，強調證詞還是構建投資組合，這些佈局都將幫助您獲得拋光，一致的結果。最後，您將看到Divi 5的這些新功能如何幫助您創建可重複使用的可重複使用的模塊，以節省時間並確保您的項目整個項目的一致性。

讓我們潛入！

了解Divi 5中的嵌套行和模塊組

Divi 5的嵌套行和模塊組是使您可以輕鬆創建高級卡佈局的功能。讓我們探討這些工具如何工作以及為什麼它們非常適合構建複雜的佈局。

訂閱我們的YouTube頻道

嵌套行

嵌套行可以使您可以在行內部放置行，從而在視覺構建器中提供無限的嵌套性。此功能打破了傳統佈局的局限性，使您可以靈活地構建複雜的設計。使用嵌套行，您可以在單列中創建整齊組織的高級卡佈局。好處是明確的：嵌套行提供了響應式的柱結構，可在設備之間無縫調整。

模塊組

模塊組是Divi 5中的一個新容器元素，使您可以在列中進行多個模塊，以進行統一的樣式和管理。此功能通過讓您的樣式，移動或複制整個組中的一個動作來簡化您的工作流程。模塊組還旨在與諸如Flexbox和Loop Builder之類的功能集成，使它們在動態佈局方面進行了防止。

他們為什麼一起工作

組合嵌套行和模塊組將解鎖創建複雜的可重複使用卡佈局的能力。嵌套行提供了組織複雜元素的結構靈活性，而模塊組通過將這些元素視為一個單元來簡化樣式和管理。它們一起允許您在網站上易於構建複製的佈局。無論您是展示團隊成員，服務還是常見問題解答，該二人組都使創建專業，可擴展的設計變得簡單。

Divi 5的9張卡片佈局

在下面，我們探索了9個高級卡佈局，顯示了Divi 5的嵌套行和模塊組的功能。這些佈局從定價頁面到視頻畫廊，展示瞭如何輕鬆創建視覺令人驚嘆，響應迅速的設計。通過利用嵌套行進行靈活的結構和模塊組以保持一致的樣式和重複使用，您可以為任何目的構建專業的可擴展佈局。每個示例都強調了實用的示例和節省時間的技術，以提升您的Divi網站。

1。定價計劃

組合嵌套行和模塊組是在您的網站上展示定價的好方法。使用Divi 5的嵌套行，您可以創建一個結構化的佈局，其中每個定價卡都包含在其自己的模塊組中，從而允許您可以輕鬆複製和粘貼的靈活佈局。在此示例中，我們從一個模塊組開始，對其進行了樣式，並為按鈕組合了嵌套行。使用模塊組創建卡片佈局，可以輕鬆保存和重複使用整個網站。

2。服務

服務頁面對於希望以清晰，視覺上吸引人的方式強調其產品的企業至關重要。使用Divi 5，您可以創建一個多層佈局，其中每個服務卡都包含在模塊組中，從而允許獨特的樣式和內容深度。例如，在組中嵌套一排以進行標題和鏈接，為標題和正文文本創建一個列行，然後用一個兩列嵌套的行以按鈕對其進行跟進。您可以復制模塊組並在幾秒鐘內進行小型設計更改。

3。餐廳菜單項目

餐廳菜單需要視覺吸引力和有組織的信息。 Divi 5允許您創建類似網格的結構，其中每個菜單項卡都包含在模塊組中。通過將設計元素添加到組以保持一致的樣式，您可以輕鬆地在菜單中添加新項目，而無需重新設計整個卡。

4.團隊成員BIOS

展示您的團隊為您的品牌建立信任和個性。使用Divi 5，您可以在單列中創建具有分層內容的動態團隊成員卡，例如照片，名稱，角色和生物。然後，您可以將嵌套行和社交媒體鏈接的佈局和指向單個團隊頁面的鏈接合併到您的佈局中。將模塊組保存到您的Divi庫，將來添加新的團隊成員很輕鬆。

5。客戶證明

推薦提高了信譽，Divi 5使它們在視覺上引人注目。使用嵌套行在網格佈局中組織證明卡，每個卡都包含客戶的報價，名稱和作業標題。模塊組允許您將這些元素捆綁以進行統一樣式。此設置使您可以輕鬆添加或重新排列推薦，同時保持設計一致性。借助Divi 5的響應控制，您可以確保您的佈局看起來不錯，無論您要查看其設備如何。

6。事件列表

事件促銷頁面需要引起注意並傳達關鍵細節。 Divi 5中的嵌套行允許您構建具有分層內容的事件卡，例如事件圖像，位置，標題，日期和鏈接進行參加。模塊組通過對這些元素進行分組來簡化樣式，從而可以快速重複多個事件。

7。房地產清單

房地產清單需要清晰，有吸引力的物業陳述。使用Divi 5中的嵌套行和模塊組可讓您構建具有分層，易於復制內容的清單卡。這種方法簡化了添加新列表，從而避免以經常性成本避免昂貴的清單服務。

8。產品顯示

電子商務產品頁面需要有效地突出產品。多虧了模塊組和嵌套行，Divi 5使您可以在單列中創建具有多個列的產品卡。以這種方式創建一個產品清單頁面，使您擺脫了Vanilla WooCommerce網站的限制，並為您的訪問者提供了一種瀏覽您特色產品的美麗方式。

9。視頻庫

視頻庫非常適合顯示教程，演示或其他創意視頻內容。使用嵌套行和模塊組，您可以創建一個網格，其中每個視頻卡都在其自己的列中，並具有唯一的佈局。這種設置使添加新視頻在保持凝聚力，專業外觀的同時很容易。

創建和重複使用高級卡佈局的最佳實踐

為了最大程度地發揮Divi 5的嵌套行和模塊組在創建高級卡佈局時的潛力，採用戰略方法可確保效率，一致性和可擴展性。以下是一些技巧，可以幫助您創建專業，可重複使用的設計，以提高您的網站的美學和功能。

風格始終如一

Divi 5的設計變量使您可以為字體，顏色，間距等定義通用樣式。通過在開始時設置這些變量，您可以確保所有卡片佈局在您的網站上保持凝聚力。例如，在變量管理器中定義主要調色板，排版設置和間距值。將這些應用於模塊組，以避免重複手動樣式。

保存模塊組以重複使用

將您的樣式模塊組保存到Divi庫或Divi Cloud，以便於多個頁面或項目訪問。例如，如果您創建定價卡佈局，則將其保存允許您在其他網站或頁面上重複使用它，而無需從頭開始重新構建。用清晰的描述性名稱組織佈局，以便以後快速找到它們。

響應式設計

隨著設備和屏幕尺寸的種類越來越多，響應式設計是必須的。 Divi 5的可自定義斷點使您可以為每個設備微調卡片佈局。在設計佈局時，請在不同的斷點處進行測試佈局，以確保所有設計元素按預期縮放。

槓桿預設以快速更新

Divi 5的元素和選項組預設允許您在模塊或特定設計元素的所有實例中應用樣式更改。例如，如果您決定更新卡片佈局中的按鈕樣式，則預設確保更改會立即傳播到所有相關模塊。對於具有多個佈局的大型網站來說，這是一個很好的工具。為佈局中的按鈕，標題或圖像等常用元素創建預設是保持一致性並加快設計過程的好習慣。

通過遵循這些最佳實踐，您可以利用Divi 5的嵌套行和模塊組的全部潛力，以創建視覺上令人驚嘆，響應且易於維護的高級卡片佈局。

免費下載卡佈局

是否想開始使用Divi 5中的卡佈局？訂閱以下訂閱以訪問JSON文件。您可以將其上傳到Divi庫，然後將其導入到您的頁面上。

下載文件

免費下載

加入Divi新聞通訊，我們將向您發送終極Divi著陸頁佈局包的副本，以及大量其他驚人和免費的Divi資源，提示和技巧。跟進，您將立即成為Divi大師。如果您已經訂閱，則只需在下面的電子郵件地址中輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲取免費的每週Divi佈局包！

用Divi 5創建卡片佈局很輕鬆

Divi 5的嵌套行和模塊組更改您構建高級卡佈局的方式，提供無與倫比的靈活性和效率。從定價頁面到視頻畫廊，這些功能使您可以創建令人驚嘆的可重複使用的設計，以節省時間並確保整個網站的一致性。結合這些功能使您可以構建專業佈局，以無縫適應任何設備。使用Divi 5，創建複雜的，視覺上吸引人的卡片佈局從未如此簡單。

我們鼓勵您下載最新的Divi 5 Alpha版本，並使用這些工具進行嘗試，以體驗Divi 5所提供的所有內容。在我們的社交媒體渠道上與我們分享您的創作，或在下面發表評論，讓我們知道您計劃如何將Divi 5用於卡片佈局。