Divi 5獨家功能（到目前為止）

我們正在快速推出新的Divi 5功能，每個功能都旨在提高性能，簡化工作流程並為您的指尖帶來強大的設計功能。需要概述嗎？這篇文章將解決值得退房的Divi 5獨家功能。這僅僅是開始。我們擁有令人興奮的新功能，例如Flexbox和Loop Builder即將出來。我們的更新介紹了我們每天使用Divi的設計師和開發人員聽到的常見疼痛點。

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

Divi 5獨有的8個功能（以及它們的工作方式）

Divi 5將創新的升級引入了網站設計，並使用了一系列工具來重塑和加速設計任務，從而使其更直觀。以下八個功能證明了我們新裁定的Divi的潛力：

1。可自定義的斷點

功能於2025年2月6日發布

Divi 5通過其可自定義的斷點系統提高了響應設計的靈活性。大多數頁面構建者僅將用戶限制在三個標準視圖中，但是Divi 5允許最多七個唯一的斷點，所有這些斷點都可以設置為自定義像素值。

這使用戶比其他受歡迎的構建器更具控制力，這些構建器通常粘在固定的設備尺寸上，並提供有限的調整選項。儘管許多平台迫使您在剛性邊界內進行設計，但Divi 5允許您針對設計需要特別注意的精確屏幕寬度。

超越標準三重奏

大多數網站構建者都堅持使用台式機，平板電腦和移動三重奏，因為它很簡單。 Divi 5認識到，這與人們今天在數十個不同的屏幕尺寸上實際瀏覽網絡的方式不符。

使用Divi 5，您可以為以下方式設置斷點

• 電話（<767px）
• 電話寬（<860px） - 非常適合景觀移動觀看
• 平板電腦（<980px）
• 平板電腦寬（<1024px） - 捕獲更大的平板電腦和類似的設備
• 桌面（> 981px）
• 寬屏（> 1280px）
• 超寬（> 1440px）

其他WordPress頁面構建器提供了一些斷點控制，但是無匹配Divi 5的精度和易用性。該系統保持直觀，並且在所有斷點上都應用了相同的熟悉的Divi控件。

視覺斷點處理

Divi 5介紹了帆布縮放，該功能將其與大多數其他建築商區分開來。您可以拖動畫布的邊緣以在所需的任何寬度上查看佈局，而不是僅限於在固定設備預覽之間切換。

這種方法為您提供了即時，現實的反饋，就像直接在Web瀏覽器中工作一樣。當設計比當前窗口更寬的斷點時，畫布會按比例進行調整，因此即使在較小的屏幕上，您仍然可以準確地查看設計。

當您在斷點之間移動時，體驗保持一致。控件的行為方式相同，並且您的佈局不會出乎意料地改變。這種可靠性減少了猜測和響應式設計的故障排除，這可能是其他頁面構建者的頭痛。

了解更多

2。選項組預設

功能於2025年3月11日發布

選項組預設是Divi 5中最令人興奮的新功能之一，可以擴展您構建適合您的設計系統的功能。選項組預設是您的設計的構件。當元素預設您鎖定特定元素時，Divi 5的選項組在任何元素類型上都可以使用。

您可以為特定設計屬性（例如排版，邊框，陰影或背景）創建可重複使用的樣式，並在不同元素中混合這些樣式。例如，您可以為標題樣式創建一個預設，另一種用於按鈕樣式，而盒子陰影則是第三個。

設置後，您可以單擊將這些樣式應用於任何兼容的元素，無論它是文本模塊，blubb，call to Action，甚至諸如部分和行之類的容器。

為什麼這對您的工作流很重要

當您需要更新設計時，這是節省時間。假設您決定更改整個網站元素的邊界半徑。您只需對每個按鈕，圖像和部分進行搜索，而是您只需編輯一次邊框預設，而使用預設的每個元素會自動更新。

跨不同元素類型工作的能力使Divi 5的選項組預設確實有幫助。相同的邊框樣式可以應用於模塊，列，行或部分。這種跨元素兼容性節省了數小時的重複樣式工作。

這種靈活性更進一步。 Divi的選項組預設超出了基本樣式選項。它們還涵蓋了基於腳本的功能，例如有條件顯示，HTML背景視頻和滾動效果。這使您可以一致地控製網站的靜態樣式和交互式行為。

