什麼是可視化生成器？

Divi Builder 有兩種形式：標準的「後端生成器」和前端「可視化生成器」。這兩個界面都允許您使用相同的內容元素和設計設置構建完全相同類型的網站。

唯一的區別是界面。後端構建器位於 WordPress 儀表板內部，可以與所有其他標準 WordPress 設置一起訪問。它位於 WordPress UI 內部，取代瞭標準的 WordPress 帖子編輯器。它非常適合在儀表板內進行快速更改，但它也受儀表板的限制，並呈現為您網站的基於塊的表示。本教程將隻關註可視化構建器。

另一方面，全新的 Visual Builder 允許您在網站的前端構建頁面！這是一種瞭不起的體驗，可以實現更快的設計。當您在可視化構建器中添加內容或調整設計設置時，您的更改會立即出現。您可以單擊該頁面並開始輸入。您可以突出顯示文本並調整其字體和樣式。您可以添加新內容、構建頁面並觀看發生在您眼前的一切。

啟用可視化構建器

當您登錄到 WordPress 儀表板時，您可以導航到網站前端的任何頁面，然後單擊 WordPress 管理欄中的「Enable Visual Builder」按鈕以啟動可視化構建器。

如果您在後端編輯頁面，則可以通過單擊位於後端 Divi Builder 界面頂部的「Use Visual Builder」按鈕切換到可視化構建器。每次構建新頁面時，您都會註意到帖子編輯器上方的「Use The Divi Builder」按鈕。你需要先開啟 Divi Builder 進入構建器編輯頁面，然後才可以進入可視化編輯頁面。

336f678565a5f3e55d09d67fec5a674b

註意：Wordpress必須開啟靜態頁面，並啟用主頁，首頁才會顯示「Enable Visual Builder」按鈕。

Visual Builder 基礎

Divi 的強大之處在於 Visual Builder，這是一個拖放式頁面構建器，允許您通過組合和排列內容元素來構建幾乎任何類型的網站。

構建器使用三個主要構建塊：分區容器、行塊容器和模塊。統一使用這些可以讓您創建無數的頁面佈局。分區容器是最大的構建塊，它們包含成組的行塊容器。行塊容器位於分區容器內部，用於容納模塊。模塊放置在行塊容器內。這是每個 Divi 網站的結構。如上圖，藍色的是分區容器，綠色的是行塊容器，黑色的是模塊。

分區容器

使用 Divi 設計佈局時使用的最基本和最大的構建塊是分區容器。這些用於創建大量內容，它們是您添加到頁面的第一件事。共有三種類型的分區容器：常規、特殊和全寬。常規分區容器由多行列組成，而全寬分區容器由可擴展整個屏幕寬度的全寬模塊組成。專業分區容器允許更高級的側邊欄佈局。

行塊容器

行塊容器於分區內，您可以在分區容器內放置任意數量的行塊容器。有許多不同的列佈局類型可供選擇。為行塊容器定義列佈局結構後，您就可以將模塊放入所需的列中。您可以在列中放置的模塊數量沒有限制。

模塊

模塊是構成您網站的內容元素。Divi 擁有的每個模塊都可以適應任何列寬，並且它們都是完全響應的。

建立你的第一個頁面

三個基本構建塊（分區容器、行塊容器和模塊。）用於構建您的頁面。

添加您的第一個分區容器

在向頁面添加任何內容之前，您首先需要添加一個分區容器。單擊藍色 (+) 按鈕可以添加分區容器。當您將鼠標懸停在頁面上已存在的分區容器上時，其下方會出現一個藍色 (+) 按鈕。單擊後，將在您當前懸停的分區容器下方添加一個新分區容器。

如果您要開始一個全新的頁面，那麼您的第一個分區容器將被自動添加。

添加第一個行塊容器

添加第一個分區容器後，您可以開始在其中添加多個行塊容器，每個行塊容器都可以選擇不同的列佈局。一個分區可以容納任意數量的行，您可以混合和匹配不同列佈局類型的行以創建各種佈局。

