JetMenu使用教學課程
JetMenu是一個簡單好用且強大的超級選單(Mega Menu)插件,可以和元素或古騰堡編輯器搭配使用,可以輕鬆就實現美觀、功能豐富且完全響應式的超級選單介面。
和Well之前寫的使用Elementor自備的Mega Menu文章不同,JetMenu的超級選單種類更豐富,適合在更多的裝置端展示,以及更多的使用情境。
下圖是JetMenu支援的超級選單形式:
安裝JetMenu插件
首先,在教程開始前,需要在WordPress後台 – 外掛程式– 安裝新外掛程式中透過上傳外掛程式的方式安裝JetMenu外掛程式。
安裝JetMenu後可以在Crocoblock – JetPlugins Settings – 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並添加即可。
在新增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:
找到Hamburger Menu小部件並添加到指定位置。
選擇Hamburger Menu小工具的Menu為先前新增的「Jet Menu」選單:
進階設定裡隱藏該小工具在桌面端展示:
JetMenu漢堡菜單效果展示:
用JetMenu添加垂直超級選單
同樣是在小部件裡搜尋Menu
找到Vertical Mega Menu小部件並添加。
設定Select Menu為“Jet Menu”:
滑鼠移到“All Product”,就會顯示對應的超級選單內容:
調整垂直超級選單內容的寬度:
在垂直選單小工具中找到“Mega Menu”,Mega Menu Width的數值即可調整垂直超級選單內容的寬度。
以上就是JetMenu使用教學的全部內容。
Well還推薦你看Ajax即時搜尋外掛程式JetSearch教程。