[ad_1]
是否想使用Divi Builder插件來構建您的網站布局？
Divi是最受歡迎的遊戲之一 頁面構建器插件 這使您可以輕鬆地為網站創建和自定義精美的布局。 在本文中，我們將確切告訴您如何使用Divi Builder創建布局。
但是在此之前，讓我們快速了解一下Divi Builder插件是什麼。
什麼是Divi Builder？
Divi Builder插件是一個WordPress頁面構建器，可讓您創建，自定義和編輯網站布局，而無需編寫任何代碼。 使用此頁面構建器的優點之一是，它使您可以創建完全獨特的完全定製的設計。
另外，您可以在進行更改時預覽所做的更改。 這意味著與使用傳統的WordPress文本編輯器不同，使用Divi不需要不斷切換選項卡來檢查進度。 從本質上講，它是所見即所得（所見即所得）的編輯器。
Divi Builder與Divi主題完美搭配，即使您不喜歡
一起使用它們，可以與其他任何產品一起使用 WordPress主題 你的選擇。
它在嵌入式文本和響應式編輯方面提供了極大的靈活性。 您還可以使用40個網站元素，800多個預構建的設計，100多個完整的網站包，各種形狀分隔符等等。 另外，如果您需要高級樣式選項，甚至可以添加自己的代碼。
要了解有關Divi的更多信息， 在這裡閱讀我們的詳細評論。
在下面的步驟中，我們將向您展示如何使用Divi創建設計。
步驟1：Divi Builder入門
要開始使用Divi Builder，您首先需要在網站上安裝並激活該插件。 如果您不知道該怎麼做，請閱讀以下文章 如何安裝和激活插件。
安裝並激活插件後，即可開始使用它來構建布局。 讓我們用Divi創建一個新頁面。
第2步：使用Divi Builder構建您的第一頁
要使用Divi構建您的第一頁，請轉到WordPress儀錶板，然後單擊Pages»Add New。 現在，將使用「使用Divi Builder」按鈕在屏幕上顯示一個新頁面。 單擊此按鈕：
然後單擊「使用Divi Builder」按鈕：
這將帶您進入一個新屏幕，其中有3個選項。 如果要從頭開始創建設計而不使用任何預先構建的布局，請選擇第一個選項。 如果要使用預構建的布局，請選擇第二個選項。 通過選擇第二個選項，因為一切都已經為您構建，您可以立即開始。
第三個選項使您可以重用現有設計。
您可以選擇最適合自己的選項。
步驟3：導入預構建的布局/演示站點
如果您不想從頭開始構建網站，則可以選擇預製的布局。 為此，只需選擇「選擇預製布局」選項。 這將顯示為您預先構建的布局庫：
根據您的網站利基，您可能想要查找特定類別的布局。 為此，您可以選擇左側的類別，也可以使用搜索欄位查找類別。 Divi將顯示符合您要求的所有布局。
然後，您可以選擇所需的布局。 這將為您顯示帶有2個不同選項的布局預覽。
- 觀看現場演示
- 使用此布局
選擇使用此布局選項。 這將要求您對插件進行身份驗證。 使用您的用戶名和API進行身份驗證：
之後，您可以開始自定義布局。 但是，在本教程中，我們將選擇第一個選項Start Building，這將使我們能夠從頭開始構建所有內容。
步驟4：添加行和模塊
選擇第一個選項後，您將被帶到一個新頁面，您可以在其中選擇要添加的行數。
您將在此處看到各種選項。 根據需要，選擇要添加到頁面的行。 讓我們選擇三行選項。
現在，您將看到一個彈出窗口，顯示所有可以添加的模塊。 通過單擊選擇所需的模塊。 它可以是音頻剪輯，號召性用語，按鈕，聯繫表格等。
如果您有任何特定的選擇，可以使用搜索框查找模塊。
在這裡，我們在三個不同的行中添加了文本，圖像和按鈕模塊。 現在，我們的頁面如下所示：
這是我們如何做到的快速回顧：
要添加更多行，可以使用當前行下方的「 +」圖標。
步驟5：自定義行和模塊
現在已經添加了行和模塊，是時候自定義它們了。 首先，我們將在文本模塊上工作。
要編輯文本，只需雙擊文本模塊，然後單擊設置圖標。 您會看到一個小的彈出窗口，其中顯示了不同的自定義選項。
您可以使用它們來處理文本的顯示方式。 您將在此處擁有3個標籤：
- 內容
- 設計
- 高級
在「內容」選項卡中，您可以處理文本，為文本添加鏈接，更改背景等等。 在「設計」選項卡中，您可以處理模塊的顯示方式。
在這裡，您可以更改標題，添加間距，邊框，動畫等。
如果需要更多設置選項，也可以使用「高級」選項卡。
對於圖像，通過單擊選擇模塊。 現在單擊設置圖標。 您會在屏幕上看到一個新的窗口彈出窗口。 單擊圖像空間，然後從計算機上載圖像。 您也可以使用媒體庫中的一個。
添加圖像後，您可以通過向下滾動添加到圖像的鏈接。 您還將看到其他選項，例如在新標籤頁中打開圖像鏈接，在燈箱中打開圖像鏈接等。
您還可以通過圖片旁邊的鏈接為圖片添加背景色。
對於設計選項，請單擊「設計」選項卡。 在這裡，您可以選擇添加動畫，間距，濾鏡等。 通過「高級」選項卡，您可以添加自己的CSS ID和類以及自定義CSS。 此選項適用於想要添加自己的代碼的高級用戶。
但是，如果您不是編碼人員，則可以完全跳過此標籤。
不要忘記點擊綠色的對勾以保存您的設置。
自定義按鈕的工作方式與添加文本和圖像完全相同。 只需單擊按鈕模塊即可。 然後，使用屏幕彈出窗口中顯示的選項開始對其進行自定義。
然後點擊綠色的選中標記以保存您的設置。 您可以對要添加和自定義的任何模塊執行此操作。
步驟6：頁面設定
現在您知道了如何添加和自定義行和模塊，讓我們看一下如何處理頁面設置。 要更改頁面設置，您需要單擊頁面底部的3個紫色點。
這將用幾個選項擴展設置欄。 單擊齒輪（設置）圖標：
您會看到一個包含3個標籤的設置頁面彈出窗口：
- 內容
- 設計
- 高級
在「內容」選項卡中，您可以處理頁面標題，添加特色圖像，為頁面添加背景，還可以進行拆分測試以查看頁面的效果如何：
要添加特色圖片，請點擊「 +」號，然後從您的媒體庫添加圖片，或者從您的計算機上傳新圖片。
接下來是「設計」選項卡。 在這裡，您可以處理配色方案，頁面間距和文本顏色。 只需單擊您要使用的選項並進行更改：
最後，您具有「高級」選項卡。 在此選項卡中，您可以添加自定義CSS，並啟用靜態CSS文件生成選項。 您還可以選擇希望頁面顯示給用戶的方式。
進行更改後，單擊下面的綠色對勾標記以保存更改。 您也可以使用紫色按鈕撤消更改，並使用綠色複選標記旁邊的藍色按鈕重做更改。
步驟7：為將來保存自己的布局
創建自己的布局後，您可以保存它們以備將來使用。 這將保存在Divi庫中。 下次要使用此布局時，可以選擇它並立即添加文本。
要保存布局，請將滑鼠懸停在頁面上，然後單擊頁面設置欄中的庫圖標。 將出現一個彈出窗口，您可以在其中為布局添加名稱。 您還可以選擇向其中添加類別：
然後單擊「保存到庫」選項。 現在將保存您的布局，以備將來使用。 將項目添加到庫後，添加新的Divi布局，節，行和模塊時，它將顯示在「從庫添加」選項卡中。
您還可以通過執行相同的過程來保存特定的模塊。 只要確保將滑鼠懸停在元素上以找到「保存到庫」按鈕即可。
步驟8：檢查Divi布局響應度
創建布局後，Divi可讓您檢查其在不同屏幕尺寸下的顯示方式。 要檢查布局的響應性，請單擊屏幕左下方的屏幕圖標：
第一個圖標顯示布局的線框視圖。 旁邊的放大鏡圖標可讓您檢查如果用戶希望放大其布局，布局將如何顯示。
下一個圖標提供布局的桌面視圖，其後是平板電腦和移動屏幕視圖。 您可以單擊每個圖標以查看布局是否響應足夠。
步驟9：發布您的Divi布局
一旦一切準備就緒，並且確定要發布具有已創建布局的頁面，請單擊屏幕右下角的「發布」按鈕：
按下「發布」按鈕後，您的頁面將立即生效。
使用Divi Builder創建布局非常簡單。
我們希望您喜歡這篇文章。 如果仍然不確定是否應使用Divi，則可能正在尋找WordPress網站的其他頁面構建器。
看看這個 審查Beaver Builder插件 這是另一個流行的頁面構建器插件。