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