如何將創意背景設計添加到 Divi 的底部頁腳欄

Divi 的底部頁腳欄是您網站的一小部分但很重要。 對於某些頁面佈局，可能需要在底部欄上添加創造性的最後潤色。

在本教程中，我將向您展示如何為 Divi 的底部頁腳欄添加自定義背景設計。 通過去除底部頁腳欄的默認背景顏色並向部分添加一些自定義邊距，您可以利用部分的設計設置來創建很酷的背景設計。

讓我們開始吧。

先睹為快

這是您可以使用本教程構建的一些示例設計的先睹為快。

在主題定制器中定制底部頁腳欄

在我們可以在底部頁腳欄後面添加自定義背景之前，我們需要擺脫正在使用的默認背景顏色。

轉到主題定制器並導航到頁腳 > 底部欄。 然後將背景顏色更改為完全透明。

您可能不會注意到預覽中的太大變化，因為底部欄後面仍然有一個頁腳背景顏色。 可以在頁腳 > 佈局下更改頁腳背景顏色，但最好將該背景顏色作為備用顏色保持活動狀態。 自定義背景將使用部分逐頁添加到底部欄。 因此，擁有此背景將確保您的底部欄內容在沒有自定義背景的頁面上具有背景。

如果您打算使用較暗的背景設計，您還可以將底部欄文本顏色和社交圖標顏色更改為白色。 這將確保內容更具可讀性。

為底部欄創建剖面背景設計

現在頁腳底部欄有一個透明的背景，我們準備設計我們的部分背景並將其放置在欄後面。

如果您還沒有，請創建一個新頁面並選擇“從頭開始構建”。 然後為節行插入一列佈局。

無需向行添加模塊，因為我們只需要用於背景設計的部分和行。

接下來，轉到行設置並添加一些間距，如下所示：

自定義邊距：0px 頂部，0px 底部
自定義填充（桌面）：頂部 80 像素，底部 80 像素
自定義填充（平板電腦）：頂部 100 像素，底部 100 像素

這個間距需要為我們的部分提供一些高度，同時保留我們將為我們的背景設計添加的部分分隔線所需的空間。

現在，轉到部分設置並按如下方式更新間距：

自定義邊距（桌面）：-55px 底部
自定義邊距（平板電腦）：-94px 底部
自定義填充：0px 頂部，0px 底部

-55px 底部邊距將底部欄拉入部分區域，以便我們添加到部分的任何設計都將位於底部欄後面。 默認情況下，桌面上的底部欄高 54 像素，平板電腦上的底部欄高約 94 像素，這就是為什麼平板電腦需要更大的負邊距。

去掉頂部和底部填充可以最大化我們稍後添加的部分分隔符所需的空間。

添加底部分隔線

接下來，將底部分隔線添加到該部分以構建頁腳內容，如下所示：

底部分隔線樣式：見截圖
分隔線顏色：#121212
分隔線高度：120 像素（桌面）、150 像素（平板電腦）、150 像素（智能手機）
分隔線水平重複：0.9x（台式機）、0.5x（平板電腦）、0.5x（智能手機）
分隔線翻轉：垂直

現在，底部欄內容（文本和社交圖標）隱藏在分隔符後面，即使分隔符排列設置在部分內容下方。 這是因為底部頁腳在技術上不是部分內容的一部分。 為了解決這個問題，我們需要向我們的部分添加一個自定義的 z-index，使其位於底部頁腳的後面。

在高級選項卡下，將以下自定義 CSS 片段添加到主元素：

z-index: 0;

現在您的頁腳欄內容將位於您的部分上方，並且您有一個漂亮的背景設計來框住您的頁腳欄。

它也可以在移動設備上很好地調整。

有了這個基本結構，你就有了一個很好的截面設計。 考慮到這一點，繼續將此部分保存到您的庫中，以便您可以使用此結構作為探索現在設計的起點。

現在您已準備好探索新設計。 您可以將底部分隔線更改為不同的樣式和顏色以創建無數的背景框架設計。您可能需要根據您選擇的分隔線樣式添加調整分隔線高度和水平重複值。

這裡有一些例子。

使用帶有自定義背景漸變的頂部分隔線

使用單個底部分隔線作為底部頁腳的背景框架設計有些限制。 但是，如果您使用頂部分隔線作為框架設計，則可以為您的部分使用自定義背景漸變。 這將為探索打開新的大門。

轉到您的部分設置並將底部分隔線樣式設置為無。 然後添加一個背景漸變作為您的部分背景。

現在您可以為您的部分添加頂部分隔線樣式以創建全新的外觀。

以下是一些僅通過更改漸變背景和分隔線樣式就可以實現的示例設計。

將分隔線與背景漸變相結合，實現多色邊框設計

現在是時候把它提升一個檔次了。 請記住，在部分和行中創建獨特的背景設計有很多可能性。 因此，對於最後一個示例，我將向您展示如何組合這些功能以創建一個完全獨特的設計。

要快速啟動此設計，請繼續使用您保存到庫中的部分，方法是在可視化構建器中單擊以添加新部分，選擇從庫中添加選項卡，然後選擇部分佈局。

將該部分添加到頁面後，我們就可以進行自定義了。

對於初學者，請轉到部分設置並更新以下內容：

背景漸變左顏色：#29c4a9
背景漸變左顏色：#2b87da

梯度方向：90度
起始位置：50%
結束位置：0%

現在添加一個頂部分隔線，如下所示：

頂部分隔線樣式：見截圖
分隔線顏色：#ffffff
分隔線高度：120 像素（桌面）、150 像素（平板電腦）、150 像素（智能手機）
分隔線水平重複：0.9x（台式機）、0.5x（平板電腦）、0.5x（智能手機）
分隔線翻轉：垂直

這些分隔線設置完全反映了底部分隔線，因此它在底部分隔線周圍創建了一個邊框。 由於分隔線本身是白色的，這給人的印像是背景漸變是底部分隔線的延伸。

現在轉到行設置並添加背景漸變，如下所示：

背景漸變左顏色：#df52ff
背景漸變左顏色：#2b87da

梯度方向：90度
起始位置：50%
結束位置：0%

要均衡背景的每個顏色段的寬度，請為該行指定 50% 的自定義寬度。

這是最終的設計！

最後的想法

為 Divi 的底部頁腳欄定制背景設計可以讓您的頁面煥然一新。 只需要對位於頁面底部的部分進行一些自定義即可。 不幸的是，該設計僅限於單個頁面，無法在整個站點範圍內應用。 這就是為什麼使用頁腳背景顏色作為後備。 但是，一旦您將該部分保存到您的庫中，您就可以輕鬆地將其拖放到您想要的任何頁面中。 您甚至可以添加到我們的任何預製佈局中，以便在您的下一個項目中使用。 您需要做的就是確保將該部分添加到頁面的最底部。 希望你會發現它很有用！

此外，您可能對使用類似技術構建導航菜單感興趣。

我期待在評論中收到您的來信。

乾杯!