Divi Builder評論：現代WordPress頁面構建器

Divi Builder 理所當然地被認為是市場上最好的拖放頁面構建器之一。 這個流行的 WordPress 插件允許您在幾分鐘內創建複雜的響應式網站佈局，而無需使用任何代碼。

因此，即使您沒有設計網站的經驗，您也可以使用 Divi Builder 構建精美的網站，並將富媒體引入您的內容，例如圖像、時尚文本、視頻、表格、表格等。

在本文中，我想向您展示如何使用 Divi Builder 創建專業的網站佈局和頁面。

這將使您更好地理解為什麼這麼多網站所有者使用這個 WordPress 插件。

Divi Builder 提供什麼？

2018 年底，WordPress 發布了其軟件的 5.0 版。 這是一個重要的版本，因為它用名為 Gutenberg 的新拖放塊編輯器取代了舊的 WYSIWYG（所見即所得）編輯器。

既然 WordPress 附帶了拖放頁面構建器，您可能想知道為什麼有人想購買替代頁面構建解決方案，例如 Divi Builder。

我確實喜歡新的 WordPress 塊編輯器的簡單性，但是如果你使用過它，你會發現它是一個基本的解決方案，有很多限制和很少的自定義選項。

相比之下，Divi 的可能性是無限的。 它可用於創建從簡單的博客設計到復雜的在線商店和公司網站的所有內容。 它確實將頁面構建提升到了一個全新的水平。

Divi Builder 於 2015 年推出，作為一個獨立的頁面構建解決方案，適用於任何 WordPress 主題。 以前，此功能只能在 Divi WordPress 主題中使用，該主題由 Elegant Themes 兩年前發布。

多年來，該插件一直在不斷擴展和完善。 優雅主題不斷在他們的博客上發布更新，詳細介紹錯誤修復、調整和主要新功能。

Divi Builder 發展的一個很好的例子是視覺生成器。 在早期版本的 Divi Builder 中，自定義佈局是在 WordPress 編輯器中創建的。 後來添加了一個用戶友好的“Visual Builder”，以幫助您在網站的前端創建佈局。

可視化構建器已成為 Divi Builder 的主要用戶界面的中心舞台，但是如果您願意，您仍然可以使用舊版構建器在後端創建佈局（稍後會詳細介紹）。

Divi Builder 有一個庫系統，可讓您保存您創建的任何佈局。 然後，您可以在需要時從庫中加載佈局並調整它們以適合您正在使用的頁面。

該插件帶有 1,000 多個令人驚嘆的預製佈局，更多內容正在通過官方 Divi Marketplace 和第三方市場發布。

這些設計為您自己的自定義佈局和網站設計提供了絕佳的起點。 我是它們的忠實粉絲，因為它們大大減少了您創建獨特佈局所需的時間。

Divi Builder 的真正賣點是定制。

在花一些時間了解 Divi Builder 的工作原理後，您開始欣賞該插件的多功能性。 頁面上的每個元素都可以調整，無論是樣式、模塊、行、列還是其他任何元素。

簡而言之，如果它在頁面上，您可以更改它。

Divi Builder 對 WooCommerce 有很大的支持； 優雅的主題將此集成稱為“WooBuilder”。

使用 Divi Builder，您可以為產品頁面創建自定義佈局並添加 WooCommerce 特定的內容模塊。 在線商店的預製佈局也可用。

讓我們仔細看看 Divi Builder 的工作原理……

啟動可視化構建器

在您的網站上激活 Divi Builder WordPress 插件後，您將在帖子、頁面和自定義帖子類型的頂部看到“使用 Divi Builder”按鈕。

還可以從 WordPress 編輯器訪問一個小的設置區域，該編輯器允許您修改內容的寬度。

如果您進入博客文章或頁面並單擊 Divi Builder 按鈕，您將看到一條消息，指出“此佈局是使用 Divi 構建的”。

您需要單擊此按鈕以在您網站的前端啟動 Divi Builder。

但是請注意，如果您在 WordPress 個人資料屏幕中禁用可視化編輯器設置，Divi Builder 將無法工作。

