• 主頁
  • 文章
  • 主題
  • 如何向自定義 Divi 標題中的菜單項添加“新”或“特色”角標籤

如何向自定義 Divi 標題中的菜單項添加“新”或“特色”角標籤

已發表: 2020-06-24

在構建網站標題時，特別注意訪問者的行為有助於提高點擊率。 您的標題不僅應該看起來不錯，而且還應該有助於引導訪問者訪問您網站上最重要的頁面。 一種常用的技術是在全局標頭中添加號召性用語，但這並不是唯一的選擇。 您還可以選擇要放在聚光燈下的菜單項上的角標籤。 在本教程中，我們將向您展示如何向特定菜單項添加“特色”或“新”標籤。 這些角落標籤將有助於強調列表中的菜單項，這會增加您的訪問者的好奇心和點擊率。 您還可以下載全局標題模板！

讓我們開始吧。

預覽

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

角標

免費下載全局標題模板

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

下載文件
免費下載

免費下載

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

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

1. 為 WordPress 菜單項添加標籤

轉到外觀菜單

本教程的第一部分致力於在 WordPress 菜單中設置標籤。 為此，請導航到您的 WordPress 儀表板 > 菜單 > 打開您正在使用的主菜單或創建一個新菜單。

角標

為特色菜單項添加標籤

接下來，我們將通過將標籤 HTML 標籤放置在菜單項前面，向我們選擇的菜單項添加特色標籤。 

  • <label class="menu-label featured-label">Featured</label>

    服務

角標

將標籤添加到新菜單項

我們將對我們選擇的另一個菜單項執行相同的操作，並更改標籤內的 CSS 類以及標籤副本。 

  • <label class="menu-label new-label">New</label>

    免費課程

角標

2.轉到Divi Theme Builder

轉到 Divi 主題生成器並添加全局標題

現在標籤已經設置好，是時候切換到 Divi 了。 導航到您網站的 Divi Theme Builder，然後單擊“添加全局標題”。

角標

從頭開始構建

然後，選擇“Build Global Header”以重定向到模板編輯器。

角標

3. 構建全局標題

部分設置

背景顏色

進入模板編輯器後，您會注意到一個部分。 打開該部分並添加背景顏色。 我們將構建的頁眉設計與 Tutor Layout Pack 相得益彰，但您可以隨意創建您想要的任何頁眉設計，只要您在其中包含代碼模塊（稍後）。

  • 背景顏色：#2a3749

角標

間距

轉到該部分的設計選項卡並刪除間距設置中的所有默認頂部和底部填充。

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

角標

能見度

由於我們將添加到行中的重疊（正如您在預覽中所注意到的），我們需要將部分的溢出設置為可見。

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

角標

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

角標

背景顏色

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

  • 背景顏色：#FFFFFF

角標

漿紗

轉到設計選項卡並相應地修改尺寸設置：

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1

角標

間距

我們也會將一些自定義填充值應用於間距設置。

  • 頂部填充：25px
  • 底部填充：25px
  • 左填充：50px
  • 右填充：50px

角標

邊界

還有一些圓角。

  • 所有角：6px

角標

盒子陰影

還有一個微妙的盒子陰影。

  • 框陰影垂直位置：16px
  • 陰影顏色：rgba(0,0,0,0.07)

角標

轉換 翻譯

接下來，我們將使用設計選項卡中的變換轉換設置重新定位行。

  • 變換 向右平移：50px

角標

溢出

為了確保我們的下拉菜單出現在較小的屏幕尺寸上，我們將通過將溢出設置為可見來完成行設置。

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

角標

將菜單模塊添加到列

選擇菜單

是時候添加菜單模塊了。 選擇您在本教程第一部分中編輯過的菜單。

角標

上傳標誌

接下來上傳徽標。

角標

菜單文字設置

然後，轉到設計選項卡並按如下方式更改菜單文本設置：

  • 菜單字體：PT Sans
  • 菜單文字顏色：#000000
  • 菜單文字大小：16px
  • 文本對齊：右

角標

下拉菜單設置

也修改下拉菜單行顏色。

  • 下拉菜單行顏色：#007aff

角標

圖標

繼續更改圖標設置中的漢堡菜單圖標顏色。

  • 漢堡菜單圖標顏色：#007aff

角標

漿紗

並通過為大小設置分配徽標最大寬度來完成模塊設置。

  • 徽標最大寬度：40%

角標

將代碼模塊添加到列

完成菜單模塊的整體外觀後，繼續在其下方添加代碼模塊。

角標

添加 CSS 代碼

以下 CSS 代碼將幫助我們單獨設置菜單標籤的樣式並創建響應式設計： 

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

角標

4. 保存所有主題生成器更改並預覽結果

完成標題設計後，請確保在您的網站上查看結果之前保存所有 Divi Theme Builder 更改！

角標

角標

預覽

現在我們已經完成了所有步驟，讓我們快速瀏覽一下不同屏幕尺寸的結果。

角標

最後的想法

在這篇文章中，我們向您展示瞭如何突出顯示 Divi 構建的全局標題中的特定菜單項。 更具體地說，我們在 WordPress 菜單中包含了角標籤，這些標籤顯示在菜單模塊中。 這是在菜單中突出顯示不同菜單項的好方法，而不會造成大量的導航旅程。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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