了解更多

3。高級單位

功能於2025年3月19日發布

Divi 5改善了其對CSS單元的處理，使響應式設計的方式更加容易。

現在，您可以訪問直接在構建器內的當今網頁設計所需的全部CSS單元。這意味著您可以使用像素（PX），百分比（％），EMS（EM），root EMS（REM），視口單元（VW，VH，VH，VMIN，VMAX），甚至更先進的選擇，例如字符寬度（CH）或分數單元（FR）（FR）。

起初這可能看起來像是一個較小的更新，但實際上它為您提供了更大的靈活性來構建響應式佈局。

為什麼不同的單位很重要

當您構建想要在手機，平板電腦和台式機上看起來不錯的站點時，只使用像素就會產生頭痛。 300px寬的元素在桌面上看起來不錯，但可能會破壞您在移動設備上的佈局。

使用諸如視圖之類的高級單元，您可以將相同的元素設置為80VW（佔視口寬度的80％），並且它將在所有設備上完美縮放。或使用REM單元使文本與基本字體大小成正比，從而使可訪問性調整更加容易。

現在，將單元與CSS功能相結合，例如Calc（），min（），max（）和clamp（），並看到真正的魔法發生。 Divi 5支持所有這些，使您可以創建適合任何屏幕尺寸的真正流體佈局。

例如，您可能會將截面高度設置為計算（80VH - 60px），以使其在留出空間時佔用大部分屏幕。或使用夾具（16px，4vw，22px）進行隨著屏幕而生長但保持在可讀限制之內的文本。

夾具的靈活性（）

夾具（）函數值得特別注意，因為它解決了許多響應式設計問題。它使您可以一口氣設置最小，首选和最大尺寸，從而使Clamp（）功能成為許多Web設計師的最愛功能。

您可能需要隨著屏幕尺寸而增長但保持可讀性的標題。在標題模塊中，您可以將文本大小設置為夾具（36px，5vw，72px）。標題不會小於36px或大於72px，但是在這些尺寸之間，它將以視口寬度的5％擴展。

這會在沒有斷點的屏幕大小之間創建平穩的過渡。平板電腦上太大或大型監視器太小的文字不是問題。您的版式通過佈局呼吸。

我們還了解到，不同的設計元素需要不同的單元，這就是為什麼Divi 5的高級單元功能不僅具有排版，而且還具有邊距，填充和其他間距值的原因：

• 對於文本，REM單元將所有內容都按比例保持。如果將身體文本設置為1REM並將標題設置為2.5REM，則更改基本字體大小將按比例更新所有內容。
• 對於佈局，您可以嘗試混合固定和流體單元。側邊欄可能在300px時效果最好，而主內容可以使用CARC（100％ - 350px）來填充剩餘空間。
• 對於間距，EM單元會創建填充文本大小的縮放。即使文本大小變化，這也可以使您的設計比例保持一致。

在其他討論的功能上也很好

特別好的是，您不需要編寫自定義CSS來使用這些單元。它們直接置於視覺界面。您可以嘗試不同的值，並立即查看結果，使學習曲線比手工編碼這些解決方案要柔和得多。

這些單元與Divi 5中的其他功能集成在一起。您可以使用自己喜歡的任何單元作為設計變量存儲您的值，然後通過選項組預設將它們應用於網站。這會產生良好設計的鏈反應，該反應流過整個網站。例如：

• 創建一個數字變量，例如標題大小：夾具（26px，5vw，82px）;對於您的H1標題。將此變量應用於標題文本預設。現在，您的標題將在移動設備上的26px和台式機上的82px之間平穩縮放，這些尺寸之間的流體5VW計算。
• 將數字變量設置為夾具（20px，5vw，80px），然後將其用作邊緣，您在台式機上的移動設備上有緊密的間距，並且在台式機上進行了寬敞的呼吸空間，並且之間有平穩的過渡。
• 使用數字可變空間單位：20px設置基礎間距，並將其與佈局預設中的calc（）一起使用。例如，將Calc（var（ - 空格單位） * 2）應用於較大的間隙，而calc（var（ - space-unit） / 2）進行更緊密的空間。當您更新基本值時，所有派生的間距會按比例調整。

