Astra Pro模組教學指南-Nav Menu導航選單設定

Nav Menu導航選單模組[創建Mega Menu超級選單]

Nav Menu導航選單模組使你可以新增和創建Mega Menu。
超級選單是一種可擴展選單,其中顯示不同的選擇。
如果你擁有一個包含很多選項和低一階的子網頁,那麼這是一眼顯示這些內容的理想選擇。

Astra提供了令人驚嘆的功能,可通過Nav Menu模組設計Mega Menu功能

這是Astra Pro模組提供的一項進階功能。
要使用這些附加組件,你需要在你的網路行銷網站上安裝Astra主題以及Astra Pro模組。


啟用模組

以下是啟用外掛並瀏覽進階設定的步驟- 

步驟1 –確保已安裝並啟用Astra Pro模組。 
步驟2 –從WordPress控制台 > 外觀 > Astra Options > Nav Menu 啟用模組。


創建Mega Menu超級選單

如果要創建Mega Menu,則需要為想要將其子選單項轉變為Mega Menu的上一階的選單項啟用Mega Menu功能。 

請按照以下步驟操作:

步驟1 –從WordPress控制台導到 外觀 > 選單 。
步驟2 –選擇要在其下添加Mega Menu的選單項。
步驟3 –點擊  Astra Menu Settings 按鈕。

  • Mega Menu超級選單
    • 勾選 Enable Mega Menu 選項的確認框,
      這將為上層選單的所有子選單啟用Mega Menu選項。
      它提供了上層/主選單的選項。
      你可以將Mega Menu寬度設定為內容、選單排版或完整的寬度。
  • Mega Menu width 超級選單寬度–在此處設置超級選單的寬度。以下是可用的選項:
    • Content內容–將選單寬度設置為你的內容寬度
    • Menu Container Width選單排版寬度–限制主選單的寬度 
    • Full Width全寬–將Mega Menu的寬度設置為頁面的寬度,
      但將選單內容限制為內容的寬度。
    • Full Width Stretched全寬延伸–將Mega Menu的寬度設置為邊到邊的全寬。
    • Custom Width自訂寬度–以像素為單位設置自訂寬度數值
  • Background Color / Image 背景顏色/圖片
    • Background Color/ Image背景顏色/圖片將被設置為父選單的Mega Menu框。
      你可以使用 Background Repeat背景重複、Background Size背景大小和Background Position背景位置等網頁設計設置來調整背景圖片。
  • Override Colors for this Mega Menu? 替代Mega Menu的顏色?
    • 你可以為上一層選單的Mega Menu選項設置顏色。
      可用選項為 Text/Link Color文字/連結顏色,Text/Link Hover Color文字/懸停連結顏色,Column Divider Color分隔列顏色 。
  • Highlight Labels 亮眼標籤
    • 這是出現在選單項旁邊的文字。顯示搶眼的選單。
      標籤可以顯示為免費,特價,新增,精選等。你可以設置標籤文字和顏色。
  • Advanced 進階
    • 你可以為選單項設置Margin外距和Padding內距。

步驟4 –點擊子選單,你將顯示以下選項:

  • Mega Menu
    • Make column heading? 設為列標題?
      如果要使選單項導航標籤作為該列的標題,請選擇此選項。
      這樣它將顯示為標題,並且所有子選單項都將顯示在此Header下方。
      小提醒:確保已為 上層選單 項啟用了 Mega Menu 才能看到此選項。
  • Menu Label 選單標籤
    • Hide Menu Label/Description? 隱藏選單標籤/說明?
      如果要隱藏子選單的標籤或說明,請選擇此選項。
    • Disable Link停用連結:此選項將刪除相應選單項的連結。
      它只會顯示選單的標題。
  • Content Source 內容來源
    • 你可以為子選單選擇內容來源。
      它具有從自訂文字、Template版型 或 Widget小工具 中選擇的選項。
      你可以使用編輯器顯示自訂文字/ HTML,也可以選擇任何自訂版型/小工具。
      如果選擇 Custom Template自訂版型 選項,
      將顯示所有可用文章、頁面和自訂版型的列表。
      如果選擇Widget小工具選項,將顯示所有可用小工具的列表。
  • Highlight Labels 亮眼標籤
    • 這是出現在選單項旁邊的文字。顯示搶眼的選單。
      標籤可以顯示為免費,特價,新增,精選等。你可以設定標籤文本和顏色。

同樣,你將找到所有子選單及其子選單的選項。


如何為Mega Menu創建列表?

Astra將為每個子選單自動創建一個單獨的列。
當你在 上層選單項中選中 Enable Mega Menu 選項時,
它將根據其下子選單項的數量來創建列。

例如–如果你具有以下網站設計選單架構:

  • Background Image
    • BUSINESS PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • AGENCY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • UTILITY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • SPECIAL PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4

它將在前端顯示為–


如何將版型新增到Mega Menu

你也可以將版型用於Mega Menu選項。
要使用Elementor(免費)和Nav Menu將版型添加到你的Mega Menu選項,

請按照以下步驟操作:

步驟1 –確保已安裝並啟用了Elementor外掛。
步驟2–導至 控制台 > Templates > 新增
步驟3 –在下拉選單中,”選擇”,為你的版型命名
(可以是任何名稱;我們使用Mega Menu Item 1 ),然後點擊建立版型。

這將創建你的新版型並打開Elementor編輯器。

步驟4 –在Elementor編輯器中,添加 Section 和 Shortcode 小插件。

將以下WooCommerce代碼添加到shortcode小插件中:

[product_categories number=”4″ columns=”4″ hide_empty=”0″ orderby=”name” order=”desc”]

這是WooCommerce的簡碼。
你可以在文章中找到有關它的更多信息以及可能的變化。

如果你使用Elementor Pro,則可以使用Elementor產品分類小工具代替短碼小部件。

步驟5 –按照前面提到的步驟創建一個Mega Menu。

步驟6 –在Mega Menu下添加一個選項(我們將其命名為 Shop by Categories),然後點擊  Astra Menu Settings 按鈕。

步驟7 –在 Content Source 下拉選單中,選擇 Template 選項。
在Template字段中,輸入版型的名稱,然後從列表中選擇它。
點擊 Save 將此版型添加到你的網站設計選單。

這就是它在網頁的畫面。

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security