如何使用 Divi 的 Theme Builder 自動向所有頁面添加底部頁面聯繫表單

當您忙於設置要包含在網站上的所有頁面時，您很有可能希望在每個頁面的末尾包含一個聯繫表格，以使訪問者的旅程更輕鬆。 使用 Divi，您當然可以向頁面本身添加聯繫表單，但如果您希望簡化流程，那也是可能的。 在今天的 Divi 教程中，我們將向您展示如何一次自動向所有頁面添加底部頁面聯繫表單。 我們還將自動添加一個帶有錨鏈接的固定右下角圖標，該圖標會自動將人們重定向到他們所在頁面的聯繫部分。 您也可以免費下載頁面模板！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載頁面模板

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

下載文件

免費下載

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

下載

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

教程概述

• 使用您選擇的佈局包在您的網站上設置頁面
• 設置頁面設計風格後，您可以在底部頁面聯繫表單中重複使用該設計風格
• 要添加底部頁面聯繫表單，您首先需要創建一個專用於所有頁面的新模板
• 創建模板後，您可以開始使用 Divi 的可視化構建器構建模板的主體
• 為了確保所有獨特的頁面內容都顯示在每個頁面上，我們將添加帖子內容模塊
• 帖子內容模塊包含您的整個動態頁面設計
• 在帖子內容模塊下方，我們將為我們的聯繫表單添加另一個部分
• 我們將設計聯繫表單並確保向該部分添加唯一的 CSS ID，我們將使用此 CSS ID 創建一個錨鏈接
• 獎勵：我們將在每個頁面的右下角添加一個固定圖標，並將該圖標鏈接到該特定頁面的聯繫部分

1. 使用 Layout Pack of Choice 設置網站頁面

我們採用的方法適用於您構建的任何類型的網站。 但是對於這個特定的教程，我們使用的是 Magazine Layout Pack 的設計風格。 如果您在任何其他網站上使用這種方法，請隨時根據您的需要調整設計。

2.轉到Divi Theme Builder並添加新頁面模板

轉到 Divi 主題生成器並添加新頁面模板

轉到您網站上的 Divi Theme Builder。 在那裡，添加一個新模板。

如果您希望底部頁​​面的聯繫表單出現在所有頁面上，請在所有頁面上使用此新模板。 您也可以讓它出現在特定頁面上和/或從某些頁面中排除它。

• 用於：所有頁面

開始構建模板主體

創建新模板後，您可以開始構建自定義主體。

3. 將頁面內容添加到模板正文

部分設置

間距

在模板編輯器中，您會注意到一個部分。 打開該部分並刪除所有默認的頂部和底部填充。

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

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並允許行佔據部分容器的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

也刪除所有行的默認頂部和底部填充。

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

將帖子內容模塊添加到列

繼續將 Post Content Module 添加到您行的列中。 此模塊代表您創建的所有動態頁面內容。

4. 將底部聯繫表添加到模板正文

添加新部分

漸變背景

在包含發佈內容模塊的部分下方，我們將添加另一個常規部分。 本節將專門介紹聯繫表格。 打開部分設置並添加漸變背景。

• 顏色 1：#ffffff
• 顏色 2：#ffc077
• 起始位置：50%
• 結束位置：50%

CSS ID

還包括一個 CSS ID。

• CSS ID：聯繫方式

添加新行

列結構

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

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

添加 H2 內容

第一列中我們需要的第一個模塊是文本模塊。 輸入您選擇的一些內容。

H2 文本設置

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

• 標題 2 字體：蒙特塞拉特
• 標題 2 字體粗細：粗體
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：70 像素（桌面）、48 像素（平板電腦）、36 像素（手機）
• 標題 2 行高：1.2em

漿紗

還要添加最大寬度。

• 最大寬度：750px

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

添加內容

使用您選擇的一些內容將另一個文本模塊添加到第 1 列。

