如何在您的 Divi 標題中直觀地展示博客帖子類別

已發表: 2020-07-15

創建全局標題時，您很可能會包含一個博客菜單項。 如果您的網站上沒有很多博客文章類別，那麼選擇一個博客菜單項可能就足夠了。 但是，如果您有一組不同的類別並且想要突出顯示每個類別，您可能需要嘗試不同的方法，例如在下拉菜單中直觀地展示每個博客類別。

在本教程中，我們將向您展示如何使用 Divi 的主題生成器準確地做到這一點。 我們將使用 Divi 的內置元素和選項構建下拉菜單，並將其與一些允許我們將下拉菜單放置在博客菜單項中的代碼結合起來。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

下拉帖子類別

移動的

下拉帖子類別

免費下載全局標題

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

下載文件
免費下載

免費下載

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

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

如何上傳 JSON 文件

解壓縮您可以在上面下載的壓縮文件夾。 然後，導航到您的 WordPress 網站 > Divi > Divi Library 並上傳 JSON。

下拉帖子類別

下拉帖子類別

將佈局保存在 Divi 庫中後，您可以導航到 Divi 主題生成器並通過單擊“添加全局標題”或“添加自定義標題”並選擇“構建全局/自定義標題”來導入保存的佈局。 轉到 Divi 庫中的“您保存的佈局”選項卡，選擇您在上一步中上傳的佈局並保存所有 Divi Theme Builder 更改。

下拉帖子類別

下拉帖子類別

下拉帖子類別

下拉帖子類別

要立即擁有一個功能強大的菜單，您需要完成本教程下面的第一部分； 將 CSS 類添加到單個級別的菜單項。 您還需要在代碼模塊中啟用 CSS 類之一，如本教程的第 5 部分所示。

1.為博客菜單項添加CSS類

轉到外觀菜單

在本教程的第一部分，我們將向 WordPress 菜單內的博客頁面菜單項添加兩個自定義 CSS 類。 為此，請導航到 WordPress 儀表板內的菜單。

下拉帖子類別

啟用 CSS 類選項

在頁面頂部，確保啟用屏幕選項內的 CSS 類選項。

下拉帖子類別

將 CSS 類添加到博客菜單項

然後，找到您的博客菜單項並向其添加兩個 CSS 類。 確保在 CSS 類之間留出空間。

  • CSS 類：一級一級一級

下拉帖子類別

2. 使用 Divi 的 Theme Builder 創建自定義標題

轉到 Divi 主題生成器

一旦菜單項 CSS 類就位，就該切換到 Divi。 轉到 Divi Theme Builder 並選擇“添加全局/自定義標題”。

下拉帖子類別

開始構建全局標題

然後，選擇“構建全局標題”以重定向到模板編輯器。

下拉帖子類別

部分設置

背景顏色

在模板編輯器中，您會注意到一個部分。 打開該部分並應用白色背景色。

  • 背景顏色：#FFFFFF

下拉帖子類別

間距

轉到設計選項卡並刪除所有默認的頂部和底部填充。

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

下拉帖子類別

添加第 1 行

列結構

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

下拉帖子類別

漿紗

在不添加任何模塊的情況下，打開行設置並相應地修改大小設置：

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 寬度：95%
  • 最大寬度：100%

下拉帖子類別

間距

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

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

下拉帖子類別

將菜單模塊添加到行

選擇菜單

然後，添加一個菜單模塊並選擇您在本教程的第一部分中修改過的菜單。

下拉帖子類別

上傳標誌

接下來上傳徽標。

下拉帖子類別

菜單文字設置

移至設計選項卡並按如下方式修改菜單文本設置：

  • 菜單字體：Roboto Mono
  • 菜單字體樣式：大寫
  • 菜單文字顏色：#000000
  • 菜單文字大小：18px
  • 菜單字母間距：-1px

下拉帖子類別

下拉菜單設置

也更改下拉菜單行顏色。

  • 下拉菜單行顏色：#FFFFFF

下拉帖子類別

圖標設置

接下來，在圖標設置中更改漢堡菜單圖標顏色。

  • 漢堡菜單圖標顏色：#000000

下拉帖子類別

CSS 類

並通過添加 CSS 類完成模塊設置。

  • CSS 類：類別菜單

下拉帖子類別

3. 創建博客下拉設計

添加第 2 行

列結構

一旦包含菜單模塊的行就位，就可以構建包含視覺博客類別的下拉菜單。 為此，請添加具有兩個大小相同的列的新行。 整行將是博客菜單項的下拉菜單。

下拉帖子類別

背景顏色

打開行設置並使用白色背景色。

  • 背景顏色：#FFFFFF

下拉帖子類別

漿紗

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

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 均衡柱高：是
  • 寬度：80vw（桌面），100%（平板電腦和手機）
  • 最大寬度：50vw（桌面），100%（平板電腦和手機）

下拉帖子類別

間距

接下來修改填充值。

  • 頂部填充：10px
  • 底部填充：10px
  • 左填充：10px
  • 底部填充：10px

下拉帖子類別

盒子陰影

我們也使用了一個微妙的盒子陰影。

  • 框陰影模糊強度：30px
  • 陰影顏色：rgba(0,0,0,0.13)（桌面），rgba(0,0,0,0)（平板電腦和手機）

下拉帖子類別

CSS 類

然後，我們將向我們的行添加兩個 CSS 類。 這些 CSS 類（稍後結合一些代碼）將幫助我們將整個行容器作為下拉菜單放置在博客菜單項中。

  • CSS 類：下拉菜單 dropdown-menu-1

下拉帖子類別

位置

移至高級選項卡並重新定位該行。

  • 位置：絕對（桌面）、相對（平板電腦和手機）
  • 位置：右上角
  • 垂直偏移：100px（桌面），0px（平板和手機）
  • Z指數：11

