如何將帖子類別菜單小部件添加到您的 Divi 全局頁腳

當您在 Divi 的 Theme Builder 中構建自定義頁腳時，有多種方法可以添加頁腳項目。 您可以選擇基於模塊的頁腳，在文本模塊中添加帶有適當鏈接的頁腳項，但您也可以決定使用 Divi 的側邊欄模塊將不同的頁腳小部件添加到您的設計中，並使用 Divi 的內置樣式設置它們的樣式選項。 在今天的教程中，我們將向您展示如何進行第二個選項。 更具體地說，我們將向您展示如何將帖子類別菜單小部件添加到頁腳。 我們使用的設計風格與 Food Recipes Layout Pack 完美匹配。 我們將首先向我們的網站添加不同的帖子類別。 然後我們將在 WordPress 中構建頁腳菜單。 接下來，我們將創建我們的小部件，最後但並非最不重要的一點是，我們將小部件添加到我們在 Divi Theme Builder 內定制的 Divi 頁腳中。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載全局頁腳模板

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

下載文件

免費下載

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

下載

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

1. 為您的網站設置帖子類別

轉到您的帖子類別

在本教程的第一部分中，我們將確保在開始將它們添加到自定義頁腳菜單之前設置所有帖子類別。 為此，請導航到 WordPress 後端中的帖子類別。

設置您選擇的帖子類別結構

如果您還沒有這樣做，請設置要包含在頁腳中的所有不同帖子類別。 對於本教程，我們將需要三個不同的帖子類別組，因為我們將在自定義頁腳中包含三個不同的帖子類別菜單小部件。

2.創建幾個類別的WordPress菜單

前往菜單

接下來，我們將為每組帖子類別創建一個單獨的菜單。 導航到 WordPress 網站外觀設置中的菜單。

創建頁腳菜單

添加第一個頁腳菜單並為其指定一個可識別的名稱。

• 菜單名稱：頁腳菜單#1

添加帖子類別

將您的第一組帖子類別添加到這個新菜單中。

為其他帖子類別創建第二和第三頁腳菜單

對另外兩個帖子類別組執行相同的操作。

• 菜單名稱：頁腳菜單#2

• 菜單名稱：頁腳菜單 #3

3. 創建頁腳小部件

轉到小部件

現在我們已經有了我們的帖子類別和帖子類別菜單，我們可以將它們放在我們的頁腳區域小部件中。 為此，請導航到 WordPress 後端中的小部件。

將頁腳菜單 #1 添加到頁腳區域 #1

在那裡，將第一個導航菜單小部件添加到頁腳區域 #1。 在導航菜單中，選擇您在本教程的前一部分中創建的第一個頁腳菜單。

將頁腳菜單 #2 添加到頁腳區域 #2

將第二個帖子類別菜單放在第二個頁腳區域。

將頁腳菜單 #3 添加到頁腳區域 #3

以及第三頁腳區域中的第三頁腳菜單。

將最近的帖子添加到頁腳區域 #4

我們需要的最後一個小部件，我們將添加到第四個頁腳區域，是最近的帖子小部件。 此小部件將動態顯示您最近發布的 5 個帖子作為鏈接。

3.在Divi Theme Builder中構建全局頁腳

轉到您的 Divi 主題生成器並開始構建頁腳模板

現在我們的帖子類別、帖子類別菜單和小部件都已就位，是時候切換到 Divi 了！ 轉到您的 Divi Theme Builder 並開始構建全局或自定義頁腳。

部分設置

背景顏色

進入頁腳模板後，您會注意到一個部分。 打開該部分並為其添加背景顏色。 我們在整個設計中使用的樣式與 Food Recipes Layout Pack 完美匹配，但該方法適用於您選擇的任何類型的設計。

• 背景顏色：#ff7864

背景圖片

接下來添加背景圖像。 如果您想使用與本教程中完全相同的內容，可以在本教程開頭可以下載的文件夾中找到它。

• 背景圖片尺寸：適合

間距

轉到該部分的設計選項卡，然後刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加第 1 行

列結構

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

漸變背景

尚未添加任何模塊，打開行設置並應用漸變背景。

• 顏色 1：RGBA(10,10,10,0.05)
• 顏色 2：RGBA(10,10,10,0.18)

漿紗

移動到行的設計選項卡並修改大小設置如下：

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

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

第 1 列設置

間距

然後，打開第 1 列設置並在設計選項卡中添加一些自定義填充值。

• 頂部填充：5%
• 底部填充：5%
• 左填充：5%
• 右填充：5%

邊界

我們也在桌面上使用右邊框。

• 右邊框寬度：
  • 桌面：2px
  • 平板電腦和手機：0px
