Accordion Group 區塊

Accordion Group 區塊提供簡潔且互動的方式,在商店和商品頁面展示可摺疊內容。設計用於協助商家將資訊組織為易於管理的可展開區段,提升可讀性和使用體驗。

Accordion Group

透過群組多個摺疊項目,此區塊讓你以緊湊、易用的格式呈現資訊,減少頁面混亂,同時保持內容可存取性。

區塊結構

Accordion Group 區塊是容器,讓你將多個可摺疊項目以結構化且可存取的版面群組。

每個項目包含 Accordion Header 和 Accordion Panel,讓顧客可以展開和摺疊內容區段。這使其適合組織常見問題、商品細節、多步驟說明及其他結構化內容。

插入 Accordion Group 區塊時,會自動包含:

• Accordion
  • Accordion Header:可點擊的標題,切換顯示狀態。
  • Accordion Panel:展開或摺疊的內容區段。

可在單一群組中新增多個 Accordion 項目,打造一致且有組織的顯示效果。

Accordion Group

Accordion Header

Accordion Header 作為可點擊觸發器,展開或摺疊相關的內容面板。

Accordion Header Settings

可在側邊欄找到 Accordion Header 區塊設定。Accordion Header 提供以下選項:

Icon

此選項讓你在標題文字旁新增視覺提示,增強使用者理解。

• Icon Selector:從下拉選單選擇圖示。
• None:選擇時停用圖示。

圖示特別有助於讓摺疊功能更直覺,尤其在行動裝置或注重無障礙性時。

Icon Position

控制所選圖示的位置:

• Left:圖示顯示在標題文字前方。
• Right (Default):圖示顯示在文字標籤後方。

適當的圖示位置可協助維持與其他頁面元素的設計一致性,或符合商店的版面方向(例如 RTL 語言)。

Accordion Panel

Accordion Panel 是可摺疊的內容區域,點擊相關 Accordion Header 時顯示。此區段讓你新增內容,直到使用者選擇點擊標題才會顯示。

Accordion Panel Block

Accordion Panel 支援所有標準 WordPress 區塊,讓其對各種內容類型具有高度彈性。

使用區塊主題時,WooCommerce 提供的「Single Product」範本讓你插入 WooCommerce 專屬區塊,例如 Product Description、Reviews 或 Additional Information。這些區塊會自動提取當前商品的動態資料,確保與商店內容無縫整合。

此彈性讓 Accordion Panel 成為組織詳細、多媒體豐富內容的適當選擇,同時保持頁面版面簡潔且易用。