如何使用 Divi 在 Click 上創建聯繫表

在本 Divi 教程中，我們將向您展示如何創建一個在單擊按鈕後出現的聯繫表單（作為疊加層），只使用 Divi、一些 jQuery 代碼和 CSS 代碼。

這是讓您的網站訪問者通過單擊按鈕專注於他們所承諾的操作的好方法。 它不會將他們帶到不同的頁面，而是將他們鎖定在該操作中，直到完成為止。

您可以在下面快速了解我們將要創建的內容，然後進入教程！

桌面上的結果

手機和平板電腦上的結果

靈感

這篇文章的靈感來自一個評論請求，可以在 B3multimedia 上找到。 儘管他們使用另一種方​​法來完成這項工作，但他們也有一種令人驚嘆的方式來創建單擊時的聯繫表單。 看看結果：

使用按鈕模塊創建部分

通常我們會展示如何在 Divi 的前端視覺構建器中完成幾乎所有的事情。 然而，在今天的帖子中，我將使用後端構建器。 由於我們使用的代碼，它更容易一些。 也就是說，如果您和我們一樣喜歡前端編輯器，那麼您可以使用前端“骨架”視圖輕鬆完成本教程。

好的，讓我們進入本教程！

訂閱我們的 YouTube 頻道

我們需要做的第一件事是添加一個新部分，在其中放置允許彈出聯繫表單的按鈕。 只需添加一個標準部分並選擇一列行。 完成後，向其中添加一個按鈕模塊。

您可以隨意設置按鈕樣式，但必須確保按鈕 URL 以“#”開頭，後跟其他內容。 您不能將其留空或僅使用“#”字符。 通過添加“#”和一些文本，單擊按鈕後頁面將不會移動。 如果將其留空，則頁面將在單擊時刷新。 如果您只使用“#”，您將被發送到頁面頂部。

我們需要做的下一件重要事情是為按鈕分配一個 CSS 類。 我們稍後將在這篇文章的 jQuery 代碼中使用這個 CSS 類，以確保在單擊後彈出聯繫表單。 我們需要分配給按鈕的類只是“按鈕”。

單擊創建桌面聯繫表

我們需要做的下一件事是創建桌面聯繫表單，一旦有人單擊我們在本文的前一部分中創建的按鈕，就會顯示該表單。 在這篇文章的後面，我們還將向您展示如何創建移動版本。

如果您使用此方法，您基本上可以在一行中創建您想要的任何設計，並使其顯示為彈出窗口。 我們只會通過向您展示如何創建以下示例來讓您體驗一下您可以實現的目標：

添加新標準截面

首先向您正在處理的頁面添加一個新的標準部分。 轉到您剛剛添加的部分的“高級”選項卡，並將“彈出”添加到“CSS 類”字段。 向下滾動同一個選項卡，並將以下 CSS 代碼行放入自定義 CSS 子類別的 Before 字段中：

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

通過添加這一點，我們確保該部分佔據整個選項卡。 您可以在 CSS 代碼中調整背景顏色以創建您想要的背景疊加。 在這種情況下，我們使用具有一定透明度的黑色。 在同一個選項卡中，還將以下 CSS 代碼行添加到 Main Element：

display: none;

我們需要在高級選項卡中做的最後一件事是禁用可見性子類別中的手機和平板電腦部分。

添加兩列行

繼續添加一個兩列的行並轉到“設計”選項卡。 首先修改 Sizing 子類別中的行寬。 在此示例中，我們使用了 1291 像素的自定義寬度。

向下滾動“設計”選項卡，並在“間距”子類別中對兩列的頂部、左側和右側填充使用“30px”。

轉到高級選項卡完成。 在 Main Element 中，添加以下 CSS 代碼行：

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

添加第一個文本模塊

對部分和行進行所有更改後，就可以添加要顯示的不同模塊了。 我們要添加的第一件事是顯示的標題。 首先向行的第一列添加一個新的文本模塊，在“內容”選項卡中寫入文本，然後轉到“設計”選項卡。 在“設計”選項卡中，我們對“文本”子類別使用了以下設置：

• 文字方向：居中
• 文字字體：龍蝦
• 字體樣式：粗體
• 文字字體大小：37
• 文字顏色：#002282
• 文本行高：1.7em

添加第二個文本模塊

繼續添加一個新的文本模塊，然後鍵入要在“內容”選項卡中顯示的文本。 轉到“設計”選項卡，並將以下設置應用於“文本子類別”：

• 文字方向：居中
• 文字字體：Arial
• 文字字體大小：13
• 文字顏色：#002282
• 文本行高：1.7em

