開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
placeholder-preview-image

Studio 編輯器:變更及自訂區段背景

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

新增區段背景色彩

可為區段背景選擇任何色彩,包括主題色彩或自訂色彩。若想讓背景更柔和,也可設定不透明度。

若要變更區段的背景色彩:

  1. 選擇相關區段。
  2. 點擊編輯器右上方的「開啟檢驗器」圖示 。
在 Studio 編輯器中開啟檢驗器面板的畫面截圖。
  1. 點擊「設計」下方的色彩方塊。
  2. 根據偏好選擇色彩:
    • 主題色彩:選擇其中一種網站色彩。
    • 我的色彩:選擇現有的自訂色彩。
    • 新色彩:點擊「+ 新增」,在色彩選擇器中新增色彩。
  3. (選用)使用滑桿調高或調低色彩的不透明度。
在 Studio 編輯器的檢驗器面板中,使用色彩選擇器挑選區段背景色彩

新增區段背景漸層

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

若要為區段新增漸層背景:

  1. 選擇相關區段。
  2. 點擊編輯器右上方的「開啟檢驗器」圖示 。
在 Studio 編輯器中開啟檢驗器面板的畫面截圖。
  1. 點擊「設計」下方的色彩方塊。
  2. 根據偏好點擊下方選項,了解各類漸層的建立方法:
Studio 編輯器:區段背景流體漸層設定

新增區段背景圖片

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

若要為頁面區段新增圖片背景:

  1. 在編輯器中開啟相關頁面。
  2. 選擇後續操作:
在 Studio 編輯器的檢驗器面板中將圖片設為區段背景
已將網站從 Editor X 更新至 Studio?
若已對背景圖片套用視差效果,該效果在 Studio 中仍會保持不變,除非刪除效果或取代圖片。

在 Studio 編輯器中,可透過以下任一方式為圖片新增視差效果:
  • 將圖片設為區段背景,再對區段套用背景捲動效果。
  • 將圖片新增至區段,再對圖片套用捲動視差動畫。請勿對圖片套用任何其他動畫。

新增影片至區段背景

新增影片背景,讓區段更有動感。您可選擇影片焦點、變更播放速度,並決定是否循環播放。
我們提供完整的免費影片庫,可用於背景。您也可使用自己的檔案,或向 Shutterstock 採購影片。
提示:
您可在影片背景上新增色彩或漸層覆蓋效果。點擊色彩方塊以選擇色彩或漸層,再拖曳滑桿以調整此圖層的不透明度。

若要為頁面區段新增影片背景:

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

新增區段背景的圖樣疊加

在區段背景上套用有趣的圖樣。提供各種色彩與大小的圖樣可供選擇──瀏覽清單,點擊喜歡的圖樣,即可查看與背景的融合效果。

若要在區段背景新增圖樣疊加:

  1. 選擇相關區段。
  2. 點擊編輯器右上方的「開啟檢驗器」圖示 。
在 Studio 編輯器中開啟檢驗器面板的畫面截圖。
  1. 啟用「套用圖樣疊加」切換開關(位於「背景疊加」下方)。
  2. 瀏覽可用的圖樣。點擊圖樣即可新增為疊加效果,並查看是否適合背景。
在 Studio 編輯器中瀏覽可用的圖樣疊加,並套用至現有區段

為區段背景新增捲動效果

背景捲動效果可在訪客上下捲動客戶網站時營造動態感。您可選擇各式各樣的效果(例如視差、3D、縮放),讓客戶的內容更加出色。
注意:
可用的捲動效果取決於所選的區段背景類型(例如色彩、圖片等)。

若要新增背景捲動效果:

  1. 選擇相關區段。
  2. 點擊編輯器右上方的「開啟檢驗器」圖示 。
在 Studio 編輯器中開啟「檢驗器」面板的畫面截圖。
  1. 點擊「動畫與效果」索引標籤 。
  2. 點擊「捲動」下方的「+新增」。
  3. 從清單中選擇所需效果。
  4. (選用)點擊底部的「調整動畫」,即可微調效果設定。
圖片背景區段旁顯示「檢驗器」面板與「動畫」索引標籤,正在設定背景捲動動畫。