Studio Two 編輯器：使用檢驗器面板

可在檢驗器面板中編輯任何元件、區段或頁面的屬性。所有操作都可集中在這裡完成，包括設定元件在不同斷點的大小調整方式、調整設計、新增動態效果，以及將內容連結至資料來源。

可在「設計」索引標籤中控制元件在不同斷點的外觀與行為。這是開啟檢驗器時最先看到的索引標籤，包含大小、間距、色彩、文字設計和自訂 CSS 等所有設定。

點擊索引標籤頂端的圖示，即可將所選元件對齊上層元件。圖示下方顯示的可用區段取決於所選元件：

• 大小：設定元件的寬度和高度，並選擇元件在不同畫面上的大小調整方式。
• 元件設計：設定元件的外觀，包括色彩、邊框、圓角、陰影和文字設計。如果元件由多個部分組成（例如選單），或具有游標懸停和停用狀態（例如按鈕），請先選擇要設定樣式的部分或狀態。
• 版面配置（容器和區段）：調整元件在上層元件中的排列方式。選擇格線版面配置、設定邊距，並決定如何處理溢出的內容。將「垂直間距」從「自動」切換為「手動」，即可在各個斷點設定不同的元件間距。
• 位置：選擇位置類型（例如相黏、釘選），並設定邊距和停駐方式，讓元件在畫面大小變更時維持原位。
• 外觀：設定元件的不透明度和旋轉角度。
• 游標：為元件、區段或頁面新增自訂游標。
• 錨點：新增錨點，即可直接連結至元件，並複製錨點網址。
• 自訂 CSS：為所選元件編寫 CSS。

可在「動態效果」索引標籤中為元件和區段新增動態效果。同一個元件可套用不同類型的動畫。例如，元件可在載入時淡入、回應訪客的游標動作，並隨頁面捲動而移動。

選擇所需的動態效果類型：

• 進入：元件首次載入時播放動畫。例如，讓元件展開、淡入或傾斜。

• 循環：讓元件持續循環播放動畫，不需透過任何特定操作觸發。

• 捲動：訪客在頁面上下捲動時，讓元件播放動畫。

• 游標效果：讓元件透過動畫回應游標移動。

• 點擊：訪客點擊元件時播放動畫。

• 游標懸停：訪客將游標懸停在元件上時播放動畫。
  注意：按鈕和選單等部分元件提供內建的游標懸停狀態，因此不會顯示新增其他游標懸停動畫的選項。若要自訂游標懸停狀態，請前往「設計」分頁，然後選擇「狀態」下方的「游標懸停」。

從「設定」分頁設定所選元件的進階行為。

• 資料來源：將頁面、區段或容器連結至資料來源，其中的元件便可使用該來源的資料、操作和功能。點擊「連結來源」即可開始。

• 屬性：編輯所選元件的內容和行為。可用選項取決於元件類型。例如，選擇按鈕時，可自訂按鈕文字和連結，或停用按鈕。點擊欄位旁的「連結資料」圖示 ，即可連結至資料來源，不必手動輸入值；也可點擊「使用 AI 設定」，向 Aria 尋求協助。

• 無障礙：讓使用輔助技術的訪客更容易操作元件。視元件而定，可設定元件身分、標示為裝飾性元件、新增無障礙名稱，以及選擇螢幕助讀程式播報更新的方式。

• 進階：

  • 可見度條件：當資料來源中的條件為成立／不成立時，隱藏元件。

  • 事件處理常式：元件發生點擊或游標懸停等事件時執行函式。按鈕等特定元件可使用事件處理常式。

點擊下方問題即可了解更多。