設計 Divi 聯繫表單模塊的 5 種獨特方式
已發表: 2018-11-05聯繫表格是許多網站的重要組成部分。 他們的主要目的是直觀並幫助訪問者輕鬆取得聯繫。 但這並不意味著所有的聯繫表單都應該以特定的和預定義的方式呈現。 您可以輕鬆地將直觀體驗與精美設計相結合。 這正是我們在這篇文章中要做的。 我們將分享 5 個獨特的 Divi 聯繫表單模塊設計，您只能使用 Divi 的內置選項構建它們。
讓我們開始吧！
Divi 聯繫表單模塊設計預覽
桌面
讓我們先來看看桌面上的 Divi 聯繫表單模塊設計。
移動的
這就是 Divi 聯繫表單模塊設計在較小屏幕尺寸上的樣子：
設計 Divi 聯繫表單模塊的 5 種獨特方式
訂閱我們的 YouTube 頻道
創建聯繫表 #1
添加新部分
漸變背景
讓我們從第一個例子開始吧！ 添加一個新部分，轉到背景設置並添加漸變背景。
- 顏色 1：#4c00ff
- 顏色 2：#ffd400
- 漸變類型：徑向
- 徑向：左下
- 起始位置：34%
- 結束位置：34%
間距
然後，轉到間距設置並添加一些自定義填充值。
- 頂部填充：200px
- 底部填充：200px
添加新行
列結構
使用以下列結構添加新行：
第 1 列背景顏色
尚未添加任何模塊，打開行設置並添加第 1 列漸變背景。
- 第 1 列背景顏色：rgba(255,255,255,0.55)
第 1 列背景圖像
還將背景圖像添加到第一列。
- 第 1 列背景圖像重複：無重複
- 第 1 列背景圖像混合：屏幕
第 2 列背景顏色
和第二列的白色背景顏色。
- 第 2 列背景顏色：#ffffff
漿紗
接下來更改大小設置。
- 均衡柱高：是
間距
也刪除所有默認的自定義填充。
- 頂部填充：0px
- 底部填充：0px
列邊界半徑
向高級選項卡中的兩列添加一些邊框半徑。
border-radius: 10px;
將文本模塊添加到第 1 列
添加內容
是時候開始添加各種模塊了！ 將文本模塊添加到具有一些選擇內容的第一列。
文字設置
然後，轉到文本設置並進行一些更改。
- 文字字體：滿意
- 文字顏色：#333333
- 文字大小：100px
- 文本行高：1em
- 文字方向：居中
間距
添加一些自定義填充值。
- 頂部填充：600px
- 底部填充：100px
盒子陰影
要增加設計的深度，請使用微妙的框陰影。
- 框陰影模糊強度：80px
- 框陰影擴散強度：-16px
- 陰影顏色：rgba(0,0,0,0.3)
將圖像模塊添加到第 2 列
上傳PNG圖片
繼續向第二列添加圖像模塊。 上傳所選的 PNG 圖像。
漿紗
更改此模塊的大小設置。
- 寬度：25%（桌面）、50%（平板）、60%（手機）
- 模塊對齊：居中
間距
通過使用一些負上邊距創建重疊。
- 最高利潤率：-60%
將文本模塊 #1 添加到第 2 列
添加內容
在圖像模塊的正下方，添加一個包含一些內容的文本模塊。
文字設置
更改此模塊的文本設置。
- 文字字體：滿足
- 文字顏色：#333333
- 文字大小：44px
- 文字方向：居中
將文本模塊 #2 添加到第 2 列
添加內容
接下來添加另一個文本模塊。
文字設置
也更改此模塊的文本設置。
- 文字字體：Arial
- 文字顏色：#ffd400
- 文字大小：18px
- 文字字母間距：2px
- 文字方向：居中
間距
接下來添加一些底部邊距。
- 下邊距：100px
將聯繫表單模塊添加到第 2 列
在姓名和電子郵件字段上啟用“製作全角”選項
需要的最後一個模塊是聯繫表單模塊。 在執行任何其他操作之前，請打開姓名和電子郵件字段並更改佈局。
- 製作全角：是
添加主題字段
為了創建此設計，我們為該主題添加了另一個字段。
元素
接下來禁用驗證碼選項。
- 顯示驗證碼：否
表單域文本設置
對此聯繫表單模塊的表單域文本設置進行一些更改。
- 表單字段背景顏色：rgba(255,255,255,0)
- 表單域字體：Arial
- 表單域字體粗細：輕
- 表單域文本大小：16px
- 表單字段字母間距：2px
按鈕設置
我們也在修改按鈕外觀。
- 為按鈕使用自定義樣式：是
- 按鈕文字顏色：#ffd400
- 按鈕邊框寬度：0px
- 按鈕字母間距：2px
- 按鈕字體：Arial
- 字體樣式：下劃線
- 下劃線顏色：#4c00ff
間距
接下來添加一些自定義填充值。
- 底部填充：100px
- 左填充：50px
- 右填充：50px
邊界
並為每個字段添加一個微妙的底部邊框。
- 底部邊框寬度：2px
- 底部邊框顏色：#efefef
單個字段間距
最後但並非最不重要的一點是，為除消息字段之外的每個字段添加一些底部邊距。
- 下邊距：20px
創建聯繫表 #2
添加新部分
漸變背景
繼續下一個例子！ 添加具有漸變背景的新部分。
- 顏色 1：#562fef
- 顏色 2：#ffffff
- 漸變類型：線性
- 起始位置：50%
- 結束位置：50%
間距
在本節的間距設置中添加一些自定義填充值。
- 頂部填充：200px
- 底部填充：200px
添加新行
列結構
使用以下列結構添加新行：
背景顏色
尚未添加任何模塊，打開行設置並為該行添加背景顏色。
- 背景顏色：#ffffff
第 2 列漸變背景
將漸變背景添加到下一行的第二列。
- 顏色 1：#9932ff
- 顏色 2：#562fef
- 第 2 列梯度類型：線性
- 第 2 列梯度方向：160 度
漿紗
還要更改行的大小設置。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
間距
然後，添加一些自定義間距值。
- 頂部填充：0px
- 底部填充：0px
- 第 1 列頂部填充：100px
- 第 1 列底部填充：50px
- 第 1 列左填充：50px
- 第 1 列右填充：50px
- 第 2 列頂部填充：100px
- 第 2 列底部填充：100px
- 第 2 列左填充：50px
- 第 2 列右填充：50px
邊界
將“20px”添加到行的每個邊框。
盒子陰影
最後，為該行添加一個微妙的框陰影。
- 框陰影模糊強度：45px
- 框陰影擴散強度：-11px
- 陰影顏色：rgba(0,0,0,0.3)
將文本模塊添加到第 1 列
添加內容
是時候開始添加模塊了！ 從第一列中的文本模塊開始。
文字設置
更改此模塊的文本設置。
- 文字字體粗細：超粗
- 文本字體樣式：大寫
- 文字顏色：#562fef
- 文字 Suze：100 像素（桌面）、80 像素（平板電腦）、60 像素（手機）
- 文字字母間距：-10px
- 文本行高：1em
間距
添加一些底部邊距。
- 下邊距：50px
將聯繫表單模塊添加到第 1 列
元素
我們在第一列中需要的第二個模塊是聯繫表單模塊。 添加模塊後，禁用“顯示驗證碼”選項。
- 顯示驗證碼：否
表單域文本設置
接下來更改表單域的背景顏色。
- 表單字段背景顏色：#ffffff
按鈕設置
還可以使用按鈕設置來創建一個圖標按鈕而不是包含文本的按鈕。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：73px
- 底部文字顏色：rgba(0,0,0,0)
- 懸停按鈕背景顏色：rgba(255,255,255,0)
- 按鈕邊框寬度：0px
- 按鈕圖標顏色：#9932ff
- 僅在懸停按鈕時顯示圖標：否
盒子陰影
最後，為每個字段添加一個微妙的框陰影。
- 框陰影模糊強度：36px
- 框陰影模糊強度：-14px
- 陰影顏色：rgba(0,0,0,0.3)
將文本模塊添加到第 2 列
添加內容
我們在第二列中需要的第一個模塊是另一個文本模塊。
文字設置
添加內容後，更改此模塊的文本設置。
- 文字字體粗細：超粗
- 文字顏色：#ffffff
- 文字大小：23px
- 文字字母間距：-1px
將 Blurb 模塊 #1 添加到第 2 列
添加內容
我們需要的第二個模塊是 Blurb 模塊。 繼續並輸入一些聯繫信息。
選擇圖標
然後，選擇一個匹配的圖標。
圖標設置
更改此圖標的設置。
- 圖標顏色：#ffffff
- 圖標位置：左
標題文字設置
接下來繼續對標題文本設置進行一些更改。
- 標題文字大小：15px
- 標題字母間距：-0.5px
間距
並添加一些上邊距。
- 上邊距：120px
克隆 Blurb 模塊兩次
完成第一個 Blurb 模塊的修改後，您可以繼續克隆該模塊兩次。
更改兩個副本的內容和圖標
更改兩個副本的內容和圖標以與訪問者共享不同類型的聯繫信息。
更改兩個副本的間距
兩個副本的上邊距也需要更改。
- 上邊距：30px
創建聯繫表 #3
添加新部分
背景顏色
繼續第三個例子！ 添加具有以下背景顏色的新部分：
- 背景顏色：#3491CE
間距
繼續在間距設置中添加一些自定義填充值。
- 頂部填充：200px
- 底部填充：200px
添加第 1 行
列結構
然後，使用以下列結構添加新行：
添加文本模塊
添加內容
是時候開始添加模塊了！ 我們需要添加到第一列的第一個模塊是文本模塊。 輸入一些選擇的內容。
文字設置
然後，更改文本設置。
- 文字字體粗細：超粗
- 文字顏色：rgba(255,255,255,0.24)
- 文字大小：100px（桌面）、86px（平板）、60px（手機）
- 文本行高：1em
- 文字方向：居中
間距
還要添加一些負底邊距。
- 下邊距：-100px
添加第 2 行
列結構
我們需要完成此示例的第二行包含以下列結構：
漸變背景
尚未添加任何模塊，打開行設置並添加漸變背景。
- 顏色 1：#11CE84
- 顏色 2：#10C77F
- 漸變類型：線性
- 漸變方向：160度
- 起始位置：50%
- 結束位置：50%
漿紗
還要更改大小設置。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
間距
接下來添加一些自定義填充值。
- 頂部填充：150px
- 底部填充：100px
- 左填充：50px
- 右填充：50px
邊界
然後，轉到邊框設置並為每個角添加“20px”。 也使用底部邊框。
- 底部邊框寬度：10px
- 底部邊框顏色：#1ba35a
盒子陰影
通過添加微妙的框陰影來完成行設置。
- 框陰影模糊強度：80px
- 框陰影傳播強度：-24px
- 陰影顏色：rgba(0,0,0,0.3)
將聯繫表單模塊添加到第 1 列
在姓名和電子郵件字段上啟用“製作全角”選項
我們在行的第一列中需要的第一個模塊是聯繫表單模塊。 打開姓名和電子郵件字段並更改佈局設置。
- 製作全角：是
元素
接下來禁用驗證碼。
- 顯示驗證碼：否
按鈕設置
並更改按鈕設置。
- 為按鈕使用自定義樣式：是
- 按鈕文字顏色：#ffffff
- 顏色 1：#3AA0E3
- 顏色 2：#3491CE
- 漸變類型：線性
- 梯度方向：155deg
- 起始位置：50%
- 結束位置：50%
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：10px
- 框陰影擴散強度：-2px
- 陰影顏色：#0a60af
邊界
我們還為每個字段添加了“5px”的圓角。
將文本模塊添加到第 2 列
添加內容
在第二列中，我們需要的第一個模塊是文本模塊。 繼續輸入一些內容。
背景顏色
然後，更改背景顏色。
- 背景顏色：rgba(255,255,255,0.13)
文字設置
也可以使用文本設置。
- 文字字體粗細：輕
- 文字顏色：#ffffff
- 文字大小：15px
- 文字字母間距：-0.5px
間距
並添加一些自定義填充來為模塊提供呼吸空間。
- 頂部填充：12px
- 底部填充：12px
- 左填充：10px
- 右填充：10px
邊界
我們還在左上角和左下角添加了“20px”。 最重要的是，我們將添加一個左邊框。
- 左邊框寬度：34px
- 左邊框顏色：#edf000
能見度
為了使此設計匹配不同的屏幕尺寸，我們將禁用手機和平板電腦上的文本模塊。
克隆文本模塊兩次
完成第一個文本模塊的修改後，繼續克隆該模塊兩次。
更改兩個副本的內容
將兩個副本的內容更改為其他內容。
更改兩個副本的間距
並添加一些頂部邊距以在每個模塊之間創建空間。
- 上邊距：20px
更改兩個副本的邊框
最後但並非最不重要的一點是，單獨更改每個副本的左邊框顏色。
- 顏色 1：#00faff
- 顏色 2：#00f76f
創建聯繫表 #4
添加新部分
背景顏色
繼續第四個例子！ 使用以下背景顏色添加新部分：
- 背景顏色：#FFBABD
間距
刪除此部分的默認填充。
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續使用以下列結構添加新行：
漸變背景
尚未添加任何模塊，打開行設置並添加漸變背景。
- 顏色 1：#ffffff
- 顏色 2：rgba(41,196,169,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：38%
- 結束位置：38%
漿紗
接下來更改大小設置。
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
並添加一些自定義填充。
- 頂部填充：160px
- 底部填充：160px
添加文本模塊
添加內容
我們需要的第一個模塊是文本模塊。 繼續輸入一些內容。
文字設置
相應地更改文本設置：
- 文字字體：Abril Fatface
- 文字顏色：#640076
- 文字大小：45px（桌面）、34px（平板電腦）、20px（手機）
- 文本行高：1em
- 文字方向：居中
間距
接下來添加一些自定義間距值。
- 上邊距：300px
- 頂部填充：50px
- 底部填充：50px
添加聯繫表單模塊
在姓名和電子郵件字段上啟用“製作全角”選項
我們需要的第二個也是最後一個模塊是聯繫表單模塊。 打開姓名和電子郵件字段並更改佈局設置。
- 製作全角：是
元素
然後，禁用元素設置中的驗證碼選項。
- 顯示驗證碼：否
表單域文本設置
還要對錶單字段文本設置進行一些更改。
- 表單字段背景顏色：#fff6f6
- 表單字段文本顏色：#ff7c7c
按鈕設置
使用以下設置將按鈕更改為圖標按鈕：
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：88px
- 按鈕文字顏色：rgba(255,255,255,0)
- 懸停按鈕背景顏色：rgba(255,255,255,0)
- 按鈕邊框寬度：0px
- 按鈕圖標顏色：#e60085
- 僅在懸停按鈕時顯示圖標：是
漿紗
並調整大小值以使設計匹配所有屏幕尺寸。
- 寬度：42%（桌面）、50%（平板）、77%（手機）
- 模塊對齊：居中
間距
繼續向模塊添加一些自定義間距值。
- 下邊距：200px
- 左填充：50px
- 右填充：50px
邊界
並在每個角上添加“10px”。
按鈕邊距
最後但並非最不重要的一點是，使用高級選項卡中的以下 CSS 代碼行將圖標按鈕推到右側：
margin-right: -100px;
創建聯繫表 #5
添加新部分
漸變背景
繼續最後一個例子！ 添加具有以下漸變背景的新部分：
- 顏色 1：#4bf2d0
- 顏色 2：#ffffff
- 漸變類型：徑向
- 徑向：左
- 起始位置：36%
- 結束位置：36%
間距
然後，轉到間距設置並添加一些自定義填充。
- 頂部填充：250px
- 底部填充：250px
添加新行
列結構
完成修改部分設置後，使用以下列結構添加新行：
背景顏色
尚未添加任何模塊，打開行設置並添加背景顏色。
- 背景顏色：#ffffff
第 1 列背景顏色
向第一列添加另一種背景顏色。
- 第 1 列背景顏色：#f9f9f9
漿紗
然後，更改行的大小設置。
- 使用自定義寬度：是
- 單位：PX
- 自定義寬度：1730px
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
間距
並添加一些自定義間距值以匹配所有屏幕尺寸。
- 頂部填充：0px
- 底部填充：0px
- 第 1 列頂部填充：200 像素（桌面）、0 像素（平板電腦和手機）
- 第 1 列底部填充：150 像素（桌面）、0 像素（平板電腦和手機）
- 第 1 列左填充：50px
- 第 1 列右填充：50px
- 第 2 列頂部填充：200 像素（桌面）、100 像素（平板電腦和手機）
- 第 2 列底部填充：150 像素、100 像素（平板電腦和手機）
盒子陰影
您需要在行設置中做的最後一件事是添加一個微妙的框陰影。
- 框陰影模糊強度：56px
- 框陰影傳播強度：-17px
- 陰影顏色：rgba(0,0,0,0.3)
將文本模塊添加到第 1 列
添加內容
是時候開始添加模塊了！ 將文本模塊添加到第一列。
文字設置
添加內容後，轉到文本設置並進行一些更改。
- 文字字體：Cambay
- 文字顏色：#000000
- 文字大小：26px
- 文字字母間距：-0.5px
- 文字方向：右
間距
添加一些上邊距。
- 上邊距：60px
能見度
並在手機和平板電腦上隱藏模塊。
克隆文本模塊兩次
更改兩個副本的內容
完成第一個文本模塊的修改後，繼續克隆該模塊兩次。 更改兩個副本的內容。
更改兩個副本的間距
還要修改兩個重複項的上邊距。
- 上邊距：80px
將聯繫表單模塊添加到第 2 列
在姓名和電子郵件字段上啟用“製作全角”選項
我們在第二列中唯一需要的模塊是聯繫表單模塊。 打開姓名和電子郵件字段並更改佈局設置。
- 製作全角：是
元素
接下來禁用驗證碼選項。
- 顯示驗證碼：是
表單域文本設置
然後，轉到表單字段文本設置並進行一些修改。
- 表單字段背景顏色：rgba(255,255,255,0)
- 表單字段字體：Cambay
按鈕設置
並使用以下按鈕設置創建一個獨特的按鈕：
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：64px（桌面）、50px（平板電腦）、40px（手機）
- 按鈕文字顏色：#000000
- 顏色 1：#4bf2d0
- 顏色 2：rgba(41,196,169,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：25%
- 結束位置：25%
- 按鈕邊框寬度：0px
- 僅在懸停按鈕時顯示按鈕：否
間距
也為這個模塊添加一些上邊距。
- 上邊距：50px
邊界
並為每個字段使用一個微妙的底部邊框。
- 底部邊框寬度：0.5px
- 底部邊框顏色：#000000
單個字段間距
最後但並非最不重要的一點是，將以下底部邊距分別添加到每個字段中，您就完成了！
- 下邊距：50px
預覽
桌面
現在我們已經完成了所有步驟，讓我們最後看看桌面上的 Divi 聯繫表單模塊設計。
移動的
這就是您可以從較小屏幕尺寸的 Divi 聯繫表單模塊設計中獲得的期望：
最後的想法
在這篇文章中，我們分享了 5 個漂亮的 Divi 聯繫表單模塊設計，您可以輕鬆地為您創建的任何網站使用和修改它們。 聯繫表格是許多網站的重要組成部分，因此確保您的設計說服訪問者取得聯繫非常重要。 如果您有任何問題或建議，請務必在下方評論區留言！