添加社交媒體關注模塊

繼續，我們還要將社交媒體關注模塊添加到第一列。 在本例中，我們選擇了三個社交圖標； 臉書、推特和 Instagram。 在“內容”選項卡中添加這些社交圖標後，將“圖標”子類別中的“鏈接形狀”更改為“圓形”。

我們需要做的最後一件事是在“高級”選項卡中向該模塊添加左填充。 將以下 CSS 代碼行添加到主元素：

padding-left: 40%;

添加聯繫表單模塊

然後，我們可以轉到該行的第二列。 在該列中，我們要放置的第一件事是聯繫表單模塊。 在這個例子中，我們只選擇了兩個字段； 姓名和電子郵件。 添加聯繫表單模塊後，轉到聯繫表單模塊的設計選項卡並對錶單字段文本子類別進行以下更改：

• 表單域字體大小：15
• 表單字段文本顏色：#002282
• 表格場線高度：1.7em

在同一個選項卡中，對 Button 子類別進行以下更改：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20
• 按鈕文字顏色：#FFFFFF
• 按鈕背景顏色：#0086c4
• 按鈕邊框寬度：2
• 按鈕半徑：3

轉到高級選項卡並添加 5% 的頂部填充。

添加模糊模塊

我們需要添加到第二列的另一件事是 Blurb 模塊。 我們唯一需要這個模塊的是彈出窗口右上角的退出圖標。 在圖標列表中選擇以下圖標並將所有其他內容留空。

繼續，轉到“高級”選項卡並鍵入“關閉”作為 CSS 類。 在同一個選項卡中，將以下代碼行添加到自定義 CSS 子類別的主要元素：

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

將漸變背景應用於行

最後但並非最不重要的一點是，我們將為該行添加一些漂亮的漸變背景。 打開設置並對漸變背景選項進行以下更改：

• 第一漸變色：#FFFFFF
• 第二個漸變顏色：#0c71c3
• 漸變類型：線性
• 梯度方向：124度
• 起始位置：50%
• 結束位置：50%

單擊創建平板電腦和手機聯繫表

現在我們已經創建了桌面版本，平板電腦和手機版本會快很多。 我們用於桌面版本的大多數模塊與移動版本相同。 移動端的最終結果如下所示：

添加新標準截面

首先添加另一個標準部分。 此部分需要與我們之前創建的部分具有相同的設置。 將 'popup' 添加到 CSS 類，並將以下 CSS 代碼行添加到 Before 字段：

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

還將以下 CSS 代碼行添加到 Main Element 中：

display: none;

我們將在桌面版本的可見性子類別中禁用它，而不是在手機和平板電腦上禁用它：

添加一列行

對於手機和平板電腦彈出窗口，我們只需要一列。 對於這一行，我們不會使用自定義寬度。 但是，我們將像在桌面版本中一樣應用自定義填充； 30px 用於列的頂部、左側和右側填充。

我們還需要確保將以下 CSS 代碼行添加到自定義 CSS 子類別的主元素中：

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

克隆文本、社交媒體關注和聯繫表單模塊

我們需要做的下一件事是克隆我們用於桌面版本的第一個文本模塊以及社交媒體關注和聯繫表單模塊。 克隆它們後，將它們放置在您剛剛創建的新部分的一列行中。

在高級選項卡中克隆 Blurb 模塊和更改 CSS 代碼

您還可以克隆用於桌面版本的 Blurb 模塊，但需要對 CSS 代碼進行一些小的更改。 不要使用桌面代碼，而是使用以下代碼：

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

確保'close' CSS 類也用於 Blurb 模塊。

將漸變背景應用於行

對於移動版本，我們對行的漸變背景使用不同的設置：

• 第一漸變色：#FFFFFF
• 第二個漸變顏色：#0c71c3
• 漸變類型：線性
• 梯度方向：180度
• 起始位置：40%
• 結束位置：40%

將 jQuery 代碼添加到主題選項

對於本教程，我們需要做的最後一件事是添加 jQuery 代碼。 您可以通過主題選項或通過放置在您正在處理的頁面中的代碼模塊添加代碼。 對於這個例子，我們只是將它放在主題選項中。

為此，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 集成 > 並將以下 jQuery 代碼行粘貼到您網站的頭部：

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

結果

如果你按照帖子一步一步來，你應該能夠在桌面上獲得以下結果：

平板電腦和手機上的結果如下：

最後的想法

在這篇文章中，我們向您展示瞭如何通過點擊創建聯繫表單。 使用這種方法與訪問者取得聯繫是微妙而有效的。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論。

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

La1n/shutterstock.com 的特色圖片