Divi Builder使用教程

Divi Builder是市場上最好的拖放式頁面編輯器之一，這個流行外掛允許你在幾分鐘內建立複雜的響應式佈局，而無需編寫任何程式碼。因此，即使你沒有任何網站設計經驗，也可以使用Divi Builder輕鬆構建精美的網站，並引入各種富媒體內容，例如影像、文字、影片、表格、地圖等等。

在這篇文章中，我們將展示如何使用Divi Builder建立專業的網站佈局和頁面。

Divi Builder是什麼

2018年底，WordPress釋出了革命性的5.0版，這是一個重要版本，因為他們啟用一個名為古騰堡（Gutenberg）的拖放式區塊編輯器，用以取代舊的所見即所得編輯器。那麼，既然WordPress已經附帶一個編輯器，為什麼人們還會購買替代方案呢？

我們確實喜歡古騰堡編輯器的簡單性，但如果你嘗試過，就會意識到這是一個非常基本的解決方案，存在許多限制，自定義選項也很少。相比之下，Divi的可能性幾乎是無限的，可以幫助你建立簡單的部落格設計、複雜的線上商店、專業的商業網站等所有內容，將頁面構建提升到一個全新的水平。

在2015年，Divi Builder作為獨立的頁面構建解決方案推出，可以與任何WordPress主題搭配使用。而在此之前，這項功能只適用於Elegant Themes釋出的Divi主題。

多年來，這款外掛一直在不斷擴充套件和完善，Elegant Themes持之以恆地在部落格上釋出更新，詳細介紹錯誤修復、功能調整和主要新特性。Divi Builder發展的一個例子是視覺編輯器，在早期版本中，自定義佈局只能在WordPress編輯器中建立，後來才新增易於使用的拖放式編輯功能，讓你可以在網站前端建立頁面佈局。

視覺編輯器已經成為Divi Builder的中心舞臺，但是如果你願意，仍然可以使用舊編輯器在後端建立佈局。這款外掛具有一個庫系統，允許你儲存建立的任何佈局，然後，你可以在需要時從庫中選擇，並調整它們以適合特定的頁面。

外掛帶有超過1000個令人驚歎的預設佈局，並且越來越多佈局正在透過官方市場和第三方市場釋出。這些設計為你提供絕佳的起點，不僅能夠大大減少工作量，還能使你的網站看起來更專業、更精美。

Divi Builder的真正賣點是高度可定製，在花時間瞭解其工作原理後，你會喜歡外掛的多功能性。頁面上的每個元素都可以調整，無論是樣式、模組、行、列，還是任何其他元素。

此外，這款外掛也對WooCommerce提供完美支援，Elegant Themes將其稱為WooBuilder。使用Divi Builder，你可以為產品頁面建立自定義佈局，並新增特定的內容模組，並且線上商店的預設佈局也可以直接使用。

啟動視覺化編輯器

在WordPress網站上安裝並激活Divi Builder外掛之後，你可以在文章、頁面、自定義文章型別的編輯頁面看到歡迎視窗，之後會要求你選擇使用Divi Builder或使用預設編輯器：

作為示例，我們在這裡選擇使用預設編輯器，然後可以在頁面頂部看到使用Divi Builder按鈕，也可以從右側訪問一個較小的Divi設定區域，允許你修改內容的寬度：

進入文章或頁面編輯器，如果你點選使用Divi Builder按鈕，將會看到一條訊息，提示這個佈局是用Divi建造的：

你需要點選這個按鈕才能在網站前端啟動Divi Builder，但是請注意，如果你已經在WordPress的個人資料選單中停用視覺化編輯器，則Divi Builder可能無法正常執行。儘管WordPress使用者通常使用Divi Builder作為預設編輯器的替代品，但它仍然可以透過Divi佈局塊與Gutenberg編輯器協同工作。

Divi佈局塊可以插入到頁面中任何區域，並與普通的WordPress內容塊放在一起：

你可以將多個Divi佈局塊插入到內容中，並在塊內建立全新的佈局，或從Divi庫載入以前儲存的佈局。如你所見，作為一個出色地補充，Divi Builder並不會接管整個網站，而是在需要時為你提供幫助。

Divi的漂亮佈局

當Divi Builder啟動時，你會看到三個選項：頭開始構建、選擇預設佈局、克隆現有頁面：

如果選擇預設佈局，Divi將會從官方庫中載入並顯示所有設計。到目前為止，官方庫中一共有超過1600種完整的佈局和超過200個佈局包，分為13個類別：

如果願意，你可以簡單地搜尋預設佈局庫，也可以檢視自己儲存的佈局和頁面。

佈局包是一系列佈局的集合，包含針對網站多個分割槽的設計，例如首頁、部落格文章、關於我們、線上商店等等。預覽圖下方有兩個按鈕，點選View Live Demo按鈕可以檢視即時預覽，如果點選Use This Layout按鈕，Divi Builder將會匯入特定的佈局或佈局包。

