如何通過Divi 5有效地構建頁面

從頭開始重建，Divi 5具有閃電般的性能，並引入了新功能，例如用於範圍內的造型的設計變量，用於無限佈局深度的嵌套行，以及基於預設的設計，以促進您的工作流程。 Divi 5借助現代化的，經過改進的視覺構建器，可以通過從頭開始或利用數千個預構建的佈局來創建專業網站。

在這篇文章中，我們將重點介紹Divi 5的獨特功能和UI增強功能，以及它們如何幫助您更有效地構建頁面。從設置響應式佈局到利用模塊組和Divi AI等創新功能，您將看到Divi 5如何將Web Design轉變為更快，更聰明，更具創意的體驗。

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

話雖如此，讓我們潛入。

了解Divi 5的現代UI

Divi 5的界面是其前身的全面大修，專為速度，靈活性和直觀的無代碼設計而設計。 Visual Builder提供了帶有清潔設置面板的實時前端編輯，響應式設計切換和嵌套層接口，用於無縫導航，排成一組，行，列和模塊組。

Divi 5通過更快的基礎增強了基礎，引入了獨特的功能，例如無限佈局深度的嵌套行，用於簡化模塊管理的模塊組以及用於一致樣式的設計變量。這些進步使初學者可以訪問Divi 5，並且對於專業人士來說是強大的，從而改變了網站在WordPress上的構建方式。

視覺構建器的演變

Divi 5的Visual Builder擁有一個重新設計的界面，具有精簡的體驗，具有功能強大且用戶友好。與Divi 4相比，Divi 5引入了一個更清潔，更直觀的設置面板，該面板可減少混亂並從邏輯上組織選項，從而更快地進行調整。

新的響應式設計切換使您可以在幾個台式機，平板電腦和移動視圖之間切換，從而確保設計在所有設備中看起來無瑕。這些UI增強功能使初學者可以訪問Divi 5，同時提供精密專業人士的需求。

直觀導航

通過Divi 5的層接口導航複雜佈局並毫不費力。該界面將部分，行，列，模塊和新模塊組組織成一個清晰的層次結構。它使您可以輕鬆地鑽入設計元素，無論是調整單個模塊還是重組整個部分。

拖放接口簡化了事物，而線框模式則提供了頁面結構的鳥眼視圖。通過結合這些工具，Divi 5使建築物和編輯複雜的佈局直觀，節省了時間並減少挫敗感。

響應式設計控件

Divi 5引入了可自定義的斷點，以精確控制您的設計如何跨設備適應。您可以從七個預定義的斷點中選擇或設置自定義值以匹配特定的設備分辨率。這樣可以確保無需手動CSS調整即可像素完美的佈局。

這種顆粒狀控件與用於流體縮放的夾具（）等高級單元相結合，可確保您的設計在所有屏幕尺寸上保持一致且視覺上吸引人。

使用Divi 5的獨特功能構建頁面

Divi 5推出了創新工具，這些工具將重新定義您的使用方式。嵌套行允許用於復雜佈局的無限行嵌套，而模塊組簡化了樣式並將多個模塊作為一個單元進行管理。設計變量可實現顏色，字體和更多和高級單元的範圍範圍內一致性，並支持動態CSS函數，例如Clamp（）和Calc（），用於響應式設計。基於選項組的基於基於選項的設計，預設跨元素的流線樣式，並且Divi AI加速了內容的創建。這些功能共同使用戶能夠有效地創建專業，響應迅速的網站。

下面，我們詳細介紹如何使用這些工具來構建網頁。

1。設計變量用於高效造型

設計變量是可用於顏色，字體，數字，圖像，文本和鏈接的全局設置，可以在網站範圍內應用。您可以通過單擊Visual Builder中的全局變量圖標來定義變量。

使用設計變量的好處是，您可以一次更新它們以更新該變量的所有實例，從而確保一致性和節省時間。例如，如果您建立數字值以將clamp（）計算為標題分配，則在整個網站中為文本建立一個全局層次結構。如果您需要快速更改，則使用這些變量應用的任何標題或文本模塊都將在您的網站上進行更新，從而使您可以快速的設計更改，這些更改在每個實​​例中都填充。

如何使用設計變量

為了最大程度地提高設計變量的潛力，請將它們結合在設計過程中。在開始時建立變量會創建一個一致的框架，使您可以專注於創造力，而不是重複的任務。首先單擊Visual Builder中的變量管理器圖標。

出現對話框時，您可以添加變量以創建設計的基礎。例如，您可以使用數字變量來建立響應式排版。

數字變量也可以用於間距。例如，您可以在網站上為所有列和行建立標準間距。使用Calc（）公式（例如Calc（80％ - 60px））將設計元素的寬度建立為容器的80％，同時將30px的填充物添加到任一側。從“下拉菜單”中選擇“計算”以應用公式。

