Studio 編輯器：新增並自訂摺疊式選單
3 分鐘
使用摺疊式選單元件在有限的空間內顯示大量內容。透過允許訪客展開和收合品項，他們無需捲動長清單即可輕鬆找到所需的資訊。
新增摺疊式選單元件
選擇喜歡的摺疊式選單設計以立即開始。您可以個人化摺疊式選單中的每個品項，以顯示客戶的內容。新增所需元件並在容器內隨意整理。
若要新增摺疊式選單元件：
- 點擊編輯器左側的「新增元件」
。 - 點擊「版面配置工具」。
- 點擊「摺疊式選單」。
- 將喜歡的摺疊式選單拖曳到頁面上。
- 編輯摺疊式選單品項的內容：
- 選擇剛新增的摺疊式選單元件。
- 點擊「管理品項」。
- 點擊要編輯的品項。
提示： 這會在畫布上開啟該品項，以便查看目前顯示的內容。 - 將相關元件和資訊新增至品項。
新增並管理摺疊式選單品項
管理摺疊式選單元件中顯示的品項。您可以為客戶內容新增更多品項、賦予新標題並更改其顯現順序。
若要新增並管理摺疊式選單品項：
- 選擇摺疊式選單元件。
- 點擊 管理品項。
- 將滑鼠游標懸停在品項上，然後點擊 更多操作 圖示
。 - 選擇要對此摺疊式選單品項執行的操作：複製、重新命名 或 刪除。
提示：
- 點擊面板底部的「新增品項」即可新增空白品項。
- 您可以更改品項的順序。按住品項旁的「重新排序」圖示
並將其拖曳到所需地點。
選擇摺疊式選單開啟與關閉方式
決定訪客載入頁面時摺疊式選單的顯示方式。您可以讓所有品項保持展開，以便輕鬆存取資訊；或保持關閉以呈現更極簡的外觀。您也可以選擇訪客是否可以同時開啟多個品項。
若要選擇摺疊式選單開啟與關閉方式：
- 選擇摺疊式選單元件。
- 點擊 設定 圖示
。 - 在 選擇預設狀態 下選擇一個選項：
- 全部品項已關閉： 訪客最初會看到摺疊式選單品項處於關閉狀態。他們可自行選擇要展開哪個品項以閱讀更多資訊。
- 第一個品項已展開： 訪客會看到最上方品項的內容，而其他品項則處於關閉狀態。
- 全部品項已展開： 頁面載入時，訪客會看到所有品項的內容。
- 點擊 允許開啟多個品項 切換開關：
- 已啟用： 訪客可以在摺疊式選單中根據需求開啟多個品項。
- 已停用： 訪客一次只能開啟一個品項。
- （選填）套用訪客點擊品項開啟時顯現的轉場效果。
請留意：
若在預設狀態選擇了 全部品項已展開，則無法使用允許在摺疊式選單中同時開啟多個品項的選項。
設計摺疊式選單
您可以設計摺疊式選單的每個部分，使其與頁面其餘部分相符。自訂品項標題、顯示每個品項內容的容器，或品項的整個空間（包含標題和容器）。
若要設計摺疊式選單：
- 選擇摺疊式選單元件。
- 點擊編輯器右上角的 開啟檢驗器 圖示
。
- 從下拉式選單中選擇要設計的部分：
- 標題： 這些是品項的標題。您可以將標題設計成在訪客將滑鼠浮動於其上時顯示不同外觀。
- 容器： 這些是顯示每個品項內容的容器。
- 摺疊式選單品項： 這會控制摺疊式選單品項的整個空間（包含標題和容器）。
- 使用可用選項來挑選不同的背景、字型、圓角、邊框及尚有其他項。
調整摺疊式選單版面配置
根據需求調整摺疊式選單元件的版面配置。您可以選擇品項標題的對齊方式、邊距和位置，以及每個標題旁顯示的圖示。
提示：
您可針對每個個別品項套用 CSS 格線，建立 Pix 完美的版面配置。
若要調整摺疊式選單版面配置：
- 選擇摺疊式選單元件。
- 點擊「版面配置」圖示
。 - 調整摺疊式選單元件的版面配置：
- 選擇圖示： 選擇顯示在品項標題旁的圖示：箭頭或 Plus。
- 圖示位置： 決定圖示要顯示在標題的左側或右側。
- 品項間距： 拖曳滑桿以縮小或放大品項之間的間距。
- 標題邊距： 拖曳滑桿以在品項標題周圍增加橫向和垂直邊距。
- 格式設定： 選擇摺疊式選單品項的方向和對齊方式。
