如何使用 Divi 的粘性選項創建粘性頁腳欄

如果您正在尋找一種方法來添加 CTA，以在訪問者瀏覽您的網站時跟隨他們，您可能會考慮使用粘性頁腳欄。 瀏覽器底部使用粘性頁腳欄，您可以包含您選擇的任何號召性用語，無論是按鈕還是聯繫信息。 一旦訪問者滾動到頁面的頁腳區域，頁腳欄和頁腳設計就會合併，同時更改粘性頁腳欄的樣式。 這種美麗的美學可能會幫助您提高頁面的轉化率！ 您也可以免費下載模板 JSON 文件。

讓我們開始吧。

預覽

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

桌面

移動的

免費下載全局頁腳模板

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

下載文件

免費下載

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

下載

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

1. 創建新的頁腳模板

轉到 Divi 主題生成器並添加新的全局或自定義頁腳

首先轉到 WordPress 網站後端的 Divi Theme Builder。 在那裡，添加一個新的全局或自定義頁腳。

從頭開始構建

從頭開始構建頁腳模板。

2. 構建頁腳設計

部分設置

背景顏色

進入模板編輯器後，您會注意到一個部分。 打開該部分並應用黑色背景色。

• 背景顏色：#000000

添加第 1 行

列結構

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

背景顏色

還沒有添加模塊，打開行設置並更改背景顏色。

• 背景顏色：#ea6c01

漿紗

移至行的設計選項卡，然後更改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：90%
• 最大寬度：2580px
• 行對齊：居中

間距

在較小的屏幕尺寸上添加一些自定義的頂部和底部填充。

• 頂部填充：5px（僅限平板電腦和手機）
• 底部填充：5px（僅限平板電腦和手機）

邊界

接下來，在邊框設置中添加一些響應式圓角。

• 所有角落：
  • 桌面：30px
  • 平板電腦和手機：15px

溢出

為了確保我們可以在本教程的後面創建重疊，我們將行溢出設置為可見。

• 水平溢出：可見
• 垂直溢出：可見

第 1 列和第 3 列可見性

為了防止在較小的屏幕尺寸上顯示過多的頁腳欄項目，我們將在平板電腦和手機上隱藏我們行中的第一列和最後一列。

將 Blurb 模塊添加到第 1 列

添加內容

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

選擇圖標

接下來選擇一個圖標。

圖標設置

轉到模塊的設計選項卡並相應地設置圖標樣式：

• 圖標顏色：#f5d72e
• 圓形圖標：是
• 圓圈顏色：#000000
• 圖像/圖標放置：頂部
• 圖像/圖標對齊方式：居中
• 使用圖標字體大小：是
• 圖標字體大小：32px

文字設置

接下來，更改文本設置。

• 文本對齊：居中
• 文字顏色：淺

標題文字設置

也對標題文本設置進行一些更改。

• 標題字體: Poppins
• 標題文字顏色：#000000

正文設置

還要修改正文設置。

• 正文字體： Poppins
• 正文字體粗細：超粗體
• 正文文字大小：20px

漿紗

接下來在大小設置中將內容寬度設置為“100%”。

• 內容寬度：100%

間距

要創建重疊，請在間距設置中添加一些負上邊距。

• 上邊距：-60px

動畫片

並通過去除動畫設置中的圖標動畫來完成模塊設置。

• 圖像/圖標動畫：無動畫

克隆 Blurb 模塊並在第 3 列中放置重複項

完成第 1 列中的第一個 Blurb 模塊後，將其克隆一次並將副本放置在第 3 列中。

更改內容和圖標

更改副本的內容和圖標。

將 Blurb 模塊添加到第 2 列

選擇圖標

接下來，將新的 Blurb 模塊添加到第 2 列。將內容框留空並選擇您選擇的圖標。

背景顏色

接下來添加背景顏色。

• 背景顏色：#000000

圖標設置

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

• 圖標顏色：#ffffff
• 圖像/圖標放置：頂部
• 圖像/圖標對齊方式：居中
• 使用圖標字體大小：是
• 圖標字體大小：30px

漿紗

接下來對大小設置進行一些更改。

• 寬度：70px
• 模塊對齊：居中
• 高度：40px

間距

然後，在不同的屏幕尺寸上應用自定義邊距和填充值。

• 上邊距：-20px（僅限平板電腦和手機）
• 頂部填充：5px
• 底部填充：0px

邊界

接下來，在邊框設置中添加一些圓角。

• 所有角：10px

動畫片

並刪除動畫設置中的默認動畫。

• 圖像/圖標動畫：無動畫

將文本模塊添加到第 2 列

添加內容

我們在這一行中需要的下一個也是最後一個模塊是第 2 列中的文本模塊。添加一些您選擇的內容。

文字設置

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

• 文字字體粗細：半粗體
• 文字大小：18px
• 文本行高：1.8em
• 文本對齊：居中

添加第 2 行

列結構

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

漿紗

在不添加模塊的情況下，打開行設置，轉到設計選項卡並更改大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 最大寬度：2580px

間距

接下來添加一些頂部和底部邊距。

• 上邊距：50px
• 下邊距：50px