輸入calc（）公式中的值字段。單擊“保存變量”按鈕將其添加到變量管理器中。

一旦保存了變量，Divi就可以輕鬆地在整個設計中應用它們。要使用間距，請單擊行，列或模塊，導航到“設計”選項卡，然後查找寬度字段。

最後，單擊插入動態內容圖標以選擇全局間距變量。

如前所述，應用設計變量可確保整個網站的一致性。在變量管理器中更新其屬性會立即同步所有實例，從而節省了數小時的手動調整。

使用設計變量的提示

• 深思熟慮地組織變量：描述性地名稱變量，使其易於在復雜的項目中識別。
• 利用預設：將設計變量與Divi的全球預設相結合，以創建可重複使用的模板用於模塊，從而減少了新頁面的設置時間。
• 測試響應能力：跨視覺構建器中的設備預覽可變驅動的設計，以確保所有變量按預期執行。

2。基於期權組預設的基於預設的設計

Divi 5的基於預設的設計系統用兩個強大的工具徹底改變了樣式：元素預設和選項組預設。這些功能使您能夠保存和重複使用配置，確保一致性並簡化項目工作流程。

Divi 5元素預設

元素預設允許您保存模塊的配置，包括文本，顏色，版式，間距和懸停效果 - 以在網站上重複使用。例如，您可以創建具有特定字體，漸變背景和懸停動畫的完全樣式的按鈕模塊。保存為元素預設後，您可以單擊單擊將其應用於網站上的任何按鈕，以保持相同的樣式。如果您更新預設，例如將背景更改為純色，則該按鈕的每個實例都會自動更新，消除重複的編輯並確保統一的外觀。

Divi 5選項組預設

相比之下，期權組預設專注於可重複使用的樣式組，例如版式，邊界或陰影，可以應用於不同元素的凝聚力設計。例如，您可以為帶有5PX半徑的1PX黑色邊框創建一個選項組預設，然後在按鈕，圖像和行上使用它。

如果您以後將預設調整到2PX邊框，則所有鏈接的元素立即更新，節省時間並保持一致性。這種模塊化方法使您可以跨元素混合和匹配樣式組，從而在不犧牲控制的情況下提供靈活性。

如何有效使用預設

從啟動站點或預製佈局開始時，已經存在元素預設。但是，從頭開始創建網站時，您需要先創建它們。創建這些預設可以通過在整個網站中立即造型類似的模塊來加快設計過程。

創建一個元素預設

要創建一個元素預設，請使用所需設置的模塊樣式。然後，單擊模塊設置右上角的預設菜單。

單擊當前樣式的新預設以創建新的預設。

給預設一個名稱，選擇是否將其分配為默認值，然後保存。如果將其選擇為默認預設，則將您添加到網站的每個手風琴的樣式都相同，從而更加易於更快，更有效地構建網頁。

創建選項組預設

創建選項組預設的過程略有不同。您可以將預設應用於模塊，而是可以將預設分配給可以載入其他類型的模塊，列，行甚至部分的模塊的各個方面。選項組預設非常適合造型邊框，添加轉換控件，過濾器，盒子陰影等，從而使您可以保持較小的元素在整個過程中保持一致。

例如，您想為圖像和列創建邊框樣式。選擇一個圖像模塊，導航到“設計”選項卡，然後懸停在邊框設置上，直到出現組預設圖標為止。

接下來，單擊添加新預設。

樣式邊框，命名並保存預設。

使用Divi 5的基於設計的預設的提示

組合元素預設和選項組預設使您可以構建可擴展的設計系統。以下是一些有效地使用Divi 5的網頁的提示：

• 使用它們以提高效率：創建元素預設或選項組預設以加快頁面構建的速度，尤其是對於大型網站。此方法使您免於重複造型模塊，行或部分。您可以在需要的地方創建樣式，並在需要時應用它們。
• 建立設計一致性：預設確保跨元素的統一樣式，從而增強您的品牌標識和專業的拋光劑。
• 當您的網站需要設計更改時，編輯預設：預設允許您在不手動編輯各個元素的情況下更新全局樣式，從而使其非常適合設計迭代或客戶修訂。
• 使用它們以進行可伸縮性：您可以將預設與設計變量相結合，以為通常需要更新的站點創建強大的框架。需要在路上添加一頁嗎？預設使您可以更快，更有效地進行此操作。

3。靈活佈局的嵌套行

Divi 5中的嵌套行用更靈活的無限嵌套系統代替了Divi 4的專業部分。與傳統行不同，可以將嵌套行放在列中，從而使您可以在任何配置中堆疊行，模塊或其他嵌套行。

要創建一個嵌套行，只需通過Visual Builder將其添加到列或列中的模塊下方，然後用模塊或進一步的嵌套行填充它。