如果您要創建全新的博客文章或頁面，您可以選擇使用 Divi Builder 或默認的 WordPress 編輯器。

或者，您可以直接從您網站的前端，從 WordPress 管理欄啟動 Divi Builder。 如果您已登錄，“啟用 Visual Builder”鏈接將顯示在您的網站上。

儘管 Divi Builder 通常被 WordPress 用戶用作默認 WordPress 編輯器的替代品，但它可以與使用 Divi Layout Block 的 Gutenberg 編輯器協調工作。

Divi 佈局塊可以插入頁面的任何區域，並放置在常規 WordPress 編輯器塊旁邊。

可以將多個 Divi 佈局塊插入到您的內容中。 您可以在塊內創建全新的佈局或從 Divi 庫加載以前保存的佈局。

正如您所看到的，Divi Builder 通過不接管您的整個網站來很好地補充 WordPress。 您只需要在需要時使用 Divi Builder。

Divi 的精美佈局

當 Divi Builder 啟動時，您會看到三個選項。

您可以選擇從頭開始創建新佈局、選擇預製佈局或克隆現有頁面。

如果您選擇預製佈局，Divi 庫將加載並顯示所有預製設計。 如果您意外關閉它，請不要擔心，因為它可以隨時從 Divi Builder 主菜單加載。

在撰寫本文時，有超過 1,100 個可用佈局和 149 個佈局包。 設計分為 13 個類別：藝術與設計、商業、社區與非營利、教育、活動、時尚與美容、食品與飲料、健康與健身、生活方式、在線商店、服務、簡單和技術。

如果您願意，您可以簡單地搜索預製的佈局庫。 您還可以從此區域查看已保存的佈局和現有頁面。

佈局包是一組佈局，其中包含針對您網站的多個區域的設計。 例如，它可以包括主頁佈局、博客佈局、關於頁面佈局和商店佈局。

單擊演示按鈕將加載設計的實時預覽。 您可以在 Divi 佈局包頁面中查看所有佈局的演示。

如果您單擊“使用此佈局”，Divi Builder 將開始導入相關佈局或佈局包。

與所有 WordPress 頁面構建解決方案一樣，Divi Builder 將佈局直接插入帖子、頁面和自定義帖子類型的主要內容區域。

因此，如果您將佈局導入到博客文章中，除非您手動刪除它，否則將顯示一個側邊欄。 在頁面上，此過程更加簡單，因為大多數 WordPress 主題都具有全角頁面模板或刪除側邊欄的登錄頁面模板。

導入佈局後，您可以開始自定義設計以使其成為您自己的設計。 您所做的任何更改都可以隨時保存和重複使用。

佈局也可以分類，隨著佈局庫的增長，您會發現這很有用。

主 Divi 管理菜單具有指向 Divi 主題生成器和 Divi 庫的鏈接。

Divi Theme Builder 允許您創建具有已定義頁眉、正文和頁腳的獨特頁面模板。

您可以為模板分配任何佈局，並準確定義應顯示網站的哪些區域。

例如，您可以為您的主頁和博客創建一個模板，為您的在線商店創建一個模板，為 404 錯誤頁面創建一個模板，為您發布的一系列博客文章創建另一個模板。

您保存的每個佈局都將顯示在 Divi 庫主頁面中。

在此區域中，您可以訪問所有佈局、修改佈局類別以及導入和導出佈局。

當您選擇從主佈局頁面編輯佈局時，您的佈局將顯示在“線框視圖”中。

此模式類似於舊版構建器的外觀。 如果您願意，您可以切換回前端可視化構建器，但您會發現這是查看佈局結構並進行一些快速更改的好方法。

Divi Builder 的大量預製佈局將幫助您在幾分鐘內創建出色的設計。 它們是您自己的自定義佈局的一個很好的起點，通過瀏覽可用的佈局，您可以了解有關 Divi Builder 工作原理的更多信息。

毫無疑問，Divi Library 和 Divi Theme Builder 模板系統是 Divi Builder 的支柱，也是 Divi 如此多才多藝以及可以如此快速地創建專業設計的原因之一。 這是替代解決方案（例如默認的 WordPress 塊編輯器）中仍然缺少的功能。