將圖像模塊添加到第 1 列

上傳圖片

將圖像模塊添加到第 1 列並上傳您的徽標或您選擇的任何類型的圖像。

漿紗

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

• 寬度：59%
• 模塊對齊：左

將文本模塊添加到第 2 列

添加H3內容

接下來，使用您選擇的一些 H3 內容將文本模塊添加到第 2 列。

H3 文本設置

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

• 標題 3 字體：Poppins
• 標題 3 字體粗細：粗體
• 標題 3 文本顏色：#6d6d6d

克隆文本模塊 3x 並分佈在第 3 和第 4 列

完成此文本模塊後，您可以克隆 3 次並將重複項分佈在行的剩餘兩列中。

更改內容

確保更改每個重複文本模塊中的內容。

將文本模塊添加到第 2 列

添加內容

在第 2 列中前一個文本模塊的正下方添加另一個文本模塊，並添加一些您選擇的鏈接內容。

文字設置

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

• 文字字體： Poppins
• 文字大小：30px
• 文本行高：1em
• 文本對齊方式：左
• 文字顏色：淺

鏈接文字設置

也更改鏈接文本顏色。

• 鏈接文字顏色：#ffffff

根據需要克隆文本模塊

完成文本模塊後，您可以根據需要將其克隆多次。

更改內容

確保更改每個重複模塊中的內容和鏈接。

將文本模塊添加到第 3 列

添加內容

然後，將另一個文本模塊添加到第 3 列。添加一些您選擇的鏈接內容。

文字設置

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

• 文字字體： Poppins
• 文字大小：22px
• 文本行高：1em
• 文本對齊方式：左
• 文字顏色：淺

鏈接文字設置

也修改鏈接文本顏色。

• 鏈接文字顏色：#ea6c01

根據需要克隆文本模塊

根據需要多次克隆此模塊。

更改內容

當然，根據需要更改內容和鏈接。

將文本模塊添加到第 4 列

添加內容

在第 4 列中，我們將在第一個文本模塊下方添加另一個文本模塊。 添加一些您選擇的內容。

文字設置

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

• 文字字體： Poppins
• 文字大小：16px
• 文本行高：1.8em
• 文本對齊方式：左
• 文字顏色：淺

將社交媒體關注添加到第 4 列

添加選擇的社交網絡

然後，在列的末尾添加社交媒體關注模塊。 添加您選擇的社交網絡。

單獨刪除每個社交網絡的背景顏色

單獨刪除每個社交網絡的背景顏色。

間距

返回常規模塊設置，轉到間距設置並添加一些自定義邊距值。

• 上邊距：-15px
• 左邊距：-8px

添加第 3 行

列結構

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

漿紗

在不添加模塊的情況下，打開行設置，轉到設計選項卡並按如下方式更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 均衡柱高：是
• 最大寬度：2580px

將文本模塊添加到第 1 列

添加內容

然後，將文本模塊添加到第 1 列。插入您選擇的一些內容。

文字設置

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

• 文字字體： Poppins
• 文字顏色：#595959
• 文字大小：13px
• 文本對齊：居中

鏈接文字設置

也修改鏈接文本顏色。

• 鏈接文字顏色：#595959

克隆文本模塊兩次並在剩餘列中放置重複項

完成第 1 列中的模塊後，您可以將其克隆兩次並將重複項放置在該行的其餘兩列中。

更改文本對齊方式

相應地更改每個重複文本模塊的文本對齊方式：

• 第 2 列中的文本模塊：
  • 桌面：中心
  • 平板電腦和手機：左

• 第 3 列中的文本模塊：
  • 桌面：右
  • 平板電腦和手機：左

更改內容

並更改兩個重複模塊中的內容。

3. 對頁腳欄應用粘性效果

打開第 1 行並應用粘性設置

現在我們的設計基礎已經到位，是時候應用粘性效果了。 打開該部分的第一行，轉到高級選項卡並應用以下粘性設置：

• 粘性位置：粘在底部
• 粘性底部偏移：
  • 桌面：50px
  • 平板電腦和手機：20px

行粘滯樣式

背景顏色

現在我們已經將行設置為粘性，我們可以將粘性樣式應用於行及其所有子元素。 首先向第 1 行添加粘性背景色。

• 粘性背景顏色：#000000

將粘性樣式應用於第 1 列和第 3 列中的模糊模塊

圖標設置

接下來，打開第 1 列和第 3 列中的 Blurb 模塊並添加粘性圓圈顏色。

• 粘性圓圈顏色：#ea6c01

標題文字設置

也添加粘性標題文本顏色。

• 粘性標題文字顏色：#ea6c01

將粘性樣式應用於第 2 列中的 Blurb 模塊

背景顏色

然後，打開第 2 列中的 Blurb 模塊並應用粘性背景顏色。

• 粘性背景顏色：#ea6c01

4. 保存所有模板和主題生成器更改

完成粘性步驟後，請確保在您的網站上查看結果之前保存您的模板和主題構建器更改！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們已經向您展示瞭如何構建一個粘性頁腳欄，一旦人們向下滾動他們所在的頁面，它就會與主頁腳區域合併。 您還可以免費下載模板 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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