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

Wix Studio:Studio 編輯器簡介

隆重介紹 Studio 編輯器──專為專業人員打造的終極平台,協助輕鬆為客戶建立網站。直覺式介面提供流暢的編輯體驗和完整的像素級控制,讓每個細節都符合設計構想。
運用 AI 回應式技術,設計能在任何畫面或裝置上吸引目光的網站,每次都能帶來絕佳的使用體驗。
前往 Wix Studio 學院,探索更多 Wix Studio 線上研討會、教學和課程。

為客戶建立回應式網站

Studio 編輯器提供多種實用工具,讓網站在所有畫面上都能呈現出色效果。如此一來,便可專注於設計,無須花費太多時間為每個元件找出適合的尺寸單位。
先依照桌面版的預期效果設計元件,再選擇符合需求的回應式行為。元件會根據所選行為,自動配合不同斷點進行調整。
需要更精準的控制嗎?
使用進階回應式度量單位,在每個斷點上調整元件大小設定元件位置
檢驗器中元件可用回應式行為的範例
若要進一步加快流程,請使用回應式版面配置工具,按照 CSS 格線或 FlexBox 將相關元件組成群組。例如,格線會將元件保留在各自的儲存格中,而堆疊元件則會維持元件的垂直或橫向順序。
在畫布上拖曳格線,即可輕鬆新增欄或列的 GIF
重複使用設計,發揮極致效率:
建立自訂資產,例如設計完成的區段網站範本,即可儲存、分享並在其他網站上重複使用。
A screenshot showing how to save a designed element as an asset to a library

即時協作網站

Studio 編輯器是即時協作平台,可讓團隊同時編輯同一個網站。編輯頁面或元件的版面配置、設計和內容時,不會覆寫其他人的操作。
編輯器頂端顯示 3 個虛擬人像的螢幕截圖,代表 3 人正在同時編輯同一個網站
其他使用者所做的變更會在數秒內顯示於編輯器中。這可將衝突降至最低,方便與團隊成員和客戶有效率地合作。
顯示其他團隊成員選擇元件及其在編輯器中呈現方式的螢幕截圖
也可直接在畫布上處理客戶或團隊成員提出的問題。使用「留言」面板管理與網站相關的所有溝通內容,全程無須離開編輯器。團隊和客戶可在這裡分享意見回饋,並共同解決問題。

Example of a client commenting on a page for the site team to fix

運用動畫讓設計栩栩如生

在設計中加入動畫,能大幅提升整體效果。Studio 編輯器提供 5 種動畫類型,可依希望動畫顯現的時機選用。
可設定當訪客將游標暫留在元件上、點擊元件或捲動經過元件時顯現動畫。也可新增進入動畫(元件首次載入時播放),或設定無須訪客互動即可持續循環播放的動畫。
已在多個元件套用動畫的已上線網站範例

發揮 AI 的強大功能

AI 不只是流行語──Studio 編輯器提供一系列由 AI 驅動的功能,讓網站建立流程更加快速。

產生回應式版面配置

只要點擊按鈕,即可讓頁面或區段採用回應式設計。AI 工具會分析目前的版面配置,再套用回應式結構,呈現理想效果。因此,無需逐一檢查每個斷點,也不必花時間解決設計問題。
回應式 AI 工具產生版面配置後的預覽範例

產生文字

AI 文字建立工具將 OpenAI 的 ChatGPT 直接整合至編輯器。輸入一些詳細資訊即可建立指令,並取得適合專案的自訂內容建議。這有助於節省撰寫時間,同時兼顧內容品質。
GIF 顯示如何將 AI 文字建議套用至畫布上的段落

產生圖片

需要其他地方找不到的獨特圖片嗎?只要描述想要的圖片,即可取得多個可用於網站的建議。您可選擇插畫、3D、商品照、相片等多種樣式,讓結果完全符合需求。
AI 圖片建立工具的螢幕截圖,顯示根據指令產生的 4 種圖片變化。

透過免程式碼 CMS 管理大量內容

CMS(內容管理系統)可儲存大量內容、建立動態頁面範本,並接收訪客輸入的資料。網站交付後,客戶可透過 CMS 更新及新增內容,且不會影響原有設計。
顯示重複項目中資料集連結的螢幕截圖。

新增自訂 CSS 程式碼

為元件新增 CSS,即可運用更多樣式設計方式。您可建立獨特的設計與動畫,同時充分發揮回應式設計的效果。
選擇畫布上的元件,再選擇其中一個全域類別即可開始。找不到需要的類別嗎?您可將自訂類別新增至程式碼。
編輯器中的全域 CSS 頁面範例,畫面中選擇了按鈕,並顯示可用的 CSS 類別