如何修復你的 Divi 頁腳

已發表: 2017-07-11

在今天的 Divi 教程中，我們將向您展示如何為您的網站創建固定頁腳而不是普通頁腳。在上一篇文章中，我們向您展示瞭如何使其具有粘性，這實際上與使其固定不同，儘管它們起初看起來是一樣的。如果你不想讓它變得粘人而是固定，這篇文章將幫助你。

添加固定到您網站的頁腳可能是您來自一位客戶的請求，也可能是您對自己網站的需求。儘管它不像固定標題那樣經常使用，但它可能是您正在努力解決的問題之一。我們將向您展示如何在 Divi 網站上使頁腳具有粘性的兩種方法。第一個將使用一些 CSS 行，第二個將使用 jQuery 代碼。這兩種方式都會對您網站上頁腳的 CSS 樣式表進行修改。

這裡有一個滾動時固定頁腳的示例：

何時使用固定頁腳

您希望在網站上使用固定頁腳的原因有多種。這些原因之一可能是頁腳所含信息的相關性。例如，您可以將社交圖標放在頁腳中，因為您想鼓勵網站上的訪問者探索您的社交媒體渠道。另一個原因可能是您只是喜歡它給您的網站帶來的效果。

如果您使用固定頁腳，您應該知道訪問者窗口的一部分將一直被佔用。這意味著如果沒有固定的頁腳，他們需要滾動更多才能看到相同的內容。這是一個挑戰，因為訪問者喜歡盡可能少地付出努力。

但是，如果您的頁腳不是那麼大，則可能會增加頁腳中正在執行的操作數量。我們不鼓勵同時使用固定的頁眉、主菜單和頁腳。通過將所有三個固定，顯示的內容將大大減少，從而導致更高的跳出率。

固定頁腳和粘性頁腳的區別

在開始之前，我們將解釋固定頁腳和粘性頁腳之間的區別。

粘性頁腳通常更複雜一些。如果頁面沒有足夠的內容將頁腳推到屏幕底部，它就會表現得像一個固定的頁腳。在頁面足夠長的情況下，頁腳將表現得像普通頁腳一樣，會被向下推到頁面底部，而不是屏幕底部。

讓我們開始吧

訂閱我們的 YouTube 頻道

我們將立即開始，向您展示如何通過兩種方式將固定頁腳添加到您的網站；通過 CSS 代碼和 jQuery 代碼。兩種方法都有效，但這完全取決於您更喜歡在需要它的網站上使用哪種方法。

通過 CSS 添加固定頁腳

創建固定頁腳的第一個也是最簡單的方法是添加一些 CSS 行。使用 Divi Builder 和 WordPress，我們可以在不同的地方添加這些行。讓我們來看看它們。

通過自定義 CSS 為一頁添加 CSS 代碼

添加 CSS 代碼的第一種方法是將其添加到一個頁面。儘管最好為您網站上的每個頁面設置相同的固定頁腳（以在您的網站上保持一致），但您也可以選擇讓它特別適用於一個頁面。

打開要添加 CSS 代碼行的頁面，然後單擊 Divi Builder 的以下按鈕。

向下滾動並將以下代碼添加到自定義 CSS 字段：

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

通過主題定制器添加 CSS 代碼

添加代碼的另一種方法是通過主題定制器。通過使用主題定制器，您將在您的網站上實時觀察結果。您通過主題定制器添加的代碼適用於您網站上的所有頁面。

轉到您網站上的主題優化器 > 附加 CSS > 粘貼以下 CSS 代碼行：

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

通過主題選項添加 CSS 代碼

將 CSS 代碼添加到網站的最後一種方法是通過主題選項。當您在主題選項的自定義 CSS 字段中添加代碼時，該代碼也將應用於整個網站。這是將自定義 CSS 代碼添加到整個 Divi 網站的最常用方法。

轉到Divi > 主題選項 > 常規 > 向下滾動並將以下代碼添加到自定義 CSS 字段：

#main-footer{ 
position: fixed; 
bottom: 0; 
width: 100%; 
}

通過jQuery添加固定頁腳

另一種可能性是通過一些 jQuery 代碼行更改 CSS。當您使用固定頁腳時，您通常希望確保它適用於您網站上的所有頁面。這種一致性使您的訪問者可以更輕鬆地瀏覽您的網站而不會感到困惑。

特別是通過代碼模塊為一頁添加jQuery代碼

打開要應用固定頁腳的頁面，然後在頁面頂部添加一個新的標準部分。接下來，選擇一個全角行並向其中添加一個代碼模塊。打開代碼模塊並在內容框中粘貼以下 jQuery 代碼：

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

通過在特定頁面上的代碼模塊添加 jQuery 代碼，代碼將僅適用於該頁面。您網站的其餘部分將有一個普通的頁腳，而您使用代碼模塊的網站將有一個固定的頁腳。

通過主題選項添加 jQuery 代碼

添加使頁腳固定的 jQuery 代碼的最後一個選項是通過主題選項。代碼行將立即應用於您的整個網站，並將提供您的網站所需的一致性。

轉到Divi > 主題選項 > 集成 > 並將以下代碼行粘貼到您網站的 <head> 中：

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

最後的想法

我們在之前的一篇文章中向您展示瞭如何製作粘性頁腳。這篇文章特別處理瞭如何為您的網站製作固定頁腳。在訪問您的網站時，固定頁腳將始終保留在訪問者屏幕的底部。如果您有任何問題或建議，請務必在下面的評論部分留下評論，以便我們與您取得聯繫！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

特色圖片由 Zeeker2526/shutterstock.com 提供