這只是刮擦表面。通過混合這些配置，您可以\創建利用Divi的簡單性和新發現功能的網站。

了解更多

4。設計變量

功能於2025年4月3日發布

大多數網站構建者都有設置全球顏色和字體的方法。 Divi 5提出了這個想法，並隨之運用。您不僅可以為顏色和字體創建變量，還可以用於數字，圖像，純文本甚至Web鏈接。

考慮一下：大多數建築商都可以設置一個主要顏色，該顏色無處不在。但是，如果您想在多個頁面上更改電話號碼怎麼辦？還是交換整個網站中使用的重複圖像？ Divi 5輕鬆處理這些情況。

您的所有變量都生活在視覺構建器側邊欄中的簡單面板中。它很乾淨，很容易找到，並將所有內容都放在一個地方。

與預設的完美匹配

設計變量和預設（均選項組預設和元素預設）共同進行可維護和可擴展的設計。您可以構建引用變量的預設，從而創建靈活的設計系統。

例如，您可能會為主標題字體創建一個設計變量，然後在標題版本預設中使用該變量。如果您以後決定更改字體，則只需要更新一次變量，而不是預設本身。這創建了大多數構建者根本不提供的另一層控制層。

這種兩層方法比其他建築商更具控制權。您將某物的外觀（變量）與出現的位置（預設）分開。

您可以將數字變量與CSS函數（例如Calc（）和Clamp（）等CSS函數一起創建響應式設計，以完美適應不同的屏幕尺寸。為您的網站的間距節奏設置一個變量，並在整個佈局中將其應用於一致的比例，以精美的比例。

當您更改變量時，使用它的所有內容都會立即更新。這將可能的工作時間變成幾秒鐘的點擊。

這如何有助於創建可維護的設計

讓我們看一些行動中設計變量的實例：

• 在各處保持您的品牌相同：為您的顏色，字體和間距設置變量。在您的網站上的預設中使用它們，以保持一致的外觀。
• 運行假期銷售：為廣告系列圖形和文本變量創建圖像變量，以供促銷副本。當季節結束時，一次更新一次以刷新您的整個網站。
• 邊框樣式：為邊框半徑（例如10px）創建一個數字變量，並將其應用於所有按鈕預設，圖像模塊和卡片。如果您的設計方向發生了變化，則一個更新會影響整個網站的所有圓角。
• 使客戶更新變得容易：為需要進行更新的客戶建立網站時，設計變量會閃耀。設置將經常更改的內容的變量，例如聯繫信息或工作時間。他們可以在不觸摸設計設置的情況下更新這些。

設計變量也與Divi的主題構建器一起使用。這意味著您的標題，頁腳和模板使用與頁面相同的變量池。與其他將您鎖定在剛性模式中的系統不同，Divi 5的變量使事情變得靈活，同時幫助您保持井井有條。

了解更多

5。嵌套行

功能於2025年4月17日發布

Divi 5引入了嵌套行，這使您可以對佈局進行更多控制。此添加使您可以將行放置在列中，創建複雜的佈局，而這些佈局在沒有自定義代碼的情況下是不可能的。

借助嵌套行，您可以構建高級網格佈局，雜誌式內容塊和基於卡的設計，而努力則少得多。需要一個包含自己多列佈局的列的部分嗎？現在，您可以在構建器中做到這一點。

深度建造

添加嵌套行的作品就像添加任何模塊一樣。選擇一個部分，單擊“加”按鈕，然後從您的選項中選擇“行”。從那裡，您可以添加一行以創建一個嵌套行並將其填充內容。

這種看似簡單的更改為許多設計可能性打開了。您可以使用自己的列結構創建側邊欄小部件，使用嵌套畫廊構建產品展示，或設計具有復雜佈局的設計功能比較表。

最好的部分是它自然地適合您的工作流程。沒有什麼可以學習的。您只是在更多地方使用行。如果您知道如何使用Divi構建，那麼您已經知道如何使用嵌套行。

嵌套行解決了網站建設者的實際問題。是否要創建一個服務部分，每個服務都有自己的兩列佈局？以前，您需要自定義CSS或複雜的解決方法。現在它是正確的。

