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-theme-builder-install

並點擊「安裝」。

安裝 Blocksy Companion 外掛

因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能,所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

blocksy-companion-premium-download

如果想先使用免費版的人,可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

blocksy-companion-plugin

並點擊「立即安裝」。

提醒:如果有購買付費版,只需要安裝 Blocksy Companion (Premium) 即可,不需安裝免費版的外掛。

安裝範本 (非必要)

Blocksy 安裝完成之後,從後台進入 Blocksy 的控制面板,點選 Starter Sites 後挑一個喜歡的範本。

這邊以 Modern Shop 為例。

blocksy-starter-site-modern-shop-import

點擊「Import」開始安裝步驟。

Step 1 – 安裝 Child Theme

透過安裝 Child Theme,未來可以直接新增自訂 CSS 代碼,不會因為 Blocksy 升級新版本而受到影響。

blocksy-starter-site-modern-shop-step1

Step 2 – 選擇頁面編輯器

這個範本目前提供兩種頁面編輯器 Brizy、Elementor 可供選擇。(不同範本使用的頁面編輯器不盡相同)

blocksy-starter-site-modern-shop-step2

Step 3 – 安裝必要的外掛

Modern Shop 範本中還有使用到 Contact Form 7 的功能。

blocksy-starter-site-modern-shop-step3

Step 4 – 匯入範本內容

blocksy-starter-site-modern-shop-step4

實際上後續編輯頁面時如果拿掉了頁面中使用的 Contact Form,是可以將 Contact Form 7 外掛移除的。

啟用 Advanced Menu 擴充功能

從 WordPress 的後台找到 Blocksy 的功能選單,點擊 Dashboard 進入 Blocksy 的管理頁面。

Blocksy-admin-menu

在管理頁面中可以看到「擴充功能」頁籤,從擴充功能頁面中找到「專業版擴充功能」下的 Advanced Menu。

啟用 Advanced Menu 功能。

Blocksy-extensions-advanced-menu

設計超級選單 Mega Menu (複合式選單)

大家可能會好奇,那我們需要去「外觀」>「自訂」中的佈景主題設計頁面,對使用中的選單進行設定嗎?

這點倒是不用擔心,在「自訂」的選單功能頁面中主要是讓站長可以調整第一層選單的呈現樣式、下拉選單的互動模式以及字體、色彩等設計。

我們只需要確認電腦、手機版本目前正在使用的選單名稱即可。

Blocksy-theme-header-menu

確認好之後,我們接著到「外觀」>「選單」頁面,找到這個選單名稱並且進入編輯選單頁面。

Blocksy-mega-menu-edit

從編輯頁面中,我們可以檢視目前的選單結構,也可以將想要展示的商品、頁面、文章、分類、自訂連結加入結構中,使用 Blocksy 甚至可以將設計好的 Content Blocks 也加入,而這也是我們接下來會使用到的功能。

首先,我們要先規劃好這個超級選單 Mega Menu (複合式選單) 的結構樣式,下拉之後想要區分為幾個大欄位?

Blocksy 的 Advanced Menu 提供了 1 ~ 6 個欄位的選擇,選了欄位數量之後,還可以有大欄位的排版設計可供選擇。

Blocksy-advanced-menu-columns

按照你所規畫好的欄位數量,把選單結構的子項目們一一設定好。如果有規劃想放 CTA 圖片或按鈕,可以放置在大欄位中。

選單結構拉好、設定好之後,記得要按下「儲存選單」按鈕,將做過的更動、修改都儲存下來。後續在設定超級選單功能時才不會容易出錯。

我們以 Quants Note 網站中的選單項目「架站教學」的下拉選單作為範例。

Blocksy-mega-menu-step1

這是一個有 3 個欄位的下拉選單,前兩個欄位分別是「Cloudways 教學」系列文章的文章連結,以及「WordPress 教學」系列按類別分類的頁面連結。

第三個 (大) 欄位則是呼籲訪客加入 Quants Note 社團的 CTA 圖片/按鈕連結,這部分會是由 Blocksy 的 Content Block 設計製作的。

要把下拉選單設定為超級選單我們要先找到這個下拉選單的母項目,以我們的例子來說就是「架站教學」。

blocksy-mega-menu-parent-menu

將選單項目展開後,點擊「Menu Item Settings」就能進入超級選單的設定頁面。

blocksy-mega-menu-settings1

其中包含了以下功能設定:

  • 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-admin-menu

點擊 Content Blocks 進入內容區塊管理頁面。

點擊 Add New 按鈕新增 Content Blocks。

Blocksy Pro-Content Blocks

選擇 Hook 類型的 Content Blocks。

TOC-Content Block-Hook

在編輯頁面中任意地揮灑你的設計能力,使用編輯器 (我們是用 Kadence Blocks 區塊編輯器) 做出適合你推廣、行銷目的的內容區塊。

blocksy-content-block-hook-cta

選單設定

接著來到要使用行動呼籲 CTA 的第三個選單子項目,新增選單項目時要從 Content Blocks 類別找到剛剛設計好的 Hook 類型的內容區塊,並新增至選單。

add-new-menu-item-content-blocks

展開這個選單子項目。

menu-item-cta

點擊「Menu Item Settings」進入超級選單的設定頁面。

blocksy-mega-menu-item-settings-cta

並完成以下設定:

  • Content Type – 選擇 Content Block
  • Select Content Block – 選擇剛剛設計的內容區塊名稱
  • Content Visibility – 確認桌機、手機的內容可見度
  • Item Label、Label Link、圖示、Badge Settings – 如果只是單純展示內容區塊,不需要這些標籤設定

接著按下「儲存設定」就完成了。

結語

這樣就完成了 WordPress 網站的超級選單 Mega Menu (複合式選單) 了,當滑鼠移到「架站教學」選單項目時,就會下拉展開一個漂亮、具備三個欄位的選單,包含了兩個教學類別的欄位以及一個有行動呼籲 CTA 的大欄位。

Blocksy-Mega-Menu

綜合以上的說明,我們知道了:

  • 如何透過 Blocksy 佈景主題編輯器,利用 Blocksy Pro 的 Advanced Menu 擴充功能,可以自訂多欄位的下拉選單,在選單項目上加入圖示 Icon。
  • 如何使用 Blocksy Pro 的 Content Blocks 功能,將行動呼籲 CTA 圖片、按鈕加入下拉選單的欄位中。

而使用 Blocksy Pro 功能做出的超級選單、複合式選單對頁面載入效率的影響更是微乎其微。

希望這些對大家在建立 WordPress 的超級選單 Mega Menu (複合式選單) 時能幫得上忙。

如果有什麼心得、想法或建議,也歡迎大家加入社團一起討論唷!

The-Plugin-With-the-Best-Video-Experience-440X231

Blocksy Pro

使用優惠碼「QNSAVE10」獲得10%折扣!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *