Divi 5初學者指南：如何掌握基礎知識

如果您一直在聽說Divi 5並想知道當前狀態，那麼本Divi 5初學者指南適合您。

Divi 5是Divi Visual Builder的未來，受到WordPress用戶的信任和喜愛。從頭開始重建，Divi 5提供更快的性能和更直觀的體驗。它結合了Divi在現代，可擴展的基礎上聞名的一切，該基礎使每個人都更容易網頁設計。

在這篇文章中，無論您是新手，還是從Divi 4過渡，我們都會介紹您入門所需的一切，並對使用Divi 5的信心。

Divi 5處於Alpha階段，但準備在今天的新網站上使用。

什麼是Divi 5？

Divi 5是Divi WordPress主題的最新版本，但不僅僅是更新。這是對Divi網站構建框架的完整重建，旨在在不編寫自定義代碼的情況下為您提供完整的創意控制。

Divi 5的核心是一個更快的現代化視覺構建器。它更輕，反應迅速，並消除了Divi 4中用戶所面臨的常見問題，例如加載時間緩慢，輸出和建造者滯後。一切都感覺更狡猾，更光滑，更直觀。

它的構建是為了幫助您從啟動到啟動，而無需切換工具，編寫代碼或浪費時間。以下是：

• 一個實時的視覺構建器響應更快，感覺更輕，可以讓您拖動，掉落和自定義，而滯後較少，更精確。在這裡自己測試。
• 預先設計的Divi佈局，可幫助您應用針對不同行業和目標量身定制的精美頁面設計。
• 數十個Divi模塊處理從文本和圖像到滑塊，畫廊，形式，定價表等所有內容。
• Divi之類的營銷工具引領了用於分裂測試的領導，用於電子郵件的盛開以及用於社交共享的君主。
• 先進的定制選項，例如預設，設計變量和全球樣式，使您可以保持設計一致和表面上的品牌。

使Divi 5脫穎而出的是它的意圖。從佈局到界面再到性能的整個體驗旨在幫助您更快地移動，保持井井有條，並享受無挫敗感的無代碼工作流程。

從Divi 4過渡到Divi 5是否容易？

Divi 5是Divi 4的繼任者，這意味著更好。因此，如果您習慣了Divi 4，那麼切換的想法可能會感到不知所措。但是，讓我們開始說Divi 5是通過向後兼容的。這意味著任何Divi 4網站都將與Divi 5合作。

Divi 5還將您所愛的關於Divi 4的一切都保留，但只會使它變得更好。整體直觀的體驗仍然很熟悉，因此您可以快速熟悉Divi 5。讓我們討論一些您應該從Divi 4轉換為Divi 5的原因。

Divi 5 Builder提供更快，更優化的性能

Divi 5是使用現代建築建造的。最大的改進之一是去除短碼，這導致了Divi 4的產出和較慢的性能。建造者現在很快加載了，總體上感覺更輕。

另一個重大升級是更智能的重新訂閱。在Divi 4中，即使是小更改也可能觸發整個佈局不必要的更新。 Divi 5僅重新渲染實際變化的內容，減少滯後並保持體驗平穩，即使在復雜的頁面上也是如此。

請注意，毫秒4（在左側）加載視覺構建器。 Divi 5幾乎立即加載它。

為了支持這種速度，我們從設置面板中刪除了過渡動畫，最大程度地減少了不必要的重新繪製，並完善瞭如何實時應用更新。這些小的更改使建築商每次點擊時都會更加響應。

Divi 5提供更輕鬆，更簡單的編輯體驗

小細節通常會對您的構建方式產生最大的影響。 Divi 5引入了一系列微妙但有力的改進，使構建器接口更加直觀。

對於初學者來說，編輯內容現在比以往任何時候都更快。通過一單擊的編輯，您可以直接單擊任何文本或模塊，然後開始鍵入，沒有額外的步驟，並且在菜單之間沒有切換。它使整個體驗感到直接而輕鬆。 （在Divi 4中，需要多次單擊以打開模塊的設置面板。）

另一個升級是面闆對接，它使您可以將設置面板固定在屏幕的兩側。當您進行更改並防止設置覆蓋您的工作區域時，這將使您的佈局保持完整視圖。 （Divi 4中不存在此功能。）

設置面板頂部的新麵包屑向您顯示了佈局結構中的確切位置，因此您始終知道自己的位置，尤其是在使用深嵌套元素時。

您還可以在構建器中不存在的構建器中的光模式和深色模式之間切換。這些更新為您提供了更清潔，更專注的編輯空間，減少視覺混亂和不必要的點擊，因此您可以更好地控制工作區。

Divi 5簡化了設置管理和設計組織

Divi 5帶來了一個更有條理和直觀的系統，用於管理樣式，佈局設置和響應式調整。

您可以在每個設計設置中直接在響應式和懸停狀態之間切換到每個交互和屏幕尺寸的微調間距，排版或效果，而無需切換視圖。

同樣，模塊預設，設計變量和選項組預設更易於在您的網站上應用和管理。 （我們將在下面的部分中詳細介紹這些。）

借助Divi 5，我們正在改善基礎並添加新的，更高級的功能，以幫助您無需自定義編碼就可以優化Web設計工作流程。隨著更新每兩週發布，它只會從這裡變得更好。

您應該知道的新Divi 5功能

讓我們看一下我們最近添加到Divi 5的新功能，以及它們如何幫助您更快地構建網站：

1。可自定義的斷點提供了更大的響應靈活性

Divi 5中最令人興奮的補充之一是可自定義的響應斷點。在Divi 4中，您僅限於標準的三個設備尺寸：電話，平板電腦和台式機。您必須使用自定義代碼來微調佈局，以獲得更具體的屏幕寬度。

對於Divi 5，該限制消失了。現在，您可以訪問七個預定義的斷點，包括手機寬，平板電腦寬，寬屏和超寬，以及熟悉的斷點。

您可以根據您的設計需求啟用或禁用這些額外的斷點，並更改其寬度值以完全控制。這使您在構建響應式網站時會更加靈活。

要管理斷點，請單擊三個點以打開範圍內的響應式斷點面板。在要添加的任何新斷點上切換，並根據需要修改其寬度控件的新值。

禁用斷點時，不必擔心會失去樣式。 Divi將它們保存在後台，因此，如果您以後重新啟用該斷點，您的自定義將立即回來。這是測試不同響應式設計而不會失去工作的理想選擇。

2。設計變量可幫助您定義一致的品牌系統

設計變量在表面上可能會很小，但是一旦您開始使用它們，它們就會完全改變您的工作流程。您沒有在不同模塊上手動調整相同的字體，顏色或間距值，而是將其定義一次並在您的站點上重複使用。當您更新變量時，每個實例會自動更新，節省時間並保持設計一致。

這對於品牌一致性很重要的多頁網站或客戶項目特別有用。您可以設置變量，例如身體文本大小，標題顏色，按鈕填充或鏈接樣式。如果您需要調整所有H4，則無需尋找每個塊；只需一次更改變量值即可。

不僅設計屬性，您還可以節省常見重複的內容值，例如公司地址，產品鏈接甚至背景圖案，以快速訪問。這可以使您免於手動工作，並有助於更好地組織重複的內容。

在視覺構建器內部，單擊“變量管理器”圖標，然後從六種變量類型中進行選擇：數字，文本，圖像，鏈接，顏色和字體。

就我們的示例而言，讓我們創建一個文本變量。命名您的變量並添加其值，然後保存。

要應用文本變量，請單擊要修改的元素。在我們的情況下，地址。由於是文本變量，請轉到“設置”面板中的內容，然後懸停在身體​​上以找到動態內容圖標。現在，單擊您保存的變量以應用：

3。選項組預設簡化了基於預設的設計系統

通過選項組預設節省和重複使用樣式，例如背景設置，間距，框陰影，邊界等，可以節省大量時間。您可能已經熟悉Divi 4中的傳統元素預設，該預設適用於整個元素（段，行，列，模塊）。

Divi 5中的期權組預設將其深入一步。它們可讓您創建並將預設應用於模塊內的特定設計選項組。例如，您可以將邊框設置作為選項組預設保存而不會影響其他任何內容。

為此，您將首先自定義首選設置，然後將其保存為預設。在下面，我將按鈕陰影保存為盒子陰影2 ，並將其應用於其他按鈕。

如果您想重複使用具有特定懸停效果，邊框和顏色的按鈕樣式，但請單獨使用間距和文本樣式，選項組預設可以讓您這樣做。您只能應用所需的設置，而不會影響其餘的模塊。

雖然設計變量可幫助您控製字體，顏色和間距等核心值，但選項組預設會更深入一個水平。他們讓您將整個樣式部分作為全球預設進行分組。它們共同形成了一個基於預設的設計系統，該系統可幫助您在不編寫自定義代碼的情況下快速構建一致的佈局。

4。複雜佈局設計的嵌套行

