桌面需要一段說明，手機卻想把它收起來，Elementor的Hide On Mobile常能處理這種需求。不過，編輯器裡還看得到元件、手機前台留下空白、或HTML仍有那段文字，分別代表不同事情。先確認你希望改的是顯示、版面空間，還是內容是否送到瀏覽器，才不會用錯設定。
下面以一個傳統Heading為例，儲存後用390像素的前台草稿預覽核對。開啟手機隱藏後，該元件的計算樣式變成display:none，高度歸零，下面的按鈕往上移；但元件仍存在HTML中。這個結果可以證明它已收起版面，不能證明資料已從頁面移除。
先選到要收起的元件
本例環境是WordPress 7.1.2、Elementor Free 4.3.3及Twenty Twenty-Five，使用傳統Container裡的Heading。這個版本也有Atomic Elements，本例不把兩種元件的介面混在一起。你應先選中真正要隱藏的標題或卡片，再看側欄目前顯示的元件名稱。
如果你選的是外層容器，隱藏它可能連同裡面的標題、圖片與按鈕一起消失。只想收起一段補充文字時，應先核對Structure裡的層級，確認選中的是那段文字。不要為了把一個標題藏起來，把整區容器設成手機隱藏，再另外複製按鈕到另一個區塊。
選中本例的Heading後，進入Advanced，展開Responsive，可看到Hide On Desktop、Hide On Tablet Portrait與Hide On Mobile Portrait。本例只開啟手機選項，另外兩項保持原狀。欄位名稱依裝置與版本可能不同，先看你的實際控制，不要把平板與手機當成同一個開關。
編輯器看得到，不代表設定失效
這個介面有提示：響應式顯示效果應在預覽或實際頁面核對，不能只看編輯模式。編輯器保留操作入口，是為了讓你還能找到元件、改字或關閉隱藏設定。因此開關打開後，畫布仍出現該元件時，先儲存並開啟前台預覽，再判斷是否真的沒有生效。
在本例，我們使用Save Draft保留頁面，再重新開啟有登入權限的草稿預覽。這仍是隔離本地頁面，沒有部署到正式網站。將預覽視窗設成390像素後，找到同一個Heading與它下面的按鈕，才能前後比較同一組元素。
也別把編輯器裡的眼睛圖示、元件透明化或拖曳時的淡色狀態，直接當成正式顯示結果。這些可能只是編輯工具的呈現。要確認訪客是否看得到，應以儲存後前台對應寬度的實際元素與計算樣式為準。
本例的空間確實收起來了
隱藏前，390像素預覽中的Heading是display:block，高度約84.84px，下面按鈕的頂端位置約679.66px。隱藏後，Heading變成display:none，高度為0，按鈕頂端改為約554.81px。元件高度和它參與排版時的間距不再把後方內容往下推。
這些數字只是本例版面的位置，不是你網站應照填的間距。標題文字、容器gap、字級、行高與頁首都會改變座標。真正有用的比較，是同一個元素在同一寬度下，隱藏前後是否還生成版面盒子，以及後方內容是否回到合理的位置。
切回1280像素預覽時，本例Heading仍是display:block。這確認我們只修改手機顯示，沒有把桌面也收起來。但如果你的站點改過斷點，應依實際斷點再核對，不能只憑裝置名稱或螢幕外觀，斷定某個視窗一定使用手機設定。
還有空白時，查外層容器與其他留白
如果標題已經display:none，頁面卻仍留下大段空白，先看外層容器是否有固定高度或min-height。隱藏內部文字，不會自動移除外層明確設定的高度。也要查看padding、margin、其他Spacer與容器裡是否還有另一個可見元素。
此時不要先加負margin把下面內容拉上去。負值可能只在目前文字長度下看似正常，換成別的語言或增加一行內容，便和前一區重疊。先確認是哪個盒子真的占空間，再調那個盒子的設定，會比較容易保留桌面原來的版面。
用瀏覽器開發者工具檢查時，可以先選Heading，再沿父元素向上看。辨認是哪一層仍有高度、背景或邊框，而不是只看文字是否消失。如果父容器還要保留其他內容，就應保留它，只移除不再需要的最小高度或多餘留白。
透明、不可見與不排版要分清
把opacity設為0，通常只是讓內容透明，它仍可能占空間；visibility:hidden也與display:none的排版結果不同。手機隱藏的目標若是把整段收起來，應核對實際display，而不是只追求截圖中看不到文字。本例的opacity一直是1，真正改變的是display。
反過來，如果你需要保留原本空間，只暫時不顯示內容，也應先確認選用的方式與目的相符。不要在同一元件疊加透明度、手機隱藏和負margin後，再猜哪個開關造成目前效果。一次處理一個控制，前後對照才清楚。
本例隱藏後仍能在DOM找到原文字，因此這不是移除內容或權限控制。敏感資料不應先送出再靠CSS藏住，也不能只靠手機隱藏就保證圖片或相關程式不會載入。本次沒有量測資源請求與效能，若目的是降低載入量，還要另外檢查實際網路請求。
先決定手機上是否仍需要這段內容
隱藏前先問這段資訊的用途。如果它是付款條件、服務範圍或聯絡方式，手機訪客可能和桌面訪客一樣需要閱讀。這種情況可以先縮短文案、調整字級或改變排版，而不是直接收起。若它只是桌面上的重複裝飾文字，收起後則應確認手機仍有主要標題和清楚的操作入口。
若頁面原本就有兩份不同裝置的內容，也要分別檢查維護範圍。修改桌面那一份，不表示手機另一份會跟著更新。不要把本次成功隱藏元件，當成兩份內容已同步的證據；下次改價格、地址或活動日期，仍要找到每個實際顯示的副本。
最後，儲存後重新載入手機與桌面前台，確認隱藏對象正確、必要按鈕還在、空間沒有異常，也確認手機使用者仍能取得完成任務需要的資訊。只因為手機版比較短就把重要說明收起來，可能讓訪客反而不知道下一步如何操作。
評論0