Studio 編輯器:新增與自訂重複器
5 分鐘
重複器是具有相同設計和版面配置的項目清單,但每個項目的內容不同。這是顯示內容(包括來自網站 CMS (內容管理系統) 的內容)快速且簡便的方法。
在 Studio 編輯器中,重複器以回應式彈性版面配置排列,讓每個項目在各種畫面尺寸上都能呈現絕佳效果。
前往 Wix Studio 學院 檢查更多 Wix Studio 線上研討會、教學與課程。
新增重複器
我們提供大量預先設計的重複器,供您根據需求新增並自訂。部分重複器包含圖片,部分則偏向強調文字的「清單」樣式。
新增喜歡的重複器後,即可開始處理內容。將元件新增至重複器項目時,系統會自動將其新增至其他項目,以保持設計一致。即便如此,您仍可自訂每個項目中的個別元件(例如:文字、圖片)。
若要新增重複器:
- 點擊編輯器左側「新增元件」圖示 Add Elements
。 - 點擊 版面配置工具。
- 點擊 重複器。
- 將重複器拖曳至頁面。
提示:
從一個重複器項目中刪除元件,將會同時刪除所有其他項目中的該元件。
管理重複器項目
您可以在檢驗器面板中輕鬆複製、重新命名、重新排序和刪除重複器項目。
若要管理重複器項目:
- 選擇相關重複器。
- 點擊編輯器右上方「開啟檢驗器」圖示 Open Inspector
。

- (於檢驗器中)點擊項目數量旁的 管理。

- 選擇管理重複器項目的方式:
- 複製項目: 選擇項目,然後點擊底部的 複製項目。
- 刪除項目: 點擊項目旁邊的 更多操作 圖示
,然後點擊 刪除。 - 重新命名項目: 點擊項目旁邊的 更多操作 圖示
,然後點擊 重新命名。
提示: 重新命名一個項目會自動重新命名此重複器中的其他項目。 - 重新排序項目: 按住項目旁邊的 重新排序 圖示
並將其拖曳到新位置。

設計重複器
自訂重複器的設計,使其與客戶的網站風格一致。您可以更改項目的背景色彩、新增邊框、陰影,或是在訪客浮動於重複器上方時顯現有趣的游標。
若要設計重複器:
- 選擇重複器項目。
- 點擊編輯器右上方「開啟檢驗器」圖示 Open Inspector
。

- 使用 設計 下的可用選項來自訂重複器:
- 更改所有項目的填滿色彩和不透明度。
- 新增邊框和陰影,讓項目更加突出。
- 將項目角落設為矩形或圓角。
- 新增酷炫的游標,在訪客浮動於重複器上方時顯現。

為重複器項目設定 AB 設計模式
將重複器項目拆分為 2 個群組,建立更精緻的設計。AB 模式可讓您為同一設計建立兩個版本,並套用不同的樣式與動畫。
啟用 AB 圖樣後,重複器項目將分為 A 和 B 兩組。您可以在編輯器中查看哪些項目屬於各個群組。設計任何 A 或 B 項目時,該群組中的其他項目會自動更改以保持一致。
若要為重複器項目設定 AB 設計模式:
- 選擇相關重複器。
- 點擊編輯器右上方「開啟檢驗器」圖示 Open Inspector
。

- 向下捲動至 版面配置。
- 開啟 設定 AB 設計圖樣 切換開關。
- 設計項目 A 和 B:
- 點擊重複器中的項目 A 或 B。
提示: 可以是相關群組中的任何項目。 - (在檢驗器中)選擇您想要如何自訂此項目群組:
- 從 設計 區段中選擇設計預設格式。
- 更改項目的 填滿色彩和不透明度。
- 從 互動 索引標籤新增動畫
(請留意: 具有 AB 圖樣的重複器項目僅提供浮動和點擊式互動)。 - 從 游標 區段套用自訂游標。
- 對另一組項目重複步驟 a-b。
- 點擊重複器中的項目 A 或 B。

變更重複器版面配置
設定當畫面尺寸變更時重複器項目的排列方式。根據所選的顯示類型(如卡、清單、滑桿、格線儲存格),您可自訂邊距、對齊方式、方向和其他設定。
使用斷點:
- 您可針對每個斷點為重複器設定不同的版面配置。
- 清單和滑桿通常用於較小的畫面尺寸,例如平板和行動裝置。
若要進一步自訂重複器的版面配置:
- 選擇相關重複器。
- 點擊編輯器右上方「開啟檢驗器」圖示 Open Inspector
。

- 向下捲動至版面配置。
- 根據已選擇的顯示類型自訂重複器的版面配置:
卡:版面配置選項
清單:版面配置選項
滑桿:版面配置選項
格線儲存格:版面配置選項
關於間隙的注意事項:
部分舊版瀏覽器不支援 CSS 間隙(例如 Chrome 76-83、Safari 12-14 和 Edge 79-83)。這表示從這些瀏覽器存取網站的訪客將無法看到在重複器項目之間設定的間隙。

常見問題
點擊下方問題即可瞭解更多資訊。
重複器有哪些可用的回應式行為?
哪些元件無法新增至重複器?
為什麼重複列表在行動裝置上無法正確顯示?

