如何使用 Elementor 創建超級菜單？ 使用導航菜單！

您是否使用 Elementor 並想在您的網站上添加一個大型菜單？ 你來對地方了！ 在本指南中，我們將向您展示如何使用 Elementor 使用 Nav Menu 創建大型菜單。

超級菜單現在非常流行。 這些豐富的菜單可幫助您改進網站導航，使您的用戶可以輕鬆瀏覽您的內容並找到他們正在尋找的內容。 這些用戶友好的菜單對於擁有許多類別和產品的在線企業和電子商務商店特別有用。

如果這是您的情況，我們建議您在您的網站上添加一個大型菜單。 由於它們有許多選項和鏈接，因此大型菜單似乎很難創建。 但是，使用Elementor ，您可以在幾分鐘內添加和管理大型菜單的所有內容。 這就是為什麼在本指南中，我們將向您展示如何使用 Elementor 和 Elementor 的 Nav Menu 創建大型菜單。

為什麼要使用 Elementor 創建超級菜單？

我們之前已經介紹了為您的 WordPress 網站使用大型菜單的需求以及它的許多優點，例如方便、舒適和網站導航。 但是為什麼要特別使用 Elementor 來添加大型菜單呢？

Elementor是最流行的拖放頁面構建器之一。 在站點自定義和元素創建方面，您使用 Elementor 的輕鬆程度是無與倫比的。 此外，它與 WooCommerce 的深度集成允許您為您的商店創建完美的大型菜單。 您可以輕鬆集成 WooCommerce 頁面、商店商品、購物車頁面，並且更順暢地為您的用戶提供最佳購物體驗。

此外，Elementor 提供了大量選項來啟用大型菜單，因此您可以選擇最適合您需求的選項。 對於本指南，我們將使用導航菜單。 因此，讓我們看一下使用 Elementor 創建大型菜單所需遵循的基本步驟，以及如何啟用導航菜單。

如何使用 Elementor 使用 Nav Menu 創建大型菜單

要使用 Elementor 創建超級菜單，我們建議您使用導航菜單。 這是免費提供的 Elementor 的 Mega Menu 解決方案。 但在使用它之前，您需要設置一個簡單的菜單設計，以便與導航菜單集成。

創建菜單

讓我們從為您的網站創建正確菜單的過程開始。 首先，打開您的WordPress 管理儀表板並轉到外觀 > 菜單。

在菜單創建屏幕上，您可以自定義當前菜單或創建新菜單。 讓我們通過按創建新菜單來創建一個新菜單。

然後，為您的超級菜單命名，然後單擊“創建菜單”按鈕。

可能會要求您提供菜單位置，但由於我們將使用 Elementor Mega 菜單，因此請不要設置任何菜單位置。 您還可以從“菜單位置”選項卡中的菜單位置中刪除任何菜單。

現在，要將頁面或帖子添加到您的超級菜單，只需選擇要添加到超級菜單的頁面或帖子，然後單擊添加到菜單。 您還可以將您的 WooCommerce 產品以及特定的產品類別、標籤，甚至 WooCommerce 端點（如帳戶頁面等）添加到菜單中。

現在，讓我們創建一個簡單的 Shop 大型菜單，其中只有 WooCommerce 產品和關鍵的 WooCommerce 頁面。

我們已經添加了所有正確的項目，但是菜單還沒有準備好，所以讓我們通過拖放一些項目來自定義它。 讓我們添加一個自定義 URL 菜單項，將博客菜單與最流行的博客文章鏈接起來。 最重要的是，讓我們在 Shop 頁面下添加一個包含所有 Shop 產品的下拉列表。

繼續並拖入Product 項下的所有 WooCommerce 產品和Blog項下的所有博客頁面，以製作一個有效的下拉菜單。 您可以通過簡單的拖放來選擇博客/產品的順序。

現在我們已經設置了主菜單，讓我們繼續並通過單擊“保存”菜單按鈕來保存它。

為 Elementor 設置導航菜單

現在我們已經添加了菜單，是時候開始在 Elementor 中構建 Mega 菜單了。 為此，讓我們創建一個新模板。 轉到您的WordPress 管理儀表板 > 模板 > 添加新模板。 然後將模板類型選擇為Header ，為其命名並單擊Create Template。

然後，按下Drag Widget here 區域上的Add New Section按鈕。 在這裡，您需要選擇您的結構。 根據您要構建的菜單，有幾個選項可供選擇，但現在，我們將使用 1×1 結構。

