Divi 插件亮点 – Gravity Divi 模块

Gravity Forms 是 WordPress 最受欢迎的表单插件之一。 它使用短代码与 Divi 兼容，但这并没有充分利用 Divi 模块的功能。 幸运的是，有一个名为 Gravity Divi Module 的第三方插件可用，它将 Gravity Forms 添加到 Divi Builder。

Gravity Divi Module 是 CodeCrates 的第三方插件，它完全集成了 Gravity Forms 你是你的 Divi 和 Extra 布局。 它允许您使用 Divi 模块自定义设置表单样式。 在这个插件亮点中，我们将看看模块可以做什么。 对于示例，我使用了 Gravity Forms 提供的模板和来自 Unsplash.com 的图像。

有关重力形式的更多信息，请参阅优雅主题文章：

• Gravity Forms – 个人版详细介绍
• 如何设计重力形式以使其看起来像 Divi（+ 额外外观！）

Gravity Divi 模块安装和设置

首先，必须安装 Gravity Forms 才能使用此插件。 安装 Gravity Forms 后，上传并激活 Gravity Divi Module 插件。 一旦插件被激活，它就会向 Divi Builder 添加一个名为 Gravity Divi 的新模块。 无需设置。

内容设置允许您选择表单、显示表单标题、显示描述、启用 AJAX、选择文本颜色和调整背景。

设计设置包括表单标题、描述、元素和文本本身的文本调整。 还包括边距和填充的间距以及按钮样式。 与在文本模块中使用 Gravity Forms 短代码相比，这些设置为您提供了更多的控制权。 高级设置包括一个选项卡索引，您可以在其中指定表单字段的起始选项卡。

从下拉框中选择您的表单。 如果您在创建 Divi 页面时尚未创建表单，则可以通过单击“选择重力表单”下的内容设置中的链接来创建一个。 创建表单后，它将出现在此下拉框中。

进行调整

这是使用默认样式的高级联系表单。 它与 Divi 风格相匹配。 进行调整很容易。

下面是一些基本的自定义设置。 我增加了标题文本的字体大小，更改了所有字体的颜色，添加了带有深色覆盖的背景图像，并添加了填充。

在这个例子中，我禁用了表单标题。

在这个中，我从下拉框中选择了一个新表单。 它保留字体和背景的设置，因为这些调整是在模块中完成的。 这是一个带有简短描述的快速示例。 我禁用了表单标题并启用了描述。

Divi 布局示例中的 Gravity Divi 模块

Gravity Module 的最大优势是 Divi Builder 及其模块设置，这意味着您习惯的模块设置可用于 Gravity Forms。 以下是 Divi 布局中的一些示例。

人员模块布局中的高级联系表

这是集成在带有背景图像的简单布局中的高级联系表。 为了帮助表单与页面设计融合，我将文本更改为浅色，将标题字体大小增加到 40，并将表单元素文本更改为红色。

我将模块的行放置在与 Person 模块相同的部分中，因此背景图像扩展到 Gravity 模块。 该表单适合页面的设计，而不是看起来像我只是在页面底部附加了一个表单。

注册布局

此示例使用了大学和学院免费主页布局中的一些布局元素。

Gravity 模块与文本模块一起放置在 2/3、1/3 布局中。

我已启用表单标题和 AJAX，因此当用户单击“下一步”时，多页表单不会重新加载页面。 表单标题字体设置为 30%。 它非常适合布局的样式。 不需要其他更改。

婚礼回复

这个使用柔和的色彩和优雅的字体与照片融合（在这张图片中可能很难看到。我通常会使用更高的对比度，但婚礼网站更喜欢柔和的对比度）。 颜色取自照片本身，然后变暗以帮助提高可读性。

此布局是一个单独的模块，在该部分中有一个背景。 我已将所有字体更改为 Tangerine，增加字体大小并使它们加粗，并根据图像中的颜色将颜色调整为棕褐色或红色。

比萨订购单

本示例使用 Gravity Forms 中的 Build a Pizza 表单模板。

此布局使用 1/3、2/3 布局，带有一个 Gravity 模块和多个图像模块。 我在该部分添加了一个背景，并在行中添加了一个带有填充的覆盖层，以使所有内容都适合设计的空间。

我已将文本设置为 Light，将字体更改为 Arimo，并分别调整了每个表单元素的字体大小。

我将按钮文本和边框设置为白色，并将按钮边框半径调整为 30。

个人模块布局中带有高级联系表单的额外主题

Gravity Module 也与 Extra 兼容。 下面是带有 Extra 的第一个示例（人员模块布局中的高级联系人表单）。 对于 Extra 中的页面，我使用的是全角页面模板。 它看起来与 Divi 页面相同。

我所做的唯一更改是按钮样式。 蓝色按钮也没有混合，白色文本在蓝色背景下看起来很棒。

许可和支持

该插件附带无限许可，因此您可以将其安装在任意数量的网站上，供您和您的客户使用。 它还包括终身更新和 6 个月的支持。

Gravity Divi 模块可以从开发商的商店购买。

最后的想法

Gravity Divi 模块提供了一种将 Gravity Forms 集成到 Divi 布局中的好方法。 它增加了比简单使用 Gravity Forms 短代码更多的功能。 Divi Builder 和模块的设置增强了 Gravity Forms 的所有优点，其中包括背景设置，例如图像、叠加和渐变、字体和按钮设置、填充等。

如果您对在 Divi Builder 中使用 Gravity Forms 感兴趣，Gravity Divi Module 可能是您需要的解决方案。

现在轮到你了。 你用过 Gravity Divi 模块吗？ 请在下面的评论中告诉我们您的想法。

精选图片来自 Bloomicon/shutterstock.com