文字設置

更改模塊的文本設置如下：

• 文字字體：Cardo
• 文字字體粗細：粗體
• 文字顏色：rgba(0,0,0,0.03)
• 文字大小：150 像素（桌面）、100 像素（平板電腦）、60 像素（手機）
• 文本行高：1em

間距

並在不同的屏幕尺寸之間調整間距設置。

• 上邊距：-0.8em（桌面）、-100px（平板）、-80px（手機）
• 左邊距：-0.8em（桌面和平板電腦），-60px（手機）

將聯繫表格添加到第 2 列

添加所有需要的字段

在第二列中，我們需要的唯一模塊是聯繫表單模塊。 根據需要添加任意數量的字段，並將您的電子郵件帳戶鏈接到模塊。

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

繼續將姓名和電子郵件地址字段全寬。

• 製作全角：是

字段設置

返回一般聯繫表單設置並更改字段背景顏色。

• 字段背景顏色：#ffffff

按鈕設置

接下來修改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：14px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000（默認），#ff2a38（懸停）
• 按鈕邊框寬度：8px

• 按鈕邊框顏色：rgba(0,0,0,0)
• 按鈕邊框半徑：0px
• 按鈕字母間距：2px
• 按鈕字體粗細：超粗
• 按鈕字體樣式：大寫
• 按鈕圖標：在列表中查找

邊界

也添加一些邊界半徑。

• 所有角：5px

盒子陰影

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

• 框陰影模糊強度：50px
• 框陰影擴散強度：-4px
• 陰影顏色：rgba(0,0,0,0.08)

獎勵：將固定的右下角錨圖標添加到模板正文

添加新部分

間距

現在，要將右下角的固定圖標添加到每個頁面，我們需要添加另一個常規部分。 打開該部分並刪除所有默認的頂部和底部填充。

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

Z索引

也增加部分的 z 索引。 這將確保圖標將保留在所有頁面內容的頂部。

• Z指數：99999

添加新行

列結構

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

漿紗

打開行設置並允許該行佔據該部分的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

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

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

將 Blurb 模塊添加到列

將標題和內容框留空

為了顯示右下角的圖標，我們將使用一個 Blurb 模塊。 確保將標題和內容框留空。

選擇圖標

然後，選擇您選擇的圖標。

關聯

通過將 ID 添加到模塊鏈接 URL，將圖標鏈接到聯繫人部分。

• 模塊鏈接網址：#contact

背景顏色

也更改模塊的背景顏色。

• 背景顏色：#ffc077

圖標設置

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

• 圖標顏色：#ffffff
• 圖像/圖標放置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：30px

漿紗

還要修改模塊的大小設置。

• 寬度：100px
• 模塊對齊：右

間距

並添加一些自定義的頂部和底部填充。

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

邊界

然後，轉到邊框設置並添加一些圓角。

• 所有角落：100px

盒子陰影

還要添加一個框陰影。

• 框陰影模糊強度：50px
• 框陰影擴散強度：-15px
• 陰影顏色：rgba(0,0,0,0.23)

主要元素 CSS

為了使圖標固定，我們將在高級選項卡中將三行 CSS 代碼應用於模塊的主要元素。

bottom: 20px;
right: 20px;
position: fixed;

模糊圖像 CSS

並刪除模塊的圖像默認底部填充。

margin-bottom: 0px;

6. 保存所有主題生成器更改和預覽結果

完成頁面模板的主體後，您可以保存所有更改，退出主題生成器並查看所有頁面上的結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何一次向所有頁面添加底部頁面聯繫表單。 為了實現這一點，我們設置了一個新的頁面模板，包括發佈內容模塊並在模板末尾添加了一個聯繫部分。 我們還包含了一個固定的右下角圖標，帶有一個錨鏈接，可​​以將訪問者重定向到他們所在頁面的聯繫部分。 您還可以免費下載頁面模板 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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