Divi 插件亮点：Divi 模块生成器

Divi Builder 包含许多模块，可帮助您将几乎任何设计元素添加到布局中，但是如果您想创建自己的模块怎么办？ 一个名为 Divi Module Builder 的第三方插件为您提供了这种能力。

在本文中，我将介绍该插件并了解它可以做什么以及使用起来有多简单。 它需要 Divi 3.0.50 或更高版本，并且适用于 Divi 和 Extra。 它可以从开发者的网站获得：DiviPlugins.com。

安装 Divi 模块生成器

激活插件后，单击DMB 激活页面。 或者，您可以通过转到仪表板中的自定义模块并单击许可证来查看此屏幕。

输入您的许可证密钥，然后单击激活许可证。 仪表板中添加了一个名为Custom Modules 的新菜单。 在此菜单中，您将找到构建模块所需的一切。

添加模块

模块是在仪表板菜单中的自定义模块、添加模块下创建的。 您将使用两个区域来创建模块。 左侧的区域是您将创建字段的地方。 右侧的区域是您将添加字段将使用的代码的地方。 您可以使模块标准或全宽。 您可以在准备好后保存草稿或发布。 模块发布后，它将出现在 Divi Builder 中。

字段

您的模块可以有任意数量的字段。 每个字段中都有字段属性。 以下是对每个字段属性的详细介绍：

字段标签– 将在模块的内容选项卡中显示为字段标题的标签。

字段标识符– 您将用于在 HTML 中引用字段的唯一值。 仅使用小写字母、数字和下划线作为字段标识符。

字段描述- 添加您自己的描述以解释该字段的用途。 这将显示在模块内容选项卡的输入下方。 此字段是可选的，但我建议添加信息或示例来帮助用户。

字段类型- 确定用户看到的输入类型。 从下拉框中选择多种字段类型，包括文本、文本区域、颜色、图像、是/否切换和图标。

设计选项卡- 在模块的设计中为此字段添加字体控件。 如果您选择文本或文本区域，您将看到此选项。 您必须通过在 HTML 中添加一个类来确定要应用字体控件的元素。

隐藏字段- 让用户控制 HTML 输出中元素的字体，而不让他们控制该元素的内容。 只有在选择了文本或文本区域字段类型时，此选项才可用。

添加字段标签、标识符、描述、选择字段类型、启用设计选项卡或选择隐藏字段。 通过单击每个字段上的向上/向下箭头重新排列字段。 每个部分和字段都提供了说明和示例。

代码

添加自定义 HTML、PHP、CSS 和 JavaScript 以控制输出。 HTML 字段可以接受自定义查询和 PHP。 您需要先启用 PHP，然后它才能识别代码。 否则它会在屏幕上打印代码。 HTML 和 PHP 都使用字段标识符来引用字段。

代码快捷方式作为代码字段下的按钮提供。 这包括标签和字段标识符。 添加您的字段标识符，然后它在代码区域的底部可用，您可以单击以将它们添加到您的代码中。 HTML 标识符显示为橙色按钮，PHP 显示为绿色。 您可以使用的不仅仅是快捷方式，但这些都是为了帮助加快开发时间。

创建模块

这是创建模块的快速示例。 标题将是出现在 Divi Builder 模块上的名称。 我添加了字段标签、描述，选择了 Text 作为字段类型，并创建了一个字段标识符。

我保存为草稿，因此标识符将出现在 HTML 快捷方式中。 接下来，我从快捷方式中选择了 H1 标签，将光标置于标签之间，并从 HTML 快捷方式中选择了标签。 完成后，我点击发布。 结果应该是一个带有用户可以输入文本的字段的模块。 输出将文本显示为标题 1。

该模块现在出现在 Divi Builder 中。 我可以像任何 Divi 模块一样添加到页面。

“内容”选项卡包含我随标签添加的字段。

该模块显示我在字段中输入的文本。 由于我添加了 HTML 以将其显示为 H1，因此文本自动具有 H1 属性。 我可以添加“设计”选项卡以包含更多自定义功能。 这将需要一些代码来正确定位该字段。

