瀑布流版面與特殊選單

操作指南 Pro Navigation 1 分鐘閱讀

在一般的大型選單中，每個區塊各佔一欄，因此較短的連結清單下方會留下空白。瀑布流版面會將多個區塊組成一欄，讓它們上下堆疊，例如讓兩個較短的品牌清單共用第一欄。

範本

兩者都位於 Select template（選擇範本）的 Special menu（特殊選單）群組中。

Masonry layout（瀑布流版面）

四欄（Group of items（項目群組）區塊），每一欄內堆疊連結清單。

Special menu（特殊選單）

左側為分類清單；每個分類在右側都有專屬的連結清單與圖片面板，類似大型購物平台的選單。

從瀑布流版面範本開始

1. 加入範本

   在編輯器的 Elements（元素）樹狀清單中，點擊頂層項目下方的 Add submenu（新增子選單）。將游標指向 Special menu (1)，然後點擊 Masonry layout 上的 Select（選擇）(2)。

   

   (1) 指向 Special menu 群組，(2) 選擇 Masonry layout

2. 編輯範例內容

   範本會加入 4 個寬度 25% 的 Group of items 區塊，內含連結清單。將游標移到每個標題或連結上，點擊 Edit Item（編輯項目），然後變更其 Title（標題）和 Link（連結）。

3. 在欄中新增或移除區塊

   在群組內點擊 Add block（新增區塊），即可堆疊另一個區塊，例如連結清單或圖片。若要移除區塊，請將游標移到區塊上，然後點擊 Delete Item（刪除項目）。

4. 儲存並發佈

   點擊 Save（儲存），然後點擊 Publish（發佈）。

從空白大型選單建立瀑布流版面

1. 加入空白大型選單

   點擊 Add submenu，將游標指向 Mega menu（大型選單），然後點擊 Blank（空白）上的 Select。也可以使用現有的大型選單。

2. 每一欄加入一個項目群組

   點擊 Add block，選擇 Multi block（多重區塊），然後選擇 Group of items；每個群組就是一欄。在 Elements 樹狀清單中，它會顯示為 Group of items (Masonry grid layout)。

   

   (1) 選擇分頁，(2) 將游標移到版面上並點擊 Select。

3. 設定群組寬度

   新群組的寬度為 50%。設定每個群組的 Width（寬度），讓所有欄排在同一列，例如 4 欄設為 25%，3 欄設為 33.33%。

4. 填入每個群組

   在每個群組內點擊 Add block，加入該欄的區塊。將每個內部區塊的 Width 設為 100%，讓它們上下堆疊，而不是並排。

5. 儲存並發佈

   點擊 Save，然後點擊 Publish。

使用特殊選單範本

1. 加入範本

   點擊 Add submenu，將游標指向 Special menu，然後點擊 Special menu 範本上的 Select。

   

   (1) 指向 Special menu 群組，(2) 選擇 Masonry layout

2. 編輯分類與面板

   左側的每個分類都是一個分頁：先重新命名，再使用 Add block 填入其面板。請參閱分頁式選單。

3. 儲存並發佈

   點擊 Save，然後點擊 Publish。

兩個範本都會在大型選單面板中開啟，因此由上層項目的 Submenu（子選單）區段設定面板的寬度、對齊方式與背景。請參閱大型選單面板版面。

疑難排解

區塊並排而沒有上下堆疊

請在 Elements 樹狀清單中確認內部區塊位於 Group of items 內，且其 Width 為 100%。

群組換到第二列

群組寬度加總超過 100%。請調低寬度，讓它們排在同一列。

相關頁面

• 大型選單以連結清單、圖片、商品與聯絡表單等區塊，建立寬版的子選單面板。
• 分頁式選單讓顧客在同一個子選單中切換不同的內容群組，例如男裝、女裝與童裝。
• 區塊總覽在大型選單或分頁中新增連結、圖片、商品與倒數計時器等區塊。

這個頁面有幫助嗎？

回報問題