Wix 說明

Studio 編輯器是專為專業人員打造的終極平台,可輕鬆為客戶建立網站。直覺式介面帶來流暢的編輯體驗與完整的像素級控制,讓每個細節都符合設計構想。
運用 AI 回應式設計功能,打造在任何畫面或裝置上都引人入勝的網站,每次都能提供出色的使用體驗。
逐步推出中:

Studio Two 編輯器正逐步開放給所有 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 直接整合至編輯器。輸入幾項詳細資料來建立指令,即可取得符合專案需求的自訂內容建議,省下撰寫時間,同時兼顧品質。
將 AI 文字建議套用至畫布段落的 GIF

產生圖片

需要獨一無二、不會在其他地方出現的圖片嗎?描述想要的圖片,即可取得多個可用於網站的建議。您可選擇多種樣式,包括插畫、3D、商品攝影、相片等,讓結果精準符合需求。
AI 圖片創作工具的畫面截圖,以及根據指令產生的 4 種圖片變化。

使用免程式碼 CMS 管理大量內容

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

新增自訂 CSS 程式碼

為元件新增 CSS,即可解鎖更多樣式設定的可能性,建立獨特的設計和動畫,同時充分發揮回應式效果。
選擇畫布上的元件,再選取其中一個全域類別即可開始。找不到合適的類別嗎?可在程式碼中新增自訂類別。
編輯器中全域 CSS 頁面的範例,畫面已選擇按鈕並顯示可用的 CSS 類別