對於內容豐富的站點，您可以創建具有混合柱寬度和嵌套內容區域的雜誌式佈局。在維護頁面佈局的同時，每個文章或功能都可以具有自己的列結構。

只是第一步

嵌套行只是Divi 5佈局演變的開始。該團隊正在朝著完整的基於Flexbox的佈局系統努力，以使Divi更加靈活。

未來的更新將引入其他佈局控件，為您提供更多的選擇，以創建複雜的設計而無需自定義代碼。這種有條不紊的方法可確保每個新功能在移動下一個功能之前都可以正常工作。

Divi Development團隊並沒有趕到半熟的功能，而是為佈局設計的未來建立了堅固的基礎。每個步驟都建立在最後一步，創建了一個既適合未來又易於使用的系統。

了解更多

6。模塊組

功能於2025年5月1日發布

構建網站通常意味著反复創建相同的內容模式。您設計了一張完美的團隊會員卡，然後花20分鐘為下一個人重新創建它。模塊組通過讓您將相關元素包裝成可重複使用的單元來解決此問題。

這是改變的：您沒有單獨處理每件作品，而是使用完整的塊工作。產品卡成為您四處走動的一件事，而不是您必須單獨選擇的六個不同的模塊。當您需要在五十張產品卡上調整間距時，您可以一次更新組模板，而不是手動編輯每張卡。

真正的好處出現在較大的站點上。具有數十個團隊成員，產品目錄或服務清單的客戶項目變得易於管理。您沒有進行重複的組裝工作 - 您專注於內容和微調。

創建自定義模塊組合

模塊組打開了單個模塊通常無法處理的可能性。構建服務卡，您需要一個背景圖像，覆蓋圖標，標題，描述和兩個操作按鈕：“了解更多”和“獲取報價”。

使用模塊組，您將這些元素完全分配給它們。這對不符合標準模板的內容有幫助。

對於定價表，您可以在模塊組中使用三個嵌套行：第一行的標題，第二行的詳細信息以及第三個中的功能列表。這使您可以單獨控制內置定價表模塊所提供的字體，顏色和間距。

相同的方法適用於使用圖標，圖像，標題和文本模塊在組結構中排列的文本模塊。與標準的證明模塊相比，您獲得的佈局靈活性更大，同時將所有內容都作為一個單元可管理。

關鍵優勢是將構建構建的佈局控制與將多個元素視為一件元素的便利性。

構建可重複使用的組件庫

創建有效的模塊組後，將它們保存為全局元素。這會創建一個隨著每個項目而生長的組件庫。當您完善樣式時，您的證券佈局更新在二十頁中會進行，並且您的產品展示櫃在迭代設計時保持一致。

您並沒有在每次構建頁面時從頭開始，而是從一致的佈局開始，並將它們適應新頁面和佈局要求。

擁抱Divi Cloud集成的便利性。使用此工具，組件可以毫不費力地從項目轉移到項目。假設您為特定客戶網站開發了一組強大的模塊組；現在，您可以利用它們作為即將分配的基礎。這樣，每個項目都可以獲得先前解決方案的優勢，但保留了其獨特的美學。

與Divi 5的設計系統無縫合作

當您將它們與設計變量和選項組預設一起使用時，模塊組會變得非常有趣。假設您建立了一個推薦組：引用，作者姓名，公司和照片。

您沒有設置固定顏色，而是引用品牌顏色變量。對於報價樣式，您可以為排版創建一個選項組預設，其中包括您的自定義字體，尺寸和行高。對於作者名稱，您可以應用其他標題選項組預設。

現在將該模塊組保存為全局元素。這些選項組預設將您網站上的每個推薦都連接到設計系統。如果客戶想要較深的灰色，請一次更改變量，所有證明組模塊都將更新。如果您需要調整報價樣式，請編輯“版式”選項組預設；每個推薦報價都會立即改變。

這打敗了管理各處散落的單個模塊。您的模塊組將選項組預設用於邊界，背景和文本樣式，因此可以自動更新所有分組元素。

了解更多

7。屬性管理器

2025年5月16日發布的功能