與其他高階頁面編輯器一樣，Divi Builder可以將佈局直接插入文章、頁面、自定義文章型別的主要內容區域，如果你將佈局匯入到部落格文章中，除非手動操作，否則頁面上會顯示側邊欄。不過，刪除側邊欄非常簡單，大多數高階主題都具有全寬頁面設定，以及刪除側邊欄的著陸頁模板。

匯入佈局後，你可以開始自定義設計，並且你所做的任何更改都可以隨時儲存和重複使用。佈局也可以分類整理，隨著佈局庫的增長，你會發現這非常有用。

開啟WordPress管理後臺，你會看到主Divi選單包含主題生成器（Divi Theme Builder）和Divi庫的連結：

主題生成器（Divi Theme Builder）允許你建立帶有自定義頁首、正文、頁尾、側邊欄的獨特模板，你可以為模板分配任何佈局，並決定將其顯示在網站的哪些區域。例如，你可以為主頁和部落格建立一個模板，為線上商店建立一個模板，然後為404錯誤頁面建立另一個模板。

你建立的每個佈局都會顯示在Divi庫選單中，從這裡訪問/修改所有佈局、修改佈局類別，並進行匯入和匯出操作。當你編輯某個佈局時，它會顯示在一個線框檢視中：

這種模式類似於傳統編輯器的外觀，如果願意，你也可以切換到前端視覺化編輯器，不過，從後端檢視佈局結構，並進行一些快速更改將會更加方便。

藉助Divi Builder的大量預設佈局，你可以在幾分鐘內創建出色的設計。Divi庫和毫無疑問，主題生成器系統是Divi Builder的支柱，正是基於這個原因，Divi具有如此豐富的功能，並且能夠快速幫助你建立專業的外觀設計。

視覺化編輯器介面

每個WordPress頁面編輯器的執行方式都不同，因此你需要花時間熟悉Divi Builder視覺化編輯器的工作原理，其主介面顯示在每個頁面的底部，當選單最小化時，只是一個三點按鈕：

點選三點按鈕將會載入主介面，你可以在頁面的左側、中間和右側看到許多選項：

左側有六個按鈕，點選帶有三個垂直點的按鈕，將會載入視覺化編輯器的設定選單，其中包含一個建築師介面選項，每個選項代表不同的模式：

• 移動模組（懸停模式）：當你將滑鼠懸停在頁面上時，會顯示當前分割槽的選項
• 開啟艙（點選模式）：當你點選頁面的特定分割槽時，才會顯示設定選項
• 網格（網格模式）：一次顯示所有分割槽的設定選項

其他按鈕用於線框檢視、放大/縮小設計，以及桌面檢視、平板電腦檢視和手機檢視，所有這些功能都有助於讓你瞭解頁面的構造方式。我們喜歡線框檢視，因為它會將所有設計元素剝離，並顯示出清晰的頁面結構，這在移動和改變事物的定位方式時特別有用。

視覺化編輯器介面中間有七個按鈕：左側三個、右側三個，以及中間一個大×用於關閉選單。左側的按鈕分別用於載入佈局庫、將佈局儲存到Divi庫、清除頁面佈局，右側的按鈕分別用於頁面設定、編輯歷史和可攜帶性（便攜性）。頁面設定選單允許你更改文章的標題、摘要、特色影像、背景顏色、樣式、拆分測試、可見性等等。

允許撤消和重做更改意味著你永遠不必擔心犯錯，你可以隨時撤銷最近的更改，並返回到之前的最好狀態。便攜性按鈕也很有用，允許你匯出和匯入頁面佈局。

在Divi Builder操作介面的最右側，你會看到搜尋按鈕、層疊按鈕和幫助按鈕。Divi允許你搜索佈局、設定、文件等內容，點選搜尋結果將會立即載入對應的功能：

層疊按鈕非常有用，點選之後會列出當前頁面的所有分割槽，允許你直接進行定位、設定和修改：

最後的幫助按鈕用於顯示一些影片教程，以及頁面的鍵盤快捷方式 —— 可以幫助你加快建立佈局的過程，包括撤消、重做、儲存佈局、更改檢視模式、複製模組等操作：

當你第一次使用Divi時，我們建議載入一個預設的佈局，這樣你就可以隨心所欲地進行調整和修改，以便了解所有這一切是如何聯絡在一起的。

行、列、模組等

頁面編輯器的美妙之處在於，你可以使用許多不同型別的內容填充頁面的每個部分，包括地圖、表格、影像、影片、小部件等等。在一些WordPress頁面編輯器中，這些不同的內容型別被稱為區塊，有些也將其稱為元素，對於Divi，它們則被稱為模組（Modules）。

Divi Builder中有40多個內容模組，每個模組都包含數十個自定義選項，可以幫助你精細化調整顯示的內容。值得注意的是，模組必須放置在行和列內。

如果你使用空白畫布進行頁面佈局，則會看到頁面上顯示一個帶有加號的綠色按鈕，將滑鼠懸停在上面，將會出現一個新增新行的選項。顯示在行周圍的藍色輪廓稱為分割槽（Section），你可以根據需要向分割槽中新增任意數量的行和列。換句話說，模組放在列內，列放在行內，行放在分割槽內。

