Divi 插件亮點：Divi Widget Builder

您是否曾經想在小部件區域內放置 Divi 模塊和佈局？ 只是想到側邊欄和頁腳中的 Divi 佈局就給了我超出我自己技能水平的設計可能性的想法。 有趣的是，無論您的技能水平如何，都可以輕鬆做到。 如何？ 使用名為 Divi Widget Builder 的第三方插件。

Divi Widget Builder 允許您在小部件內顯示您的 Divi 庫中的任何 Divi 佈局。 這包括單個模塊和完整頁面，包括它們的所有功能和調整。 它適用於 Divi 和 Extra。 在本文中，我們將看看 Divi Widget Builder，看看將 Divi 佈局添加到小部件區域是多麼容易。

您可以在出版商的網站上購買 Divi Widget Builder。

安裝和激活 Divi Widget Builder

正常上傳並激活插件。

激活插件後，您需要輸入許可證密鑰。 導航到儀表板菜單中的Divi 、 Divi Widget Builder並輸入您的許可證密鑰。 使用該插件不需要其他設置，但您需要在小部件中使用 Divi 佈局。

迪維圖書館

您可以在 Divi Widget Builder 中使用任何 Divi 佈局。 我不建議像頁面或帖子那樣構建佈局。 例如，3 或 4 列網格（用於博客、項目、簡介等）在側邊欄中看起來很奇怪。 這很容易通過在單列中創建佈局來解決。 換句話說，專門為側邊欄或頁腳創建佈局。

單個模塊在側邊欄中運行良好。 例子包括：

• 地圖
• 聯繫表格
• 倒數計時器
• 吧台
• 按鈕
• 博客
• 登錄
• 計數器
• 人
• 感言

創建佈局並將這些模塊與背景疊加一起使用，將它們組合起來，例如，創建一些非常有趣的小部件。 天空是極限。

創建佈局

通過轉到儀表板菜單中的Divi 、 Divi 庫來創建您的佈局。 選擇左上角的新增。

為佈局命名並從下拉菜單中選擇模板類型。 向下滾動，您可以根據需要為模板選擇一個類別。 您還有一次機會選擇類別，甚至在下一個屏幕上添加新類別。 完成後單擊提交。

現在只需像往常一樣構建您的佈局。

Divi 小部件生成器小部件

一個新的小部件將添加到您的小部件中，稱為 Divi PB 小部件。 要查看它，請轉到儀表板中的外觀、小部件。 將此小部件放在任何小部件區域（包括側邊欄、頁腳或您創建的任何區域）。 它提供了一個下拉框，您可以在其中選擇要在小部件中顯示的任何 Divi 庫項目。

還有兩個選擇：

顯示庫項目標題- 在您網站的側邊欄中顯示佈局的名稱。 它就像小部件的標題。 取消選中它以隱藏名稱。

在此處添加要用作小部件的庫項目- 單擊該句子中的“此處”一詞（好吧，不是我的句子）會將您帶到 Divi 庫，您可以在其中創建佈局。 我喜歡包含此鏈接，因為它有助於減少創建佈局的位置的混亂，並讓您快速訪問庫。

做出選擇後，單擊“保存” ，新佈局將應用到您放置 Divi PB 小部件的小部件位置。 該小部件甚至可以與您自己的自定義小部件區域配合使用。

Divi Widget Builder 示例

下面是我編寫的幾個相當的例子。 它們很簡單，但希望它能讓您了解它是如何工作的。

地圖

此示例顯示帶有側邊欄的博客提要。 側邊欄添加在 2 / 3 Divi 佈局中，左側有一個博客模塊。

此示例使用單個地圖模塊。 我已經包含了佈局的名稱。 我還沒有設計地圖模塊的樣式，所以它周圍有一個白框。 這很容易調整。 如果我確實對模塊進行了更改，則刷新頁面時這些更改會反映到小部件中。

我可以簡單地將地圖放置在 Divi 佈局中，但無論某人正在閱讀哪篇博客文章，將其放置在側邊欄中都會顯示地圖。 這是不使用 Divi 佈局的標準博客文章。 使用佈局，我可以為每個帖子創建一個新地圖，創建一個新的小部件區域，並選擇在每個帖子上單獨顯示哪個地圖。