您已經在調用操作模塊中為按鈕設計了一個按鈕。顏色可以正常工作，並且懸停效果看起來不錯。現在，您需要在聯繫表上使用相同的按鈕樣式，但不希望CTA的標題或背景。

常規複製紙在這裡無法使用：您會得到所有東西或什麼都沒有。 Divi 5允許您僅通過其屬性管理功能來複製按鈕零件。右鍵單擊CTA，選擇要復制的內容，

然後僅將這些按鈕樣式粘貼到觸點表格上。

選擇旅行

Divi 5將每個元素分為不同類型的屬性。您選擇要復制哪些：

• 所有屬性 - 一切都會復制
• 設計屬性 - 顏色，間距，預設，但沒有文本或圖像
• 樣式屬性 - 只是您的自定義更改
• 內容屬性 - 僅文本和圖像
• 預設 - 僅預設作業

假設您想要按鈕的樣式，而不是其文字。複製設計屬性。想要一個部分的背景預設，而不是填充嗎？僅複製預設。

不同模塊之間的作品

您可以將屬性從一種類型的模塊複製並粘貼到另一種類型上。例如，您可以從調用到操作模塊複製並將其粘貼到聯繫表上。 Divi 5數字算出哪些設置在模塊上都起作用，而忽略其餘設置。

當構建需要不同模塊類型的相同樣式的站點時，這會有所幫助。您不必為使用按鈕的每種形式，推薦或其他模塊重新創建按鈕顏色。

小組級快捷方式

屬性系統通過選擇性組管理更深。完全跳過設置面板。右鍵單擊並直接從上下文菜單中應用特定的屬性組。

您是否複製了具有完美按鈕預設的模塊？您可以通過選擇性菜單將該按鈕預設粘貼到其他元素。沒有標籤狩獵，也沒有設置潛水。

相同的精度可用於重置。在保持內容完整的同時擦除所有設計屬性。或重置僅預設定製樣式覆蓋的同時。

快速速度

每個動作都會獲得鍵盤快捷鍵，這些快捷鍵在上下文菜單中出現。學習一些關鍵組合和造型加速。快捷方式在所有屬性類型中保持一致，因此您的手指快速學習了圖案。

這不僅僅是保存點擊。當建造數百個元素的站點時，這些微效率分為節省時間的小時。重複的手動工作變得快速，有針對性的動作。

您的設計系統很好

屬性管理器直接連接到Divi 5的預設生態系統。當您使用選件組預設和設計變量複製模塊時，這些系統連接沿著傳播。

包含預設的粘貼屬性和這些新元素會立即插入您的全球樣式系統。稍後更新預設，每個複制的元素會自動反映更改。當您快速構建和復制元素時，您的設計系統保持連接。

了解更多

8。設置搜索和過濾

功能於2025年5月29日發布

構建網站意味著調整設置。 Divi模塊在面板中包裝了數十種選擇，並通過標籤狩獵為您的一天可以吃掉您的一天。 Divi 5帶回了Divi 4的搜索功能，但可以使其工作得更好。

您可以在每個設置面板的頂部都能獲得一個搜索欄。鍵入所需的內容，而Divi僅顯示匹配選項。尋找“邊境”？每個與邊界相關的設置都會出現，而其他所有設置都會逐漸消失。需要調整“填充”嗎？所有間距控件都會立即彈出。

這消除了單擊和滾動，這會減慢您的工作。您可以在幾秒鐘內找到所需的東西，而不是打開標籤並通過小組進行狩獵。

通過您更改的過濾

實時節省是“修改”過濾器。單擊它，僅查看您已經調整的設置。當您獲取佈局包或入門網站並希望查看已定制的內容時，這會有所幫助。

假設您導入業務佈局，但想更改顏色。點擊修改後的過濾器，發現每個自定義顏色選擇，而無需挖掘每個模塊。您可以看到更改了哪些字體，對哪些字體進行了調整，並添加了哪些字體。

這也適合客戶項目。當有人詢問您在其網站上定制的內容時，修改後的過濾器清楚地顯示了您的工作。

智能過濾選項

除了修改過濾器之外，您還可以通過設置類型進行排序。更新調色板時，“顏色”過濾器一次顯示每個顏色字段。當需要更改版式時，“字體系列”和“字體重量”過濾器揭示了所有模塊的文本設置。

