Divi 產品亮點：Divi 的重力形式造型器模組

Divi 的 Gravity Forms Styler 模組是 Divi Marketplace 中提供的插件，可讓您輕鬆地在熟悉的 Divi Builder 介面中完全自訂 Gravity Forms 的樣式。 使用此插件，您可以將重力形式添加到 Divi 佈局中，就像添加任何其他模組一樣。 使用設計標籤中的選項，您可以完全控製表單的每個方面。

該外掛程式的一個獨特功能是您可以在 Divi Builder 中預覽整個表單、帶有驗證錯誤的表單以及確認訊息頁面。 在這個產品亮點中，我們將仔細研究 Divi 的 Gravity Forms Styler 模組，並幫助您確定它是否適合您。

讓我們開始吧！

安裝 Divi 的 Gravity Forms Styler 模組

首先，確保您的網站上安裝並啟動了重力形式外掛程式。 此外，請從 Divi Marketplace 購買 Divi 外掛程式的 Gravity Forms Styler 模組並下載外掛程式檔案。

要安裝插件，請開啟 WordPress 儀表板中插件標題下的新增頁面。 點擊“上傳外掛程式”按鈕，然後點擊“選擇檔案”以從您的電腦中選擇插件檔案。 最後，點擊“立即安裝”，該插件將添加到您的網站。

安裝插件後，點擊啟用插件。

Divi 的重力形式造型器模組

Divi 的 Gravity Forms Styler 模組是添加到 Divi Builder 中的模組，這意味著您可以在可以添加任何其他 Divi 模組的任何位置添加 Gravity Forms，從而為您的佈局和設計提供最終的靈活性。 首先為您的網站新增一個頁面，然後選擇 Divi Builder 選項。

在新頁面上，按一下灰色加號圖示插入模組。 從清單中選擇重力形式模組。

內容設定

打開重力形式模組的選項。 第一個選項名為“形式”，可讓您選擇要顯示的重力形式。

您也可以自訂表單上顯示的標題和說明。 您可以隱藏每個元素，設定自訂標題或描述，或顯示在重力形式設定中設定的標題或描述。

接下來，您可以啟用 Ajax 來提交表單。 如果啟用，表單提交後頁面將不會重新載入。 您可以在內容設定中指定表單欄位的起始標籤索引和預設欄位值。

背景

在內容標籤中，您還可以為重力形式模組添加背景。 使用 Divi 豐富的背景選項，您可以添加背景顏色、漸層、圖像、影片、圖案或蒙版，為您的表單建立獨特的佈局。

設計設定

現在，讓我們轉到設計標籤。 您可以在這裡完全自訂表單中每個元素的設計。

字體

在字型標籤下，您可以設定表單中文字的樣式。 在此部分中，您可以設定字體、字體粗細、樣式、對齊方式、顏色、文字大小、字母間距、行高和文字陰影。 在這裡，我設定了字體和字體顏色。

表格標題

在表單標題設定中，您可以自訂表單標題字體、標題字體、內邊距和邊距、邊框和背景的樣式。 使用這些選項，您可以完全自訂標題部分，與表單的其餘部分分開。 對於此範例，我增加了表單標題文字的大小。

領域

欄位設定部分是您可以設定表單欄位樣式的地方，包括背景顏色、文字顏色、焦點樣式、邊距和填滿、字體樣式和邊框樣式。 在本節中，我將字段顏色設為白色。

我還啟用了焦點邊框。 這會將獨特的樣式套用至活動欄位的邊框，如螢幕截圖中所示。

字段錯誤

接下來，在欄位錯誤部分，您可以設定表單欄位錯誤的文字、背景和邊框顏色的樣式。

標籤

在標籤部分中，您可以設定標籤文字的樣式、設定填滿和邊距、設定邊框的樣式以及新增背景或方塊陰影。 對於此範例，我增加了標籤文字大小並更改了顏色。 我還去掉了底部填充物。

所需文字

下一部分是您可以設定所需文字樣式的位置。 這些選項可讓您設定必填欄位旁邊顯示的星號的樣式。

子標籤

接下來是子標籤設定。 在這裡，您可以自訂子標籤文字、內邊距和邊距、邊框樣式、背景和框陰影的樣式。 我將子標籤文字顏色設為灰色並調整了上邊距。

