如何輕鬆創建 Elementor 一頁導航菜單

對您的網站進行可靠的導航至關重要。 無論您的網站有多個頁面還是只有一個頁面，您都必須確保正確的網站導航。

在 Elementor 中，您可以輕鬆創建多頁導航菜單。 但是，如果您有一個單頁網站並且需要設計一個菜單怎麼辦。

在本博客中，我們將向您展示如何輕鬆創建 Elementor 一頁導航菜單。

在深入了解指南之前，讓我們了解一頁導航菜單的基本工作流程。

一頁導航菜單的實際工作原理

一頁導航菜單是指主要用於單頁​​網站的簡單導航菜單。 但是，它也稱為單頁滾動菜單，您可以以水平和垂直兩種方式顯示。

使用這種類型的菜單，您可以有效地配置單頁內容的導航。 這樣，您的用戶可以通過將一個部分移動到另一個部分而不是重定向到另一個頁面來輕鬆地從您的網站中找到所需的信息。

您可以通過兩種方式觸髮菜單：

1.單擊：您可以單擊菜單項以將內容從一個部分顯示到另一個部分。

2.滾動：您可以使用滾動功能來瀏覽您的網站內容。

如何添加 Elementor 一頁導航菜單

在我們博客的以下部分中，您將學習如何向 Elementor 支持的網站添加單頁導航菜單。

先決條件：

要使用令人驚嘆的單頁導航小部件，您需要以下內容：

• 元素（免費）
• 快樂插件（免費）
• 快樂插件專業版

如果您是 Elementor 的新手，請查看此初學者分步指南。

確保您已安裝並激活您網站的 Happy Addons免費和高級版。

第 1 步：添加一頁導航小部件

您需要先添加快樂插件的單頁導航小部件。 您可以在左側的 Elementor 小部件庫中找到該小部件。 只需將小部件拖放到您網站頁面的選定區域即可。

第 2 步：管理導航內容

添加小部件後，您應該添加和管理導航菜單內容。

內容

內容部分具有三種不同的設置，可用於添加菜單項和設置其他必要的菜單內容。 他們是。

1. 導航
2. 工具提示
3. 設置

定義導航樣式

在Content->Navigation區域，您可以從九個不同的列表中選擇Navigation Style並添加Navigation List Items 。 此外，設置導航的水平對齊和垂直對齊。

這是您的導航樣式列表。

1. 默認
2. 貝爾塔
3. 哈戈斯
4. 美高
5. 麥克馬德
6. 沙姆索
7. 優巴克斯
8. 許斯尼
9. 扎希

設置您的第一個頁面導航菜單

設置單頁導航菜單，需要復制Items->Section Id ，粘貼到Advanced->CSS Id區域。 由於它是最重要的設置，因此您必須確保Section Id的名稱和CSS ID的名稱必須相同。

注意：您也可以編寫不同的名稱來設置導航菜單。

第 3 步：自定義菜單

設置導航項

您可以設置導航項的圖標。 並且能夠編寫Navigation Title和Tooltip Title 。

啟用自定義樣式

根據您的目的，您可以將自定義樣式添加到您的個人Navigation Item 。 首先打開一個項目並激活Enable Custom Style 。

現在您可以更改單個項目的內容顏色、內容顏色懸停和內容顏色活動。 按照下圖了解設置。

工具提示

您可以啟用工具提示選項以在您將鼠標懸停在其上時顯示單個菜單的文本。 訪問Content–> Tooltip區域並啟用設置。 如果你想顯示它，你也可以啟用工具提示箭頭。 請按照下圖了解其工作原理。

內容設置

您還可以使用鼠標滾動將一個部分移動到另一部分。 為此，您需要轉到Content–>Settings 。 在這裡，您將找到滾輪選項。 只需啟用設置，現在您就可以將一個菜單移動到另一個菜單。

您還可以啟用僅適用於移動設備的觸控滑動選項。 使用此選項，您可以通過滾動將一個部分滑到另一個部分。

您還可以啟用滾動鍵選項，並能夠在設置選項中設置行偏移和滾動速度。

注意：您可以使用鍵盤上/下箭頭鍵滾動到特定部分。

第 4 步：自定義您的菜單設計

如果您想以自己的方式設置導航菜單的樣式，可以輕鬆使用小部件的樣式選項。 在樣式區域中，您將獲得三個不同的選項來重新設計您的菜單。

• 導航
• 導航內容
• 工具提示

一頁導航Mneu的最終預覽

如果您一個接一個地執行所有步驟，那麼您的一頁導航菜單將如下圖所示。

閱讀完整的文檔以深入了解所有自定義選項。

或者查看 Happy Addons 的 One Page Navigation 小部件的便捷視頻教程。

當您應該在您的網站中包含一頁導航菜單時

您經常看到由稱為主頁的單個頁面組成的網站。 該網站的所有者將所有必需的內容放在這個單一頁面上。 但是，這個單頁網站的目的是讓您的訪問者專注於您網站的內容。

但是，如果您沒有像普通的多頁網站那樣為該單頁設置適當的導航菜單，您將影響您的網站您的用戶體驗。 因為您的用戶在您的網站上迷路並花費更多時間來獲取您的內容。

要解決此類問題，您必須實現一頁導航菜單。 它最終會幫助您的用戶在您網站內容的各個部分之間跳轉。

以下是一些適合您的單頁網站創意。

• 投資組合網站
• 產品登陸頁面網站
• 數字服務提供商網站
• 餐廳網站
• 照片庫網站

注意：上面列出的網站也可以是多頁的。

您準備好探索 Elementor 一頁導航菜單了嗎

如果您手頭有正確的工具，那麼創建 Elementor 單頁導航菜單並不是一項艱鉅的任務。

在本指南中，我們介紹了使用 Happy Addons 為您的網站製作單頁滾動菜單的最簡單方法。 我們還討論了什麼是單頁導航菜單以及何時應將其用於您的網站。

如果您仍然卡住並想了解更多信息，可以在評論部分給我們寫信。

我們還要求您加入我們的時事通訊，以獲取有關 WordPress、Elementor 和 Happy Addons 的獨家教程和新聞。