如何使用分區分隔線來構建導航菜單

您的導航菜單是訪問者訪問您的網站時首先要查找的內容之一。 因此，網站確保為其提供應有的主要房地產（在頁面頂部）。 但是，如果您想讓導航菜單更加突出，則可以使用自定義背景設計為其增添趣味。 使用 Divi 的 Visual Builder，您可以使用頁面每個部分中可用的分隔線背景選項創建一些很棒的背景設計。 只需一點創意，您就可以使用分隔線背景作為導航菜單​​的獨特框架。 您甚至可以為網站的每個頁面創建獨特的菜單背景。

在本教程中，我將向您展示使用分區分隔線背景用漂亮的背景設計來構建導航菜單是多麼容易。 我將使用藥房佈局包作為示例站點來創建這些設計。

讓我們開始吧！

搶先看

這是使用這種設計技術可以實現的目標。

你需要什麼

對於本教程，您真正需要的是以下內容：

• Divi 主題（已安裝並處於活動狀態）
• 藥房佈局包（Divi Builder 中提供的免費預製佈局包）

在主題定制器中設置主菜單

對於本教程，我有一個全新安裝的 Divi，我的主菜單包含藥房佈局包的六頁。 默認情況下，菜單如下所示。

如您所見，標題具有白色背景，位於頁面第一部分的上方。 向下滾動時，標題會轉換為固定的導航菜單欄。

但是對於本教程，我想讓標題背景透明，以便我可以添加自己的自定義背景。 為此，我們需要跳到主題定制器。 從 WordPress 儀表板轉到 Divi > Theme Customizer。 然後從定制器菜單中，轉到標題和導航 > 主菜單欄。

通過一直向下拖動透明度滑塊或輸入顏色代碼 rgba(255,255,255,0) 將背景顏色更改為完全透明。

如您所見，白色標題背景已消失，您的第一部分已跳轉到頁面頂部，作為標題和主菜單的背景。

由於我們要為導航菜單​​添加顏色背景，讓我們也更新以下菜單文本選項。

字體：蒙特塞拉特
字體樣式：粗體 (B)
文字顏色：白色
活動鏈接顏色：白色

在定制器菜單中返回上一級，然後單擊固定導航選項卡。 如果您要保持固定導航功能，您可以給它一個自定義顏色，與您將在可視化構建器中構建的自定義背景的顏色相得益彰。 或者你可以給它一個更通用的顏色，這樣你就可以在每頁的基礎上用不同的顏色來構建你的主菜單。 現在，我將為我的固定導航使用更通用的配色方案。 更新以下內容：

主菜單背景顏色：#ffffff
主菜單鏈接顏色：rgba(0,0,0,0.61)
活動主菜單鏈接顏色：#ff5473

現在我們準備好了！ 確保發布您的更改。

使用分區分隔線背景構建導航菜單

示例#1

轉到您的藥房主頁並部署可視化構建器。 然後添加一個沒有任何行、列或模塊的新常規部分（您不需要它們）並將該部分拖到頁面頂部（我發現在線框模式下重新排列部分更容易，因為它們是更大的塊）。

現在返回桌面模式以完成設計。

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

頂部分隔線樣式：見截圖
分隔線顏色：#ff5473
分隔線高度：150px
分隔線水平重複：0.8x
自定義邊距：-80px底部
自定義填充：0px 頂部，0px 底部

分隔線顏色與佈局中使用的粉紅色相同。 我將分隔線水平重複設置為 0.8 倍，以便將分隔線拉平一點。 -80px 底部邊距使該部分在頁面下方，以隱藏該部分的白色背景。 這導致分隔線在右側形成導航。 分隔線向左延伸，也為您的徽標添加了漂亮的背景。

這是它在現場網站上的樣子。

示例#2

對於下一個示例，我將定位該部分，以便分隔線背景僅框住導航菜單而不是擴展到徽標。 為此，我們需要為我們的部分提供自定義寬度並使其右對齊，以便它適合導航菜單。

轉到部分設置並更新以下內容：

（注意：您可能需要在線框模式下打開設置，因為部分的自定義邊距可能會使部分菜單無法點擊。在線框模式下打開設置後，您可以切換回桌面視圖模式。）

寬度：75%
截面對齊：右
分隔線樣式：見截圖
分隔線水平重複：1x

這是它的樣子：

激活固定導航後，您可以看到固定菜單標題在菜單開始離開框架時如何激活。

如果要禁用固定導航，請導航到 Divi > 主題選項，然後禁用常規設置下的固定導航欄選項。

如果沒有激活固定導航，您的菜單將在滾動時保持鎖定在框架設計中的位置。

反應靈敏

該框架甚至在移動設備上看起來也不錯。

但是，您始終可以通過為您的部分提供桌面和移動設備的自定義分隔高度為零來選擇隱藏框架。 然後在主題定制器中定制您的移動菜單。

在不同的頁面上使用不同的顏色框架

如果需要，您可以在每頁的基礎上添加不同的顏色和設計。 您需要做的就是將您的部分保存到您的 Divi 庫並將其添加到您網站的不同頁面。 然後您可以根據需要調整顏色或設計。 可能性是無止境。

最後的想法

使用 Divi Builder 為導航菜單​​添加自定義背景實際上非常容易。 您只需要知道如何定位您的部分以作為菜單的背景。 有了這個設置，你可以測試不同的分隔線樣式，為你的導航菜單創建各種獨特的框架。 並且由於您使用的是截面，因此您可以使用截面的所有設計選項來設計您的框架。 您甚至可以使用簡單的部分背景或漸變，並根據需要調整部分的位置。

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

乾杯!