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