如何開始使用Divi 5

Divi 5是下一代Divi Builder，而不僅僅是另一個版本更新。這是從頭開始的完整重建（具有向後兼容），它的重點是更快的性能，新功能和功能，更多的設計自由度和長期可擴展性。

除了基礎改進外，Divi 5還獲得了新的活潑界面。儘管此界面略有不同，但您仍然可以識別構建網站的Divi方式。我們已經準備了本教程，以引導您了解有效地使用Divi 5的所有內容，從設置它到探索其最新功能。讓我們開始！

Divi 5已準備好今天在新網站上使用，但我們不建議您暫時遷移網站。

Divi 5：WordPress網站大樓的未來

Divi 4是一個可靠的頁面建設者，但隨著時間的推移，它積累了技術債務。為了消除這些限制，我們從基金會中重建了Divi 5，並提供了許多驚人的新功能，以為您的Web Design的未來做好準備。但是Divi 5不是單獨的產品，它具有向後兼容性，這意味著您將能夠將任何現有的Divi 4網站遷移到Divi 5。

這是使Divi 5值得您關注的關鍵改進：

• 核心體系結構重寫： Divi 4的舊代碼庫使得在不引入錯誤或放緩的情況下添加新功能變得困難。 Divi 5的規模。
• 提高性能： Divi 4建築商通常會放慢速度並影響頁面速度，尤其是對於大頁面和復雜的佈局。 Divi 5帶來了重大的後端改進，並使用更少的系統資源來提供更快，更敏感的體驗。 （我們還進行了Divi 5速度測試，以查看前端的表現速度。）
• 更好的視覺構建器體驗： Divi 5看起來仍然很熟悉，但是建築商的使用速度更加順暢，更快。設置立即打開，控制更快地響應，以及更清晰的側邊欄和懸停工具等小更改，使構建和編輯頁面更容易。查看Divi 5儀表板演練，以了解新添加。
• 許多新功能：當我們仍處於Divi 5 alpha階段時，我們已經發布了新的令人興奮的功能，這些功能會改變您的整個網站構建工作流程。

這些升級共同使Divi 5變得更好，並且可以選擇更快，更清潔且易於維護的現代網站。如果您一直在等待一個更光滑的，更適合未來的Divi版本，那就是其中一個。

Divi 5已準備好在新網站上使用，但我們不建議您暫時遷移您現有的Divi 4網站。當前版本是新鮮開始的理想選擇，因此您可以充分利用新基金會所提供的一切。

Divi 5入門

要訪問Divi 5並開始構建您的網站，您需要確保您的必需品已經到位：Web託管，域和WordPress。

設置網絡託管和WordPress

如果您正在尋找可靠的網絡託管，請考慮Siteground。它提供了出色的性能，強大的支持和輕鬆的單擊WordPress設置。借助Siteground，您還可以獲得一個免費的域（或者您可以從Namecheap獲得一個） ，這使得事情變得更容易保持一致和一致。請按照本教程設置您的網絡託管和WordPress。

獲取Siteground

下載，安裝和激活Divi 5

一旦您可以訪問WordPress儀表板，下一步就是安裝Divi 5 。轉到您的優雅主題會員區，然後下載最新的Divi 5 Zip文件夾。

（如果您是Divi的新手，請查看我們選擇最適合您需求的定價計劃。不能選擇？選擇Divi Pro會員資格，它使您可以訪問所有很酷的功能，例如Divi AI，Divi Cloud，Divi Vip，Divi VIP，Dondivi Collection，等等！）

開始從Divi開始

返回您的WordPress儀表板，轉到外觀>主題>添加新>上傳主題。

選擇您的Divi 5 Zip文件，然後單擊“立即安裝”。

安裝Divi 5後，將其激活。

接下來，您需要激活Divi許可證以訪問主題功能。為此，請使用用戶憑據登錄您的帳戶。

完成該過程後，您將能夠訪問Divi儀表板，其中將顯示關鍵信息，例如您的許可證狀態，Divi 5更新狀態，頁面，主題模板等。

訪問新的Divi 5視覺構建器

每個網站都有基本頁面：家庭，聯繫，商店和博客。要設計它們，您首先需要創建它們。要創建頁面，請轉到頁面>添加頁面。

命名您的頁面，然後單擊使用Divi Builder啟用Divi 5 Visual Builder。

您將進入Divi 5視覺構建器。

Divi 5儀表板演練