嵌套行是為希望沒有復雜性的佈局自由的設計師而建造的。使用嵌套行，您可以構建更複雜的佈局，而不會不斷兼顧多個部分或代碼解決方法。

它們使復雜的佈局更易於管理，並且更具直觀的編輯，尤其是在登陸頁面，產品展示，多列博客佈局或在不對稱投資組合中展示最佳作品時。

添加一個嵌套行作為內容模塊。單擊“黑色加”按鈕，切換到新行，然後選擇您的首選行類型。

一旦插入，它的行為就完全像頂級行。另外，每個嵌套行都保留完整的響應設置，這意味著您可以控制其在斷點之間的行為。您不再限於在基本行和列中思考。借助嵌套行，您可以在層次上思考，同時保持設計工作流程清潔和視覺。

5。模塊組來組織您的模塊

模塊組是Divi 5中的一個新容器元素。它們讓您將多個相關的模塊捆綁成視覺構建器中的一個可折疊組。這使得編輯頁面的大部分更易於管理，尤其是在處理充滿重複元素或嵌套設計的複雜佈局時。

想像一個帶標題，圖像，描述，按鈕和線除差的產品展示箱。您可以在要復製或調整設計時單獨選擇或移動每個模塊，而是可以將它們分組為一個單元。

模塊組作為另一個Divi 5模塊。選擇組模塊添加。您可以在其中添加更多模塊，並且它們都將被分組為一個模塊組。

6。高級單位可幫助您優化更智能的響應式設計

在Divi 4中，大多數樣式輸入僅限於基本單元，例如像素和百分比。使用高級單元，您現在可以將CSS單元（包括REM，EM，VW，VH，％，甚至功能強大的CSS功能）（例如Clamp（）作為Divi 5中的視覺設置等功能強大的CSS功能。此功能對響應式設計和可擴展版式的設計師有幫助。

例如，您還可以使用clamp（）來設置填充或字體尺寸的最小，理想和最大值，因此您的設計看起來可以在跨設備上拋光，而不會創建數十個自定義斷點。標題的夾具（36px，4VW，48px）將將字體尺寸設置為以36px的速度開始，根據觀看端口寬度的4％進行擴展，並停止以48px的形式生長。

這些值嵌入在所有設置中。您還可以通過定義高級單位值來創建數字設計變量。

這些功能使構建靈活，響應和一致的網站變得更加容易。您將直接在構建器中直接控制設計，而無需編寫自定義CSS或依靠解決方法。

但這只是開始。到目前為止，您所看到的僅代表Divi 5提供的一部分。我們正在積極研究更多功能，所有這些功能都旨在幫助您更聰明，更快。 Divi 5的核心是使Web Design更聰明。每個更新都集中在簡化您的工作流程上，並為您提供更少的精力來構建美麗網站的工具。現在開始將為您提供掌握Divi 5之前的優勢，然後才能準備好最終發布。

看Divi 5

讓我們看看如何用Divi 5的外觀構建網站。為此，您首先需要一個工作的WordPress設置。這意味著選擇Web主機，註冊域名並在您的網站上安裝WordPress。我們假設您在專注於本文的下一部分之前一直在運行：

1。下載，安裝和激活Divi 5

這是一個視頻教程，用於購買，安裝和激活Divi：

購買成功後，您將能夠登錄優雅的主題會員區域。現在下載Divi 5 Zip文件夾。

返回您的WordPress儀表板。請按照此查詢：外觀>主題>添加主題>上傳主題。然後從您的計算機上傳Divi 5 Zip文件，然後單擊“立即安裝”。

安裝後，激活主題。

最後，激活您的Divi許可證。通過這樣做，您將能夠有效訪問所選服務。該過程是自動的，只需與您的ET成員資格登錄憑證再次登錄。

完成此操作後，您可以訪問Divi 5儀表板。您的儀表板為您提供了諸如Divi許可證狀態，更新，頁面，模板等信息。您還將看到Divi快速網站，我們將用於建立網站群。

開始從Divi開始

2。使用Divi 5創建您的網站

使用Divi 5構建整個網站的最快方法是使用Divi快速網站。

您可以在兩個選項之間進行選擇：

• 使用預製的入門網站，Divi 5將使用所選網站的品牌和內容構建基本網站。
• 或使用AI生成您的網站，以指示Divi AI創建獨特的網站。

以下是使用入門網站的過程：您選擇一個入門網站並填寫一些詳細信息，例如您要創建的網站徽標和頁面。

