WordPress超級選單外掛程式JetMenu使用教學課程,3種Mega Menu展示形式

WordPress超級選單外掛程式JetMenu使用教學課程
WordPress超級選單外掛程式JetMenu使用教學課程,JetMenu是一個非常強大的超級選單插件,可以產生水平、垂直、漢堡選單,適用於不同場景和裝置。還能再選單上新增圖示和文本,滿足個人化設定。
文章目錄

本篇文章共2339 字,預計閱讀時間10 分鐘

JetMenu使用教學課程

JetMenu是一個簡單好用且強大的超級選單(Mega Menu)插件,可以和元素古騰堡編輯器搭配使用,可以輕鬆就實現美觀、功能豐富且完全響應式的超級選單介面。

和Well之前寫的使用Elementor自備的Mega Menu文章不同,JetMenu的超級選單種類更豐富,適合在更多的裝置端展示,以及更多的使用情境。

下圖是JetMenu支援的超級選單形式:

JetMenu支援的菜單形式

安裝JetMenu插件

上傳安裝Wordpress插件

首先,在教程開始前,需要在WordPress後台 – 外掛程式– 安裝新外掛程式中透過上傳外掛程式的方式安裝JetMenu外掛程式。

安裝JetMenu後可以在Crocoblock – JetPlugins Settings – JetMenu中對此外掛程式進行預設設定:

JetMenu外掛程式設定介面

預設設定不是必須的,可以在使用該插件時對相應的組件進行設定即可。

創建JetMenu超級菜單

建立JetMenu超級選單,WP後台– 外觀– 選單,可以在現有的選單上進行操作,或建立一個新的選單。

建立選單

將滑鼠移到對應選單上時,會在該選單右側顯示Settings圖標,點擊圖標即可對改選單進行Mega Menu設定:

開啟超級選單

超級內容:

  • Use Mega Content:開啟,啟用改選單的超級選單。
  • Mega Content Type:選擇Elementor。
  • 然後保存,其他的不用修改。

物品圖示:是為這個選單新增一個圖標,根據自己需求選擇要不要新增。

物品徽章:是為改菜單添加一個文字或SVG標籤,例如“Hot” “New”,根據需求決定是否設定。

這些設定都做好後回到Mega Content介面,可以點選“Edit Mega Content”,對超級選單的內容進行編輯:

編輯超級選單

因為Well選擇了Elementor,所以會自動跳出Elementor編輯介面,並在這個介面填入改選單下超級選單內容即可。

填入超級選單內容後點選右上角發布,然後關閉該Elementor編輯介面。

創建了超級選單的選單右側會顯示一個「Mega Activated」的標誌:

建立選單設定完成後的標誌

使用JetMenu小部件

使用JetMenu超級選單元件的時候,只需要開啟對應頁面的Elementor編輯介面,一般是網站的Header(頁首)模版頁。

用JetMenu加入水平超級選單

水平超級選單就是水平排列的選單佈局,屬於常規的PC端超級選單。

在Elementor編輯介面左側小工具搜尋menu:

在頁首中加入水平超級選單Mega Menu

然後找到Mega Menu並添加即可。

在頁首中加入水平超級選單Mega Menu 2

在新增JetMenud的Mega Menu小工具後,在該小工具的Layout設定中選擇之前創建了超級選單的選單「Jet Menu」。

這樣就完成了PC端超級選單的添加,滑鼠移動到對應選單就會顯示其下的超級選單內容。視訊演示↓

附註:如果要修改超級選單的寬度,需要在Layout設定裡修改Mega Container Width Type為“Selector”,然後在Custom selector填寫CSS選擇器。

假設ID為「aaa」容器,它寬度是1200px,那麼你在JetMenu超級選單小元件的Custom selector設定裡填入#aaa,那超級選單的寬度就會變成和「aaa」容器一樣的寬度– 1200px;

也可以為一個全寬度的容器(例如Header容器)添加一個CSS ID(在容器的高階設定– CSS ID 裡新增),然後在Custom selector裡填寫該ID,該超級選單的寬度就會變成全寬度。

最後在該選單的進階設定裡,選擇在行動端隱藏:
設定超級選單在行動端隱藏

用JetMenu添加漢堡超級菜單

漢堡超級選單就是折疊隱藏起來的選單,點擊選單按鈕後顯示,是適合行動端的超級選單。

在Elementor編輯介面左側小工具搜尋menu:

加入JetMenu的漢堡選單到行動端

找到Hamburger Menu小部件並添加到指定位置。

選擇Hamburger Menu小工具的Menu為先前新增的「Jet Menu」選單:

設定JetMenu的漢堡選單

進階設定裡隱藏該小工具在桌面端展示:

設定JetMenu的漢堡選單在桌面端隱藏

JetMenu漢堡菜單效果展示:

用JetMenu添加垂直超級選單

同樣是在小部件裡搜尋Menu

加入JetMenu的垂直選單

找到Vertical Mega Menu小部件並添加。

設定Select Menu為“Jet Menu”:

設定JetMenu的垂直選單

滑鼠移到“All Product”,就會顯示對應的超級選單內容:

JetMenu的垂直選單效果展示

調整垂直超級選單內容的寬度:

JetMenu的垂直選單中超級選單區域寬度設置

在垂直選單小工具中找到“Mega Menu”,Mega Menu Width的數值即可調整垂直超級選單內容的寬度。

以上就是JetMenu使用教學的全部內容。

Well還推薦你看Ajax即時搜尋外掛程式JetSearch教程

: ) 文章內容均為原創,轉載須註明出處並添加原文鏈接,否則視為侵權
外貿伺服器推薦(Well在用的伺服器)
vultr-徽標
一線品牌VPS伺服器,穩定、不貴、效能強
Clouvider 標誌
二線品牌VPS伺服器,穩定、便宜、效能強
文章標籤
文章推薦
文章目錄
相關文章
繁体中文