使用 Divi 在一種設計中創建多個有針對性的懸停聯繫表單

您在網站上顯示聯繫表格的方式絕對有助於提高轉化率。 除了創建美觀且用戶友好的聯繫表單外，您還可以以更有針對性的方式來處理它。 在這篇文章中，我們將向您展示如何創建具有多個聯繫表單的設計，這些表單會根據您的訪問者感興趣的服務顯示。您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載有針對性的聯繫表格佈局

要了解免費的有針對性的聯繫表單佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

將佈局上傳到頁面後，您仍然需要將 CSS 代碼添加到您正在處理的頁面中。 您可以在本教程的末尾找到 CSS 代碼。

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加第 1 節

打開一個新的或現有的頁面並添加一個新的常規部分。

添加新行

列結構

繼續使用以下列結構添加新行：

添加文本模塊

添加 H2 內容

將文本模塊添加到具有您選擇的一些 H2 內容的列中。

H2 文本設置

轉到設計選項卡並相應地更改 H2 文本設置：

• 標題 2 字體粗細：超粗體
• 標題 2 字體樣式：大寫
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：6vw
• 標題 2 字母間距：-0.4vw
• 標題 2 行高：0.8em

間距

添加一些自定義的頂部和底部邊距。

• 最高利潤率：2vw
• 底邊距：2vw

添加第 2 節

漸變背景

在上一個部分的正下方添加另一部分並應用以下漸變背景（或您選擇的任何漸變背景）：

• 顏色 1：#30fff1
• 顏色 2：#4635ff
• 梯度方向：110deg
• 結束位置：85%

頂部分隔線

移至設計選項卡並添加頂部分隔線。

• 分隔線樣式：在列表中查找
• 分隔線安排：在部分內容下方

底部分隔線

還要添加一個底部分隔線。

• 分隔線樣式：在列表中查找
• 分隔線安排：在部分內容下方

漿紗

接下來在大小設置中更改高度。

• 高度：200px

間距

接下來添加一些自定義間距設置。

• 下邊距：30vw（桌面）、45vw（平板電腦）、200vw（手機）
• 頂部填充：0vw
• 底部填充：0vw

CSS 類

在帖子的後面，我們將添加一些 CSS 代碼來使效果起作用。 為此，我們將向該部分添加一個 CSS 類。

• CSS 類：聯繫部分

添加新行

列結構

繼續使用以下列結構添加新行：

溢出

打開行設置並隱藏溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

過渡

也刪除過渡持續時間。

• 轉換持續時間：0ms

添加模糊模塊

向內容框添加標題

是時候開始添加模塊了！ 添加一個 Blurb 模塊並輸入您選擇的代表您的一項服務的標題。

選擇圖標

接下來選擇一個圖標。

默認背景顏色

繼續添加默認背景顏色。

• 背景顏色：#ffffff

懸停背景顏色

更改懸停時的背景顏色。

• 背景顏色：#000000

默認圖標設置

轉到設計選項卡並相應地更改圖標設置：

• 圖標顏色：#000000
• 使用圖標字體大小：是
• 圖標字體大小：2.5vw（桌面）、5vw（平板電腦）、7vw（手機）

懸停圖標設置

修改懸停時的圖標顏色。

• 圖標顏色：#ffffff

默認標題文本設置

接下來打開標題文本設置並應用以下更改：

• 標題字體粗細：超粗
• 標題字體樣式：大寫
• 標題文本對齊：居中
• 標題文字顏色：#000000
• 標題文字大小：0.9vw（桌面）、1.8vw（平板電腦）、3vw（手機）

懸停標題文本設置

在懸停時更改標題文本顏色。

• 標題文字顏色：#ffffff

漿紗

接下來修改不同屏幕尺寸的寬度。

• 寬度：10vw（桌面）、17vw（平板電腦）、30vw（手機）
• 模塊對齊：居中

間距

並在間距設置中添加一些自定義邊距和填充值。

• 最高利潤率：4vw
• 底邊距：4vw
• 頂部填充：2vw（桌面）、3vw（平板電腦）、6vw（手機）
• 底部填充：2vw（桌面）、3vw（平板電腦）、6vw（手機）

邊界

我們還通過向邊框設置中的每個角添加“50vw”來將模塊變成一個圓圈。

盒子陰影

還要添加一個框陰影。

默認變換比例

轉到變換設置並確保默認變換比例值保持“100%”。

懸停變換比例

在懸停時更改這些值。

• 底部：120%
• 正確：120%

添加聯繫表格

使姓名和電子郵件字段全寬

我們在這一行中需要的第二個模塊是聯繫表單模塊。 添加聯繫表單後，打開姓名和電子郵件字段並將它們設為全角。

• 製作全角：是

刪除消息字段並為特定於服務的問題插入三個輸入字段

接下來添加適用於該特定服務的三個問題。

禁用驗證碼

也禁用驗證碼選項。

• 顯示驗證碼：否

字段設置

轉到設計選項卡並相應地更改字段設置：

• 字段頂部填充：0.6vw（桌面）、0.9vw（平板電腦）、1.5vw（手機）
• 字段底部填充：0.6vw（桌面）、0.9vw（平板電腦）、1.5vw（手機）
• 字段文本大小：0.8vw（桌面）、1.6vw（平板電腦）、2.3vw（手機）

按鈕設置

接下來更改按鈕的外觀。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：0px
• 按鈕字體粗細：超粗
• 按鈕字體樣式：大寫

間距

也添加一些填充值。

• 頂部填充：2vw
• 底部填充：2vw
• 左填充：2vw
• 右填充：2vw

邊框設置

最後但並非最不重要的一點是，轉到邊框設置並為每個角添加“10px”。

克隆行 3 次

完成第一行後，您可以繼續克隆它 3 次。

更改每個重複行的模糊內容和圖標

確保更改每個副本的簡介標題和圖標。

更改每個重複行的服務特定問題

還要修改聯繫表的具體問題。

附加行設置

默認高度

再次打開第一行的設置，轉到大小設置並更改不同屏幕尺寸的高度。

• 高度：18vw（桌面）、27vw（平板電腦）、38vw（手機）

懸停高度

在懸停時將高度恢復為自動。

• 高度：自動

將行大小設置擴展到部分中的所有行

修改第一行的大小設置後，您可以將設置擴展到整個部分的所有行。

在台式機和平板電腦上將行並排放置

打開頁面設置

最後但並非最不重要的一點是，我們將在平板電腦和台式機上將所有四行並排放置。 為此，請打開頁面設置。

插入自定義 CSS

移至自定義 CSS 框並添加以下 CSS 代碼行：

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在一個設計中創建多個有針對性的聯繫表單。 這是了解訪問者的更多信息以及他們感興趣的特定服務的好方法。如果您有任何問題或建議，請務必在下面的評論部分發表評論！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。