現在，使用左側邊欄並單擊邊欄右上角的網格圖標。 這將帶您進入小部件選擇屏幕。 然後，使用搜索欄搜索導航菜單並將此小部件拖動到新創建的小部件區域。

現在，在佈局下，您必須選擇要用於 Elementor Mega 菜單的菜單。 使用菜單選項並選擇您剛剛為小部件創建的菜單。 這應該設置你的菜單。 但是，您可以使用 Elementor 和導航菜單執行更多操作。

因此，讓我們繼續在您的 Mega 菜單中添加更多動畫和功能。

使用 Elementor 自定義您的超級菜單

單擊 Elementor 上的 Mega Menu 將立即將您帶到左側邊欄上的自定義選項。 讓我們繼續並更改一些選項。

一方面，您可以選擇菜單項的對齊方式以更好地適應您的網站。 您還可以在菜單項上添加自定義指針，當用戶將鼠標懸停在菜單項上時將顯示該指針。 此外，您可以選擇多個選項，甚至為每個指針添加自定義動畫，為您的 Elementor 大型菜單增添一點魅力。

您還可以為子菜單指示器選擇不同的圖標。

使用 Elementor 為移動設備優化您的 Mega Menu

考慮到有多少用戶通過手機瀏覽 Internet，最好自定義其他選項以優化移動查看的大型菜單。 這包括添加一個漢堡按鈕來打開您的超級菜單、更改菜單對齊方式以及漢堡按鈕。

完成自定義 Elementor Mega Menu 後，單擊Publish ，您必須提供Display Condition 。 此選項可讓您選擇要在何處顯示新創建的模板及其所有設計。 由於我們希望這個大型菜單顯示在我們的網站上，我們將選擇在整個網站上顯示它的選項。

因此，按Add Condition並選擇Include下的Entire site選項。 然後，單擊Save and Close ，您的模板應該會顯示在您的網站上。 當然，使用 Elementor，您可以選擇在特定頁面上隱藏或顯示大型菜單。 您需要做的就是添加條件以排除或包含頁面。

例如，要添加更多選項，請單擊“發布”按鈕旁邊的“保存選項”按鈕，然後按“顯示條件”。 您可以添加另一個條件以排除另一個特定頁面上的菜單，模板將相應隱藏。

這只是冰山一角。 您可以使用 Elementor 做許多其他事情來改進您的大型菜單。 所以現在，繼續玩你的 Mega 菜單，在你的網站上充分利用它。

最後的話

總而言之，大型菜單是改善網站導航的絕佳工具。 它們允許您以有組織的方式顯示許多類別和產品，以幫助用戶瀏覽您的內容。

要將超級菜單添加到您的網站，您可以使用插件或按照我們的指南使用 Elementor 創建超級菜單。 如果您決定自己創建它，Elementor 的內置 Nav Mega Menu 選項無疑是幫助您高效完成工作的最佳選擇。 該插件很簡單，不需要花費大量時間來設置和自定義，而且非常易於使用。

所以，總結一下這個過程，讓我們記下你需要做的事情來設置你的 Elementor 超級菜單：

• 創建和自定義您的 WordPress 菜單
• 創建一個標題模板並將您的 Mega Menu 小部件添加到其中
• 自定義您的 Mega 菜單小部件
• 將顯示條件添加到您的 Header 模板並發布它

這應該設置您的大型菜單。 導航菜單不是您的 Mega 菜單小部件的唯一選項。 還有其他菜單插件/小部件可能更適合您的需求。 雖然導航菜單簡單、最小且非常易於使用，但它缺乏更高級的功能。

如果您剛開始使用大型菜單，Nav Menu 是一個絕佳的選擇。 但是，如果您想要更高級的功能，我們推薦 QuadMenu。 它添加了您通過導航菜單獲得的所有功能以及更多自定義選項。 從特定的移動相關選項到全彩色和背景自定義以及要添加到您網站的其他元素和圖標，應有盡有。 同樣，Clever Mega menu 等其他插件提供了更多選項來包含商店商品並使您的網站更具相關性。

有關更多 Elementor 工具，您可以查看我們關於 WordPress 最佳 Elementor 插件的文章。

您是否使用導航菜單創建了 Elementor Mega 菜單？ 您還使用哪些其他方法？ 在下面的評論部分讓我們知道！