Divi 5中的嵌套行與專業部分（以及為什麼要貶低它們）

長期以來，Divi一直是建立美麗網站的強大力量。專業部分通過啟用常規部分無法處理的複合物列結構來擴展Divi的佈局功能多年。但是這種方法具有其複雜性和局限性，與Divi的舊短碼框架深深地息息相關。

現在，Divi 5帶有嵌套行 - 一種本機功能，可讓您在常規部分內的任何地方將行放置在列中。此功能刪除了以前的約束，並在單個靈活的部分類型下統一了佈局構建。使用嵌套行，您可以構建專業部分允許但更直觀的相同複雜的，不對稱的佈局。

在這篇文章中，我們將討論遠離專業部分的轉變，以及如何嵌套的行和Divi 5的重新設計佈局系統為創建複雜的佈局提供了更好的方法。 Divi的未來就在這裡，它更簡單，更靈活，並且為無限的創造力而構建。

訂閱我們的YouTube頻道

Divi 5已準備好今天在新網站上使用。

專業部分的回顧

Divi（2014）引入了專業部分，以解決常規部分的局限性。他們允許更複雜的色譜柱結構，包括側欄和不對稱佈局，而常規部分是不可能的。

Divi的基於快捷代碼的框架從根本上限制了佈局複雜性，通過限制嵌套深度並引入性能瓶頸。複雜的嵌套佈局很難構建，並且容易出現問題，因此直到專業部分才有可能。

但是，他們引入了額外的複雜性，因為專業部分是他們自己的事情（請注意這些部分的額外列和CSS選項）。這些還不錯，但是它們的行為肯定與常規部分，行和列不同。

專業部分添加了額外的填充和CSS類/ID字段，這些填充物是必要的，但與其餘的構建器選項不一致。

專業部分通過彎曲短代碼規則，啟用了偽內列結構，從而在常規部分中創建了不可能的內容。

如果常規部分足夠強大，可以做您需要的事情，那不是很好嗎？

嵌套行和更好的構建頁面的方法

使用Divi 5，嵌套行正式允許將行（及其列）放在其他行和列中。這意味著您可以在彼此內部使用無限的列和行創建深度嵌套的佈局。它消除了對專業部分的需求。

此新功能還為列增加了尺寸選項，這意味著有一種一致的方法和样式的所有容器元素。

如何輕鬆地使用嵌套行重新創建專業區

踏板車出租佈局包（尤其是主頁的英雄部分）使用專業部分來定位關鍵元素。但是，我們將使用嵌套行來實現類似的效果，而不是使用其獨特設置的專業部分。

注意：Divi 5當前有專業部分，但最終將被棄用（但它們仍然可以工作，並且在當前存在的頁面上可以重複）。

將標準部分添加到您的頁面上，並將背景顏色設置為黑色（如果將佈局導入到頁面上，則具有用於使用頂部位置和實際尺寸的背景圖像的點圈映像）。

將部分的寬度和最大寬度設置為100％。

確保該部分內的行具有兩列結構和3/5 + 2/5拆分。另外，將行的寬度和最大寬度設置為100％。

如果要使用其他新功能，請僅添加一個內部有兩個模塊組的單列。您將對組使用尺寸選項，而不是依靠Divi的默認列結構。

左列將容納更複雜的一側（就模塊而言），右柱將容納大型圖像。

我們將添加所有模塊以了解佈局。首先包括標題或文本模塊，然後包括一個嵌套行（寬度相等的兩個列），左列中的圖像模塊以及右列中的文本模塊和一個按鈕模塊。返回到右列中的父行，添加一個圖像模塊。

我們將僅在桌面上複製間距/尺寸，以說明如何使用嵌套行重新創建專業部分。繼續添加內容和圖像（同樣，將佈局導入到網站上的頁面時，圖像可用）。您還可以修改文本和顏色樣式以匹配合適的情況。右列中的主圖像應作為背景圖像應用，並帶有帶有強調圖像的圖像模塊，我們將在以後獲取。

對於本節下方的行的左列，添加約10％的左填充以使其從左側伸出（這樣做意味著您需要為每個斷點進行調整大小）。

現在，直接在父行下方打開右列的設置。使用列背景圖像。

本列內的圖像模塊應具有過濾器>混合>覆蓋層設置為其。在高級>位置，圖像是絕對定位的，並固定在左下方。

這幾乎是為了娛樂專業部​​分（在桌面上）。由於我們使用了預設列結構（3/5 + 2/5列），因此Divi在需要解決的各種斷點處具有一些默認的尺寸和定位。您可以通過使用單親列，但模塊組將本節左右兩側的內容組成。

但是至少在這一點上，您知道可以築巢並重新創建專業部分。

進入新未來

Divi 5接近Beta版本，但是我們已經為大修Divi的設計系統做出了巨大努力。

• Flexbox佈局（即將推出） ：將提供對行內空間的對齊和分佈的更多控制。
• 嵌套行：無盡的行和列結構的嵌套，以與基於本機浮點的行系統創建相當多的複雜性。
• 高級列尺寸：添加了用於列寬度和高度的缺少尺寸控件。
• 模塊組：啟用模塊分組，以更輕鬆地管理和样式。
• 設計變量：在所有元素和字段中定義和重複使用全局變量（顏色，字體，間距，圖像，文本）。
• 帶有HSL的相對顏色（即將推出） ：基於色調，飽和度和輕度的動態，品牌一致的顏色控制。

這些功能都是Divi重新發明的一部分，並且與其複出至關重要。我們證明，我們過去兩年中建立的基礎值得。我們可以構建D4不可能的功能，並且我們在幾週內就可以製作每個功能。

Divi 5已準備好今天在新網站上使用。

下載Divi 5learn更多有關Divi 5的信息