此功能使您可以構建複雜的分層佈局。例如，在大約部分中，您可能會在文本模塊下放置一個3列嵌套行，以添加按鈕以指導用戶到不同頁面。

Divi 5中的即將到來的FlexBox控件將增強定位選項，為複雜的設計提供精確的對齊和間距，例如定價表，投資組合或多層內容部分。

如何使用嵌套行

要利用嵌套行的力量，請在視覺構建器中按照以下步驟：

首先將標準行插入您的頁面佈局。這將作為基礎。接下來，單擊“新的行”選項卡以顯示新嵌套行的列選項。

接下來，選擇第一列的模塊。對於此示例，圖像。

在第二列中，添加另一個圖像。您可以為邊界，盒子陰影創建選項組預設，並從那裡創建效果。

您可以將嵌套行添加到另一列或第一個列下方。可能性是無限的。

您可以創建深層多個級別的高級佈局。例如，您可以製作一個帶有嵌套行的定價表，以並排配有兩個按鈕，這是Divi早期版本的功能。有幾種使用嵌套行的方法，使其成為使用Divi的網頁時的多功能功能。它們非常適合構建英雄部分，團隊頁面，標頭，頁腳等等。

使用嵌套行的提示

• 首先計劃您的佈局：在添加嵌套行之前，繪製頁面結構大綱以確定添加它們提供的價值，例如多層英雄部分，定價表或團隊網格。
• 用於模塊化設計：為可重複使用的組件創建嵌套行，例如帶有圖像的行和文本用於推薦，然後復製或保存它們以在整個網站上進行一致的樣式。
• 與模塊組結合：對嵌套行與模塊組，以組織複雜的佈局。
• 利用Divi的響應式斷點：使用響應式旋轉的旋轉旋轉來確保嵌套元素在所有設備上正確對齊。

4。有組織內容的模塊組

模塊組充當Divi 5中的容器，使您可以在列中分組多個模塊。您可以作為單個單元進行樣式，移動或複制它們。它們可以簡化您的工作流程，尤其是對於復雜的設計，並為即將到來的Flexbox支持奠定了基礎，從而解開了更精確的定位選項。

從那裡，您可以添加設計模塊和嵌套行，或將選項組預設應用於組以創建樣式的佈局，您可以輕鬆地複製或保存到Divi庫或Divi Cloud。

如何使用模塊組

要創建一個模塊組，請添加一個新行，然後選擇一個列結構。從Divi 5的可用選項中選擇組模塊。

在模塊組內，您可以添加模塊，例如文本，圖像，按鈕，甚至嵌套行。例如，您可能會創建一個包含標題，文本，圖像和按鈕的組，以供呼叫行動部分。

設計後，您可以通過單擊組右上角的省略號菜單來保存或複制模塊組。

模塊組可以創建團隊成員段，召喚部分，室內頁面標頭等。但更重要的是，一旦發布了諸如Flexbox和Loop Builder之類的功能，模塊組將變得非常有幫助。

使用模塊組的提示

• 策略性地計劃模塊組：將模塊組用於可重複使用的組件，例如CTA，推薦，團隊成員或產品卡。它們有助於簡化建築過程並維護組織。
• 將模塊組與預設相結合：將選項組預設應用於模塊組，以跨多個組的一致樣式，例如統一的陰影或邊界。
• 使用Divi Cloud：將常用的模塊組保存到Divi Cloud，以便在項目中快速訪問，尤其是對於具有類似設計需求的客戶。

使用模塊組，您可以創建易於管理和擴展的模塊化，有組織的設計，使其非常適合構建簡單或更複雜的網頁。

5。動態設計的高級單位

Divi 5的高級單元功能支持更廣泛的CSS單元（PX，VW，REM，％等）以及在單個輸入字段中諸如Calc（），Clamp（），Min（），Min（）和Max（）之類的功能，從而啟用動態和響應式設計。例如，您可以將部分的寬度設置為計算（100％ - 40px）或夾具（20px，3vw，40px），以根據視口大小進行擴展。

高級單元也可以用作設計變量，以製定全局規則並在整個網站中保持設計一致。

如何使用高級單元

有幾種使用高級單元的方法，但是最有效的方法是將它們與設計一致性的設計變量相結合。但是，在某些情況下，您需要在模塊級別分配它們。

一個很好的例子是文本。當然，您可以在變量管理器中設置Clamp（）公式來控制整個網站的大小，但是如果您想通過添加空間使其更好地脫穎而出，該怎麼辦？那是高級單位進入的地方。

要演示，請單擊將標題模塊添加到您的網頁。在“設計”選項卡中，導航到尺寸字段。

在寬度範圍旁邊，單擊- 圖標以顯示高級單元選項。

