如何用 Divi 的全角菜單模塊替換主菜單欄
已發表: 2018-08-29主菜單欄使訪問者無縫導航。 除了我們在 WordPress 中習慣使用的默認主菜單欄外，您可能還遇到過 Divi 提供的全寬菜單模塊。 通常，它用於在您的網站上顯示與您在每個頁面頂部的主菜單不同的其他菜單。
但是您也可以輕鬆地使用全角菜單模塊來替換您的主菜單欄。 這使您可以自由地將菜單放置在頁面上的任何位置，而無需處理頁面頂部的重複菜單。 您還可以使用 Divi 的內置選項以您想要的方式設置菜單樣式，例如，這意味著您可以使用邊框和分隔線選項創建令人驚嘆的結果。
在本教程中，我們將向您展示如何使用 Divi 的 Carpenter 佈局包將主菜單欄替換為全角菜單模塊。 這是我們正在進行的 Divi 設計計劃的一部分。 您可以選擇是要將此方法應用於所有頁面還是僅應用於其中的幾個頁面。 讓我們開始吧！
預覽
在我們深入研究用例教程之前，讓我們快速瀏覽一下不同屏幕尺寸的最終結果。
禁用固定導航欄
轉到 Divi 的主題選項
我們需要做的第一件事是禁用 Divi 主題選項中的固定導航選項。 我們這樣做是為了擺脫頁面頂部的主菜單空間。 為此，請轉到您的WordPress 儀表板 > Divi > 主題選項。
禁用固定導航欄
打開常規選項卡並禁用固定導航欄選項。
創建主菜單
前往菜單
接下來我們要做的是創建我們的主菜單。 我們將在頂部的默認主菜單欄和全角菜單模塊中使用此主菜單。 要添加菜單，請轉到WordPress 儀表板 > 外觀 > 菜單。
添加新的主菜單
添加一個新菜單，為您的菜單命名並將其設為您的主菜單。
添加頁面和保存菜單
最後但並非最不重要的是，添加所有頁面並保存菜單。
主題定制器中的樣式主菜單欄
轉到主題定制器
根據您是否要在所有頁面上隱藏默認主菜單欄，您可能希望首先設置默認主菜單欄的樣式。 如果您計劃在某些頁面上使用它，則只需執行此操作。 如果你想在任何地方刪除主菜單欄，你可以跳過這一步。
主菜單欄設置
為了匹配佈局包，我們應用了以下更改：
- 字體樣式：粗體和大寫
- 文字顏色：#FFFFFF
- 活動鏈接顏色：#FFFFFF
- 背景顏色：#f25b3a
- 下拉菜單背景顏色：#f25b3a
隱藏主菜單欄
一頁
轉到選擇頁面並啟用 Visual Builder
要隱藏頁面頂部的主菜單欄，我們需要使用少量 CSS 代碼。 請注意，禁用固定導航欄選項（前面的步驟之一）很重要。 否則，主菜單欄佔用的空間將是白色的，並沒有完全消失。 如果您打算在一個頁面上隱藏主菜單欄，請轉到該頁面並啟用 Visual Builder。
打開頁面設置
單擊頁面底部的以下圖標，打開頁面設置：
添加 CSS 代碼
切換到高級選項卡並將以下 CSS 代碼添加到自定義 CSS 框中：
#main-header {
display: none;
}
整個網站
轉到 Divi 的主題選項
如果您想擺脫整個網站上的主菜單欄，您也可以這樣做。 您不必手動將代碼添加到每個頁面。 相反，您可以轉到WordPress 儀表板 > Divi > 主題選項。
添加 CSS 代碼
繼續向下滾動，直到遇到自定義 CSS 框並在那裡添加相同的 CSS 代碼：
#main-header {
display: none;
}
將主菜單欄添加到頁面
使用 Visual Builder 打開登陸頁面
現在我們隱藏了主菜單欄，我們可以開始向我們的頁面添加全角菜單模塊。 為此，例如，轉到您的登錄頁面並啟用 Visual Builder。
添加全角部分
繼續在您的英雄部分下方添加一個全角部分。
頂部邊框
您可以使用 Divi 的所有內置選項來創建您想要的確切設計。 我們要保持它非常乾淨。 我們將添加到我們的部分選項的唯一內容是頂部邊框：
- 頂部邊框寬度：7px
- 頂部邊框顏色：#f25b3a
添加全角菜單模塊
接下來，將全角菜單模塊添加到您的部分。
選擇主菜單
選擇您的主菜單作為您想要顯示的菜單。
背景顏色
繼續為您的模塊提供黑色背景色。
鏈接設置
然後，打開鏈接設置並應用以下更改：
- 活動鏈接顏色：#FFFFFF
- 下拉菜單文本顏色：#FFFFFF
- 移動菜單文本顏色：#FFFFFF
- 文本方向：左
- 文字顏色：淺
下拉菜單設置
接下來更改下拉菜單設置：
- 下拉菜單背景顏色：#000000
- 下拉菜單行顏色：#000000
- 移動菜單背景顏色：#000000
菜單文字設置
最後，我們將使文本設置與佈局包匹配：
- 菜單字體粗細：超粗
- 菜單字體樣式：大寫
使全角部分全局化並在其他頁面上使用
另存為全局部分
我們已經完成了我們新的主菜單的創建！ 如果您還計劃在其他頁面上使用它，請繼續將其作為全局項目添加到您的 Divi 庫中。
添加到沒有主菜單欄的其他頁面
您現在可以輕鬆地將此全角菜單添加到其他頁面。 您可以選擇它的位置，並且可以隨意使用隨附的內置設計選項！
預覽
現在我們已經完成了所有步驟，讓我們最後看看在不同屏幕尺寸上的結果。
最後的想法
在此用例博客文章中，我們向您展示瞭如何使用全角菜單模塊替換頁面頂部的主菜單欄。 應用此方法可讓您自由地將菜單放置在頁面上的任何位置。 最重要的是，您還可以使用 Divi 的內置選項來設置樣式。 如果您有任何問題或建議，請務必在下面的評論部分留言。