古騰堡和新的 Divi Builder 體驗

已發表: 2018-12-12

變革的季節就在我們身邊。最近的 WordPress 5.0 引入了一個全新的塊編輯器（又名古騰堡）。而且，我們新發布的 Divi Builder Experience 不僅提供了與 Gutenberg 的流暢集成，而且還升級了使用 Divi 設計網站的整個體驗。

這些新的變化無疑會給 Divi 和 Gutenberg 如何合作以及如何在所有這些變化中最好地使用 Divi 帶來一些擔憂和困惑。本教程旨在通過引導您完成可用選項以及在 WordPress 5.0 上成功啟動和運行新的 Divi Builder 體驗所需的步驟來減輕變化的衝擊。

對於那些還沒有準備好接受古騰堡或新的 Divi Builder Experience 的人，請不要擔心。我將討論可供您使用的選項，以使事情照常工作。對於準備好探索令人興奮的未知世界的人，本指南將幫助您找到方向。

這是我將在本教程中介紹的內容：

升級到 WordPress 5.0 時安裝最新版本的 Divi 的重要性
默認情況下，新的 Divi Builder 如何與古騰堡一起工作
如何使用 WordPress 5.0 在後端激活新的 Divi Builder（首選方法）
使用新的 Divi Backend Builder UI 編輯新頁面
將經典的 Divi Builder 與新的 Divi 一起使用

升級到 WordPress 5.0 時安裝最新版本的 Divi 的重要性

Divi 的最新版本與 WordPress 5.0 兼容。因此，如果您要升級到 WordPress 5.0，請確保還將 Divi 也更新到 3.18+。這個新版本解決了與新古騰堡塊編輯器的許多兼容性問題。如果您保留舊版本的 Divi，則在升級之前您將無法訪問 Divi Builder 和其他頁面設置。

最新版本的 Extra、Bloom、Monarch 和 Divi Builder 插件也與 WordPress 5.0 兼容，因此最好在升級時也更新這些插件。

默認情況下，新的 Divi Builder 如何與古騰堡一起工作

更新到 WordPress 5.0 並安裝 Divi 3.18（最新版本）後，您就可以開始構建您的網站了。如果你添加一個新頁面，你會看到一個彈出窗口，允許你使用 Divi Builder 或默認的 WordPress 編輯器（現在是 Gutenberg）。只需單擊“使用 Divi Builder”。

您會注意到您將直接進入前端的 Visual Builder。

如果您退出 Visual Builder 並在後端編輯頁面，您將看到沒有可用的 Classic Divi Builder。您只能選擇在前端啟動 Divi Builder。

這是因為 WordPress 5.0 刪除了經典的編輯器，取而代之的是塊編輯器（古騰堡）。因此，所有連接的應用程序，包括 Classic Divi Builder，都已被刪除。簡而言之，沒有經典的 WordPress 編輯器，就沒有經典的 Divi Builder。

如何使用 WordPress 5.0 在後端激活新的 Divi Builder（首選方法）

為了在後端訪問新的 Divi Builder，只需點擊幾下。從您的 WordPress 儀表板，導航到 Divi > 主題選項。在那裡，單擊 Builder 選項卡。在 Builder 選項下，單擊 Advanced 選項卡。在那裡，您將找到啟用最新 Divi Builder 體驗和啟用經典 (WordPress) 編輯器的選項。 您需要啟用這兩個選項才能在後端享受新的 Divi Builder 。然後單擊保存更改。

注意：在 Divi 的主題選項中啟用經典編輯器的選項取代了使用 WordPress 貢獻者提供的經典編輯器插件的需要，供那些尚未準備好使用古騰堡的人使用。

從主題選項啟用最新的 Divi Builder 和經典編輯器後，您就可以開始使用 New Divi Builder 體驗構建頁面了。

使用新的 Divi Backend Builder UI 編輯新頁面

在 WordPress 經典編輯器上啟用 New Divi Builder 後，您將看到熟悉的“使用 Divi Builder”按鈕。像往常一樣單擊此按鈕以部署 Divi Builder。

接下來從彈出的三個選項中選擇您想要如何開始設計頁面。

現在，您可以全面體驗全新的 Divi Builder 體驗。您會注意到新的 Divi Backend Builder 看起來類似於 Classic Backend Divi Builder，其中一些強大的新功能觸手可及。

以下是一些值得注意的頁面編輯器 UI 功能，它們將幫助您更好地了解新體驗。

“在前端構建”按鈕

“Build On The Front End”按鈕取代了傳統的“Use the Visual Builder”按鈕，但功能相同。它將在前端部署 Divi Builder，以獲得像以前一樣的完整視覺構建體驗。使用此按鈕的主要原因是因為從技術上講，不再有單獨的可視化構建器。現在只有一個 Divi Builder 可以在後端和前端訪問。

後端現在可用的查看模式

New Divi Builder 將 Visual Builder 及其所有功能帶入了後端。現在您不必來回編輯您的頁面。要在後端激活可視化構建器體驗，您可以在構建器頂部切換不同的視圖模式。默認情況下，線框視圖模式處於活動狀態，這很有意義，因為它與我們習慣看到的經典後端構建器的外觀和感覺非常匹配。但是，您可以在不同的視圖模式（桌面、平板電腦和智能手機）之間切換，以便在後端直觀地編輯您的頁面（就像您使用 Visual Builder 所做的那樣），而無需離開頁面。

