桌機首頁的標題剛好占兩行，切到手機卻變成五六行，按鈕也被推到下一個畫面。這時先檢查標題的字級設定，不必立即複製整個區段做手機版。Divi 5的Responsive Editor可以在同一個字級欄位中，分別處理桌機、平板和手機需要的大小。
本篇使用Elegant Themes的官方Divi 5公開演示，所有變更留在未儲存的工作階段。範例把同一個Heading的桌機字級設為48像素、平板36像素、手機28像素，再用瀏覽器讀取畫布中標題的計算樣式。這些數字用來呈現設定關係，並非所有網站都適合的字級標準。
先確認選到的是標題模組
在Visual Builder打開Layers，找到要調整的Heading。模組設定頂端應顯示Heading，路徑也能看出所在的Section、Row與Column。若面板頂端顯示Row，你可能正在改整排的設定；若選到另一個Text模組，同名的文字設計選項也不一定作用在這個標題上。
先看標題原本的文字，確認它和畫布中需要處理的內容一致。頁面裡有多個相似標題時，可以逐一點選對照。不要只因為畫布上看到大字，就假設它一定是Heading模組；一般Text裡也可以含有標題內容，實際調整的欄位要依選到的模組確認。
本例選的是首頁第一個Heading，文字為官方演示既有的首頁標題。調整前後沒有更換文字，也沒有新增手機專用模組。這樣比較時，能把字級與換行的差異集中在同一份內容，不會把文字長度變化誤當成響應式設定的效果。
到Heading Text開啟裝置欄位
在模組的Design頁籤展開Heading Text，找到Heading Text Size，點旁邊的Edit responsive values圖示。Responsive Editor會列出不同裝置，以及該欄位支援的其他狀態。先看裝置圖示，辨認桌機、平板與手機三列，不要把後面的hover或focus列當成另一個裝置。
官方演示原本的字級使用clamp函式，輸入框因此顯示函式中的數值。這個對照案例先把單位切為px，再設定固定字級。若你的欄位仍保留函式模式，直接塞入一個裸數字可能沒有得到預期的尺寸；先核對輸入方式與單位，再修改數值。
依序將桌機設48、平板設36、手機設28，離開欄位後再確認畫布。面板可能跟隨正在編輯的列切換裝置視圖，這是用來幫助觀察對應版面。若某次輸入後畫面沒有反應，先檢查數值是否已套用及所處裝置，再重複改值，不要一次改字級、行高和容器寬度。
設定值與實際字級都要看
完成設定後，本例依序切換頂欄的Desktop、Tablet和Phone預設視圖。當次畫布的實際視窗寬度分別是1025、768與484像素；標題的計算字級依序是48、36與28像素。這裡確認的是畫布真正套用的CSS字級，而不是只抄面板顯示的數字。
這三個畫布寬度是本次演示工作階段的結果，不應寫成Divi在每個網站都固定使用的手機與平板寬度。官方支援自訂響應式斷點，瀏覽器可用空間及建置器面板也會影響操作時看到的畫布。自己的網站若調過斷點，應依自己站點的條件檢查。
另要注意Zoom：縮小畫布在螢幕上的顯示比例，不等於把字級欄位設小，也不等於改變CSS所依據的視窗寬度。查看字級時，應讀裝置視圖和欄位狀態，不能只根據標題在截圖上看起來多大，就斷言手機設定已成功。
沒有覆寫的裝置會沿用既有值
不是每個裝置都一定要填獨立數字。Responsive Editor的作用也包含辨認哪些裝置有覆寫、哪些仍承接較大的斷點。只需要手機調整時，可以先保留桌機值，查看平板與手機實際顯示，再決定是否新增覆寫，避免每個裝置都留下一個不必要的固定數字。
本例故意把三個值分開，所以手機28不會隨桌機48的修改直接跟著變。若之後清除手機的覆寫，而平板仍有36，手機會承接平板的值；要等平板也沒有覆寫，才會沿用桌機。這個差異在演示中實際確認過，別把所有空白裝置欄位都理解成直接讀桌機。
欄位中的淡色提示、裝置標記與覆寫提示能幫助分辨來源，但最終仍要看對應畫布的顯示。若同一個標題使用預設樣式或其他設計來源，也需要確認目前修改的作用範圍。不要為了單一手機標題，就把整個模組或預設樣式全部重設。
標題換行不只由字級決定
如果手機改到28像素仍然換很多行，接著看容器的寬度、左右內距、字型和文字長度。容器只剩很窄的可用空間時，一味縮小字級會犧牲閱讀，卻沒有解決真正的版面限制。先觀察標題所在欄位，再決定要改哪個條件。
行高也會改變多行標題占用的高度。每行文字太擠或太鬆時，應另外調整Heading Line Height，並用真的中文標題檢查。官方演示使用英文，本例的數字對照只能說明設定如何作用，不能代替你的中文內容、字型載入與實際換行驗收。
字級不會改變標題的HTML語意層級。把字變大或變小，與頁面是否使用正確的標題標籤是不同檢查項目。手機排版需要的小字級，不能作為把標題改成一般段落的理由；應保持內容結構，再依版面調整外觀。
回到自己的公開頁完成確認
官方演示的這次操作沒有儲存，也沒有更新任何網站頁面。自己的網站完成調整並依工作流程儲存後，應離開Visual Builder，以訪客狀態重新載入公開頁，分別查看桌機與手機範圍。建置器裡讀到的數值，是編輯結果的對照，並不表示正式頁已經更新。
檢查時保留相同標題內容，確認沒有水平溢出、重要文字被裁掉，或按鈕因標題高度被推得太遠。再用介於常用裝置寬度之間的視窗查看換行，因為訪客不會只使用三個預設尺寸。若站點有快取，也要確認公開頁正在使用最新的內容與樣式。
調整過程最好一次只處理一個欄位，記下原值與裝置覆寫。當標題恢復可讀後，重新查看其他裝置，確保沒有為手機新增一個破壞平板的設定。這樣後續換標題文字或字型時，才知道應先回到哪個欄位檢查。
評論0