Divi桌機字級改了手機沒跟著:清除Responsive覆寫值

桌機標題改了大小,手機卻一直維持舊字級,常見原因是手機曾經有自己的Responsive值。這個覆寫可能來自較早的調整,平時不容易注意,直到改桌機才發現兩邊沒有一起變。要解決它,先找出目前數值的來源,通常不必把整個標題模組重設。

在Divi 5的Responsive Editor裡,每個裝置可以保留獨立值,也可以沿用較大的斷點。清除Phone覆寫,不一定直接回桌機:如果Tablet仍有自己的值,Phone可能先承接Tablet。下面以官方公開演示中實際清除欄位的結果,說明這個差異。

手機字級清除後,Responsive Editor保留平板36與桌機48
官方Divi 5演示;清除Phone覆寫後,手機實際承接Tablet的36像素。

先找你真正要處理的字級欄位

在Layers選到目標Heading,確認文字與所在的Section、Row和Column,再切到Design展開Heading Text。找到Heading Text Size旁的Edit responsive values,打開Responsive Editor。這次要處理的是字級,不是Heading內容,也不是整個Row的Spacing。

面板可能列出裝置列與hover、focus等狀態。先看每列的圖示和目前數值,確定哪一個是Phone,再操作該列的Reset field。不要從面板上看到多個Reset,就選第一個按;桌機與其他裝置也可能有各自的重設按鈕。

若使用設定搜尋,仍應核對找到的欄位是不是目標Heading的字級。有些頁面同時存在一般Text與Heading,名稱相似的設計欄位未必作用在同一段文字。先對照畫布中的內容,能避免把另一個模組的舊覆寫清掉。

本例先保留三個不同字級

在Elegant Themes官方Divi 5演示中,本例先把同一個Heading設為桌機48、平板36、手機28像素。切換對應畫布後,計算字級也確實是這三個數字。此時Phone有自己的28,Tablet有自己的36,兩者都不是單純沿用Desktop48。

這是用來觀察覆寫的對照,不代表網站必須在每個裝置設定不同大小。如果手機原本已適合桌機值,就沒有必要為了填滿欄位而新增同一個數字。相同外觀可能來自沿用,也可能來自另外存了一個相同值;兩種設定日後跟隨修改的方式不同。

當你希望某個裝置繼續跟隨共用設定時,應清除不需要的覆寫,而不是把它手動改成目前的桌機數字。今天兩邊都是48,看起來相同,卻不能因此認定明天桌機改值後手機也會跟著變。要看的是來源關係,不只是一張相同的截圖。

只清除Phone,手機先承接Tablet

本例在Phone列使用Reset field,沒有重設整個模組,也沒有清除Tablet的36。操作後手機畫布寬仍是484像素,標題的計算字級從28變成36。這個結果說明Phone不再使用自己的28,而是承接仍存在的Tablet覆寫。

如果你原本期待清除手機就回到桌機48,這個36可能看起來像重設失敗。其實需要接著查平板的來源:只要平板還有自己的值,手機便可能沿用它。不要看到手機沒有到48,就再按一輪整組Reset,否則可能一次刪掉其他原本需要的裝置設定。

在自己的頁面,清除Phone後應重新看手機畫布,並對照Tablet欄位。若繼承得到的字級仍然不合適,要決定的是平板36是否也不需要,還是手機仍應保留另一個值。這是設計選擇,不能只為了讓三個欄位看起來一致就全部清空。

再清除Tablet,才回到Desktop

接著只在Tablet列重設字級,保留桌機48。這次手機畫布仍是同一個寬度,標題的計算字級由36變成48。兩次操作先後對照,能清楚看出Phone先接Tablet、Tablet也沒有覆寫後才接Desktop的關係。

這份案例沒有修改站點的斷點範圍,也沒有測試額外啟用的裝置斷點。Divi 5允許自訂斷點,因此自己的網站若增加了其他範圍,要連同目前啟用的裝置列查看。不要只依面板中有沒有Phone這個名稱,就假設整個繼承路徑與本例完全相同。

所有變更都留在免登入官方演示的未儲存工作階段。本例讀的是建置器畫布中的實際計算字級,沒有替正式網站儲存,也沒有把公開訪客頁更新當成已完成。這個界線很簡單:欄位重設的行為已對照,自己的頁面仍要依流程套用與確認。

清除覆寫與輸入空值不是同一種意圖

當需求是回到沿用值時,使用對應裝置列的重設控制,比單純刪掉輸入框文字更容易表達目的。不同欄位對空內容可能有不同處理,不應把文字看起來空白視為所有屬性都已恢復繼承。尤其是內容類欄位,刻意留空與移除覆寫未必代表同一件事。

本篇只實測字級列的Reset field,沒有測試每種欄位的空值規則。調整間距、顏色或內容時,可以採用同樣的核對思路,但要查看那個欄位的實際結果。不要把這次字級的數值對照,延伸成所有Responsive設定都完全相同的保證。

也不要混用整個模組的Reset Attributes、某個選項組的重設與單一裝置欄位重設。它們的操作範圍不同;本例只需移除一個裝置值,便沒有理由動到文字、連結、其他設計或整套預設。每次下手前先看控制所對應的列和欄位。

重設後外觀仍不同,查其他設計來源

如果裝置覆寫已清除,手機仍與桌機感覺不同,不一定又是字級問題。可用寬度、換行、字型、行高和間距,也會改變標題的視覺高度。先讀真正的計算字級,再判斷是否需要改其他條件,別因為行數不同就反覆清除字級。

欄位可能還與預設樣式或其他設計來源有關。Style Inspector可以用來理解屬性來源,幫助你確認目前調整的是模組值或其他設定。遇到不明來源時,先查看再改,避免為了一個手機字級而刪掉共用預設,影響其他模組。

重設的目標也不是讓每個裝置長得完全一樣。手機與桌機可用空間不同,只要覆寫有明確目的,保留它並沒有問題。真正要清掉的是已不需要、卻持續阻擋跟隨修改的舊值;這樣下次改內容時,維護者才知道哪些裝置會跟著改。

用自己的公開頁核對最後字級

自己的網站完成設定並依流程儲存後,退出Visual Builder,重新載入訪客頁,查看桌機、平板與手機範圍的實際樣式。若公開頁仍是舊大小,先核對儲存狀態與快取,再回頭查覆寫,不要把每次沒更新都當成繼承失效。

可以記下重設前後的字級與來源:例如Phone28改為承接Tablet36,或Tablet也重設後沿用Desktop48。這比只記「手機已修好」更方便日後接手。下次桌機調整時,便能預期哪些裝置會跟隨,哪些仍保留有意義的獨立設計。

參考資料

原文鏈接:https://wntheme.com/divi-responsive-reset-field/,轉載請註明出處。
0

評論0

顯示驗證碼
沒有帳號?註冊  忘記密碼?