可視化構建器界面

每個 WordPress 頁面構建器的工作方式都不同，因此您需要花時間熟悉 Divi Builder 的可視化構建器的工作方式。

Divi Builder 的主界面顯示在每個頁面的底部。 當菜單最小化時，只顯示一個帶有三個點的按鈕。

單擊帶有三個點的按鈕會加載主界面。

您將看到許多選項顯示在頁面的左側、中間和右側。

在左側，有六個按鈕。 帶有三個垂直點的按鈕會加載可視化構建器設置菜單。

此菜單允許您為懸停模式、單擊模式和網格模式的菜單添加三個附加按鈕。 當您將鼠標懸停在頁面上時，懸停模式將顯示頁面不同部分的選項，而單擊模式則要求您單擊頁面的特定部分。 網格菜單一次顯示所有內容。

這裡還有幾個其他選項可用於更改默認查看模式和啟用/禁用關鍵功能。

可視化構建器左側的其他按鈕用於線框視圖、放大和縮小設計以及在台式機、平板電腦和移動設備中查看頁面。

所有這些功能都可以幫助您了解頁面的構建方式以及在許多不同情況下的外觀。

我是線框視圖模式的忠實粉絲，因為它剝離了所有設計元素並顯示了頁面的結構。 這在移動物體和改變物體的位置時特別有用。

可視化構建器界面中間有七個按鈕：左側三個，右側三個，中間有一個關閉菜單的大 X。

左側的第一個按鈕加載 Divi 庫，第二個按鈕將佈局保存到您的庫中，第三個按鈕清除頁面佈局。

另一方面，您將看到用於頁面設置、編輯歷史記錄和可移植性的按鈕。

頁面設置框允許您更改頁面標題、摘錄、特色圖像、背景顏色、樣式、拆分測試、可見性等等。

能夠撤消和重做更改意味著您永遠不必擔心犯錯誤。 您可以隨時恢復更改並返回到當前佈局和全局佈局的先前狀態。

可移植性按鈕也很有用，因為它允許您導出和導入頁面佈局。

在 Divi Builder 界面的右側，您將看到一個搜索按鈕、幫助按鈕和一個保存佈局的按鈕。

Divi 允許您搜索查看模式、設置、文檔等。 單擊搜索結果將立即加載該功能。

Divi Builder Helper 框也非常有用。 它顯示了幾個視頻教程並顯示了對鍵盤快捷鍵的參考。

這些快捷方式可用於加快創建佈局的過程。 有用於撤消和重做更改、保存佈局、更改查看模式、複製模塊等的快捷方式。

優雅的主題有一個關於 Visual Builder 的詳細指南，解釋了它是如何工作的。

這是一個很棒的參考，但是當你第一次使用 Divi 時，我建議你加載一個預製的佈局，這樣你就可以把所有的東西都弄亂了。 它將幫助您了解這一切是如何联系在一起的。

行、列、模塊等

頁面構建器的美妙之處在於您可以使用許多不同類型的內容填充頁面的每個部分。 這包括地圖、表格、圖像、視頻、小部件等。

在一些 WordPress 頁面構建器中，這些不同的內容類型稱為塊。 在其他情況下，它們被稱為元素。

Divi 稱它們為Modules 。

不幸的是，Elegant Themes 的命名有點不一致。 在 Divi Builder 中，它們被稱為模塊，但在他們的營銷材料和文檔中，您會看到許多對塊而不是模塊的引用。

Divi Builder 中有 40 多個內容模塊，每個模塊都包含數十個自定義選項，可幫助您塑造模塊顯示的內容。

模塊必須放置在列和行內。

如果您使用空白畫布開始頁面佈局，您將看到頁面上顯示一個帶有加號的綠色按鈕。

當您將鼠標懸停在此上方時，您將看到添加新行的選項。 顯示在行周圍的藍色輪廓稱為一個部分。 您可以根據需要向部分添加任意數量的行和列。

換句話說，模塊放置在列中，列包含在行中，行放置在節中。