下拉帖子類別

兩列主元素

最後但並非最不重要的一點是，通過向每列的主要元素添加一行 CSS 代碼來完成行設置。 這將有助於我們在較小的屏幕尺寸上保持列結構。 

width: 50% !important;

下拉帖子類別

下拉帖子類別

將文本模塊添加到第 1 列

添加類別名稱

是時候直觀地展示我們的博客類別了！ 將第一個文本模塊添加到第 1 列，並將類別標題添加到內容框。

下拉帖子類別

添加分類鏈接

接下來添加指向您的類別的鏈接。

下拉帖子類別

漸變背景

然後，應用以下漸變背景：

  • 顏色 1：RGBA(0,0,0,0.08)
  • 顏色 2：#0a0a0a
  • 起始位置：60%
  • 結束位置：60%
  • 將漸變放在背景圖像上方：是

下拉帖子類別

背景圖片

上傳您選擇的背景圖片。 如果您想要與本教程完全相同的結果，請上傳您可以在本文開頭下載的文件夾中找到的插圖之一。

  • 背景圖片尺寸：實際尺寸
  • 背景圖像重複：重複 X（水平）

下拉帖子類別

文字設置

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

  • 文字字體：Roboto Mono
  • 文字字體粗細：粗體
  • 文字顏色：#ffffff
  • 文字大小：1.9vw（桌面）、3vw（平板電腦）、3.5vw（手機）
  • 文字字母間距：-0.1vw
  • 文本行高：1em

下拉帖子類別

漿紗

接下來更改大小設置。

  • 寬度：99%
  • 模塊對齊：左

下拉帖子類別

間距

也修改間距設置。

  • 下邊距：10px
  • 右邊距：1%（平板電腦和手機）
  • 頂部填充：60%（台式機）、40%（平板電腦和手機）
  • 底部填充：4%
  • 左填充：2%

下拉帖子類別

主要元素 CSS

並通過在模塊的主要元素中添加一行 CSS 代碼來完成模塊設置。 

cursor: pointer;

下拉帖子類別

克隆文本模塊並在第 2 列中放置重複項

完成第一個文本模塊後，克隆該模塊並將副本放在第 2 列中。

下拉帖子類別

修改第 2 列中的文本模塊

更改類別名稱和鏈接

修改複製模塊中的分類標題和鏈接。

下拉帖子類別

更改背景圖像

也更改背景圖像。 您可以在下載文件夾中找到插圖。

  • 背景圖像重複：不重複

下拉帖子類別

更改尺寸

接下來在大小設置中更改模塊對齊方式。

  • 模塊對齊：右

下拉帖子類別

克隆兩個模塊一次

完成兩個模塊（每列一個）後，您可以克隆它們一次。

下拉帖子類別

更改類別名稱和鏈接

更改重複模塊內的類別名稱和鏈接。

下拉帖子類別

更改背景圖像

與背景圖像一起。 您可以在本文開頭下載的文件夾中找到新插圖。

  • 背景圖片尺寸：適合
  • 背景圖像重複：不重複

下拉帖子類別

  • 背景圖片尺寸：適合
  • 背景圖片位置：右下角

下拉帖子類別

4. 添加 CSS 和 JQuery 代碼

在第 1 行的菜單模塊下方添加代碼模塊

完成包含下拉菜單類別名稱的行後，將代碼模塊添加到部分的第一行，就在菜單模塊的正下方。

下拉帖子類別

添加 CSS 代碼

將以下 CSS 代碼行添加到代碼模塊： 

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

下拉帖子類別

添加 JQuery 代碼

與一些 JQuery coe 一起將有助於將包含類別的行放置在您的博客菜單項中。 確保將 JQuery 代碼放在腳本標籤之間，如下面的打印屏幕所示。 

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

下拉帖子類別

5. 完成自定義博客下拉項後啟用 CSS 類

一旦您完成對所有下拉項的自定義，您就剩下一件事要做：隱藏包含下拉菜單項的整行。 這與我們代碼中的加載函數相結合，將防止在加載頁面時顯示下拉菜單。 啟用此 CSS 類後，您將不會再看到 Visual Builder 中的第二行，但您將能夠在線框模式下訪問它和/或在更改下拉菜單時暫時禁用 CSS 類。 要啟用該類，請刪除 CSS 類開頭和結尾的“/* */”括號。

下拉帖子類別

6. 添加更多帖子類別下拉菜單

克隆博客類別行

如果您想添加更多類別下拉列表，您可以克隆您創建的整個下拉行。

下拉帖子類別

在圖層面板中訪問重複行

由於我們在桌面上使用絕對定位，因此行將放置在彼此的頂部。 要單獨訪問行，請打開 Divi Builder 中的圖層面板並打開重複行的設置。

下拉帖子類別

下拉帖子類別

更改重複行 CSS 類

更改重複行中的第二個 CSS 類。 確保您使用的號碼是連續的。

  • CSS 類：下拉菜單 dropdown-menu-2

下拉帖子類別

將 CSS 類添加到外觀菜單項

然後，導航回儀表板內的 WordPress 菜單，並將以下 CSS 類添加到另一個菜單項，您就完成了：

  • CSS 類：一級一級一級二級

下拉帖子類別

預覽

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

桌面

下拉帖子類別

移動的

下拉帖子類別

最後的想法

在這篇文章中，我們向您展示瞭如何通過 Divi 標題和博客菜單項獲得創意。 更具體地說，我們已經向您展示瞭如何在視覺上將博客類別包含為在所有屏幕尺寸下看起來都很棒的下拉菜單項。 這種方法將幫助您突出每個不同的博客類別，同時仍保持一目了然的最小外觀和感覺。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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