這是與AI一起使用的方式。您告訴Divi AI有關您的網站，並等待它做飯：

如果您想加快網站構建過程，Divi快速站點是完美的。它為您提供了現成的結構，您可以通過自己的品牌，內容和样式進一步自定義。您不必從空白頁面或從頭開始設計每個佈局。

如果您想從頭開始構建一個新頁面或訪問Divi Visual Builder，請轉到頁面>添加頁面。

現在，命名您的頁面，然後單擊使用Divi Builder。

您將進入Divi Visual Builder。

3。了解Divi 5視覺構建器基礎知識

如果您首次訪問Divi 5 Visual Builder，您會看到許多圖標，因此，這是一個快速的演練：

• （1.）左側欄面板：此面板包含構建器工具。您可以添加預製佈局，訪問佈局庫，使用圖層查看結構，切換到線框視圖，保存設計變量，調整建築商設置並獲得幫助。
• （2.）頂級欄：您可以在響應模式之間切換。寬度和縮放控件可幫助您跨斷點進行微調佈局間距。您還會在此處找到撤消/重做，清除佈局，歷史記錄和保存選項。再加上出口，預覽，保存草稿和發布按鈕以管理您的進度。
• （3.）右側欄：當您單擊任何模塊時，其設置在右側打開。您可以在此處添加內容，樣式並添加自定義CSS。頂部的麵包屑（頁面>部分>行>列）準確地顯示了模塊在佈局內的位置。

接下來，您有兩個容器元素：部分（以藍色表示）和行（始終為綠色）。在行內，您有可以添加模塊（黑色）的列。

要添加一個部分，您將單擊“藍色加”按鈕。對於行，這是綠色Plus按鈕，而黑色用於模塊。您可以選擇不同類型的行選項。一排是列。

在行和列內，您將添加內容模塊，例如標題，圖像等。 Divi5為所有目的提供200多個內容模塊，無論您是否要添加聯繫表格，證明書，等等。

最近的模塊組模塊使您可以對不同的元素進行分組，因此您可以創建和保存自己的模塊。 （灰色代表一個模塊組。）

4。用Divi創建您的網站頁面5

即使您不使用Divi快速站點，您仍然可以導入預製作的佈局或使用Divi AI來生成整個佈局。單擊“藍色加”按鈕。

（1.）允許您從2500多個預製佈局中進行選擇， （2。）讓您指示Divi AI生成頁面。這是導入預製佈局的工作方式：

如果您選擇使用Divi AI構建，則只需要告訴它要構建的頁面即可。

自定義您的頁面設計

如果您使用Divi快速站點，預製佈局或Divi AI創建了頁面，則應將其自定義以使其成為您的。為了在整個網站中始終如一地添加您的品牌，最簡單的方法是定義您的設計變量。

這些全局值（例如您的原色和字體）將在您使用它們的任何地方自動應用。要修改它們，只需更改變量管理器中的變量值即可。

要編輯任何模塊，請單擊它，然後在右側面板中彈出設置。

每個模塊設置面板都包含三個選項卡：

• 內容：這是您添加或編輯模塊的實際內容的地方。您還可以添加鏈接，選擇背景或更改管理標籤，以幫助更輕鬆地識別模塊。
• 設計：切換到“設計”選項卡可以使您可以風格的模塊視覺外觀。您可以更改字體尺寸，重量，顏色，線高，間距，對齊方式等等。請記住，不同的模塊具有不同的設置選項。
• 高級：“高級”選項卡可讓您完全控制更多技術選項。添加自定義CSS，設置響應可見性等等。如果您想自定義設計選項卡提供的內容，則特別有用。
• 筆記本電腦圖標可讓您在響應式和懸停模式之間切換。通過切換到一種模式，您可以自定義所有設置並保存。
• 默認的預設按鈕是Divi的預設功能。這是元素預設和選項組預設之間的區別。

如果您要處理作者的塊，請使用Divi AI添加內容（文本，圖像和代碼）。幾乎每個模塊都可以讓您使用AI。您需要做的就是尋找小AI圖標。

自定義頁面後，請記住保存草稿。然後，預覽以查看所有事物正常工作並發布您的頁面。

開始從Divi開始

充分利用Divi 5的5個技巧

Divi 5處於令人興奮的階段 - 公共alpha階段。它經歷了基礎升級和重大性能的改進。現在剩下的就是新功能發行和次要修復。

這也使它成為開始使用它的理想時機。您越早開始，當Divi 5 Beta完全啟動時，您就會越舒適。這裡有幾種充分利用Divi會員資格的方法：