• 右邊框顏色：#ff7864

第 2 列設置

間距

接下來，打開第 2 列設置並對其應用以下填充值：

• 頂部填充：5%
• 底部填充：5%
• 左填充：5%
• 右填充：5%

將圖像模塊添加到第 1 列

上傳標誌

是時候添加模塊了，從第 1 列中的圖像模塊開始。上傳您選擇的徽標並根據需要對其進行樣式設置。

將文本模塊添加到第 2 列

添加 H2 內容

在第二列中，我們添加了一個帶有一些描述性 H2 內容的文本模塊。

H2 文本設置

轉到設計選項卡並相應地更改 H2 文本設置：

• 標題 2 字體：Cormorant Garamond
• 標題 2 字體粗細：中等
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：
  • 台式機和平板電腦：40px
  • 電話：35px
• 標題 2 行高：1.3em

添加第 2 行

列結構

進入下一行。 在這一行中，我們將放置所有小部件。 選擇以下列結構：

背景顏色

尚未添加任何模塊，打開行設置並應用背景顏色。

• 背景顏色：RGBA(10,10,10,0.05)

漿紗

轉到設計選項卡並按如下方式更改尺寸設置：

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

間距

刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

所有列間距

然後，單獨打開列並將以下填充值應用於其中的每一列：

• 頂部填充：5%
• 底部填充：5%
• 左填充：5%
• 右填充：5%

第 1 列邊框

接下來，我們將為第 1 列添加邊框。

• 右邊框寬度：
  • 台式機和平板電腦：2px
  • 電話：0px
• 右邊框顏色：#ff7864

第 2 列邊框

我們對第二列使用相同的邊框，但具有一些不同的響應值。

• 右邊框寬度：
  • 桌面：2px
  • 手機和平板電腦：0px
• 右邊框顏色：#ff7864

第 3 列邊框

最後但並非最不重要的一點是，我們還將為第三列添加一個右邊框。

• 右邊框寬度：
  • 台式機和平板電腦：2px
  • 電話：0px
• 右邊框顏色：#ff7864

將側邊欄模塊添加到第 1 列

是時候添加我們的帖子類別菜單小部件了！ 為此，我們將使用 Divi 的內置側邊欄模塊。 將一個添加到行的第一列。

選擇頁腳區域 #1

選擇第一個頁腳區域。 這與我們創建的第一個帖子類別菜單相關聯。

• 小部件區域：頁腳區域 #1

佈局

轉到模塊的設計選項卡並禁用邊框分隔符。

• 顯示邊框分隔符：否

正文設置

還要修改正文設置。

• 正文字體：蒙特塞拉特
• 正文字體重量：中等
• 正文顏色：#ffffff
• 正文文字大小：13px

間距

並通過在間距設置中添加一些頂部和底部填充來完成模塊設置。

• 頂部填充：5%
• 底部填充：5%

克隆側邊欄模塊兩次並在第 2 列和第 3 列中放置重複項

完成第一個側邊欄模塊後，您可以將其克隆兩次並將重複項放置在第 2 列和第 3 列中。

更改頁腳區域

修改每個副本的小部件區域以顯示您創建的不同帖子類別菜單。

• 小部件區域：頁腳區域 #2

• 小部件區域：頁腳區域 #3

將側邊欄模塊添加到第 4 列

現在，在最後一欄中，我們添加了一個新的側邊欄模塊。

選擇頁腳區域 #4

在這個模塊中，我們選擇我們創建的包含我們最近發布的第四個頁腳區域。

• 小部件區域：頁腳區域 #4

標題文字設置

轉到模塊的設計選項卡並修改標題文本設置，如下所示：

• 標題字體：鸕鶿 Garamond
• 標題文字顏色：#ffffff
• 標題文字大小：30px

正文設置

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

• 正文字體：蒙特塞拉特
• 正文字體重量：中等
• 正文顏色：#dddddd
• 正文文字大小：13px

間距

並通過向模塊的間距設置添加一些自定義頂部和底部填充來完成模塊設置和本教程。 就是這樣！ 在您的網站上查看結果之前，請確保保存所有 Divi Theme Builder 更改。

• 頂部填充：5%
• 底部填充：5%

預覽

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

桌面

移動的

最後的想法

在本教程中，我們向您展示瞭如何將 Divi Theme Builder 與 WordPress 頁腳小部件和 Divi Sidebar Module 結合使用。 更具體地說，我們向您展示瞭如何將帖子類別菜單小部件添加到您的全局頁腳，以使您的訪問者的導航旅程更輕鬆。 這種方法將幫助您使用 Divi 的內置選項設置頁腳項目的樣式，同時將頁腳菜單和小部件保留在您的 WordPress 後端中。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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