乍一看，新的Divi 5接口看起來與Divi 4相同，但是您會發現一些值得探索的額外的側邊欄和新圖標。讓我們更詳細地回顧它們。

首先，這是頂部面板設置的故障：

• （1）頁面設置面板：單擊頁面標題（主頁）旁邊的齒輪圖標打開頁面設置面板。在這裡，您可以編輯頁面標題，添加摘錄，分配特色圖像以及訪問高級設計設置。 Divi 5啟用一鍵設置訪問，這意味著當您單擊任何元素（模塊，部分，列或行）時，設置面板將在右側自動打開。
• （2）響應視圖和寬度控件：本節可讓您預覽和編輯設計，以跨不同屏幕尺寸（例如桌面，平板電腦和移動設備）進行響應。您還可以調整帆布寬度和縮放級別，以微調在各種屏幕尺寸下的佈局顯示方式。
• （3）構建器控件：此區域可讓您快速訪問構建器操作，例如Dark Mode （Divi 5中的高度要求的新功能），撤消/重做，歷史記錄，導出/導入，清除佈局，添加到庫和退出構建器。您還會找到可以預覽，保存草稿或發布頁面時的按鈕。

現在，讓我們看一下還包括許多新圖標的左側面板：

• （1）佈局和結構工具：左面板可訪問核心佈局選項，例如用於從Divi庫或Divi Cloud中添加預製或保存的佈局的藍色Plus按鈕。您還可以打開頁面結構化輪廓的圖層視圖，或者切換到線框視圖以進行簡化的編輯模式，該模式將模塊顯示為標記的塊。它們之間是變量管理器圖標，您將在其中創建和組織設計變量。
• （2）視覺顯示選項：您可以自定義懸停在元素上時的操作圖標出現的方式。借助懸停在懸停的懸停操作圖標上的動作圖標，您將看到盤旋元素及其父容器的圖標，從而更易於訪問控件。您還可以打開X射線模式，該模式概述了頁面上的每個元素，以幫助您可視化佈局的結構。
• （3）設置和幫助：在面板的底部，您會找到視覺構建器設置，在其中可以調整接口首選項並顯示行為。您還將看到一個直接鏈接到文檔和教程視頻的幫助圖標，從而輕鬆獲得支持而無需離開構建器。

可能需要一些時間才能習慣Divi 5，因此我們還編輯了一些技巧，以幫助您有效瀏覽它。

添加新佈局或模塊

現在，讓我們看看如何使用Divi 5創建設計。如果您要從頭開始構建，請單擊“綠色加”按鈕添加一行。在其中，您將添加內容模塊。

您會注意到右側設置面板會自動更改。那是因為這些是所選元素的設置選項。選擇標題元素後，右側面板顯示其設置。要訪問容器元素設置，請使用麵包屑。例如，單擊行訪問行設置。

您可以從頭開始構建，也可以輕鬆地導入預先建造的Divi佈局（或使用Divi AI創建）並將其用作基礎。然後，您可以花所有的時間自定義並製作自己的時間。我們為各種行業和目的提供了2500多個專業設計的Divi佈局，因此您會很快找到靈感。

單擊左側面板上的藍色Plus按鈕，然後選擇：

• 1：如果要導入預設的佈局。
• 2：如果您想使用Divi AI創建新的佈局。

我們將向您展示如何導入預先設計的佈局。您還可以在導入設計之前預覽設計。

如果您選擇了具有AI選項的構建，則只需要告訴Divi AI有關要生成的頁面和網站。然後單擊生成佈局。

定制預製佈局

導入設計後，您可以單擊任何元素以自定義其設置。

任何元素的設置面板都將包括內容，設計和高級選項卡。

• 內容：這是您添加和編輯模塊的主內容的地方，例如文本，圖像，按鈕，鏈接，背景等。通常，它是自定義任何元素時首先開始的。
• 設計：使用此選項卡以視覺方式樣式。在這裡，您會發現字體，顏色，間距，邊框，陰影，對齊和其他以設計為中心的控件的選項。
• 高級：本節供更多控制，例如添加自定義CSS，應用條件，調整可見性設置等。
• 小筆記本電腦圖標使您可以在響應模式（移動，筆記本電腦，平板電腦和懸停）設置之間切換。

您還會注意到一個小（默認的預設）下拉菜單。這是Divi 4的標誌性預設選項，但是我們最近推出了更高級的內容，我們將在“新功能版本”部分中進行討論。 （提示：尋找選項組預設！）