當您將鼠標懸停在該部分上時，您將看到用於移動該部分、訪問部分設置、複製該部分、將該部分保存到庫以及刪除該部分的按鈕。

您也會在行和列的左上角看到這些相同的按鈕。 請務必探索此處的所有選項，因為它會讓您更好地了解如何控制內容的放置位置以及內容的樣式。

如果您單擊菜單末尾的三個點，則會顯示十幾個其他設置。

在 Divi Builder 中添加新行時，您還需要為該行選擇所需的列結構。

如果您決定以不同的方式組織事物，您可以輕鬆更改稍後顯示的列數。 您還可以在主畫佈區域中拖放列，直到找到所需的結構。

選擇行列結構後，將出現“插入模塊”框，您可以為佈局選擇內容模塊。

選擇模塊後，將出現其設置框。

每個內容模塊可用的定制級別是驚人的。 您可以定義其設計的各個方面，包括顏色、間距、過渡、自定義 CSS、位置、效果等。

設置框中顯示的選項將根據所選模塊而變化。

預製佈局可以節省您的時間，但如果您想充分利用 Divi Builder 並使您的佈局獨一無二，您將需要探索模塊、列、行和部分的設置框。 這使您可以完全控制頁面上所有內容的樣式和位置。

如果您在頁面中添加大量模塊、列、行和部分，頁面的某些區域可能會感覺有點擁擠。 例如，有時您將鼠標懸停在模塊上以加載其設置，並且還會顯示行和部分的設置。

發生這種情況時，我建議切換到線框視圖，因為所有內容都以更清晰的格式顯示。

很難準確展示 Divi Builder 使用文本和圖像的靈活性。

因此，我鼓勵您花一些時間在官方 Divi 演示頁面上，親自看看這個 WordPress 插件可以做什麼。

使用舊版生成器

優雅的主題使可視化構建器成為使用 Divi Builder 的默認方法，但是如果您願意，您仍然可以直接在 WordPress 編輯器中創建佈局。

Divi 現在將後端編輯器稱為“Legacy Builder”。

為了使用它，您需要進入 Divi Builder 插件選項頁面的高級部分，禁用最新的 Divi Builder 體驗，並啟用經典編輯器。

舊版構建器上方是恢復到標準 WordPress 編輯器並在前端構建的按鈕。

那些使用 Divi 多年的人會熟悉下面顯示的舊版生成器。 新用戶會注意到它看起來類似於可視化構建器的線框視圖模式。

界面頂部是一個導入和導出選項，可讓您備份和恢復 Divi Builder 佈局。 旁邊是一個設置菜單，其中包含拆分測試以及許多樣式選項和 CSS 設置。

下面是保存到庫、從庫加載和清除佈局的鏈接。 另一方面，您會找到撤消更改、重做更改和查看更改歷史記錄的按鈕。

新的行和列可以很容易地插入到您的頁面中。

您還可以添加全角部分和列跨多行的特殊部分。

由於舊版構建器直接顯示在 WordPress 編輯器中，因此您無法實時預覽對佈局的更改，但這意味著有更多空間來創建佈局和添加模塊。

在構建頁面時，我更喜歡這種設置，因為它比視覺構建器感覺不那麼局促。

舊版構建器仍然是創建自定義佈局的有效方式，因為您可以使用拖放功能移動頁面的任何部分。

對於一些 Divi 用戶來說，這仍然是他們創建內容和样式頁面的首選方式。 我可以理解為什麼許多人仍然使用這種模式，因為一旦你了解了它的工作原理，創建新的佈局會很快並且不會讓人分心。

Divi Builder 插件設置

絕大多數自定義設置都可以在 Divi Builder 主界面中找到，但一些附加設置可以在 Divi 主管理菜單中找到。

除了 Divi 主題生成器和 Divi 庫之外，您還將看到主要的 Divi Builder 插件選項頁面、角色編輯器和支持中心。

插件選項頁面分為四個部分：更新、API 設置、帖子類型集成和高級。

您需要輸入您的優雅主題用戶名和 API 密鑰才能接收 Divi Builder 的自動更新。

要使用 Google 地圖內容塊，您需要在 API 設置部分輸入您的 Google API 密鑰。 也可以從此部分禁用 Google 字體。