模块

您可以在仪表板菜单中看到模块列表。 转到自定义模块，模块。 您可以在此处编辑或删除您的模块。 它显示每个模块的 PHP 是打开还是关闭。 如果你想克隆一个模块，你必须在Settings 中查看它们。

自定义模块设置

设置菜单提供了一个可以管理模块的位置。 您可以查看已发布和草稿模块。

您可以克隆它们，这为您提供了一个开始模块的好地方，该模块需要您在另一个模块中使用的大量代码。 您还可以编辑、禁用或启用 PHP（如果您因代码错误而被锁定在编辑器之外，这会很有帮助 - 我这样做并使用此功能来编辑模块），以及导入和导出您的模块。

添加依赖

您可以在此处添加第三方 CSS 和 Javascript 依赖项。 将它们添加为外部或内部 URL。 从下拉框中选择 CSS 或 Javascript，添加名称并添加 URL。 然后可以在任何页面上使用它们。 它给出了一个使用 Font Awesome 的例子。 这是在一个位置创建依赖项然后在任何地方使用它的极好方法。

Divi 模块生成器示例 - 自定义博客网格

我没有创建一个“好的”模块作为示例，而是展示了开发人员创建的很棒的示例——自定义博客网格（可在开发人员的网站上免费下载）。 它包括 3 个字段，HTML、PHP 和 CSS。 下面来看看每一个。

自定义博客网格模块

字段 1 标记为类别，使用类别作为标识符，字段类型设置为文本。

字段 2 标记为黑白图像效果。 标识符是过滤器，归档类型是是/否切换。 过滤器是在 CSS 中创建的。

字段 3 被标记为 Post Title 并使用 post_title 作为标识符。 字段类型设置为文本并启用了设计选项卡。 我们将在模块中看到此字段的自定义。 该字段在 HTML 中被赋予一个 H2 类。

PHP 被选中，以便它可以在 HTML 输出代码框中使用。

自定义 CSS 添加到 CSS 输出框中。

这是Javascript。 您需要对 HTML、PHP、CSS 和 Javascript 有很好的了解才能充分利用此插件。 换句话说，这是一个面向开发人员的插件。

Divi Builder 中的自定义博客网格模块

模块发布后，您将在 Divi Builder 中找到它。

模块中出现的设置及其标签将根据您所做的选择而有所不同。 此模块允许您添加类别、启用黑白效果并在“内容”选项卡中添加帖子标题。 它还包括背景设置（模块的默认设置）。

为此模块启用了设计选项卡。 它包括文本、帖子标题文本、边框、间距和动画的设置。

自定义博客网格结果

结果是一个带有悬停动画的博客网格。 我启用了黑白模式，因此除非我将鼠标悬停在图像上，否则图像将以黑白显示。 我更喜欢这种悬停形式——在悬停时显示图像而不是模糊它。

在这个中，我禁用了黑白模式，更改了标题字体，并添加了背景渐变。 可以在代码中添加更多调整来更改按钮、添加覆盖等。如果您可以编写代码，您几乎可以让它做任何您能想象的事情。

许可证和文件

共有三种许可证可供选择：单一许可证、无限制许可证和终身许可证。 Unlimited 许可证涵盖无限的网站，并包括 1 年的更新和支持。 Lifetime Unlimited Sites 许可证包括终身更新和支持。

开发人员的网站上提供了文档。 包含示例代码以及分步说明。

最后的想法

Divi Module Builder 是功能强大的插件，在正确的人手中具有很大的潜力。 由于它确实需要良好的代码知识，因此并不适合所有人。 这为开发人员提供了创建和共享模块的绝佳工具。 我喜欢您可以从一个站点导入和导出到另一个站点。 每个使用该模块的站点都需要安装插件。 如果您对代码有很好的了解并且对创建自己的 Divi 模块感兴趣，那么 Divi Module Builder 值得一看。

我们希望听到您的意见。 您是否尝试过 Divi Module Builder？ 请在评论中告诉我们您对此的看法。

特色图片来自 aliaksei kruhlenia/shutterstock.com