如何使用 Divi 創建頁腳展示

已發表: 2017-07-28

在今天的 Divi 教程中，我們將向您展示如何達到某種效果，您可能從未想過將其集成到您自己的網站或客戶的網站中。更確切地說; 我們將向您展示如何創建頁腳顯示。頁腳顯示基本上等到您到達頁面末尾並根據您滾動的方式顯示頁腳。一旦您一直滾動頁面，頁腳將以其原始形式顯示。

向您的網站添加頁腳顯示可以為您的網站頁腳帶來額外的小觸感。這也是人們滾動瀏覽您網站上的任何頁面時看到的最後一件事。為了向您展示頁腳顯示的確切含義，讓我們看一下最終結果：

頁腳顯示

您可以看到，除了使頁腳顯露外，我們還為我們網站的主要內容添加了一些微妙的陰影。通過這樣做，我們在主要內容和頁腳之間創建了一種視角。

如何使用 Divi 創建頁腳展示

訂閱我們的 YouTube 頻道

添加所需的 CSS 代碼

為了實現頁腳顯示結果，我們首先需要一些 CSS 代碼行。由於將 CSS 代碼添加到 Divi 網站的方法有多種，因此我們將向您展示所有三種方法。首先，我們將向您展示如何將代碼添加到主題選項。其次，我們將通過 Theme Customizer 添加代碼。通過兩種方法之一添加代碼，您的頁腳顯示將立即應用於整個網站。另一方面，如果您想讓代碼特別適用於一個頁面，您也可以這樣做。通過向您展示如何將代碼添加到您正在處理的頁面，您可以專門為一個頁面創建該效果。

我們在代碼中需要的兩個主要內容是 z-index 和主要內容的邊距底部。為了確保頁腳完美貼合，我們需要知道頁腳的高度。通常，正在使用的頁腳的值為 53px。但是，您可能已經根據需要更改了高度。在向您展示如何標準地添加頁腳顯示後，我們還將向您展示如何使其適合任何頁腳的高度。

通過主題選項添加所需的 CSS 代碼

我們將向您展示如何添加 CSS 代碼的第一種方法是通過 Divi 主題選項。這是向您的網站添加任何其他 CSS 代碼的最常用方法。通過在該區域添加 CSS 代碼，您將立即使其適用於整個網站。

要添加代碼，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 並將以下 CSS 代碼行複制粘貼到選項卡底部的自定義 CSS 字段中：

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

添加代碼後，轉到您的網站並觀看頁腳顯示的工作。

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

將 CSS 代碼添加到 Divi 網站的另一種方法是通過主題定制器。通過 Theme Customizer 或 Theme Options 添加代碼是一樣的。在主題選項中刪除代碼後，它也會在主題定制器中刪除，反之亦然。通過 Theme Customizer 添加代碼的優勢之一是您可以實時看到所有發生的事情。因此，您對代碼所做的額外調整將立即讓您清楚地了解您將獲得的最終結果。

要將代碼添加到主題定制器，請轉到您的WordPress 儀表板 > 外觀 > 自定義 > 向下滾動到“附加 CSS” > 並添加以下 CSS 代碼行：

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

僅將所需的 CSS 代碼添加到一頁

添加頁腳顯示 CSS 代碼行的最後一種方法是將其添加到特定的頁面。例如，如果您想為交互內容較少的頁面提供一些附加值，這可能會很有趣。通過添加頁腳顯示，您仍然會以某種方式使頁面更具交互性，並且您會將重點放在頁腳中提供的內容上，例如社交媒體圖標。

要將 CSS 代碼添加到特定頁面，請打開該特定頁面。在該頁面上 Divi Builder 的右上角，您將看到以下圖標。

單擊該圖標並將以下代碼行粘貼到自定義 CSS 字段中：

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

保存設置後，您將看到頁腳顯示特別出現在該頁面上。

更改頁腳高度

現在，我們上面解釋的方法僅對提供的標準頁腳計數。一旦您處理另一個高度，代碼將無法正常工作。我們已經考慮到了這一點，我們將向您展示如何使頁腳顯示為其他高度。

在任何時候，您都可以選擇要分配給頁腳的高度。我們必須為兩個 CSS ID 設置高度：主頁腳和頁腳底部。通過調整這兩個位置的高度，頁腳將適合到位。當然，一旦你這樣做了，你還必須更改主要內容的頁邊距底部。例如，如果您想要一個高度為 60px 的頁腳，您將需要以下代碼行：

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

您可以看到我們需要 '60px' 值的三個地方。如果您想為頁腳指定另一個高度值，請確保在所有三個位置都進行更改；主要內容，主要頁腳和頁腳底部。

添加 CSS 框陰影

您可以為網站添加一點透視和交互的另一件事是在主要內容中添加一些框陰影。頁腳已經表明它位於主要內容的“下方”。添加框陰影后，您將強調這一點。通過有陰影，主要內容和頁腳之間的高度錯覺距離會顯得更大。

要將框陰影添加到頁腳顯示中，請使用以下代碼行：

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

就是這樣！您的頁腳顯示現在應該可以正常工作。

最後的想法

在今天的帖子中，我們向您展示瞭如何在您的網站上創建頁腳顯示效果。確保使用提供的自定義 CSS 代碼來創建效果並確保它適合頁腳的高度。如果您想為其提供額外的視角，我們建議將框陰影添加到主要內容中，如上一步所示。如果您有任何問題或建議；確保您在下面的評論部分發表評論！

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

特色圖片來自 Demja/shutterstock.com