Studio 編輯器:變更及自訂區段背景
精準設計客戶網站的每個區段。選擇背景色彩、漸層、圖片或影片,營造合適的風格。還可加入圖樣疊加和捲動效果,提升視覺吸引力並創造更引人入勝的體驗。
根據客戶的品牌和願景自訂這些元素,同時兼顧使用者互動體驗。
小提醒:
- 可針對各個斷點設定區段的背景色彩/漸層,讓背景在每部裝置上都呈現理想效果。
- 若要加快設計流程,我們建立了大量現成且完全採用回應式設計的區段。可在「區段」下方找到,位置在「新增元件」面板中。
新增區段背景色彩
可為區段背景選擇任何色彩,包括主題色彩或自訂色彩。若想讓背景更柔和,也可設定不透明度。
若要變更區段的背景色彩:
- 選擇相關區段。
- 點擊編輯器右上方的「開啟檢驗器」圖示
。

- 點擊「設計」下方的色彩方塊。
- 根據偏好選擇色彩:
- 主題色彩:選擇其中一種網站色彩。
- 我的色彩:選擇現有的自訂色彩。
- 新色彩:點擊「+ 新增」,在色彩選擇器中新增色彩。
- (選用)使用滑桿調高或調低色彩的不透明度。

新增區段背景漸層
Studio 編輯器提供多種區段背景漸層:
- 放射狀、線性或錐形漸層
:最多可選擇 8 種色彩,並分別控制各種色彩的不透明度。也可調整角度(線性)、焦點(放射狀)或同時調整兩者(錐形),呈現理想效果。 - 流體漸層
:這種漸層可建立網狀效果,並視需要混合任意數量的色彩。可分別控制漸層中各種色彩的不透明度、大小和擴散範圍。
若要為區段新增漸層背景:
- 選擇相關區段。
- 點擊編輯器右上方的「開啟檢驗器」圖示
。

- 點擊「設計」下方的色彩方塊。
- 根據偏好點擊下方選項,了解各類漸層的建立方法:
新增線性、放射狀或圓錐形漸層
新增流體漸層

新增區段背景圖片
可從畫布或檢驗器面板將圖片新增至區段背景。可使用自行上傳的圖片、選擇 Wix/Unsplash 提供的免費圖片,或購買 Shutterstock 圖片。新增圖片後,可調整焦點,讓相關部分始終保持顯示。
提示:
可在圖片上疊加色彩或漸層。點擊色彩方塊以選擇色彩或漸層,再拖曳滑桿調整此圖層的不透明度。
若要為頁面區段新增圖片背景:
- 在編輯器中開啟相關頁面。
- 選擇後續操作:
直接在畫布套用圖片背景
從檢驗器面板套用圖片背景
自訂現有圖片背景

已將網站從 Editor X 更新至 Studio?
若已對背景圖片套用視差效果,該效果在 Studio 中仍會保持不變,除非刪除效果或取代圖片。
在 Studio 編輯器中,可透過以下任一方式為圖片新增視差效果:
- 將圖片設為區段背景,再對區段套用背景捲動效果。
- 將圖片新增至區段,再對圖片套用捲動視差動畫。請勿對圖片套用任何其他動畫。
新增影片至區段背景
新增影片背景,讓區段更有動感。您可選擇影片焦點、變更播放速度,並決定是否循環播放。
我們提供完整的免費影片庫,可用於背景。您也可使用自己的檔案,或向 Shutterstock 採購影片。
提示:
您可在影片背景上新增色彩或漸層覆蓋效果。點擊色彩方塊以選擇色彩或漸層,再拖曳滑桿以調整此圖層的不透明度。
若要為頁面區段新增影片背景:
- 選擇相關區段。
- 點擊編輯器右上角的「開啟檢驗器」圖示
。

- 點擊「媒體」下方的「+ 新增圖片或影片」。
- (在媒體管理器中)選擇後續操作:
- 選擇或上傳自己的影片。
- 點擊「Wix 媒體」/「Unsplash」索引標籤,使用免費影片。
- 點擊「Shutterstock」索引標籤,從 Shutterstock 購買影片。
- 點擊「變更背景」。
- (選填)在檢驗器面板中自訂影片背景:
- 焦點:點擊焦點圖示
,選擇影片中即使畫面大小有所調整,也應一律顯示的區域。 - 不透明度:拖曳滑桿,調整影片的可見度。
- 播放速度:點擊下拉式選單,選擇播放速度(例如「一般」、0.25x、1.25x)。
- 循環播放:點擊切換開關,變更影片播放方式:
- 啟用:影片會在背景中無限循環播放。
- 停用:訪客只會看到影片播放一次,之後便會停止。
- 焦點:點擊焦點圖示
想查看上線效果嗎?
點擊影片上的「播放」按鈕,即可直接在畫布上查看顯示效果。

新增區段背景的圖樣疊加
在區段背景上套用有趣的圖樣。提供各種色彩與大小的圖樣可供選擇──瀏覽清單,點擊喜歡的圖樣,即可查看與背景的融合效果。
若要在區段背景新增圖樣疊加:
- 選擇相關區段。
- 點擊編輯器右上方的「開啟檢驗器」圖示
。

- 啟用「套用圖樣疊加」切換開關(位於「背景疊加」下方)。
- 瀏覽可用的圖樣。點擊圖樣即可新增為疊加效果,並查看是否適合背景。

為區段背景新增捲動效果
背景捲動效果可在訪客上下捲動客戶網站時營造動態感。您可選擇各式各樣的效果(例如視差、3D、縮放),讓客戶的內容更加出色。
注意:
可用的捲動效果取決於所選的區段背景類型(例如色彩、圖片等)。
若要新增背景捲動效果:
- 選擇相關區段。
- 點擊編輯器右上方的「開啟檢驗器」圖示
。

- 點擊「動畫與效果」索引標籤
。 - 點擊「捲動」下方的「+新增」。
- 從清單中選擇所需效果。
- (選用)點擊底部的「調整動畫」,即可微調效果設定。



。
。
。
。
。

,選擇捲動效果(例如視差)。