引入Divi 5的CSS網格

已發表: 2025-09-20

這是一個很大的。我們構建了最好的CSS網格構建器，今天可用於Divi 5。比Elementor好。比磚好。無論您是要掌握網格還是只使用Divi的新網格模板，您都會喜歡此更新。

查看以下視頻以查看動作中的新功能。

每個人的CSS網格

Divi 5與前任相去甚遠。我們一直在將Divi變成一個網絡設計強大的功能，具有彈性箱，高級單元，預設和設計變量等新功能。 CSS網格是下一個向前邁出的一大步。

同時，我們不希望現有用戶在新環境中感到迷失或埋葬。我們在為高級用戶提供必要的工具的同時，使初學者可以訪問網格佈局之間達到了適當的平衡。

如果您從未聽說過CSS電網，並且不想學習網格佈局的來龍去脈，請不要擔心 - 您不需要。享受新的預構建網格模板！

使用網格模板的優點在於，網格是在容器級別控制的，當您添加新項目時，它們會自動符合網格。它更加直觀，並解鎖了新的各種設計。

Divi在每種情況下都有網格模板，並且將它們應用於現有內容很容易。

如果您是經驗豐富的CSS電網專家，Divi的網格選項不會阻止您。您可以直接到達點，手動定義您的列和行網模板，並使用“縮寫編輯”創建各種網格佈局，稍後我將介紹。

當然，您也可以放棄接口並使用自定義CSS面板應用網格規則；最適合您的東西。

如果您介於兩者之間，那麼Divi 5的網格構建器確實會發光。

我們將CSS網格參數轉換為設置，以創建垂直或水平網格，自定義列和行尺寸，網格方向，元素對齊和理由等等。

此外，尺寸選項組包括新的列和行選項，使您可以調整單個網格項目在網格中的寬度，高度和位置。

Divi 5的網格構建器最獨特的方面之一是偏移編輯器，您可以使用它在容器級別創建重複的非對稱網格模式。讓我給你一個現實世界的例子。

我使用Divi 5的Loop Builder在下面的視頻中創建了一個博客模板；每列都是一個充滿動態內容的循環項目。當我在父容器上啟用網格佈局樣式時，列會自動符合網格。

我可以調整列的數量，輸入自定義列或行模式，更改差距大小並執行許多其他操作。

此外，我可以使用oftsot編輯器將規則應用於網格中的特定項目。

我可以通過例如每4個項目跨越兩個列，而不是在每行重複的標準列模式，而是從第二項和第三個項目開始。這些偏移模式使Divi 5的預製行模板種類繁多。

您可以使用前所未有的CSS網格創建壯觀的佈局。如果您想靈感，請查看我們的設計團隊使用Divi 5的最新版本創建的這些令人驚嘆的佈局。

您可以免費下載它們並自己測試。

Divi 5的CSS網格今天可用，是今年即將到來Divi的許多功能之一。

您可以隨著我們的進展，通過Divi 5及以後的最終版本，每兩週更新一次。根據您的優先級，您現在可以使用Divi 5來構建新網站或等到我們添加更多功能，任何最適合您的功能。

如Divi 5的原始多相發佈時間表中所述，Divi 5公共alpha就像“ Divi 5 Lite”。它缺少一些功能，並且可能不適合現有網站，但是如果您更喜歡Divi 4的體驗，就可以在新網站上使用。

我們希望您嘗試一下，如果您喜歡它，請使用它；當每個人都喜歡它時，我們將正式進行。

如果您錯過了它，我們最近發布了新的自定義屬性，該屬性使您可以在元素和大多數子元素中添加任何屬性，例如Alt，Title，Rel和Aria-Label。

Divi支持特定屬性，例如類和ID，但是現在您可以將任何屬性添加到任何元素中。這對於可訪問性尤其重要，例如，您可以將Alt文本添加到圖像中，並將角色和標籤添加到非語義元素中，例如基於圖標的按鈕。

觀看此視頻以獲取所有細節。