字段 說明

欄位描述設定與上一個類似，您可以在其中自訂文字樣式、填滿和邊距、邊框樣式、背景和框陰影。 我調整了本例中的邊距，以使描述和標題更加緊密地結合在一起。

接下來，您可以在欄位驗證設定中設定欄位驗證字體樣式。 此外，您還可以自訂內邊距和邊距、邊框樣式、背景和框陰影。

錯誤通知

錯誤通知設定非常相似，都有自訂字體、間距、邊框、背景和框架陰影的選項。

確認訊息

下一部分用於自訂確認訊息。 您可以使用頂部的預覽選項來查看確認訊息佈局。

單選按鈕

在單選按鈕設定中，您可以設定單選顏色、文字樣式和清單間距。 在這裡，我修改了選取的背景顏色。

複選框

同樣，您可以變更此部分中的複選框顏色、文字樣式和清單間距。

文件上傳

可以在此處自訂文件上傳部分。 您可以自訂字體樣式、間距、邊框、背景和框架陰影。

分節符

您可以在此處自訂分節符號描述和標題的字體樣式，並自訂間距、邊框、背景和框架陰影。

定價字段

您也可以使用此模組自訂重力形式定價欄位。 您可以設定產品價格、運費和總價欄位的樣式。

進度條

接下來是進度條選項。 如果有多個頁面，則進度條會出現在表單中，並提供直覺的指示符，指示您在表單中的進度。 在設計設定中，您可以自訂進度條的樣式。 您可以設定顏色、條形高度、自訂字體選項、新增邊框以及調整間距。

表格頁尾

在表單頁尾選項中，您可以設定按鈕對齊方式、間距、邊框樣式、背景和框陰影樣式。

按鈕樣式

接下來是四個部分，您可以在其中自訂表單中的按鈕：提交按鈕、頁面導航按鈕、儲存並繼續按鈕以及全選按鈕。 在每個部分中，您都可以啟用自訂按鈕樣式來修改樣式以符合表單的設計。

漿紗

在尺寸設定中，您可以調整表單的寬度、高度和對齊方式。 在這裡，我將寬度設為 75%，並將對齊方式設為中心。

間距

接下來，您可以修改表單的邊距和填滿。 在此範例中，我在每一側添加了一些填充。

邊界

在邊框設定中，您可以在表單周圍新增邊框。 在這裡，我新增了一個藍色邊框。

盒子陰影

接下來，您可以為表單新增框陰影。

過濾器

在這裡，您可以使用不同的篩選器來修改表單的顯示方式。

轉換

在變換設定中，您可以使用縮放、平移、旋轉、傾斜和變換原點設定來調整表單的顯示方式。

卡通

最後，您可以在本節中將動畫效果套用到表單。 您可以從七種不同的動畫樣式中進行選擇，並自訂動畫持續時間、延遲、強度等。

預先設計的佈局

Divi 的 Gravity Forms Styler 模組還可以存取一些預先設計的完全樣式化表單的佈局。 您可以從外掛程式作者的網站下載版面。 這些佈局是在造型過程中搶得先機的好方法。

Divi 佈局範例的重力形式 Styler 模組

以下是如何使用 Divi 的重力形式樣式器模組來設計重力形式的一個範例。

第一頁

第二頁

驗證錯誤

確認頁

購買 Divi 的 Gravity Forms Styler 模組

Divi 的 Gravity Forms Styler 模組可在 Divi Marketplace 中找到。 價格為 39 美元，可無限使用網站並享受 1 年的支持和更新。 該價格還包括 30 天退款保證。

最後的想法

Divi 的 Gravity Forms Styler 模組將 Divi 的所有功能和設計靈活性帶到使用 Gravity Forms 建立的表單中。 有多種方法可以自訂每個元素的樣式，設計選項實際上是無窮無盡的。 如果您厭倦了使用自訂 CSS 來實現表單樣式，並且想要一種使用 Divi Builder 自訂重力表單的簡單方法，那麼這可能是一個很棒的產品。 我們很想聽聽您的聲音！ 您是否嘗試過 Divi 的重力形式造型器模組？ 請在評論中告訴我們您的想法！