Divi Builder 允許您準確選擇使用頁面構建器的帖子類型。 例如，您可以在您的畫廊帖子類型上禁用 Divi Builder。

在高級部分可以找到許多其他設置，例如 Javascript 和 CSS 縮小以及禁用 Divi Builder 產品導覽。

如前所述，這也是您啟用舊版構建器界面並將 WordPress 塊編輯器 (Gutenberg) 替換為經典編輯器的地方。

Divi 角色編輯器允許您準確指定不同的用戶角色可以做什麼和不能做什麼。

您可以定義用戶是否可以訪問選項頁面、主題生成器、Divi Builder 主界面、佈局庫等。

例如，您可以允許貢獻者在撰寫博客文章時訪問 Divi Builder 和佈局，但限制他們訪問插件選項頁面。

Divi 管理菜單的最後一頁是“Divi Builder 幫助和支持中心”。

系統報告顯示在頁面頂部，突出顯示您是否為 Divi Builder 進行了正確的託管設置。 如果您在使用 Divi 時遇到問題，我建議您參考此頁面。 例如，由於資源有限，佈局導入可能會停止。

由於我在我的測試 WordPress 網站中激活了 Divi Builder，我收到了一些關於我的託管設置不是最佳的警告。

這裡還有一些選項可以遠程訪問優雅的主題並直接與支持人員聊天。

此頁面也鏈接了各種 Divi Builder 教程。

除了書面教程外，還有視頻教程可幫助您入門、使用預製佈局和使用 Divi 庫。

支持頁面還有一個安全模式選項和WP_DEBUG_LOG生成的錯誤列表。

Divi Builder 是一個用戶友好的解決方案，但如果您是該插件的新手，我建議您在弄亂 Divi Builder 界面後閱讀一些提供的教程。 它將讓您很好地了解 Divi Builder 可以做什麼，並向您展示您可能錯過的一些很酷的功能和技巧。

Divi Builder的成本是多少？

優雅主題擁有 WordPress 世界中最簡單、最公平的定價政策之一。

您可以按年或一次性付費購買優雅主題會員資格。 這兩個計劃都允許您訪問所有優雅主題產品，並允許您在任意數量的網站上使用它們。

購買年度許可證每年需要 89 美元，購買終身訪問許可證需要 249 美元。

如果您選擇年度許可，您可以在許可到期後繼續使用優雅主題產品。 但是，一旦您的會員資格到期，您將不會收到任何支持或更新。

如果您計劃使用 Elegant Themes 產品超過兩年，終身訪問許可證是有意義的。

所有許可證都提供 30 天無條件退款保證，您可以隨時取消您的會員資格。

Divi Builder 只是優雅主題會員包的一部分。

會員資格還可以讓您訪問多功能的 Divi 主題。 如果您是 Divi Builder 的粉絲，這是一個很棒的 WordPress 主題，因為頁面構建功能直接內置在主題中。

優雅主題會員資格還包括美麗的雜誌 WordPress 主題 Extra — 由 Divi Builder 提供支持的設計。

會員資格還包括電子郵件營銷和潛在客戶生成 WordPress 插件 Bloom 和社交媒體共享 WordPress 插件 Monarch。

優雅的主題擁有 WordPress 世界中最好的支持領域之一。 他們龐大的文檔區域為他們的所有產品提供了深入的書面和視頻教程，但如果您仍然不確定某些事情，您可以打開支持票尋求幫助。

最後的想法

我希望你們都喜歡 Divi Builder 的詳細介紹。

這個 WordPress 插件仍然是市場上最好的拖放頁面構建解決方案之一，在可用性、功能和高級設置之間取得了很好的平衡。 包含數千種高質量的專業佈局是錦上添花。

優雅的主題會員資格也繼續提供物超所值的服務。 因此，那些想要使用 Divi Builder 的人將可以訪問四個更高級的 WordPress 主題和插件。

如果您想查看 Divi Builder 的實際效果，請查看 Divi Builder 預覽區域和優雅主題演示頁面。

謝謝閱讀。

凱文