在Divi勾選手機停用後，切到Phone畫布，模組還在，甚至仍然占著原本的高度。這個畫面不一定表示設定失效。Divi 5在Visual Builder中會把目前裝置停用的元素淡化，讓編輯者仍能找到和修改；這個灰色提示與訪客實際看到的頁面，需要分開判斷。
另一種情況是自己把模組透明度改成零，期待它像不存在一樣。透明度控制的是可見程度，元素仍可能保留版面位置與互動。若需求是某個裝置不顯示這個模組，應先檢查Visibility的裝置設定，而不是用看不見的外觀來代替。
先在正確元素勾選Disable On
在Layers選中要處理的模組，確認面板頂端與所在容器，再到Advanced展開Visibility。Disable On會列出適用的裝置，勾選Phone表示希望在手機範圍停用它；不要把旁邊的Horizontal Overflow或Vertical Overflow當成同一種設定。
本例使用Elegant Themes官方Divi 5公開演示，在未儲存的工作階段選了一個文字為Demo copy only的Heading，只勾選Phone。Desktop與Tablet保持未勾，這樣才能比較同一個模組在不同裝置視圖的提示差異。
若你實際要隱藏的是一整排卡片，而選到其中一個標題，其他圖片或按鈕仍然存在並不奇怪。反過來，在Row或Section停用，可能影響更大範圍的內容。先決定要隱藏哪個層級，再核對Disable On所在的設定面板，能避免只看畫面空位就重複改很多地方。
灰色模組是建置器保留的編輯提示
在這次演示中，桌機畫布寬1072像素時，該Heading模組的計算透明度是1；切到手機畫布寬484像素後，透明度變成0.5。兩個視圖中，模組的計算display仍是flex，尺寸也都保留約376.9乘67.6像素。
這些數值讀自正在編輯的建置器畫布。它們說明手機停用後，Divi仍留下一個淡色且可定位的元素，沒有把編輯者需要操作的模組直接從畫布拿掉。官方Visibility文件也說明，停用元素會以百分之五十透明度呈現，方便繼續編輯。
因此，在Builder看到灰色標題與它的高度，不應立刻加上負外距或把整個Row的高度壓到零。那樣可能只是補償編輯提示留下的位置，反而破壞真的公開版面。先離開編輯環境核對訪客頁，再決定空白是否真的存在。
本篇演示沒有儲存變更，也沒有取得這次修改後的訪客頁；官方免登入演示的Preview入口在當次操作未能使用。這裡展示的是欄位和建置器提示，沒有把上述flex與0.5宣稱為手機訪客會得到的最終結果。
opacity為零不等於移除版面盒
CSS的opacity描述整個元素的透明程度。設為零後，畫面可能看不到內容，但它仍可能保留位置、接收滑鼠事件或進入鍵盤焦點順序。用它隱藏一個按鈕，可能留下看不見卻仍能操作的項目，需要另外考慮互動。
display: none則會使該元素不產生一般版面盒。這是理解空間問題時很有用的差別，但不能只根據模組淡掉，就猜它的計算display已經變成none。應查看實際公開頁中的元素與樣式；本例的建置器灰色提示，正好說明外觀和版面盒可能是兩件事。
這份教學不預設每個Divi版本都以同一條CSS規則處理所有裝置停用情境。官方文件說明的是停用裝置上的訪客顯示用途，而你的網站仍可能有額外樣式或互動。確認實際computed style，比把某個類別名稱或預想的實作當成保證更可靠。
公開頁真的留白，接著找父容器
在自己的網站依流程儲存並退出Builder後，如果手機頁仍有空白，先查看那個區域裡是否還有其他元素。圖片、文字、按鈕和容器可能各自有設定；停用一個標題，不會自動決定整個區段的高度和內距。
若真正要隱藏的元素已不產生版面盒，空位仍可能來自Row或Section的上下padding、設定的高度、其他可見子元素，或版面所需的間隔。先核對空位對應的容器和尺寸，再改精確欄位。不要為了手機一塊空白，直接重設整個頁面的Spacing。
如果元素仍然顯示，回頭確認目前寬度落在哪個斷點、停用勾選在哪一層，以及公開頁是否使用最新內容。自己的站點若啟用了額外斷點，不能只按Phone這個名稱猜所有小螢幕都使用同一範圍。全站斷點設定應和實際測試的寬度一起查看。
Overflow Hidden解決的是另一個問題
Visibility同時提供水平和垂直溢出的處理方式。這些選項控制超出元素範圍的內容如何顯示，不是「在手機移除整個模組」的快捷鍵。例如內容被裁掉，可能需要檢查overflow；整個模組不該出現在手機時，則應查看裝置停用。
若把Overflow Hidden當成隱藏內容的方法，模組本身仍可能有尺寸，留下的空間也未必消失。相反，為了解決手機寬度溢出而停用整個模組，又可能讓訪客失去必要資訊。先描述問題是超出邊界、看不見，還是整段不需要，才能選對欄位。
重要的價格、服務條件與操作按鈕，不能只因桌機版面比較好看就全部在手機停用。若要使用兩份不同結構，應核對每個裝置都有必要內容，而且不會同時出現重複操作。這是內容與版面上的檢查，並非多複製一個模組便能自動完成。
用訪客狀態完成最後確認
在自己的公開頁，分別查看桌機與手機範圍，確認希望保留的內容仍可讀、該停用的項目沒有造成多餘操作。遇到留白時，用元素面板量到的容器尺寸配合畫面判斷，而不是只根據Builder中的淡色輪廓修改版面。
若站點有快取，還需確認公開HTML與樣式已更新。重新載入後仍與編輯器不同，應保留當次寬度、頁面網址和元素設定，逐項追查來源。這樣才能分清裝置停用、舊內容與額外CSS的影響，避免把每種問題都當成Visibility失效。
手機停用也不是資料權限或安全機制。即使某段內容不在訪客畫面中顯示，也不能據此認定敏感資料沒有傳到瀏覽器。這篇處理的是響應式呈現與空間；需要限制存取的內容，應由網站實際的權限流程決定。
評論0