1。保持新版本的更新

新功能更新不僅是修復或性能調整，還可以改變您構建網站的功能強大的工具。從可自定義的斷點到設計變量，嵌套行和高級單元，每個添加都在Divi 5的新基礎上建立，可以為您提供更多的控制和速度。

要保持在循環中，請訂閱優雅的主題YouTube頻道，尼克經常分享演練並發佈公告。

訂閱我們的YouTube頻道

2。實驗新的Divi 5建築商

Divi 5 Visual Builder是快速，響應且為效率而建造的。每個新功能的添加都有助於優化您的工作流程，我們鼓勵您繼續嘗試制定新策略。為了幫助您，我們還發布了新功能教程以分享我們的方法。例如，我們在不同行結構上的帖子向您展示了使用嵌套行來創建智能佈局的方法。

養成定期訪問優雅主題博客的習慣，以找到使用Divi 5的創新方法。

3.分享和搜索Divi 5在Divi社區中

一旦您開始嘗試Divi 5，看到其他人的使用方式同樣重要。世界各地的設計師和開發人員也在探索相同的新功能，嘗試創意佈局並分享其結果。

從斷點的智能使用到節省時間的設計變量設置，您可以通過觀察其他人如何接近其構建來學習很多東西。加入官方的Divi Facebook小組或以Divi為中心的論壇，發現教程，提出問題並從Divi 5工作的人們那裡獲得新的想法。這是提高您的技能並保持最新狀態的最快方法之一。

4。用Divi建立新網站5

使用Divi 5（現在）的最佳方法是從頭開始構建新網站。如果您要開始一個新的項目，就沒有理由等待。開箱即用，您將獲得更快的性能，更清潔的代碼和更好的編輯體驗。

但是，如果您正在使用現有的Divi 4網站，最好等待更長的時間，然後將其遷移到Divi 5。

由於Divi 5仍在積極發展中，因此可能尚未完全支持一些Divi 4模塊和第三方擴展。也就是說，由於每個網站都是不同的，因此每次都不會這樣。如果不確定，最好的辦法是檢查您的網站的兼容性。為了提供幫助，我們還創建了一個Divi 5遷移器工具。

它掃描了您現有的Divi 4網站，並告訴您哪些模塊兼容，哪些模塊不是什麼，什麼需要關注。這可以幫助您做出明智的決定，而無需冒險實時網站。

但是，我們非常接近Beta版本，因此我們的建議是僅使用Divi 5創建新網站，然後再等一點，然後再切換Divi 4網站。

5。建立Divi設計系統

Divi 5引入了許多功能，因此決定使用哪些功能以及不使用哪些功能。例如，如果您定義設計變量，您是否也應該使用選項組預設？弄清楚這一點的最佳方法是實驗和弄清楚什麼對您有用。隨著新功能的發布，您可以繼續完善過程。

您可以使用設計變量構建任何網站以達到一致性，然後在選項組和元素預設中使用它們。這種結構化的方法可以節省時間，使您的品牌保持一致，並可以單擊幾下更新全球樣式。

6.遇到錯誤時報告錯誤

Divi 5仍在積極發展中，因此您可能會沿途遇到一些錯誤。當您這樣做時，我們希望您向他們報告。它可以幫助我們的團隊更快地解決問題，並使我們更接近Beta版本。您也歡迎您依靠我們解決Divi 5疑問 - 我們的支持團隊很快就會做出回應，並在此處提供幫助，而專業用戶也可以為任何緊急情況獲得24/7的VIP支持。

選擇Divi 5來啟動您的網頁設計旅程

Divi 5為您提供了一個完整的網站構建框架，從頭開始現代化和重建。它的每個部分旨在簡化您的工作流程，加快性能加快，並為您提供網頁設計的未來。

• 比競爭更好：儘管大多數建築商都專注於華麗的功能，但Divi 5專注於控制，速度和現實世界的可用性。它是為了與您合作，而不是與您合作。
• Divi 4：Divi 4的重大升級已受到WordPress用戶的喜愛。 Divi 5保留了人們喜歡的一切，並修復了他們沒有的一切。它更快，更輕，更可擴展。
• 一個地方的所有工具：從視覺編輯到AI內容，雲存儲，快速的站點創建和營銷工具，Divi 5為您提供了啟動強大并快速成長所需的一切。

如果您今天開始使用網頁設計旅程，請從Divi 5開始。它是為網絡前進的位置而不是去哪裡的。

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