Divi 裡一行字又大又粗，看起來像主標題，並不能證明它是 H1。字體大小屬於樣式，H1、H2 等 HTML 標籤則描述內容層級。修改標題時，應分別確認「這段內容在頁面裡的角色」與「它要顯示多大」，不要為了放大文字就改成最高層級。
本文以 Divi 5 Text 模組為例，把一段文字寫成 H2，再將它的字級從四十八像素改成三十六像素。實際 HTML 兩次都是 H2，只有顯示大小改變。這個小測試能幫你辨認 Heading Text 中的樣式選項，避免將樣式面板的 H2 分頁誤解為自動重寫內容標籤。
先決定文字在內容中的位置
假設頁面主題是建站服務，下方有「服務內容」、「製作流程」和「常見問題」三個段落。先把主題與各段落的關係理清，再安排標題層級。段落標題需要醒目，可以調整字級、字重和間距，但不必因為某段更重要，就隨意把它提升成另一個 H1。
同樣地，一段廣告口號即使很大，也未必是內容章節的標題。先問這行字是否在介紹接下來的一組內容，再決定是否使用標題元素。標題層級是幫讀者與輔助科技理解頁面結構，不是替字級設定提供捷徑。
如果你使用的是 Heading 模組，應按該模組的內容設定確認標籤；本文的操作對象是 Text 模組中的 HTML 內容。兩種模組的欄位位置可能不同，不要把這裡的步驟直接套到所有標題元件。
在 Text 內容中建立一個明確的 H2
先在測試頁選取 Text 模組，確認設定面板標題顯示 Text。進入 Content 的 Text 區域，在 Body 編輯器切換到 Text 模式。這裡的 Text 是 HTML 原始文字編輯，不是右側 Design 裡的 Text 樣式群組。
輸入下面的簡短內容，再切回 Visual 查看。測試文字只用來辨認模組，不需要連接資料庫、加入腳本或修改全站樣式。若原本模組已有正式內容，請先在測試副本操作，避免直接覆蓋。
<h2>Local Semantic Case</h2>
<p>Local text body.</p>切回 Visual 後，你應看到一個標題及一段普通文字。此時標題已由內容中的 h2 元素決定。它看起來多大，仍可能受預設樣式、目前裝置和已套用的設計設定影響；不要僅憑預設顯示大小判斷內容層級。
Heading Text 的 H2 選項是針對既有 H2 設定樣式
切到 Design，展開 Heading Text，選取 H2 的樣式項目。確認欄位名稱顯示 Heading Text H2 Text Size，再填入四十八，單位使用 px。完成輸入後離開欄位，讓編輯器套用數值，並觀察畫布。
這次在手機編輯狀態設定四十八像素，畫布中該標題的 computed font-size 確實為 48px，HTML 標籤則仍是 H2。接著只把同一個字級欄位改成三十六像素，標題 computed font-size 變成 36px，標籤仍是 H2。
這說明你正在調整 H2 的顯示樣式，而不是用字級決定標籤。也不要把 Heading Text 中的 H1 到 H6 樣式選擇，當成把 Text 內容一鍵轉換標題的操作。內容中沒有對應標題時，調整該層級的樣式不一定會影響你正在看的那段文字。
檢查真正的元素，不只看面板名稱
打開瀏覽器開發工具，選取畫布中的測試標題，查看它的 HTML。應能找到內容文字外面的 h2，再看計算樣式中的 font-size。先辨認文字所屬元素，避免把整個 Text 模組的外層容器當成內容標題。
Divi 的 Advanced HTML 設定可能控制模組容器的語意標籤，並不等同於改寫 Body 內每一段文字。若 Body 已有 h2，不能因為想改標題層級，就隨意把外層容器也改成另一個標題元素，造成不合理的巢狀結構。先看實際 HTML，再決定該改內容還是容器。
在一般訪客頁檢查時，可使用瀏覽器元素選取工具定位標題，不必依賴 Divi 編輯框線。編輯器會加入工具與包覆元素，前臺檢查更適合確認最後內容結構。這次示範保留在官方編輯器工作階段，沒有代替你自己網站的儲存後檢查。
字級沒變時，先找真正生效的設定
如果改 H2 樣式後沒有變化，先核對內容是否真的是 h2。從別處貼上的文字可能只有加粗或行內 font-size，沒有標題元素；也可能帶有其他行內樣式，讓模組設定沒有成為最後生效值。
再確認你目前編輯的裝置。桌面與手機可能有不同的字級覆寫，改桌面欄位時，手機仍保留原本設定是可能的。查看 Responsive Editor 裡各裝置數值與覆寫狀態，不要在多個分頁反覆填相同數字，最後忘記哪個值負責哪個畫面。
若內容標籤、裝置與欄位都正確，再用開發工具查看套用到標題的 CSS。只處理明確造成衝突的規則，不要一開始就在全站加入重要性更高的選擇器。全站改動可能影響其他 H2，超出你本來只想調整一個模組的範圍。
標題結構與閱讀效果都要檢查
完成後，從頁面開頭往下看標題是否能描述各段內容，再檢查大小、換行和上下間距。H2 不需要與另一頁的 H2 使用完全相同字級，但同一頁的相似章節應讓讀者容易辨認。
在窄視窗裡，較大的字級可能造成長標題連續換行。先調整該裝置的字級與行高，保持內容層級不變；不要為了換行好看就把標題改成普通段落。反過來，也別把普通段落升成 H2，只為取得現成的大字樣式。
儲存自己的測試頁後，退出 Visual Builder 再看一次 HTML 與字級，確認前臺保留預期內容。若頁面另有主題輸出的文章標題，將它一起納入結構檢查；不要只看你剛新增的模組就判斷整頁標題安排已經合理。
將這次測試的內容與字級分開記錄：Body 裡是 H2，手機 H2 字級先四十八、後三十六像素。下一次修改時，便能清楚知道要動哪個欄位。先讓標籤表達內容結構，再讓樣式處理視覺效果，兩者就不容易混在一起。
交接時留兩項資訊
如果頁面由另一位編輯接手，記錄標題的內容層級，以及哪個裝置有字級覆寫。只寫「標題改小」通常不夠，因為對方可能改到桌面設定，或把原本正確的 H2 轉成段落。可以註明「服務內容為 H2，手機字級三十六像素」，讓後續調整有明確位置。
若使用者只要求文字更醒目，先保留既有內容結構，從字重、色彩、大小和留白試一個小改動。等視覺效果確認後，再處理真正需要重整的標題關係；不要把每次設計調整都變成整頁結構重寫。
評論0