Wix 編輯器教學｜第11課：Wix手機版調整實作流程 元素調整隱 藏手機專屬元件與選單Icon設定
- 數位茄子
- 2025年12月25日
- 讀畢需時 7 分鐘
手機版的重點不是把畫面塞進去，而是把閱讀順序排順，把可點擊區域做大把導覽入口留在使用者看得到的位置。本課用七步驟帶你把這三件事落實到Wix手機版編輯器的每個操作。
一. 進入Wix手機版調整編輯模式
打開Wix編輯器後，在左上方工具列找到裝置切換功能點選手機圖示切換到行動版，切換後你看到的排列與調整，都只會影響手機版不會改到桌機版，這點非常重要！你可以放心調整
二. 先處理自動帶入的桌機元素
第一調整大小
文字不要小到需要放大閱讀，圖片不要大到把首屏擠爆，先讓畫面舒服再談美感
第二調整位置
手機版的閱讀路徑以由上到下為主，確保標題 / 內文 / 按鈕 / 圖片的順序符合閱讀直覺，避免左右交錯造成找不到重點。
第三視需要調整元素
設定依元素類型不同，你可能需要改按鈕樣式 / 文字對齊 / 影像顯示方式或元件細節，原則是以可讀性與可點擊性優先。
三. 隱藏不適合手機的元素
當你遇到以下狀況，就不該硬塞：元素在手機上變得多餘。造成內容被擠壓或遮擋。只在桌機用來襯托氛圍，但手機看不出價值。
這裡要特別補充一個重點：不只是單一元件可以隱藏，連同整個區段也能隱藏。如果你發現某一段內容在手機上整段都不適合，例如過長的裝飾區、過多並排資訊、或桌機專用的展示區塊，直接把區段隱藏會更乾脆，也更不容易留下版面破洞。
如何隱藏元素或區段
操作順序如下：
第一，選取你要隱藏的目標，可以是單一元素，也可以是整個區段。
第二，點選「Hide Element / Section」圖示。
完成後，該內容只會在手機版隱藏，桌機版不受影響。
隱藏的元素在哪裡看得到
在進行Wix手機版調整時，你可以用「Hidden on Mobile」查看目前被隱藏的所有元素。
有些元素會被系統自動隱藏，例如部分第三方應用程式可能無法在手機上正常運作，因此Wix會先幫你藏起來，避免手機版出現錯誤或版面異常。
你也可以把不適合手機版呈現的元素或區段手動隱藏。
如何把隱藏的元素再顯示回來
如果你後悔隱藏，或想重新測試版面，可以這樣做：
第一，在Wix手機版編輯器左側點選「Hidden on Mobile」。
第二，找到你要恢復的元素。
第三，點選「Show Element」圖示，即可讓它回到手機版畫面中。
常見問題一：把桌機元素在手機版隱藏，會不會被刪掉
不會。在手機版「隱藏」桌機帶入的元素，並不等於刪除。它仍然存在於桌機版，也仍然保留在網站中。
如果你想「真正刪除」某個元素，必須回到桌機版編輯器，把該元素從桌機版移除，才會完全刪掉。
四. 加入只在手機版顯示的元素
在Wix手機版調整編輯時，你不只能整理桌機自動帶入的內容，還可以額外新增「只在手機版出現」的元件。這些手機專屬元件只會顯示在手機版，桌機版不會出現，適合用來強化手機使用者最在意的資訊與操作入口。
你可以這樣用(舉例說明) ：
加入手機專用 CTA 按鈕，把最重要的動作放大、放前面，例如立即聯絡、立即預約、直接導航，讓使用者不用滑很久才找到入口。
加入手機專用的短提示或重點摘要，把桌機版較長的內容濃縮成幾句話，讓手機閱讀更順、重點更明確。
原則很簡單：手機專屬元件不是用來塞更多內容，而是用來讓手機版更好看、更好點，也更容易完成下一步。
五. 認識手機選單 Icon 為什麼它影響整個網站體驗
手機選單 Icon 是使用者在手機上開啟選單的按鈕，通常是漢堡圖示它如果不夠清楚或滑著滑著不見使用者會更容易迷路或直接離開
六. 手機版 Header 滑動設定是什麼
在Wix手機版調整時，你可以決定 Header 在大家滑手機往下看內容時「要不要一直黏在上面」。這個設定很關鍵，因為它會直接影響使用者找不找得到選單，也會關係到你的內容會不會被 Header 擋住。
簡單說，它就是手機版的導覽手感開關，調對了，整個網站逛起來會順很多。
四種 Header 滑動效果差異
你可以依網站類型與版面需求，選擇以下其中一種效果。
跟著頁面滑動
Header 會維持在頁面上方，但會隨著使用者上下滑動一起移動。使用者如果滑到很下面，想要叫出選單，就需要再滑回上方。
固定在頂部
Header 會固定在螢幕最上方，不管使用者滑到哪裡都能立刻看到並點選選單。
這種設定通常最利於導覽，但也要注意 Header 高度是否過高，避免遮擋內容。
滑動時消失
使用者往下滑時 Header 會消失，想要再看到 Header 必須滑回頁面頂部。
這種設定能增加內容可視面積，但對需要頻繁切換頁面的網站來說，導覽會變得比較不方便。
漸淡消失
Header 會在使用者滑動時逐漸淡出，回到頁面頂部時再出現。它兼顧部分視覺清爽感，但仍需要注意使用者在頁面中段時是否會找不到選單入口。
手機版 Header 的滑動效果可以與桌機版分開設定，你可以依裝置特性做最合適的配置，例如桌機版採用跟著頁面滑動、手機版改為固定在頂部，讓手機使用者在任何位置都能快速開啟選單並保持良好導覽體驗。
不過要注意，Header 的滑動效果一旦設定完成，會套用到手機版網站的所有頁面，無法針對單一頁面單獨調整，因此選擇時要以全站一致的使用體驗為優先。設定完成後，建議立刻用手機版編輯器的預覽功能實際滑動檢查，確認使用者是否隨時找得到選單，同時檢視 Header 是否遮擋首屏標題或重要按鈕，避免影響閱讀與點擊。
七. 選單 Icon 與 Header 設定技巧 讓手機版不遮擋又好操作
把選單 Icon 設定成固定之後，最容易遇到的狀況就是「明明想讓人更好找選單，結果反而把內容蓋住了」 通常罪魁禍首是 Header 太高，首屏標題或第一段內容會被壓到，所以手機版 Header 真的不用做太厚，留 Logo 和選單入口就好，越精簡越不容易出事。
接著再把 Icon 外觀調到「看得見、但不搶戲」：Icon 要一眼就找得到，不要融在背景裡；但
同時 整體風格要跟網站一致，不要看起來像臨時貼上去的外掛。
最後再做一個小加分，把 Icon 的「開啟」和「關閉」做出明顯差異，讓使用者一看就知道選單有沒有打開，才不會一直重複點。
完成後用一眼檢查就行：首屏字有沒有太小、內容是不是一路往下滑就看得懂、有沒有被 Header 或 Icon 擋到、按鈕好不好點且不會誤觸、Icon 夠不夠清楚，以及 不適合手機的裝飾有沒有先藏起來。
常見問題Q&A
1 我在手機版調整元素 會不會影響桌機版
不會。你在行動版編輯器裡調的大小、位置與多數設定，都是手機版專用。
這也是為什麼你可以放心把手機版排到好讀好點，不需要擔心桌機版被你改亂。
2 我把元素隱藏了 是不是等於刪掉了
不是。隱藏只是不在手機版顯示，元素仍然存在桌機版，也沒有被刪除。
如果你想恢復顯示，到行動版左側的 Hidden on Mobile 裡找到它，按 Show 就會回來。如果你要真正刪除，必須回到桌機版編輯器把它移除，才會完全消失。
3 為什麼有些東西我沒手動隱藏 卻在 Hidden on Mobile 看到
常見原因是系統自動隱藏。某些第三方工具或元件在手機上可能不相容，Wix 會先幫你藏起來，避免手機版出現錯誤或版面崩掉。
你可以在 Hidden on Mobile 裡確認有哪些被隱藏，再決定要不要顯示回來。
4 我可以把 Wix Apps 只在手機版隱藏嗎 例如 Wix Stores 或 Wix Blog
不行。Wix Apps 不能只針對手機版做隱藏。你能做的是調整它在手機上的呈現方式與版面順序，但無法把整個 App 在手機版關掉。
5 選單 Icon 或 Header 固定後 擋到首屏標題怎麼辦
先不要急著怪 Icon，九成是 Header 太高。做法通常是三步：
第一，把手機 Header 精簡，只留 Logo 和選單入口。
第二，調整 Header 高度或上方留白，確保首屏標題與按鈕不會被壓住。
第三，用行動版預覽實際滑動檢查，確認滑到中段時不遮擋內容、回到頂部時也不會蓋住首屏重點。
到這裡，你的手機版調整其實已經有一套很穩的節奏：先切到手機版，把桌機自動帶入的內容「整理」好（大小、位置、必要設定），再把不適合手機的元素或整段區段「隱藏」掉，最後用「只在手機顯示」的元素把重點補強（例如更清楚的 CTA 或更短的重點摘要）。
接著把導覽體驗顧好：Header 的滑動效果選對、選單 Icon 保持好找又不遮擋內容，整個手機版就會從「能看」變成「好逛、好點、不卡」。
發佈前一定要用手機版預覽從頁首滑到頁尾檢查一次，因為遮擋、誤觸、字太小這類問題，通常都是滑一遍才會現形。
如果你在操作 Wix 的過程中遇到卡關，不管是手機版排版怎麼調都不順、元素一直遮擋、選單設定不知道怎麼選，或是想把手機版做到更好讀、更好點，都可以直接找數位茄子。
我們專門協助處理 Wix編輯器的各種疑難雜症，從問題定位到實際調整，一次把你卡住的地方解開，讓你不用反覆試到心累。
