如何使您的 Divi 頁腳具有粘性

已發表: 2017-07-03

在本教程中，我們將向您展示如何使 Divi 網站上的頁腳具有粘性。使用粘性頁腳可能是您為客戶設計網站時收到的要求之一，或者是您創建自己的網站時的需要。我們將向您展示兩種使頁腳具有粘性的可能性。第一種方式是通過 CSS 代碼，第二種方式是通過 jQuery 代碼。兩種方式都有效，但這完全取決於您更喜歡使用哪種方式來為您的網站創建粘性效果。

向您的網站添加粘性頁腳目前不是您可以在 Divi 構建器中自動執行的操作。這就是為什麼我們將向您展示如何在無需付出大量努力的情況下達到您想要的確切結果。你唯一要做的就是一步一步地按照這篇文章，複製並粘貼一些代碼行並將它們放在正確的位置。

為什麼要使用粘性頁腳？

粘性頁腳通常用於一個主要原因；如果您的網站上有一頁或多頁內容不足以填滿整個屏幕。當然，您可以確保頁面上有足夠的內容，但如果它不會為頁面帶來附加值；沒有必要這樣做。

現在，如果沒有足夠的內容來填滿整個屏幕，頁面將在內容結束後立即有一個浮動頁腳。這通常看起來不太好，也不是您想要的結果。幸運的是，您可以使用粘性頁腳來擺脫浮動頁腳。粘性頁腳確保頁腳停留在頁面底部，而不會產生不必要的空間。因此頁面的長度將保持不變，每次調整窗口大小時，頁腳都會根據屏幕進行修改。

在這裡，您有一張沒有粘性頁腳的短頁面圖像：

這是添加粘性頁腳後該頁面的相同圖像：

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

不是每個人都決定在他們的網站上使用頁腳，但當他們這樣做時；有很多方法來設計它。這完全取決於您網站的結構如何，以及您是否想要包含使用 Divi 構建器製作的“手冊”和不同樣式的頁腳。

但是，如果您使用的是標準頁腳，您可以選擇您喜歡的樣式以及您希望它在您的網站上的位置。頁腳在網站上的三個主要位置是浮動、固定和粘性。

將粘性頁腳和固定頁腳相互比較時；乍一看，它們可能看起來相同，但事實並非如此。在您的網站上滾動頁面時，固定頁腳始終可見，而粘性頁腳專門處理內容不夠長而無法到達屏幕底部的頁面。在內容不夠長的特定情況下；它會表現得像一個固定的頁腳，並停留在頁面的底部；創建“固定頁腳效果”。

但是，如果內容足夠長，粘性頁腳將像往常一樣工作，頁面會將頁腳向下推到頁面底部，以確保它不會連續出現在屏幕上。在大多數情況下，這種方法比在整個網站中使用固定頁腳更受歡迎，因為它在窗口上提供了更多空間來顯示內容。

通過 CSS 在您的 Divi 網站上創建粘性頁腳

不用再費力了，讓我們開始為您的網站創建粘性頁腳。我們將使用的代碼非常簡單，但可以完成工作。如果內容不夠長，您將快速從頁面上的浮動頁腳移動到頁腳被推到下方的頁面。

通過頁面設置添加 CSS 代碼（尤其是一頁）

在某些情況下，你想只在某個特定頁面的頁腳粘。在文章的這一部分中，我們將向您展示如何通過將 CSS 代碼添加到頁面的自定義 CSS 字段來準確地做到這一點。通過這樣做，您可以確保 CSS 代碼僅適用於您網站上的那個頁面。這也意味著只有當有人打開該特定頁面時才會加載 CSS 代碼。這種方法通常用於網站上只有幾個較短頁面要為其提供粘性頁腳的情況。

首先打開您希望粘性頁腳處於活動狀態的頁面，或者創建一個您希望它應用的新頁面。接下來，通過單擊 Divi 構建器中的以下圖標打開頁面設置：

繼續，將以下代碼添加到您剛剛打開的窗口中的自定義 CSS 字段：

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

從您預覽頁面的那一刻起，就應該應用 CSS 代碼並使頁腳具有粘性。

通過主題定制器添加 CSS 代碼（實時視圖）

添加代碼的另一種方法是通過主題定制器。如果您通過這種方式添加 CSS 代碼，它將自動應用於整個網站。每個頁面都將應用此 CSS 代碼。通過主題定制器添加代碼，您還可以直接看到您的網站發生的變化。

要將 CSS 代碼添加到主題定制器，請單擊 WordPress 網站後端的“主題定制器”。接下來，向下滾動頁面並打開附加 CSS 選項。您將看到迄今為止使用的所有自定義 CSS 代碼。繼續並添加以下代碼：

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

通過 Divi 主題選項添加 CSS 代碼

最後但並非最不重要的一點是，您還可以通過 Divi 主題選項添加代碼。這是向網站添加代碼的最常用方法，您希望整個網站都能從代碼中受益。

轉到Divi > 主題選項 > 向下滾動頁面 > 將以下 CSS 代碼添加到自定義 CSS 框中：

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

通過 JQuery 在您的 Divi 網站上創建粘性頁腳

通過代碼模塊添加jQuery代碼（尤其是一頁）

您可以使用 Divi 構建器中的代碼模塊添加 jQuery 代碼。同樣，這主要用於內容較短的頁面不多並且您不想加載整個網站的 jQuery 代碼時。

將帶有全角行的部分添加到您正在處理的頁面。

繼續向該全角行添加代碼模塊並將以下代碼粘貼到其中：

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

通過 Divi 主題選項添加 jQuery 代碼

添加 jQuery 代碼的另一種可能性是通過 Divi 主題選項。在為整個網站添加 jQuery 代碼時，我們可以在 Divi 主題選項中的一個特定位置執行此操作；在 <head> 集成選項卡的字段。這正是我們現在要添加代碼的地方。

打開您的 WordPress 網站 > 轉到 Divi > 打開主題選項 > 轉到集成選項卡並將以下 jQuery 代碼添加到您網站的 <head> 中：

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

每次更改窗口大小時，此粘性頁腳都會自行刷新，因此當您在瀏覽器中更改屏幕大小時，您不必擔心會出現另一個浮動頁腳。

最後的想法

在頁面內容不多的情況下，通常需要添加粘性頁腳。您想要擺脫浮動頁腳，以使頁面結構感覺更自然。如果您對我們博客部分的未來帖子有任何意見或建議；請確保您在下面的評論部分發表評論，以便我們與您取得聯繫！

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

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