Wix 編輯器工具列總覽｜12 個常用功能與操作技巧

如果你剛開始接觸 Wix 編輯器，可能會對上方與側邊的工具列感到陌生。

本篇文章將逐一解析編輯器中的每個實用工具，幫助你理解它們的功能、應用場景，並提供操作建議，讓你在設計網站時更有效率、不漏關鍵細節！

快速導覽｜Wix 編輯器教學重點

• 搜尋與預覽

• 儲存與發佈的差異

• 桌機與手機版切換的操作

• 調整縮放比例的應用建議

• 工具功能列解析（對齊、圖層、標尺等）

• 實用快捷功能（復原、重做、快速導覽）

• FAQ 常見問題

---

搜尋功能：快速定位任何工具

Wix 編輯器的「搜尋」功能位於畫面右上角，圖示是放大鏡。

功能說明：

• 可搜尋元件（如按鈕、圖庫）、項目等等

• 特別適合網站元件較多的情境

• 節省找應用程式、元件位置的時間

📌 應用建議：打「表單」就能快速跳到聯絡表單、訂閱表單的相關工具，不需從左方一層一層找。

Wix 編輯器右上角使用搜尋與預覽功能

預覽功能：上線前先檢查設計狀況

點擊「預覽」按鈕，即可看到使用者實際在瀏覽器中看到的網站畫面。

功能說明：

• 預覽模式不等於發佈，只是設計草稿的模擬呈現

• 支援桌機版與手機版畫面切換

• 可測試連結、互動，動畫元件是否正常

📌 應用建議：套用動畫、移動效果時務必先預覽檢查，避免動線太混亂或閱讀干擾。

---

💾 儲存 vs 🚀 發佈：差在哪？

點擊儲存不會立即上線，僅將設計存入後台；要公開變更，必須點選『發佈』

Wix 編輯器會提示你儲存進度，但「儲存」和「發佈」其實是兩回事。

功能	作用	訪客是否看得到？
儲存 Save	儲存在編輯器內部草稿	❌
發佈 Publish	上傳變更至公開網站	✅

📌 應用建議：每次結束設計請先儲存，確認無誤後再發佈，避免草稿遺失或網站異常。

Wix的自動儲存讓你設計更安心：「自動儲存功能」，也就是你在編輯網站的過程中，系統會定時自動備份進度，讓你即使忘記手動儲存，也不會白做工。

補充提醒：

儘管 Wix 有自動儲存，發佈網站仍需手動點擊「發佈」按鈕，才能將變更內容正式上線給訪客瀏覽。

---

切換裝置：桌機與手機版分開設計

切換桌機與行動版顯示模式

左上角的裝置圖示可切換桌機與手機模式。手機版並不是「自動響應式」設計，而是獨立樣式層，可微調物件位置，不會影響另一個版型。

功能說明：

• 內容一致，但顯示與排版可以分開設計

• 手機版設計不會影響桌機版的外觀

📌 應用建議：行動裝置使用者多，務必檢查手機版樣式與點擊體驗！

---

畫面比例調整：50%、100%

預覽與設計 Wix 網頁時調整視圖比例的控制區

畫面右上角的縮放控制，讓你依照需求調整編輯畫布大小。

比例	建議用途
50%	查看整體結構、區塊分布是否均衡
100%	模擬實際使用者瀏覽畫面

📌 應用建議：設計前用 50% 瀏覽整體，再以 100% 做細部微調。

---

Wix 視覺設計工具說明：圖層、對齊、尺規與工具列操作解析

開啟工具選單時的完整功能總覽畫面

在上方「工具」選單中，有幾個非常關鍵的設計輔助工具：「工具」功能讓你能更有系統地規劃網頁排版，掌控物件對齊、層次、比例與精度，是進階使用者不可忽略的編輯區。

圖層（Layers）

• 功能說明：查看與管理網頁上所有元件的「前後層級關係」

• 用途：方便點選被遮蔽或重疊的元件（如圖片蓋到文字）

• 實用建議：可拖曳調整層級順序，解決「點不到元件」的困擾

工具列（Toolbar）

• 功能說明：提供快速對齊、旋轉、位置設定等功能的常駐工具列

• 用途：選取任一元件後會顯示，用於微調物件的座標與外觀

• 顯示控制：可在「工具 > 顯示工具列」中切換開啟與否

尺規（Rulers）

• 功能說明：在畫布上下左右顯示像素刻度，協助設計對齊與距離測量

• 用途：配合「拖曳輔助線」使用，確保元件距離一致

• 常見用法：確保 LOGO 與選單在每頁的對齊一致性

網格線（Gridlines）

• 功能說明：畫面中的灰色輔助線，用來標示「安全區域」

• 用途：避免重要內容跑出瀏覽器畫面外，特別在手機版尤為重要

• 建議開啟：讓內容永遠不會被裁切或溢出版型

配合物件（Snap to Objects）

• 功能說明：讓元件自動對齊其他物件邊緣、中心點

• 用途：提升排版整齊度與一致性

• 啟用建議：設計時務必開啟，避免手動對齊誤差

編輯器附加元件（Editor Add-ons）

• 功能說明：安裝後會顯示在畫布中的附加模組，通常由應用程式帶入

• 用途：例如聊天視窗、預約系統、彈跳視窗等

• 如何顯示／隱藏：可在工具區中一鍵管理是否顯示所有附加元件

📌 使用建議：以上工具「全部開啟」作為預設編輯狀態，特別在進行視覺對齊、層次調整與版面微調時非常有幫助。

---

快捷功能操作（復原、重做）

編輯器中使用 Ctrl+Z 與 Ctrl+Y 快捷鍵操作的圖解

快捷功能操作

• 復原（Undo）Ctrl+Z：回到上一步操作

• 重做（Redo）Ctrl+Y：還原剛才復原掉的動作

📌 應用建議：排版設計時常要嘗試不同配置，這兩個快捷鍵能大幅減少反覆操作的時間。

---

FAQ 常見問題

1. 「預覽」會上線網站嗎？

不會。預覽只是設計草稿畫面的模擬，必須按「發佈」才會公開上線。

2. 編輯手機版會影響桌機版嗎？

3. 沒有看到「圖層」選項怎麼辦？

4. Wix 的「工具列」功能找不到怎麼辦？

5. 我已經儲存網站，為什麼還看不到更新內容？

---

小結：掌握工具列＝加快建站效率

熟悉 Wix 編輯器的每個工具，是架站效率提升的關鍵。本篇文章幫助你了解每一個操作的功能與時機，協助你避開常見誤區，也讓設計過程更順暢。

想系統學會 Wix 編輯器每一項工具的實戰應用嗎？歡迎預約數位茄子專業顧問，我們提供一對一網站診斷與客製化教學 🔧📞 預約免費諮詢

點我前往 → 數位茄子 wix 推薦大使