Elementor超級選單教程,使用Elementor為WordPress建立Mega Menu

Elementor超級選單教程,使用Elementor為WordPress建立Mega Menu
Elementor超級選單教程,不需要安裝額外的插件,使用Elementor自帶的Mega Menu就能為WordPress網站創建出完全自定義樣式的超級菜單,跟隨教程一起操作吧~
文章目錄

本篇文章共1028 字,預計閱讀時間5 分鐘

關於Mega Menu超級菜單

Mega Menu(超級菜單)是一種進階導覽選單形式,通常在使用者懸停或點擊主選單項目時,一次展示出多列或多層級的子選單內容。

傳統網站選單,一層一層操作繁瑣

WordPress超級選單

相較於傳統的下拉式選單,在子選單層級多的情況下還需要一層一層點擊或是懸停滑鼠才能查看下一層級的選單,而超級選單更強大和靈活,可以展示多層級選單和更豐富的內容,減少了繁瑣的操作的同時還能讓使用者快速找到想要的內容,提升使用者體驗。

使用元素的Mega Menu創造超級選單,不只可以插入選單,還能加入圖片、影片、產品等元素,就像建立頁面一樣。

Mega Menu更適合B2C電商網站,或者內容較多或產品分類較多的B2B網站。

開啟Elementor超級選單功能

在建立WordPress超級選單前需要先開啟Elementor Menu功能:

開啟Elementor的Mega Menu功能

位置在:WP後台– Elementor – 設定– 特性– Menu,開啟Menu並儲存。同時也要確保介面的「嵌套元素」功能處於開啟狀態。

使用Elementor建立WordPress超級選單

首先,新建一個網站頁眉(Header模板)或在你網站原有的頁眉上進行修改,Well選擇新建一個網站頁眉以更好的演示。

Elementor建立網站頁眉Header模板

建立網站頁首的位置:WP後台– 範本– Theme Builder – Header,點選右上角Add New。

編輯Header模板

進入頁首模板編輯頁面後:

  1. 加入兩個並排的小容器
  2. 左側容器寬度設定20%,用來放網站Logo
  3. 右側容器寬度設定80%,用來放網站選單

新增logo和menu元素

新增logo和menu元素後的樣式

然後分別加入site logo和menu元素到兩個小容器。

設定頁首樣式

調整標誌尺寸和上下居中顯示menu元素。

設定Elementor Menu的選單和URL,開啟下拉選單

設定選單元素,在Menu Items中加入所需的選單和對應URL。對需要使用超級選單的選單開啟「Dropdown Content」。

編輯超級選單內容

接著點選開啟了「Dropdown Content」的選單,就可以在下方的區域加入各種內容,例如新增子選單、影片、產品。

PS:如果你在編輯下拉內容區域的時候,突然下拉內容無法打開,可以在儲存後刷新頁面就能正常打開。

下面是Well製作的超級選單,可以作為參考:

WordPress超級選單

具體建構思路:

  • 其中大二級選單可以使用標題元素,然後新增對應選單的URL即可
  • 其中的三級選單可以使用圖示清單元素,把圖示去掉,並且加入對應選單的URL。
  • 最右側的熱賣產品用圖像框元素即可實現

以上就是Elementor製作WordPress超級選單教學的全部內容,Well還有更多Elementor教程

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