如果您需要生成內容的幫助，請使用Divi AI。單獨的內容元素也可以分別使用AI進行編輯。您只需要懸停在身體​​部分上，然後單擊小型AI圖標即可。

不僅內容，Divi AI還可以幫助您生成圖像，代碼甚至完整的佈局。只需尋找開始的小型AI圖標即可。

查看Divi AI

要修改元素的視覺設置，您將轉到“設計”選項卡。那是您可以調整字體，尺寸，顏色等的地方。

瀏覽頁面佈局上的每個元素以添加您的內容和品牌。完成後，保存草稿並預覽設計。當一切看起來都不錯時，請發布。

Divi 5的新功能探索了

Divi 5已準備好發展以提高可伸縮性。雖然仍處於Alpha階段，但我們已經發布了許多新功能，可幫助您改善您的設計工作流程。

• 選項組預設：讓您為特定設置（例如邊框半徑，版式等）創建預設。一旦應用了預設，您進行的任何設計更新都會在使用該預設的所有元素中自動反映。這有助於您保持一致性並節省時間。
• 設計變量：為顏色，字體和間距等設計屬性保存可重複使用的值。這意味著，如果您想更改主顏色或標題尺寸，則只需要更新一個變量，所有實例都可以輕鬆更新。設計變量非常適合建立品牌基礎。
• 高級單位：Divi 5現在支持現代CSS功能，例如Clamp（），min（），max（）和calc（）。這些高級單元使創建響應式設計的設計變得更加容易，這些設計無需自定義代碼或媒體查詢即可在跨設備上進行流暢調整。
• 嵌套行：您現在可以將一排放在另一排，這為複雜佈局提供了更大的靈活性。當您需要詳細控制對齊，間距或內容分組而不損害頁面結構時，這將很有用。
• 模塊組：將多個模塊組合到列中的一個容器中。這是組織相關內容，應用共享樣式或將佈局的各個部分作為一個單位移動的一種簡單方法。

我們還致力於添加新功能，例如基於Flexbox的佈局和增強的WooCommerce模塊。這些更新將繼續基於Divi 5已經做得很好：簡化您的工作流程並使建築商的體驗現代化。

為了確保您永遠不會錯過新功能，請訂閱我們的YouTube頻道。尼克通常首先宣布新功能，因此您將始終領先於曲線。

訂閱我們的YouTube頻道

最大程度地利用Divi 5的技巧

如果您已經熟悉Divi 4，您會注意到過渡到Divi 5的容易。它包含了您喜歡的Divi 4的所有內容，但更穩定，現代和更快。您越早開始熟悉Divi 5，越好。這裡有一些技巧，可以幫助您使用新的Divi 5功能來實現更大的設計靈活性：

• 首先設置設計變量：為品牌顏色，字體，間距等創建設計變量，以集中您的樣式，並使未來的編輯更快，更一致。
• 使用CSS變量進行全局控制：為了獲得更高的技術靈活性，請與設計變量一起設置CSS變量。他們讓您使用最小代碼在主題上應用一致的樣式。
• 儘早應用默認預設：在開始設計之前，將默認預設分配給模塊，部分和行。這樣可以確保每個新元素從一開始就匹配您的樣式系統。
• 考慮到基於預設的設計：創建預設您可以在頁面上重複使用。這將加快您的工作流程，並使更新更容易管理。
• 使用calc（）進行靈活的間距：應用calc（）I區填充或保證字段混合單元（例如100％ - 80px ），並創建適應屏幕尺寸而無需剛性斷點的佈局。
• 添加Min（）和Max（）進行佈局控件：使用Min（）或Max（）設置智能尺寸限制，例如防止標題在不同設備上變得太小或太大。
• 使用clamp（）進行流體排版：使用clamp（），您的字體尺寸可以根據屏幕尺寸而無需媒體查詢而平穩地生長或縮小。這是一種現代化的解決方案，可用於可讀，響應迅速的文本。

Divi 5是為網頁設計的未來而建造的

Divi 5不僅僅是一個更新：這是一個完整的重建，旨在使您的網站工作流程進行未來。

Divi 5中的所有內容旨在幫助您自信地工作，從更快的性能到模塊化預設，設計變量和高級佈局工具。無論是開始一個新項目還是對現代設計技術進行實驗，此版本都為您提供了建立更好網站的基礎。

Divi 5已準備好今天使用新網站，因此請潛入其中，測試最新功能，並成為早期採用者！