將滑鼠懸停在分割槽上，會出現用於移動分割槽、分割槽設定、複製分割槽、將分割槽儲存到庫、刪除分割槽的按鈕，你也會在行和列的左上角看到這些相同的按鈕。請務必瀏覽所有選項，它們會讓你更好地瞭解如何控制內容的位置和樣式。

如果你點選選單末尾的三個點，則會顯示一系列附加設定：

當你在Divi Builder中新增新行時，還需要為新行選擇特定的列結構。如果你決定以不同的方式構建內容，則稍後可以輕鬆更改顯示的列數。此外，你還可以在主畫布分割槽中拖放列，直到找到所需的結構。

選擇行和列結構後，將出現插入模組視窗，你可以為佈局選擇合適的內容模組。

選擇模組後，將出現設定框。每個內容模組的定製級別非常豐富，允許你定義其設計的各個方面，包括顏色、間距、轉場、自定義CSS、位置、效果等。根據所選的不同模組，設定框中的選項將會有所變化。

使用預設佈局可以節省大量時間，但是，如果你希望充分利用Divi Builder的優勢，並使自己的設計獨一無二，則需要探索模組、列、行、分割槽的各種引數，這使你可以完全控制頁面上所有內容的樣式和位置。

如果你向頁面中新增大量的模組、列、行和分割槽，某些區域可能會顯得有點擁擠。例如，有時候你將滑鼠懸停在模組上以載入其設定，可能會出現行和分割槽的設定，發生這種情況時，我們建議切換到線框檢視，以便所有內容都以更清晰的格式呈現。

使用舊版編輯器

Elegant Themes使視覺編輯器成為使用Divi Builder的預設方法，但是如果你願意，仍然可以直接在WordPress編輯器中建立佈局。為此，你需要進入Divi主題選項的高階部分，停用最新的Divi Builder體驗，並啟用經典編輯器：

現在，從網站後臺修改文章，你會看到一個經典風格的編輯器。介面頂部是儲存到庫、載入佈局、清除佈局按鈕，可以讓你備份、恢復、清除Divi Builder佈局，右側是一個設定選單，其中包含分割測試和一些樣式選項，另外還有用於撤消、重做、檢視歷史記錄的按鈕。

新的行和列可以輕鬆插入到頁面中，你還可以新增全寬分割槽，以及一列跨越多行的特殊分割槽。

由於舊版編輯器直接顯示在WordPress編輯器中，因此你無法即時預覽佈局更改，但是，這意味著有更多空間來建立佈局和新增模組。在構建頁面時，我們更喜歡這種設定，操作起來比視覺編輯器更悠閒。

經典編輯器仍然是建立自定義佈局的有效方式，對於某些Divi資深使用者來說，這也是他們最喜歡的方式。一旦你瞭解背後的工作原理，就能很快創建出新的佈局，並且在創作時不會受到其他東西的干擾。

Divi Builder外掛設定

大多數自定義設定都可以在Divi Builder介面中找到，另一些選項在Divi管理選單中。除了主題生成器和Divi庫，你還會看到主題選項、主題定製、角色編輯器和支援中心選單。主題選項頁面中包含多個選項卡：一般、導航、生成器、佈局、廣告、SEO、整合和更新，你需要輸入Elegant Themes使用者名稱和API金鑰才能接收Divi的自動更新。

要想使用谷歌地圖內容塊，你需要在一般選項卡中輸入Google API金鑰，也可以在這裡停用谷歌字型。

角色編輯器允許你指定不同角色的操作許可權，定義他們是否可以訪問主題選項、主題生成器、Divi庫等等。例如，你可以允許貢獻者在撰寫文章時訪問Divi Builder和Divi庫，但限制他們訪問外掛選項頁面。

價格

Elegant Themes擁有WordPress世界中最簡單、最公平的定價政策，你可以按年或一次性購買會員資格，這兩個計劃都允許你訪問所有的Elegant Themes產品，並且可以在任意數量的網站上使用。

所有許可證都提供30天無條件退款保證，你可以隨時取消會員資格。Divi Builder只是Elegant Themes會員套餐的一部分，除此之外，你還可以訪問廣受歡迎的Divi多用途主題、精美的Extra雜誌主題、電子郵件營銷和潛在客戶轉化外掛Bloom，以及社交媒體分享外掛Monarch。

這家公司以優秀的客戶支援著稱，龐大的文件社群為他們的所有產品提供深入的書面和影片教程。此外，如果你仍然不確定某些事情，還可以透過信使支援頻道尋求幫助。

總結

Divi Builder仍然是市場上最好的拖放式頁面構建解決方案之一，在功能、可用性、高階設定之間取得完美平衡，包含數千種高質量專業佈局更是錦上添花。

我想要...

• 在家裡賺錢
• 在網上賺錢
• 在網上賣東西
• 成為一名自由職業者

---