新的 Divi Builder UI

除了能夠在後端切換不同的視圖模式外，Divi Builder UI 在編輯頁面時還可以在後端無縫工作。例如，在後端編輯元素的設置時，設置模式可以移動到整個瀏覽器窗口內的任何位置，為您提供必要的間距在後端進行編輯，同時實時查看您的更改。

切換回經典的 Divi Builder

如果您還沒有為新的 Divi Builder 體驗做好準備，您仍然可以像以前一樣使用 Classic Divi Builder。最新版本的 Divi 包含了一種極其簡單的方法來部署 Classic Divi Builder，在編輯頁面時，該方法位於後端的 Divi Builder UI 底部。在那裡，您將看到一個鏈接，通過該鏈接，您只需單擊一下即可切換回 Classic Divi Builder。

注意：您也可以在主題選項下切換到經典 Divi Builder。 單擊生成器選項卡，然後單擊高級選項選項卡。 在那裡您可以找到啟用或禁用最新 Divi Builder Experience 的選項。 只需禁用此選項即可像以前一樣保留 Classic Divi Builder。 但請記住，為了在後端看到 Classic Divi Builder，您還必須確保並啟用 Classic Editor 選項。

新的 Divi Builder 功能

新的 Divi Backend Builder 還包括以前僅在 Visual Builder 上可用的所有強大的新功能。如果這還不夠，您還可以通過這款全新的 Divi Builder 獲得全新的性能和可用性升級。這些升級包括：

使用緩存利用比以往任何時候都更快地構建體驗
使用 React Portal 在所有視圖模式下 100% 準確描述您的頁面
能夠在 Visual Builder 中的頁面之間複製和粘貼，就像在 Classic Builder 中一樣。

查看新的 Divi Builder 體驗文章，了解有關可用的強大新功能的更多信息。

將經典的 Divi Builder 與新的 Divi 結合使用

如上所述，您可以通過使用新的 Divi Backend Builder 頁面編輯器中提供的鏈接或通過在主題選項中禁用最新的 Divi Builder 來切換到使用 Classic Divi Builder。進行切換後，後端頁面編輯器將看起來與以前幾乎完全相同，但有一些細微的變化。您會注意到舊的“Use the Visual Builder”按鈕現在顯示為“Build on the Front End”，但功能仍與以前相同。您還可以選擇通過單擊後端 Divi Builder 底部提供的鏈接來切換到新的 Divi Builder。

請記住，Classic Divi Builder 仍然缺少 New Divi Builder 後端現在可用的所有新功能。

回顧和常見問題

我是否必須更新 Divi 或升級到 WordPress 5.0？

對於那些還沒有準備好接受古騰堡或新的 Divi Builder Experience 的人，請不要擔心。

您不需要更新到 WordPress 5.0，但如果您這樣做，您還需要更新 Divi 以獲取我們為 WP 5 支持而包含的所有兼容性修復程序。
因此，如果您現在不想 *必須* 更新 Divi，那麼您現在也不需要更新 WordPress。

我應該按什麼順序執行更新？

您不需要按特定順序執行此操作，但是如果您更新 WordPress 5.0，則需要確保並更新 Divi。

新的 Divi 體驗將如何在舊版本的 WordPress 上運行？

就像以前一樣，但是最新的 Divi 包括後端的 New Divi Builder，其中包含曾經僅在 Visual Builder 上可用的所有新功能。

錯誤呢？

我們正在積極關注由於古騰堡帶來的重大變化的性質而出現的任何錯誤，並且我們正在發布錯誤修復版本（基本上每天）以確保事情盡可能穩定。

既然 Guteberg 在這裡，我是否必須使用 Visual Builder？

不，您現在可以在後端使用 New Divi Builder，它具有曾經僅在 Visual Builder 上可用的所有新功能。
（參見上文：如何使用 WordPress 5.0 在後端激活新的 Divi Builder（首選方法））

舊的（熟悉的）經典 Divi 後端構建器在哪裡？

後端的新 Divi Builder 具有 Classic Divi Builder 的所有熟悉的功能和感覺，以及所有“Visual Builder”類型的功能等等。但是，新的 Divi Builder 允許您隨時從後端頁面編輯器切換回 Classic Divi Builder。

（見上文：切換回經典 Divi Builder）

我可以同時使用 Gutenberg 和 Divi Builder 嗎？

它們都是“頁面構建器”，因此您需要選擇其中之一。但是，我們正在開發令人興奮的集成（即將推出），您可以在古騰堡中使用您最喜歡的 Divi 模塊，或在 Divi Builder 中使用任何已註冊的古騰堡塊。

最後的想法

對大多數人來說，僅古騰堡的推出就有點讓人不知所措。我們都熟悉的WordPress頁面編輯器完全不同！但是，值得慶幸的是，我們新發布的 Divi Builder 體驗與 Gutenberg 順利集成，讓您可以保留您喜歡的熟悉的 UI。憑藉後端現在可用的所有強大功能，Divi Builder 比以往任何時候都更快、更可靠。

我期待在下面的評論中聽到您對古騰堡的新 Divi Builder 體驗的看法。

乾杯!