該系統知道哪些設置最重要。顏色和字體會產生過濾器，因為它們是人們所做的最常見的更改。由於間距調整經常發生，因此大小會分組。

當您進行範圍內更改時，這些過濾器可以節省點擊。您沒有單獨打開每個模塊，而是通過需要修改的設置的過濾列表進行工作。

了解更多

Divi 5如何與流行選擇相抵觸

網站建設者市場充滿了選擇，但是Divi 5由於一些真正的新功能而脫穎而出。這是使Divi 5與眾不同的原因：

這對您的項目意味著什麼

Divi 5的功能組合創建了一個設計系統，其他構建器無法完全匹配。選項組預設和模塊組僅將Divi 5比競爭對手領先。

當設計變量與預設和模塊組一起使用時，您將獲得多功能。預設內部的參考變量，將它們應用於分組元素，然後更改值在您的網站上自動更新每個元素。將即將到來的Flexbox和Loop Builder功能添加到混音中，您會發現自己在不需要自定義編碼的情況下創建任何網站。

接下來會怎樣？

Divi 5路線圖顯示了將很快降落的連續更新。我們的開發人員分為七個團隊，全職工作不同，至少每兩週運送一次更新。這是您在接下來幾週內可以期待的偷看：

Flexbox佈局

最大的變化是完整的Flexbox佈局系統，該系統距離完成幾週了。這將完全取代您建立佈局的方式。您將通過視覺控製而不是自定義CSS獲得新的行模板，自動垂直中心，內容包裝和間距分佈。

模塊組只是將相關模塊捆綁在一起的容器。結合Flexbox，您可以創建雜誌佈局，具有匹配高度的產品展示櫃以及以前需要解決方法的複雜對齊。一旦Flexbox到達，專業部分就會消失。

循環構建器和WooCommerce更新

在Flexbox佈局系統和模塊組的基礎上，循環構建器將讓您重複任何內容：單個模塊，組或整個部分。與其他將您鎖定在模板中的構建者不同，您將定義重複的內容並將其連接到動態內容。嵌套環也可以工作。例如，將通過帖子循環的博客類別，每個帖子都會顯示循環評論。

WooCommerce模塊將使用Divi 5的架構從頭開始重建。當前的模塊將通過向後兼容性工作，但不會與預設或變量相互作用。新產品模塊將在幾週之內完成，這使WooCommerce的支持步入正軌。

高級顏色

帶有色調，飽和度和輕度（HSL）支持的相對顏色可讓您構建數學顏色關係。設置一次主顏色，然後自動生成變化：“主要藍色，但減輕20％”或更改基礎時更新的互補陰影。

Beta和移民計劃

當完成三個目標時，Beta開始：改進現有站點的向後兼容性，完整的WooCommerce模塊支持以及基於Alpha反饋的持續錯誤修復。

如果我們按照目前的進步進行，這表明在幾個月內進行了Beta。該團隊還在為後端工作，因此Divi 4站點可以遷移而無需更改。 Divi市場的第三方模塊需要完全兼容。

對於新項目，Divi 5 Alpha為大多數構建提供了足夠的功能。單獨的性能改進證明了開關合理。除非需要特定的新功能，否則現有站點受益於等待Beta。

當Beta到達時，您將獲得完整的功能集以及徹底測試的信心。官方發布之後不久，為您提供了未來項目的堅實基礎。

準備嘗試Divi 5嗎？這是開始的方法

這些Divi 5獨家功能共同創造了不同的東西。您沒有為建造者的設計與一致的設計作鬥爭，而是建立了維護自己的系統。您沒有反復重建相同的樣式，而是創建一次並在各處重複使用 - 這只是開始！

因此，通過使用Divi 5構建新網站，立即領先於曲線。所有Divi成員都可以免費使用。只需轉到您的帳戶區域並獲取副本。

安裝WordPress後，請上傳Divi 5，就像您要上傳一個正常主題：外觀>主題>添加新>上傳主題。激活主題，登錄您的憑據，然後建立！您的第一個構建將向您展示為什麼我們從頭開始重建所有內容。

請記住：僅將Divi 5用於新網站。我們不建議在Alpha階段遷移現有站點。