如何在 Divi 中為您的博客模板添加粘性類別菜單

已發表: 2019-11-09

類別菜單是任何博客的一個令人愉快的補充。 它們讓博主有機會展示不同類型的可用主題，以便讀者可以快速輕鬆地找到他們關心的東西。 因此，重要的是您在網站中所有與博客相關的模板上都有一個精心設計的類別菜單。

在本教程中，我們將向您展示如何使用 Divi 的 Theme Builder 向您的博客添加粘性類別菜單。 我們將介紹如何使用 Divi Builder 創建粘性類別菜單，以及如何將類別菜單添加到網站上構成博客的不同模板中。

讓我們開始吧。

搶先看

這是添加到帖子模板的粘性類別菜單

這是移動設備上底部的粘性類別菜單。

這是類別頁面模板上的類別菜單。

這是一個快速簡便的博客模板，我們將使用從帖子滑塊下方開始並在滾動時粘在頁面頂部的粘性類別菜單創建。

免費下載模板

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

下載文件
免費下載

免費下載

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

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

要將佈局導入您的頁面，只需提取 zip 文件並使用 Theme Builder Portability 選項將 json 文件之一添加到 Divi Theme Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要執行以下操作：

  1. 如果您還沒有安裝並激活 Divi 主題。
  2. 下載 Theme Builder Pack #6 以開始新設計。

之後，您就可以開始了。

訂閱我們的 YouTube 頻道

將粘性二級類別菜單添加到您的博客模板

上傳主題生成器包 #6

在本教程中，我們將使用 Theme Builder Pack #6。 從博客文章下載包後，轉到 WordPress 儀表板並導航到 Divi > Theme Builder。

然後單擊右上角的便攜性圖標。 在可移植性彈出窗口中，選擇導入選項卡並選擇 Divi-Theme-Builder-Pack-6-All.json 文件。 然後單擊“導入 Divi 主題生成器模板”按鈕。

這會將所有模板導入主題生成器。

現在我們準備開始創建我們的類別菜單。

在 WordPress 中創建一個新的類別菜單

可以像 WordPress 中的普通菜單一樣創建類別菜單。 從 WordPress 儀表板，導航到外觀 > 菜單。 單擊創建新菜單鏈接，為菜單命名，然後單擊“創建菜單”按鈕。

在菜單項下，打開類別切換按鈕並選擇要添加到菜單中的所有類別/頁面。 確保已經為類別項目創建了類別以顯示在類別切換中。 類別菜單項將重定向到特定帖子類別的類別頁面。

在帖子模板的正文區域設計一個粘性類別菜單。

創建類別菜單後，就該設計我們的類別菜單了。 為此，我們需要將其添加到其中一個模板的主體區域。 我們最終會將類別菜單添加到與博客相關的其他模板中，但現在，讓我們將其添加到所有帖子的模板（或帖子模板）中。

打開身體區域模板佈局編輯器

在主題生成器界面中，找到已分配給“所有帖子”的模板，然後單擊自定義正文區域上的編輯圖標。

將新的節和行添加到模板的頂部

在模板佈局編輯器中，創建一個具有一列行的新部分，並將其拖動到佈局的最頂部。

自定義部分

在添加模塊之前，打開部分設置並給它一個背景和一些填充，如下所示：

  • 背景顏色：#f92c8b
  • 填充：1vw 頂部，1vw 底部

自定義行

接下來，按如下方式更新行設置：

  • 背景漸變左顏色：#f92c8b
  • 背景漸變右顏色：#ffd625
  • 梯度方向：90度
  • 填充：0px 頂部，0px 底部
  • 圓角：20px

添加菜單模塊

在單列行內，添加一個新的菜單模塊。

然後，從下拉菜單中選擇您之前創建的類別菜單。 選擇後，您的菜單項將出現在菜單中。

設計菜單模塊以匹配模板

刪除默認背景色，以便顯示行背景色。

更新以下設計設置：

  • 風格：居中
  • 菜單字體：Ubuntu
  • 菜單字體粗細：粗體
  • 菜單字體樣式：TT（大寫）
  • 菜單文字顏色：#ffffff
  • 菜單字母間距：2px
  • 菜單行高：2em
  • 下拉菜單背景顏色：#ffffff
  • 下拉菜單行顏色：#f92c8b

  • 下拉菜單文本顏色：#222222
  • 移動菜單文本顏色：#222222
  • 漢堡菜單圖標顏色：#ffffff
  • 漢堡菜單圖標字體：40px
  • 寬度：90%
  • 模塊對齊：居中

部分和行可見性

為了防止任何菜單下拉菜單被隱藏，我們需要確保並將我們的部分和行的可見性設置為可見。 另外，我們還需要給 z 索引一個較高的數字，以保持整個菜單順序高於頁面上的所有其他內容。 這將需要最大化移動下拉菜單和粘性菜單的可見性。

打開部分設置並更新以下內容：

  • 水平溢出：可見
  • 垂直溢出：可見
  • Z 指數：999

