Wix 編輯器教學｜第 6 堂課：互動式浮動方塊 Hover Box 讓你的網站瞬間更有質感！
- 數位茄子
- 2025年11月26日
- 讀畢需時 3 分鐘
已更新：2025年12月10日
如果你希望你的 Wix 網站看起來更專業、更高級、更有互動感，那「互動式懸浮方塊（Hover Box）」絕對是你必學的功能。
什麼是懸浮方塊 Hover Box？
固定狀態（Before）
浮動狀態（After）
浮動方塊在哪些地方最常用？
如何新增浮動方塊 Hover Box？
現有方塊變成 Hover Box
浮動方塊 3 個好看的設計技巧
常見問與答
什麼是互動式浮動方塊 Hover Box？
互動式浮動方塊Hover Box由兩個狀態組成
1. 固定狀態（Before）
使用者還沒把滑鼠移上去時看到的畫面。
例如：
靜態圖片
簡短文字
乾淨封面
2. 浮動狀態（After）
滑鼠移上去後出現的新畫面。
例如：
顯示更多資訊
換成不同圖片
反轉背景色
顯示按鈕
顯示人物介紹 / 商品資訊
這就是 Hover Box 最大的魔法：一個方塊，兩個世界。
浮動方塊在哪些地方最常用？
這些都是 Hover Box 的完美使用場景：
團隊成員卡片（滑上去出現人員介紹）
作品集（滑上去顯示作品說明）
產品資訊（滑上去顯示商品規格或價格）
課程介紹（滑上去顯示課綱）
服務項目（滑上去顯示更多細節）
對桌機使用者來說非常友善、直覺且吸睛。
如何新增浮動方塊 Hover Box？（方法 1：從工具列新增）
點擊左側工具列「互動式」
選擇「浮動方塊（Hover Box）」
選喜歡的樣式 → 拖曳到頁面中
點擊方塊 → 編輯「固定頁（Before）」與「浮動畫面（After）」
🧩 在浮動畫面中，你可以：
換不同圖片
換不同背景色
放更詳細文字
加按鈕
加圖示
加色塊
目的是讓滑鼠滑上去時，畫面有驚喜、有資訊、有互動。
方法 2：把現有方塊變成 Hover Box
如果你的頁面上已經有方塊 / 圖片 / 文字：
點擊物件
找到「⚡ 閃電符號」
點擊後 → 立即轉換成 Hover Box
開始編輯 Before / After
這是非常快速的做法，適合：
快速讓已完成的版面更有互動感
不用重做設計
不用重新排版
浮動方塊 3 個好看的設計技巧（非常重要）
技巧 1：Before 與 After 要「明顯對比」
例如：Before：白底＋人物照After：深色背景＋姓名＋介紹文字
這會讓切換更有重點與層次。
技巧 2：使用 60/40 文字分布
浮動畫面不要塞太多文字。
建議：
上方 60% 放圖片或背景
下方 40% 放文字敘述
閱讀起來不會擁擠。
技巧 3：懸浮動畫不要太花
你可以加：
淡入
向上滑入
輕微縮放
但不要加太誇張的動畫，否則會讓網站廉價感增加。
常見問題Q&A
Q：手機版有懸浮效果嗎？
A：沒有。手機是觸控 → 不會触發 hover。
👉 解法：在手機版中，將 Hover Box 的「浮動頁」轉換成固定資訊顯示。
Q：Hover Box 會讓網頁變慢嗎？
A：基本不會。
它只是兩個疊層切換，不是影片或高載重特效。
Q：Hover Box 一定要兩個頁面都放圖片嗎？
A：不一定。你甚至可以：
Before 放圖片
After 放純色背景＋文字
這是最常用也最乾淨的設計。
Q：Hover Box 可以放按鈕或連結嗎？
A：可以！你可以在浮動畫面加上按鈕、外連連結、更多資訊頁面等。但要注意按鈕位置不要太靠外框，避免使用者誤按或在 RWD 時跑版。
Q：懸浮方塊會影響網站 SEO 嗎？
A：基本不會。Hover Box 是 Wix 內建的互動元件，載入速度非常輕量，不會拖慢網站，也不會影響 SEO。真正會拖慢的是「超大圖片、過重影片或太多動畫」，所以記得保持素材合理大小，就能讓網站順暢又有質感。
總結：為什麼你要學 Hover Box？
因為它能讓你的 Wix 網站：
變得更專業
變得更有細節
變得更有互動性
變得更像「設計公司做出來」
更能抓住使用者目光
只要加上一組 Hover Box，你的網站質感會瞬間升級。
如果你在使用 Wix 編輯器時遇到任何問題，歡迎你找數位茄子諮詢。我們長期協助創作者與中小企業打造更好維護、更有質感的Wix網站，讓你的品牌網站真正做到好看、好用、好理解。
