如何使用 Divi 的尺寸選項創建固定聯繫表單角落彈出窗口

已發表: 2019-07-17

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 的尺寸選項向您的頁面添加固定的聯繫表單角落彈出窗口。這種方法將幫助您設置一個聯繫表單，在訪問者訪問您網站的過程中跟踪他們，而無需額外的插件！

讓我們開始吧。

預覽

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

桌面

固定聯繫方式

移動的

固定聯繫方式

1. 上傳脊醫佈局包登陸頁面

添加新頁面

首先創建一個新頁面。為頁面命名並發布後，切換到 Visual Builder。

固定聯繫方式

上傳脊醫佈局包登陸頁面

接下來上傳脊醫佈局包登錄頁面。儘管我們將使用這種特定的佈局，但您可以使該技術在您正在處理的任何頁面上工作。

固定聯繫方式

2. 讓我們開始再創造吧！

將新部分添加到頁面底部

我們將為點擊時彈出的固定聯繫表單專門開闢一個全新的部分。將此部分添加到頁面底部。

固定聯繫方式

背景顏色

打開部分設置並使用完全透明的背景顏色。在這篇文章的後面，我們將修復整個部分。使用透明背景色將確保顯示在部分容器下方的所有內容都顯示出來。

背景顏色：rgba(255,255,255,0)

固定聯繫方式

漿紗

移至設計選項卡並更改不同屏幕尺寸的部分的寬度。

寬度：37%（桌面）、95%（平板電腦）、100%（手機）
截面對齊：右

固定聯繫方式

間距

接下來刪除默認的頂部填充。

頂部填充：0px

固定聯繫方式

CSS 類

我們還需要為我們的新部分提供一個自定義 CSS 類。在這篇文章的後面，我們將使用這個 CSS 類來添加一些 JQuery 和 CSS 代碼。

CSS 類：部分打開

固定聯繫方式

默認 Z 索引

為了確保該部分出現在所有頁面內容的頂部，我們將增加可見性設置中的部分 z 索引。

Z指數：99

固定聯繫方式

懸停 Z 索引

在懸停時也添加相同的 z 索引值。

Z指數：99

固定聯繫方式

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

固定聯繫方式

添加模糊模塊

將內容框留空

我們在這一行中需要的第一個也是唯一一個模塊是 Blurb 模塊。確保將標題和內容框留空。

固定聯繫方式

選擇圖標

接下來選擇一個圖標。

固定聯繫方式

背景顏色

也更改模糊背景顏色。

背景顏色：#FFFFFF

固定聯繫方式

圖標設置

轉到設計選項卡並應用以下圖標設置：

圖標顏色：#ff5f24
圖標位置：頂部
使用圖標字體大小：是
圖標字體大小：46px（桌面）、30px（平板電腦）、25px（手機）

固定聯繫方式

漿紗

接下來修改不同屏幕尺寸的尺寸設置。

寬度：140px（桌面）、105px（平板）、80px（手機）
模塊對齊：右

固定聯繫方式

間距

我們還將在不同的屏幕尺寸中添加一些自定義的頂部和底部填充值。

頂部填充：50 像素（桌面）、35 像素（平板電腦）、25 像素（手機）
底部填充：20px（桌面）、10px（平板電腦）、0px（手機）

固定聯繫方式

邊界

要創建圓形，我們需要為邊框設置中的每個角添加一個高值。我們正在使用“500px”。

固定聯繫方式

盒子陰影

我們還將添加一個微妙的框陰影以顯示圓形。

框陰影模糊強度：80px

固定聯繫方式

動畫片

接下來打開動畫設置，去掉圖標動畫。

圖標動畫：無動畫

固定聯繫方式

CSS 類

最後但並非最不重要的一點是，向 Blurb 模塊添加一個 CSS 類。在這篇文章的後面，我們將使用這個 CSS 類來使點擊功能工作。

CSS 類：接觸開放

固定聯繫方式

添加第 2 行

列結構

到第二排！使用以下列結構：

固定聯繫方式

背景顏色

尚未添加任何模塊，打開行設置並添加白色背景色。

背景顏色：#FFFFFF

固定聯繫方式

邊界

將“39px”邊框半徑添加到下一個角的每個角。

固定聯繫方式

盒子陰影

並通過添加一個微妙的框陰影來完成行設置。

框陰影模糊強度：80px

固定聯繫方式

添加聯繫表格

元素

我們在這一行中唯一需要的模塊是聯繫表單模塊。添加模塊後，請在元素設置中禁用驗證碼。

顯示驗證碼：否

固定聯繫方式

字段

轉到設計選項卡並更改字段設置中的字段背景顏色。

字段背景顏色：rgba(0,126,255,0.13)

固定聯繫方式

按鈕

繼續設置按鈕樣式。

為按鈕使用自定義樣式：是
按鈕文字大小：16px
按鈕文字顏色：#FFFFFF
按鈕背景顏色：#ff5f24
按鈕邊框寬度：2px
按鈕邊框顏色：rgba(0,0,0,0)
按鈕邊框半徑：0px
按鈕字體：Karla
按鈕字體粗細：粗體
按鈕頂部填充：14px
按鈕底部填充：14px
按鈕左填充：20px
按鈕右內邊距：20px

固定聯繫方式

間距

並添加一些自定義填充值。

頂部填充：30px
底部填充：30px
左填充：40px
右填充：40px

固定聯繫方式

添加代碼模塊

插入 JQuery 代碼

完成聯繫表單模塊後，就可以使用點擊功能了！將代碼模塊添加到該部分的第二行，並在腳本標記之間插入以下 JQuery 代碼行，如下面的打印屏幕所示：

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

固定聯繫方式

更改部分設置

高度

繼續打開部分設置。更改不同屏幕尺寸的高度。

高度：190px（桌面）、140px（平板）、125px（手機）

固定聯繫方式

默認主元素

將一些自定義 CSS 代碼添加到旁邊部分的主要元素，使其固定在右下角。

bottom: 0;
right: 0;
position: fixed;

固定聯繫方式

懸停主元素

確保您也將固定位置添加到懸停主元素中。

position: fixed;

固定聯繫方式

向頁面添加自定義 CSS 代碼

打開頁面設置

要完成切換效果，我們還需要向頁面添加一些 CSS 代碼。打開頁面設置。

固定聯繫方式

添加自定義 CSS

轉到高級選項卡並添加以下 CSS 代碼行：

.section-open-active {
height: auto !important;
}

固定聯繫方式

預覽

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

桌面

固定聯繫方式

移動的

固定聯繫方式

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的大小設置向您的頁面添加固定聯繫表單。您可以使這種方法適用於您正在構建的任何類型的網站。本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。如果您有任何問題或建議，請務必在下面的評論部分留言。

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