如何在您的 Divi Hero 部分無縫地包含一個滑入式列聯繫表

在考慮在頁面設計中包含 CTA 的方法時，您可能會考慮在英雄部分包含聯繫表單。 這種方法允許人們立即與您取得聯繫，而無需在您的網站上進一步瀏覽。 如果您正在尋找一種無縫方式在 Divi 中完成這項工作，那麼您會喜歡這篇文章的。 在本教程中，我們將向您展示如何僅使用 Divi 的內置選項將滑入式列聯繫表單添加到您的英雄部分。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載專欄聯繫表英雄部分佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新部分。 打開部分設置並更改背景顏色。

• 背景顏色：#ff8949

背景圖片

我們接下來將上傳作為財務顧問佈局包一部分的背景圖案。 您可以在本文開頭下載的文件夾中找到此背景圖片。

• 背景圖片尺寸：適合
• 背景圖片位置：中心

間距

轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

溢出

通過隱藏高級選項卡中的溢出來完成部分設置。 這將確保我們稍後添加的動畫不會超出部分容器。

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

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置如下：

• 均衡柱高：是
• 寬度：80%（桌面），100%（平板電腦和手機）
• 最大寬度：1380px
• 行對齊：右

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

第 1 列設置

間距

然後，打開第 1 列設置並修改不同屏幕尺寸的間距設置。

• 頂部填充：22%
• 底部填充：22%
• 左填充：10%（僅限平板電腦和手機）
• 右填充：10%（僅限平板電腦和手機）

第 2 列設置

背景顏色

接下來，我們將打開第 2 列設置並使用白色背景色。

• 背景顏色：#ffffff

動畫片

我們將通過應用以下動畫設置來完成第 2 列的設置：

• 動畫方向：左（桌面），上（平板和手機）
• 動畫持續時間：1500ms
• 動畫強度：70%
• 動畫開始不透明度：100%

將文本模塊 #1 添加到第 1 列

添加H1內容

是時候添加模塊了，從第 1 列中的第一個文本模塊開始。添加一些您選擇的 H1 內容。

H1 文本設置

轉到模塊的設計選項卡並按如下方式更改 H1 文本設置：

• 標題字體：Oswald
• 標題字體樣式：大寫
• 標題文字顏色：#ffffff
• 標題文字大小：120 像素（桌面）、70 像素（平板電腦）、60 像素（手機）

漿紗

我們也在更改模塊的大小設置。

• 寬度：75%（桌面），100%（平板電腦和手機）
• 模塊對齊：左

將文本模塊 #2 添加到第 1 列

添加說明內容

進入下一個模塊，這是另一個文本模塊。 添加一些您選擇的描述內容。

文字設置

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

• 文字字體：Open Sans
• 文字顏色：#ffffff
• 文本行高：1.9em

漿紗

也修改大小設置。

• 寬度：75%（桌面），100%（平板電腦和手機）
• 模塊對齊：左

將按鈕模塊添加到第 1 列

添加副本

我們在第 1 列中需要的最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕設置

轉到模塊的設計選項卡並按如下方式更改按鈕設置：

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#ffffff
• 按鈕邊框半徑：1px

• 按鈕字體：Oswald
• 按鈕字體樣式：大寫

將 Blurb 模塊添加到第 2 列

添加內容

進入第二列。 在那裡，我們需要的第一個模塊是 Blurb 模塊。 添加您選擇的標題。

選擇圖標

接下來，選擇一個圖標。

圖標設置

轉到模塊的設計選項卡並按如下方式更改圖標設置：

• 圖標顏色：#ffd8c6
• 圖標位置：頂部
• 圖標對齊：居中
• 使用圖標字體大小：是
• 圖標字體大小：250 像素（桌面）、150 像素（平板電腦和手機）

標題文字設置

接下來修改標題文本設置。

• 標題標題級別：H2
• 標題字體：Oswald
• 標題字體樣式：大寫
• 標題文本對齊：居中
• 標題文字顏色：#ff8949
• 標題文字大小：38px

間距

也添加一些左右填充。

• 左填充：11%
• 右填充：11%

動畫片

並通過添加以下動畫設置來完成模塊：

• 動畫方向：下
• 動畫持續時間：1100ms
• 動畫延遲：400ms
• 動畫開始不透明度：100%

將聯繫表單模塊添加到第 2 列

轉場全角

進入最後一個模塊，即聯繫表單模塊。 單獨打開姓名和電子郵件字段，並在佈局設置中將它們設為全角。

• 製作全角：是

背景顏色

然後，返回到一般聯繫表單模塊設置並添加背景顏色。

• 背景顏色：#f7f7f7

字段設置

轉到設計選項卡，然後對字段設置進行一些更改。

• 字段背景顏色：#ffffff
• 字段文本顏色：#ff8949
• 字段上邊距：15px
• 字段底部邊距：15px
• 字段頂部填充：20px
• 字段底部填充：20px

• 菲爾茲字體：Oswald
• 字段字體樣式：大寫
• 字段文本對齊方式：居中
• 字段文本大小：21px

按鈕設置

然後，相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#ff8949
• 按鈕邊框半徑：1px

• 按鈕字體：Oswald
• 按鈕字體樣式：大寫

漿紗

我們還在尺寸設置中確保寬度為“100%”。

• 寬度：100%

間距

接下來轉到間距設置並應用一些自定義填充值。

• 頂部填充：14%
• 底部填充：14%
• 左填充：12%
• 右填充：12%

動畫片

然後，使用以下動畫設置：

• 動畫風格：幻燈片
• 動畫方向：向上
• 動畫持續時間：1100ms
• 動畫延遲：400ms
• 動畫開始不透明度：100%

位置

並通過僅在桌面上重新定位模塊來完成模塊設置（和教程）：

• 位置：絕對（桌面），默認（平板電腦和手機）
• 位置：底部中心

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在您的英雄部分無縫地包含聯繫表單。 更具體地說，我們創建了一個滑入式列聯繫表單，它在所有屏幕尺寸上看起來都很棒。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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