從下拉菜單中，選擇大眾（視口寬度），然後輸入50 。這將告訴標題佔據觀察口寬度的50％。視口是Web瀏覽器窗口的可見區域。因此，無論瀏覽器窗口的寬度如何，它始終是瀏覽器窗口寬度的一半。

當您預覽標題在其他屏幕尺寸上的外觀時，無論如何，您會注意到標題保持相同的寬度。

使用高級單元的提示

• 啟動簡單：以直接設計的基本單元（例如PX或％）開始，然後嘗試Clamp（），Calc（），VH或大眾進行響應效果。
• 使用夾具進行排版：將夾具（）應用於字體尺寸或間距，以創建適合任何屏幕尺寸而無需手動斷點的屏幕尺寸的流體，可訪問的設計。
• 與設計變量結合使用：用於標題和身體文本的經常使用的單元作為設計變量，以保持一致性並簡化更新。

高級單元為您提供Divi無代碼接口中自定義CSS的精度，從而易於構建動態的專業網頁，該頁面無縫地適應任何設備。

6. Divi AI集成

Divi AI通過基於自然語言提示來生成文本，圖像，代碼或整個部分和佈局來增強設計過程。它在Divi 5中的Visual Builder中起作用，在需要時使一些設計或文案提供幫助。

例如，您可以使用“創建具有標題，按鈕和背景圖像的現代英雄部分”之類的提示。 ” Divi AI將產生完全樣式的佈局，您可以手動完善該佈局以匹配您的視野。

使用Divi AI，您可以加快設計過程，克服作家的障礙，或在需要時獲得一些創造性的推動。

如何使用Divi AI

為了充分利用Divi AI在Divi 5中構建網頁時，您可以使用它來幫助您編寫品牌副本，創建圖像，在現有模塊中添加一些CS，甚至生成段。 Divi AI可以幫助您創建美麗的網頁，與訪問者產生共鳴。

要在現有文本模塊上使用Divi AI，請將懸停在文本區域上，然後單擊“內容”選項卡中的Divi AI圖標。

將出現一個帶有多個選項的對話框。您可以編寫和替換現有內容，延長，縮短或簡化它，修復拼寫和語法，翻譯甚至更改音調。

選擇選項後，Divi AI將根據現有內容更改副本。完成後，您可以使用文本，重試，通過AI進行改進，或用一些指導單詞來完善結果。

使用Divi AI的提示

• 具體說明您的提示：在使用Divi AI創建圖像或部分時，包括音調，顏色或佈局首選項等詳細信息。文本和代碼也是如此。越具體，輸出越好。
• 根據需要進行迭代：如果初始輸出不理想，請完善您的提示或生成多個變化以找到最佳擬合。
• 使用它來靈感：使用Divi AI的最佳方法之一是集思廣益，例如生成佈局概念或標語，即使您打算大量自定義網頁。

使用Divi 5建立網頁的最佳實踐

對Divi 5的特徵採用戰略方法對於發揮其潛力至關重要。首先計劃您的設計系統。定義核心設計變量，例如主要和次要顏色，相關鏈接，排版設置和字體。

構建頁面時，請建立可重複使用樣式的選項組預設，例如懸停效果，陰影或排版，以加快工作流程並在網站上保持凝聚力的美學。

早期測試且通常對於積極的結果至關重要。使用Divi 5的響應式斷點預覽高級單元，以確保它們在所有設備中看起來都不錯。 Divi 5的響應式切換為您提供了七個斷點探索，使您可以更好地了解設計如何在不同尺寸的屏幕上出現。

將元素預設與選項組預設相結合，以平衡靈活性和一致性。將元素預設用於特定模塊，例如樣式的CTA模塊。相比之下，要保持統一性，請將期權組預設應用於共享屬性，例如邊框樣式或陰影。當需要更新時，您可以調整這些預設組以進行全局更改，而不是手動編輯單個元素。

最後，保持設計易於保持性能和可用性。除非有必要，避免過度嵌套行或依靠複雜的calc（）公式，因為這些可能會使編輯複雜。同樣，為您計劃在網站上重複使用的基本設計創建模塊組。

使用Divi 5構建更智能的網頁

Divi 5重新定義WordPress Web設計，使您可以輕鬆構建令人驚嘆的響應網頁。它的現代視覺構建器，直觀的控制，創新功能和Divi AI簡化了該過程，從而以最小的努力確保了專業成績。無論您的技能水平如何，這些工具都可以使構建有效，動態的網站更快，更聰明，更具創造力。

準備探索Divi 5的潛力了嗎？今天下載Divi 5 Alpha版本，並嘗試其最新功能，以使您的視野栩栩如生。 Divi 5適合新站點，但尚未推薦用於轉換現有網站。

我們很想听聽您的想法！通過以下評論分享您的反饋。更好的是，在社交媒體上發布有關您的Divi 5經驗的信息，以幫助傳播這個詞。