要添加一行，請單擊任何空白分區內的綠色 (+) 按鈕，或單擊將鼠標懸停在任何當前行上方時出現的綠色 (+) 按鈕以在其下方添加新行塊容器。單擊綠色 (+) 按鈕後，您將看到一個列佈局類型列表。選擇您想要的列佈局，然後您就可以添加您的第一個模塊瞭。

添加您的第一個模塊

模塊可以添加到行塊容器內，每個行塊容器可以容納任意數量的模塊。模塊是您頁面的內容元素，Divi 提供瞭 40 多種不同的元素，您可以使用這些元素進行構建。您可以使用基本模塊，如文本、圖像和按鈕，或者更高級的模塊，如滑塊、作品集畫廊、畫廊和電子商務商店。

要添加模塊，請單擊任何空列內的灰色 (+) 按鈕，或單擊將鼠標懸停在頁面上的模塊上方時存在的灰色 (+) 按鈕以在其下方添加新模塊。單擊該按鈕後，您將看到一個模塊列表。選擇您想要的模塊，它將被添加到您的頁面，並且將出現該模塊的設置面板。使用此設置面板，您可以開始配置您的模塊。

配置和自定義分區容器、行塊容器和模塊

每個分區容器、行塊容器和模塊都可以通過各種方式進行定制。您可以通過單擊將鼠標懸停在頁面上的任何元素上時存在的齒輪圖標來訪問元素的設置面板。

c7f9e2631f19ccbcb1bd7685d31d0c1f

這將啟動指定元素的設置面板。每個設置面板分為三個選項卡：內容、設計和高級。每個選項卡都旨在快速輕松地訪問和調整 Divi 的各種設置。

當然，您可以在「內容」選項卡中添加圖像、視頻、鏈接和管理標簽等內容。「設計」選項卡是我們為每個元素放置所有內置設計設置的地方。根據您正在編輯的內容，您可以通過單擊來控制各種設計設置；包括：排版、間距（填充/邊距）、按鈕樣式等。

最後，如果您想要更多控制，您可以轉到高級選項卡，您可以在其中應用自定義 CSS，根據設備調整可見性，以及（取決於您正在編輯的元素）進行更多微調。

保存頁面和訪問頁面設置

要訪問常規頁面設置，請單擊屏幕底部的紫色停靠欄圖標。這將擴展設置欄並為您提供各種選項。您可以通過單擊齒輪圖標打開頁面設置。您可以在此處調整頁面背景顏色和文本顏色等內容。您還將找到「保存」和「發佈」按鈕以及響應式預覽切換。

5292c737a957ae48122caab801f18714

使用預制佈局快速啟動您的設計

快速啟動新頁面的一個好方法是從預制佈局開始。Divi 附帶 20 多種預制佈局，涵蓋各種常見頁面類型，例如「關於我們」、「聯系方式」、「博客」、「作品集」等。

您可以加載這些佈局，然後換出演示為您自己的內容。您的新頁面將在您不知不覺中完成！

將您自己的佈局保存到庫中

除瞭使用 Divi 附帶的預制佈局，您還可以將自己的創作保存到 Divi 庫中。當設計在 Divi 庫中保存為 Divi 佈局時，它可以加載到新頁面上。您使用自己喜歡的設計構建庫的次數越多，您創建新網站的速度就越快。

要將項目保存到庫中，請單擊將鼠標懸停在任何元素上和頁面設置欄中時存在的庫圖標。將項目添加到庫後，在添加新的 Divi 佈局、分區、行和模塊時，它會出現在「添加到庫中」選項卡中。

好的，您已經掌握瞭基礎知識。現在是時候深入挖掘瞭！

所以到現在為止，您已將第一個分區容器、行塊容器和模塊添加到您的頁面。您已經調整瞭他們的設置並開始構建和自定義您的設計。您已經掌握瞭基礎知識，但還有很多東西需要學習。我後續還會更新涵蓋 Divi 的各個方面的內容。我鼓勵您返回主文檔頁面並通讀每一頁。完成後，您將成為 Divi 大師！

如果您覺得官網的許可證價格昂貴，您可以考慮從我這裡獲取單個永久許可證，給我S信。告訴我你要許可證，亻介木各更棒！。

從頭開始：基礎介紹【01】如何安裝 Divi 主題

使用進階：Divi Builder 【01】在 Divi 中使用預制佈局