倒計時器

此佈局使用多個倒計時模塊來創建單個小部件。 我已經分別設計了每一件。

這些模塊顯示下一場比賽的倒計時——博客涵蓋的每個聯賽都有一個倒計時。 每個倒數計時器都使用特定於聯盟標誌的顏色，並包括漸變。 我知道——我遺漏了 NHL 和其他幾個。 對於那個很抱歉。

帖子滑塊

這個在側邊欄中添加了一個帖子滑塊。 我已經包含了帖子滑塊的閱讀更多按鈕、點導航和箭頭。 我還添加了更多常規小部件以查看它如何適應。

關於我

這個使用頁面佈局而不僅僅是一個模塊。 我已經使用 Divi 附帶的關於我的佈局從帖子（而不是在 Divi 庫中創建它）創建了一個佈局。 我修改了佈局，所以所有內容都在一個列中，並減小了標題標題的字體大小。 然後我將佈局保存在庫中，以便 Divi Widget Builder 可以使用它。

該頁面本身是來自名為 Creative Agency 的 Divi Builder 的佈局。 我給了它一個左側邊欄，並為小部件選擇了關於我的佈局。

這是相同的佈局，但我沒有顯示標準的 WordPress 側邊欄，而是使用專業部分重新創建了佈局。 這導致比標準 WordPress 側邊欄更好的設計，因為它為頁面提供了更多的寬度，並且小部件可以放置在 Divi 全寬標題模塊下。

專業部分允許一行中有 3 列，所以我減少到 3 個，而不是 4 個，並將側邊欄放在左列中。 我將專業部分設為全角，並將右上角的 Divi Post Settings 下的頁面佈局從 Left Sidebar 更改為Fullwidth 。

聯繫表

這個使用了Divi Builder附帶的Our Team佈局。 我正在使用右側邊欄。 我在側邊欄中放置了一個 Monarch 小部件以及顯示聯繫表單的 Divi 小部件構建器。

頁腳小部件區域

這個在頁腳區域有 3 個 Divi Widget Builder 小部件。 我選擇了 3 列頁腳佈局，並在 3 個區域中放置了聯繫表單模塊、人員模塊和博客滑塊模塊。 這是 Jason Champagne 令人驚嘆的 Code School 佈局包。 博客文章的圖像也來自此佈局。 您可以從此處的 ET 博客下載佈局：下載適用於 Divi 的免費令人驚嘆的學習管理 (LMS) 佈局包。

這個頁腳使用了我作為帖子創建的兩種不同的佈局。 兩者都有背景圖像。 左邊的小部件使用了幾個文本模塊、一個社交關注模塊和一個分隔模塊。 社交按鈕下方的菜單項是可點擊的鏈接。 它還使用疊加來使背景圖像變暗。 右側的小部件是聯繫表單模塊。

將 Divi Widget Builder 與 Extra 一起使用

這與 Extra 的 Our Team 佈局相同。 我最初使用模塊中的默認設置製作了聯繫表格。 我想混合背景，所以我使背景透明。 我還更改了按鈕的文本顏色，使其在深色背景下可見。

許可證和文件

有四種可用的許可證：

• 單個站點 $7.00
• 3 個站點 $19.00
• 無限站點 $39.00
• 終身 $89.00

它包括一年的支持和自動更新。 文檔在出版商的網站上提供。

最後的想法

Divi Widget Builder 簡單易用。 這項工作來自構建 Divi 佈局，而不是使用小部件構建器。 在小部件構建器中選擇佈局再簡單不過了，並且能夠在您想要的任何小部件區域中放置盡可能多的 Widget Builder 小部件，這開啟了許多 Divi 和 Extra 設計的可能性。

我想在插件的開發者網站上看到一些示例。 看到一些有創意的用例會給買家關於如何使用它並充分利用它的想法。 如果您有興趣在您的小部件區域內放置 Divi 佈局和模塊，Divi Widget Builder 可能是您正在尋找的插件。

我們希望聽到您的意見。 您是否嘗試過 Divi Widget Builder？ 請在評論中告訴我們您對此的看法。

精選圖片來自 robuart/shutterstock.com