打開行設置並更新以下內容：

  • 水平溢出：可見
  • 垂直溢出：可見

使部分（包含菜單）具有粘性

這當然是可選的，但要創建粘性類別菜單，請打開部分設置並將以下自定義 CSS 添加到主元素： 

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

複製部分以創建底部類別菜單

為了在移動設備上獲得更好的用戶體驗，我們可以創建另一個位於頁面底部的類別菜單。 要創建菜單，只需複制包含剛剛創建的菜單的部分。

優化手機底部粘性菜單

使用底部定位更新粘性 CSS。

由於我們只需要這個菜單“粘”在移動設備上，打開部分設置並刪除桌面的自定義 CSS。 然後在平板電腦選項卡下添加以下自定義 CSS。 

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

更改底部類別菜單的下拉菜單方向

由於菜單將位於移動設備屏幕的底部，因此更改下拉菜單的方向：

  • 下拉菜單方向：向上

添加“類別”菜單標籤

要在移動菜單圖標旁邊添加標籤，請在菜單設置的高級選項卡下，將以下自定義 CSS 添加到 Before 元素： 

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

這是目前為止在移動設備上的菜單外觀。

在移動設備上隱藏頂部菜單

為避免移動設備上的標題過於擁擠，請禁用手機和平板電腦上的頂部菜單。 這只會顯示桌面上的頂部粘性菜單。

將兩個菜單/行保存到 Divi 庫。

我們已完成為佈局創建兩個類別菜單。 為了便於將它們添加到其他模板，我們可以將它們保存到我們的 Divi 庫中。 要保存頂部菜單，請從部分菜單中選擇“添加到庫”圖標。 然後為佈局命名並單擊“保存到庫”按鈕。

重複相同的過程以將底部菜單也保存到庫中。 只要確保並給它起一個你會記住的名字。

博客帖子模板的最終結果

讓我們看看使用我們新的粘性類別菜單的實時帖子是什麼樣的。

桌面視圖（頂部菜單）

移動視圖（底部菜單）

將粘性二級分類菜單添加到分類頁面模板

由於我們已將菜單部分添加到 Divi 庫中，因此我們可以將它們添加到任何模板佈局中。 我們要添加類別菜單的下一個模板是類別頁面模板。

編輯分類頁面模板的正文區域

找到分配給“所有類別頁面”的模板，然後單擊自定義正文區域上的編輯圖標。

從庫中添加頂級類別菜單

在模板佈局編輯器中，單擊藍色加號圖標以添加新部分。 然後選擇從庫選項卡添加並從列表中選擇頂級類別菜單。

然後將該部分移動到模板佈局的頂部。

從庫中添加底部類別菜單

接下來，單擊以在佈局的最底部添加一個新部分。 然後從庫中添加底部類別菜單。

更新菜單的活動鏈接顏色

對於此模板，最好更新活動鏈接顏色，因為菜單項將使用此模板保存指向類別頁面的鏈接。 打開頂部菜單設置並更新以下內容：

  • 活動鏈接顏色：#4160fd

現在，當您訪問類別頁面時，活動鏈接將顯示為藍色。

分類頁面模板的最終結果

將粘性類別菜單添加到博客頁面模板

我們還可以將我們的粘性類別菜單添加到我們網站的博客頁面。 博客頁面基本上是您博客的主頁，通常顯示您所有博客文章的提要。 使用 Divi Theme Builder，我們可以為博客頁面創建模板並輕鬆添加類別菜單。

創建博客模板

首先，複製類別頁面模板。

然後將重複的模板分配給博客。

編輯博客模板的自定義正文。

自定義博客模板佈局

使用模板佈局編輯器設計博客模板。 現在，讓我們在頁面頂部給它一個漂亮的全角帖子滑塊。 為此，請創建一個新的全角部分。

添加全角帖子滑塊

然後將全寬 Post Slider 模塊添加到該部分。

設置內容以拉取“當前頁面的帖子”。 然後將確保它為博客頁面提取正確的動態內容。

更新全角帖子滑塊設置如下：

  • 標題字體：Ubuntu
  • 標題字體粗細：中等
  • 正文字體：Ubuntu

在帖子滑塊下移動菜單

對於此佈局，讓我們將帖子滑塊拖動到頁面頂部，以便頂部粘性類別菜單位於滑塊下方。

創建和分配帖子（或博客）頁面

確保您在 WordPress 中指定了一個博客頁面。 為此，請轉到“設置”>“閱讀”。 然後對於主頁顯示，選擇一個靜態頁面。 然後選擇要用於“帖子”頁面的頁面。

博客頁面模板的最終結果

請注意類別菜單在到達頁面頂部時如何變得粘滯。

最後的想法

粘性類別菜單確實可以將您的博客提升到一個新的水平。 構建一個實際上只是使用 Divi Builder。 並且主題生成器使您可以輕鬆地在站點上的任何位置添加菜單。 此外，您甚至可以為移動設備製作單獨的粘性菜單，為您的用戶提供最佳體驗。 希望這會在您自己的博客或下一個項目中派上用場。

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

乾杯!