Blocksy 教學 – 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu
WordPress 首頁的下拉選單預設功能只能放頁面、文章、分類以及自訂連結,而這樣的設計較為中規中矩不容易吸引隨機造訪的訪客注意,留下特別的印象。
大多數站長也會在網頁載入效能 vs. 功能兩相權衡之下,放棄製作吸睛、美觀、具備豐富功能的大型、複合式選單,而國外一般把這樣的選單稱之為 Mega Menu。白話的說,就是能乘載巨量資訊的下拉選單。
如果有四處「參訪」國外站長或廠商網站設計的習慣,應該不難發現這樣的複合式選單一般會包含精美的圖示 Icon、圖片、地圖、聯絡表單或按鈕等功能。
這篇文章將與大家分享如何製作 WordPress 複合式選單 Mega Menu,只需要使用 Blocksy 佈景主題編輯器就能製作出精美、超輕量,對頁面載入速度沒有負面影響的下拉選單。
- 透過 Blocksy 佈景主題編輯器,利用 Blocksy Pro 的 Advanced Menu 擴充功能,可以自訂多欄位的下拉選單,在選單項目上加入圖示 Icon。
- 利用 Blocksy Pro 的 Content Blocks 功能,將行動呼籲 CTA 圖片、按鈕加入下拉選單的欄位中。
首先,我們來安裝 Blocksy 佈景主題。
Blocksy 佈景主題編輯器
Blocksy 是快速崛起、頗受網頁設計社群青睞的輕量佈景主題編輯器,除了彈性、美觀的 UI、UX 設計之外,Blocksy 還提供了 35 種不同主題的 Starter Sites 範本 (陸續增加中) 讓大家可以快速建立網站。
Blocksy 目前提供的網站主題範本有:
- Pottery – 陶藝
- Smile Dent – 牙醫診所
- Smart Home – 智能家庭 (產品解決方案)
- Daily News – 每日新聞
- Cosmetic – 彩妝
- Real Estate – 房地產
- Photo Studio – 攝影工作室
- Restaurant – 餐廳
- Wood – 木工工作室
- Renovation – 裝修
- Beverr – 網站設計工作室
- Catering – 外燴
- Barber Shop – 美容、理髮
- Bizonsult – 商業諮詢顧問
- Gadgets – 科技小物電商網站
- Home Decor – 室內設計
- Cleaning Service – 清潔、打掃服務
- Car Service – 汽車維修、美容服務
- Floreo – 植栽、花藝
- Garderobe – 時尚選品
- Petsy – 寵物
- Justice – 專業服務
- Wedding – 婚禮
- Web Agency – 網路服務 (Saas、WordPress 外掛等) 創業、開發
- Persona – 個人網站
- Yogi – 瑜珈工作室
- Homi – 生活風格、居家選物
- Tasty – 食譜分享
- Business – 商業服務
- Review Hub – 產品推薦、評論
- Charity – 慈善、NGO
- Travel – 旅遊風格
- App – 應用程式、網路服務
- Modern Shop – 線上購物
- News – 新聞
可以到官網看看這些 Starter Sites 範本的實際樣貌,做為網站設計的參考唷。
在這篇文章中我們會使用 Blocksy Pro 付費版的 Content Blocks 與 Advanced Menu 功能,讓我們從安裝佈景主題與外掛開始!
安裝 Blocksy 佈景主題
首先,到 WordPress 後台的外觀 > 佈景主題,點選「安裝佈景主題」後搜尋 Blocksy。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy theme builder install blocksy-theme-builder-install](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-theme-builder-install.png)
並點擊「安裝」。
安裝 Blocksy Companion 外掛
因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能,所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。
接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy companion premium download blocksy-companion-premium-download](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-companion-premium-download.png)
如果想先使用免費版的人,可以到外掛 > 安裝外掛搜尋 Blocksy Companion。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy companion plugin blocksy-companion-plugin](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-companion-plugin.png)
並點擊「立即安裝」。
提醒:如果有購買付費版,只需要安裝 Blocksy Companion (Premium) 即可,不需安裝免費版的外掛。
安裝範本 (非必要)
Blocksy 安裝完成之後,從後台進入 Blocksy 的控制面板,點選 Starter Sites 後挑一個喜歡的範本。
這邊以 Modern Shop 為例。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy starter site modern shop import blocksy-starter-site-modern-shop-import](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-starter-site-modern-shop-import.png)
點擊「Import」開始安裝步驟。
Step 1 – 安裝 Child Theme
透過安裝 Child Theme,未來可以直接新增自訂 CSS 代碼,不會因為 Blocksy 升級新版本而受到影響。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy starter site modern shop step1 blocksy-starter-site-modern-shop-step1](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-starter-site-modern-shop-step1.png)
Step 2 – 選擇頁面編輯器
這個範本目前提供兩種頁面編輯器 Brizy、Elementor 可供選擇。(不同範本使用的頁面編輯器不盡相同)
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy starter site modern shop step2 blocksy-starter-site-modern-shop-step2](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-starter-site-modern-shop-step2.png)
Step 3 – 安裝必要的外掛
Modern Shop 範本中還有使用到 Contact Form 7 的功能。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy starter site modern shop step3 blocksy-starter-site-modern-shop-step3](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-starter-site-modern-shop-step3.png)
Step 4 – 匯入範本內容
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy starter site modern shop step4 blocksy-starter-site-modern-shop-step4](https://www.quantsnote.com/wp-content/uploads/2021/08/blocksy-starter-site-modern-shop-step4.png)
實際上後續編輯頁面時如果拿掉了頁面中使用的 Contact Form,是可以將 Contact Form 7 外掛移除的。
啟用 Advanced Menu 擴充功能
從 WordPress 的後台找到 Blocksy 的功能選單,點擊 Dashboard 進入 Blocksy 的管理頁面。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy admin menu Blocksy-admin-menu](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-admin-menu.png)
在管理頁面中可以看到「擴充功能」頁籤,從擴充功能頁面中找到「專業版擴充功能」下的 Advanced Menu。
啟用 Advanced Menu 功能。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy extensions advanced menu Blocksy-extensions-advanced-menu](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-extensions-advanced-menu.png)
設計複合式選單 Mega Menu
大家可能會好奇,那我們需要去「外觀」>「自訂」中的佈景主題設計頁面,對使用中的選單進行設定嗎?
這點倒是不用擔心,在「自訂」的選單功能頁面中主要是讓站長可以調整第一層選單的呈現樣式、下拉選單的互動模式以及字體、色彩等設計。
我們只需要確認電腦、手機版本目前正在使用的選單名稱即可。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy theme header menu Blocksy-theme-header-menu](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-theme-header-menu.png)
確認好之後,我們接著到「外觀」>「選單」頁面,找到這個選單名稱並且進入編輯選單頁面。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy mega menu edit Blocksy-mega-menu-edit](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-mega-menu-edit.png)
從編輯頁面中,我們可以檢視目前的選單結構,也可以將想要展示的商品、頁面、文章、分類、自訂連結加入結構中,使用 Blocksy 甚至可以將設計好的 Content Blocks 也加入,而這也是我們接下來會使用到的功能。
選單結構
首先,我們要先規劃好這個複合式選單 Mega Menu 的結構樣式,下拉之後想要區分為幾個大欄位?
Blocksy 的 Advanced Menu 提供了 1 ~ 6 個欄位的選擇,選了欄位數量之後,還可以有大欄位的排版設計可供選擇。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy advanced menu columns Blocksy-advanced-menu-columns](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-advanced-menu-columns.png)
按照你所規畫好的欄位數量,把選單結構的子項目們一一設定好。如果有規劃想放 CTA 圖片或按鈕,可以放置在大欄位中。
選單結構拉好、設定好之後,記得要按下「儲存選單」按鈕,將做過的更動、修改都儲存下來。後續在設定複合式選單功能時才不會容易出錯。
我們以 Quants Note 網站中的選單項目「架站教學」的下拉選單作為範例。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy mega menu step1 Blocksy-mega-menu-step1](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-mega-menu-step1.png)
這是一個有 3 個欄位的下拉選單,前兩個欄位分別是「Cloudways 教學」系列文章的文章連結,以及「WordPress 教學」系列按類別分類的頁面連結。
第三個 (大) 欄位則是呼籲訪客加入 Quants Note 社團的 CTA 圖片/按鈕連結,這部分會是由 Blocksy 的 Content Block 設計製作的。
複合式選單欄位設定
要把下拉選單設定為複合式選單 (Mega Menu) 我們要先找到這個下拉選單的母項目,以我們的例子來說就是「架站教學」。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy mega menu parent menu blocksy-mega-menu-parent-menu](https://www.quantsnote.com/wp-content/uploads/2024/01/blocksy-mega-menu-parent-menu.png)
將選單項目展開後,點擊「Menu Item Settings」就能進入複合式選單的設定頁面。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy mega menu settings1 blocksy-mega-menu-settings1](https://www.quantsnote.com/wp-content/uploads/2024/01/blocksy-mega-menu-settings1.png)
其中包含了以下功能設定:
- Mega Menu Settings
這個選單下的子項目是否要套用複合式選單功能。 - Dropdown Width
下拉的複合式選單範圍寬度設定:1. 與網站預設內容寬度相同 2. 與瀏覽器寬度相同 3. 自訂寬度 - Columns
提供了 1 ~ 6 個欄位的選擇,選了欄位數量之後,還可以有大欄位的排版設計可供選擇。 - AJAX Content Loading
如果複合式選單的內容設計相當複雜,啟用 AJAX 的方式載入可以改善網站載入時間。 - Item Label
是否顯示這個選單項目的標籤名稱 - Label Link
這個選單項目是否有連結 - 圖示
這個選單項目前、後是否要顯示圖示 - Badge Settings
當選單中的文章、頁面有更新內容時,是否顯示醒目「徽章」提醒訪客。例如,我們使用 NEW 讓大家知道這個類別下有新文章。
完成設定後三個欄位的排版就完成了。
如果選單項目需要顯示 Label 圖示,可以進入選單項目的「Menu Item Settings」設定頁面個別進行調整。
行動呼籲 CTA (大) 欄位
接下來就是要放在大欄位中的行動呼籲圖片、按鈕了,這個我們會利用到 Blocksy 的內容區塊 (Content Blocks) 功能進行製作。
使用 Blocksy 的內容區塊
從 WordPress 的管理後台找到 Blocksy 的功能選單。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy admin menu Blocksy-admin-menu](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-admin-menu.png)
點擊 Content Blocks 進入內容區塊管理頁面。
點擊 Add New 按鈕新增 Content Blocks。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy Pro Content Blocks Blocksy Pro-Content Blocks](https://www.quantsnote.com/wp-content/uploads/2023/12/Blocksy-Pro-Content-Blocks.png)
選擇 Hook 類型的 Content Blocks。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - TOC Content Block Hook TOC-Content Block-Hook](https://www.quantsnote.com/wp-content/uploads/2024/01/TOC-Content-Block-Hook.png)
在編輯頁面中任意地揮灑你的設計能力,使用編輯器 (我們是用 Kadence Blocks 區塊編輯器) 做出適合你推廣、行銷目的的內容區塊。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy content block hook cta blocksy-content-block-hook-cta](https://www.quantsnote.com/wp-content/uploads/2024/01/blocksy-content-block-hook-cta.png)
選單設定
接著來到要使用行動呼籲 CTA 的第三個選單子項目,新增選單項目時要從 Content Blocks 類別找到剛剛設計好的 Hook 類型的內容區塊,並新增至選單。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - add new menu item content blocks add-new-menu-item-content-blocks](https://www.quantsnote.com/wp-content/uploads/2024/01/add-new-menu-item-content-blocks.png)
展開這個選單子項目。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - menu item cta menu-item-cta](https://www.quantsnote.com/wp-content/uploads/2024/01/menu-item-cta.png)
點擊「Menu Item Settings」進入複合式選單的設定頁面。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - blocksy mega menu item settings cta blocksy-mega-menu-item-settings-cta](https://www.quantsnote.com/wp-content/uploads/2024/01/blocksy-mega-menu-item-settings-cta.png)
並完成以下設定:
- Content Type – 選擇 Content Block
- Select Content Block – 選擇剛剛設計的內容區塊名稱
- Content Visibility – 確認桌機、手機的內容可見度
- Item Label、Label Link、圖示、Badge Settings – 如果只是單純展示內容區塊,不需要這些標籤設定
接著按下「儲存設定」就完成了。
結語
這樣就完成了 WordPress 網站的複合式選單 Mega Menu 了,當滑鼠移到「架站教學」選單項目時,就會下拉展開一個漂亮、具備三個欄位的選單,包含了兩個教學類別的欄位以及一個有行動呼籲 CTA 的大欄位。
![Blocksy 教學 - 3 步驟做出超輕量 WordPress 複合式選單 Mega Menu - Blocksy Mega Menu Blocksy-Mega-Menu](https://www.quantsnote.com/wp-content/uploads/2024/01/Blocksy-Mega-Menu.png)
綜合以上的說明,我們知道了:
- 如何透過 Blocksy 佈景主題編輯器,利用 Blocksy Pro 的 Advanced Menu 擴充功能,可以自訂多欄位的下拉選單,在選單項目上加入圖示 Icon。
- 如何使用 Blocksy Pro 的 Content Blocks 功能,將行動呼籲 CTA 圖片、按鈕加入下拉選單的欄位中。
而使用 Blocksy Pro 功能做出的複合式選單對頁面載入效率的影響更是微乎其微。
希望這些對大家在建立 WordPress 的複合式選單 Mega Menu 時能幫得上忙。
如果有什麼心得、想法或建議,也歡迎大家加入社團一起討論唷!
Blocksy Pro
使用優惠碼「QNSAVE10」獲得10%折扣!