Divi 標題設計技巧：打造獨特吸睛的網站標題樣式

標題佔了網頁視覺權重的一大半，但在 Divi 裡，很多人拉一個 Text 模組，把字放大、加粗、換個顏色，就覺得標題設計完了。老實說，這幾乎是每個 Divi 案子都會撞上的同一個關卡。首頁看起來很美，但一站進內頁，標題忽大忽小、字體一下黑體一下明體、手機版還整行擠在一起，那種「怎麼有點廉價」的感覺就跑出來了。真正的卡點常常不在設計能力，而在觀念：你把標題當成「每一頁各自處理的裝飾」，卻沒把它當成「一套貫穿全站的系統」。

這篇要講的，就是怎麼在 Divi 主題裡把標題（H1 到 H6）做成一套有層次、有個性、又能跟著手機與速度一起扛住的系統。我會從語意、視覺、效能三個層次拆開，給你全站基線設定、中文字體選擇、配色與留白、Hover 與動畫、手機版調校，還有標題跟 SEO 的交界。讀完你會有一份可以直接套到下一個專案的標題設計清單。

先把「標題」這兩個字拆成三層來看

很多人在討論標題設計時，其實在講三件不同的事，卻用同一個詞，這是所有混亂的源頭。帶客戶或團隊看稿時，第一件事就是把這三層講清楚，不然雞同鴨講可以吵半小時。

這三層彼此關聯，但責任分得很清楚。語意層有助於讀者、螢幕閱讀器與搜尋引擎理解章節關係；視覺層決定讀者能否快速掃讀；效能層則處理字型與首屏載入。標題順序本身不是 Google 的獨立排名門檻，卻是內容與無障礙結構的基本功（見 Google 的 SEO 入門指南）。

這裡也要先點出一個常被搞混的詞：頁首（Header）跟標題（Heading）是兩件事。頁首是你網站最上面那條放 Logo 與選單的區塊，那是版面配置的事；標題是文章或區塊裡用來標示層級的文字。如果你要找的是頁首那塊怎麼設計，那是 Divi 頁首設計 的範疇，我之前也整理過一份 300 多套現成頁首套版的清單。這篇專注在 Heading 本身。

為什麼每個 Divi 專案都該從標題系統開始

我習慣在案子一開始、版型都還沒進來之前，就先把全站的標題系統定下來。聽起來很反直覺，因為多數人是先把首頁 Hero 做漂亮、再回頭收拾內頁。但順序倒過來，你會一直回去改。首頁的 Hero 標題之所以漂亮，往往是因為它用了某組特定的字級與配色；等到做聯絡頁、部落格文章頁、產品頁時，你又重新挑一次，結果每一頁的標題都長得有點像、又都不太一樣。讀者在頁面之間切換時，會有一種說不上來的「碎片感」，好像每一頁都是不同人做的。

系統化的好處很實際：第一，你僅需改一個地方，全站跟著一致；第二，交件後客戶自己加新頁面時，不會把視覺搞壞，因為預設值就是對的；第三，Google 在理解你網站的內容架構時，穩定的標題層級等於一份清楚的大綱。換句話說，標題系統就是網站的骨架，骨架定了，再往上長肌肉都順。

用一個具體的例子說明這件事。想像一個室內設計公司的 Divi 網站就卡在這裡：作品集頁前面是沉浸式 Hero、後面是服務流程與報價說明，兩邊的標題如果各做各的，讀者切換區塊時會以為換了一個網站。Hero 那段適合用又細又大的明體字營造空間感，服務流程那段卻需要結實的黑體字讓步驟好讀，這兩種標題調性直接打架。解法是定一條規則，把兩種調性同時收進同一套系統裡：所有「敘事型」區塊（Hero、作品故事）用同一組設定，所有「功能性」區塊（流程、價目、FAQ）用另一組設定，兩組共用同一套字級節奏與主色。這樣一拉，整個網站讀起來像是同一個品牌在說話，僅是語氣會跟著內容切換。這就是系統的力量。

Divi 標題的全域基線：在 Theme Options 一次設好

Divi 把標題的全域設定放在 Theme Options 裡，路徑是後台的 Divi → Theme Options → 一般（General）卷宗下方的 Typography 區塊。這裡能設三件事：全站 Body 文字字型、全站 Heading 字型、還有一組整體的字級與顏色。這個區塊常常被新手略過，因為它藏在很下面、選項又看起來很基本，但它其實是全站標題的源頭。你在這裡選的字型，會變成所有 Text 模組的預設值，等於幫全站定了基調。

我的習慣是在這裡僅設「基線」，不要設得太花俏。基線的意思是：選一組穩定、可讀、適合長篇閱讀的字型當 Body，再選一組個性更鮮明的字型當 Heading，兩者形成對比即可。真正吸睛的特效（漸層、描邊、動畫）留給個別模組去做，不要塞進全域，否則你會發現每一頁的每一個標題都在閃，讀者眼睛會累。

這裡有兩個關鍵欄位要特別注意。一是 Heading Font 與 Body Font 一定要明確指定，不要用預設值。Divi 的預設字型是 Open Sans 之類的通用字型，在繁中市場看起來就是「沒有特別設計過」。二是 Heading Text Color 與 Body Text Color 要拉開，常見的做法是 Heading 用深色或品牌主色、Body 用次深的灰色，這樣標題會自然從正文裡跳出來，不需要靠加粗或放大來硬撐。

需要有一個更完整的入門脈絡，可以先把 Divi 主題終極指南 過一遍，把購買、安裝、子主題、全域設定的來龍去脈補齊，再回來這篇專看標題這一塊。如果你還在 Divi 4 與 Divi 5 之間猶豫，Divi 5 全新介面深度解析 有整理新版的效能與操作差異，標題模組的設定邏輯在新版大致一致，但載入行為有改善。

H1 到 H6 的視覺階層：用「節奏」而非「大小」來思考

新手設計標題最常犯的錯，是把 H1 設得很大、H2 比 H1 小一點、H3 再小一點，一路線性往下遞減。聽起來合理，結果通常是 H1 到 H6 看起來都差不多大，因為每一階僅差兩三 px，讀者根本分不出層級。比較好的做法是用「節奏感」來設，也就是相鄰兩階之間的差異要夠明顯，讓讀者一眼分得出誰是主標、誰是次標、誰是小標。

設計圈有一個常用的工具叫模數尺度（Modular Scale），原理是每一階字級乘上一個固定比例，例如 1.25 或 1.333。假設你的正文是 16px，用 1.25 的節奏往上推：H6 大概 16px、H5 約 20px、H4 約 25px、H3 約 31px、H2 約 39px、H1 約 49px。這樣的好處是每一階之間有清楚的視覺斷點，不會黏在一起。Divi 的 Theme Customizer（外觀 → 自訂 → 一般設定 → 排版）裡可以分別設 H1 到 H4 的字級與行高，建議直接套用模數比例，而不要憑感覺填數字。

除了字級，行高（line-height）也要跟著調。標題的行高通常比正文緊，桌面端大概落在 1.1 到 1.3 之間；正文則是 1.6 到 1.8。標題行高太鬆，兩行標題會像兩句沒關係的話；行高太緊，字會疊在一起。這個細節很多人忽略，但它直接決定標題讀起來是不是「有設計感」。

順帶一提，如果你對排版的基本功還想打得更紮實，排版設計實戰技巧 那篇把字體選擇、行距、視覺層次講得更廣，可以當這篇的延伸閱讀。

中文字體在 Divi 標題的選擇與本機託管

繁中市場做 Divi 標題，最大的坑是字體。Divi 內建的 Google Fonts 清單裡，絕大多數是英文字型，中文字型選擇少得可憐，而且中文 Webfont 檔案動輒數 MB，直接從 Google Fonts CDN 載入，你的首屏時間會被吃掉一大截。所以中文標題字型要特別處理，不能沿用英文的那套邏輯。

我的實際做法分兩步。第一步是挑字型：標題用的中文字型要挑有個性但又不能太花，因為它要扛全站。黑體類（無襯線）是安全牌，現代俐落，適合科技、商務、電商；明體類（襯線）有文學氣息，適合內容媒體、設計工作室、人文品牌；圓體類親和力強，適合親子、生活、餐飲。想看完整的中文字型選擇思路，可以讀 中文字體設計指南，裡面有 17 個必藏字體的分類推薦。如果你的網站是中英混排，標題英文字型的搭配也很關鍵，英文字體推薦 那篇依襯線、非襯線、手寫體分類，方便你配對。

第二步是字型怎麼載入。直接把中文字型檔（woff2）整包丟進 Divi，是最常見也最傷速度的做法，因為繁體中文常用字就六七千個，整包字型可能 5 到 8 MB。解法有兩個方向：一是用子集化（subsetting）工具，把字型檔砍到僅剩你網站實際用到的字，這對標題特別有效，因為標題用字量少，子集後常常僅剩幾十 KB；二是把字型檔放到自己的主機本地託管，用 font-display: swap 讓文字先用系統字顯示、字型下載完再換掉，避免整頁空白等字型。完整的本機託管與子集流程，我寫在 WordPress 本機託管 Google Fonts 這篇，步驟含格式轉換與 GDPR 相關的考量，值得照著做一次。如果你是直接在 Divi 上傳自訂字型，Divi 自訂字體上傳教學 有字型格式轉換的細節。

標題顏色、留白與背景：把字推到讀者眼前

標題能不能吸睛，字級僅佔三成，剩下七成在顏色與留白。很多人以為標題要大才顯眼，其實在對比的環境裡，中等字級的標題照樣能跳脫出來，關鍵是它跟周圍元素的關係。這一節講四個能把標題「推」到讀者眼前的手法。

第一個手法是顏色對比。標題顏色不要跟正文一樣，這是最低要求。進階一點，標題可以用品牌主色或主色的深色變體，正文用次深的灰，這樣標題自然成為視覺焦點。如果你的品牌色偏淡（例如淺藍、淺粉），直接當標題色會不夠有力，記得加深一階再當標題用。想系統化挑品牌色，網站設計配色實戰指南 與 網頁配色工具推薦 兩篇可以幫你把色彩計畫一次拉好。

第二個手法是留白。標題上下要有足夠的呼吸空間，尤其是標題與上一段正文之間，距離要比標題與下一段正文之間更大。這聽起來違反直覺，但視覺上，標題會「黏」著它所引導的那段內容，所以標題跟下面內容的間距要近、跟上面內容的間距要遠，讀者才會把標題與下面的內容讀成一組。在 Divi 的模組設計裡，這對應到 Margin Top 與 Margin Bottom 的設定，我通常會把標題模組的 Margin Top 設得比 Margin Bottom 大約一倍。

第三個手法是背景色塊。當標題落在圖片或花俏的版面上時，直接放文字會被吃掉，這時給標題一個半透明或純色的背景色塊，能瞬間把它拉出來。Divi 的 Text 模組可以在 Design 卷宗裡設背景色，也可以用 Section 或 Row 的背景搭配 Row 的內距，做出標題專屬的色帶。這個手法常用在 Hero 區與章節開頭。

第四個手法是分隔線與小裝飾。在標題上方或下方加一條短線、一個小色點、或一段小型次標題（英文稱 eyebrow 或 kicker），是雜誌排版常用的技巧，能讓標題看起來更有結構感。例如在 H2 上方加一個品牌色的小線段與一行較小的章節編號，整個區塊的設計感會立刻提升。這些在 Divi 裡都可以用 Text 模組搭配 Border 或 Divider 模組做出來。

eyebrow 指的是放在主標題上方的一行小字，通常標示分類、編號或欄位名稱，例如「03｜色彩計畫」「案例研究」「Step 2」。它能預告區塊類型與順序，但不是特殊的 SEO 加分元素。字級應明顯小於主標題，顏色可用品牌主色或淡色變體；在 Divi 裡可用獨立 Text 模組放在標題正上方，再調整兩者間距。

用 Divi 的 Hover 與 Transform 做出會呼吸的標題

Divi 後期的版本加入了 Hover 與 Transform 這兩組強大的設計選項，標題在這裡可以玩出很多花樣，但也很容易玩過頭。原則僅有一個：互動效果的目的在引導讀者，炫技請放一邊。一個好的標題 Hover 效果，要讓讀者感覺到「這裡可以點、這裡有東西」，至於那種「哇這網站好酷」的驚嘆，反而會讓讀者分心，忘記自己進站要做什麼。

Hover 選項在每個模組的 Design 卷宗裡，點開任何一個樣式欄位（字色、字級、間距、變形），旁邊都有一個 Hover Toggle，點下去就能為滑鼠懸停狀態單獨設一組值。標題常見的 Hover 變化有：字色變淡或變亮、字級微微放大（例如放大 4 到 6 px，不要誇張）、底線出現、字距（letter-spacing）拉開。這些變化要細微，讓讀者感受到「回饋」而不是「驚嚇」。

Transform 能對模組做位移、縮放、旋轉與傾斜。標題用 Transform 較適合小幅捲動進場，Hover 在這裡反而是配角。Divi 內建 Scroll Effects 能讓標題隨捲動位移或淡入，但效果過多會擾亂閱讀。如果網站已有其他互動元素，可參考Divi 圖片懸停特效的克制原則。

動畫不要綁在會被頻繁觸發的事件上，也不必為簡單效果額外加入 JavaScript 函式庫。優先使用 Divi 內建 Hover 與 Transform，並在手機實測；觸控裝置沒有可靠的滑鼠懸停狀態，關鍵資訊不能依賴 Hover 才出現。

手機上的標題：字級、行高與斷行是三件事

行動裝置占全球網站流量的比重已經長期超過六成（依 Statista 的統計，2026 年 4 月），在台灣這個數字僅會更高。但很多人設計標題時，完全是照桌面版的尺寸想，到了手機上才發現標題占滿整個螢幕、一行擠七個字、斷行斷在奇怪的地方。手機標題要分開處理，而且要分得很細。

Divi 的每個樣式欄位都有響應式切換，點一下會出現手機與平板的圖示，點進去就能為不同裝置單獨設值。這個功能一定要用，而且用的時候要分三個層次調：字級、行高、斷行。字級是最基本的，桌面 49px 的 H1 在手機上通常要降到 32 到 36px，否則一個標題就佔掉半個螢幕。行高也要跟著調，桌面標題行高 1.2，手機上因為螢幕窄、單行字數少，行高反而可以稍微放鬆到 1.3，讓兩行標題不會黏在一起。

最棘手的是斷行。中文沒有單字邊界，瀏覽器憑字數硬斷，常常把一個完整的語意拆成兩行，讀起來卡卡的。控制斷行的做法有兩個：一是用 <br> 在特定位置手動換行，讓標題在你想要的字之後斷開；二是用 CSS 的 word-break 或 overflow-wrap 屬性微調。手動換行比較直覺，但缺點是它會同時影響桌面與手機，所以更乾淨的做法是用 Divi 的響應式選項，給手機版一個獨立的標題文字（用手機圖示切換後直接改文字內容），或在自訂 CSS 裡用媒體查詢控制。這部分如果你要更廣的響應式排版觀念，響應式網頁設計 RWD 有完整的入門脈絡；若是想針對手機版的區塊順序做調整，Divi 手機版排序教學 是很實用的補充。

還有一個容易被遺忘的點：手機上的標題如果有 Hover 效果，記得確認它在觸控狀態下的行為。前面說過，行動裝置沒有 Hover，所以你的 Hover 樣式在手機上根本不會觸發，如果你把重要資訊（例如顏色變化暗示可點）藏在 Hover 裡，手機用戶會完全看不到。設計時要假設「手機用戶僅看得到預設狀態」，任何關鍵的視覺提示都不能僅靠 Hover。

標題與 SEO：H1 到 H6 的語意不能被視覺綁架

這一節是整篇最容易踩雷的地方，因為它牽涉到「視覺」與「語意」兩個目標的衝突。SEO 講的是 HTML 結構的正確性，設計講的是視覺呈現的美感，兩者在標題上常常打架。很多人為了讓某段文字變大、變粗，就直接把它設成 H2 或 H3，完全不顧它在內容結構裡到底是不是一個章節標題。這種做法短期看不出問題，長期會讓搜尋引擎誤解你頁面的架構。

正確原則是：標題層級（H1 到 H6）代表內容結構，不是字級大小。H3 在視覺上可以比 H2 大，前提是它在內容裡確實屬於 H3。反過來，也不能因為想把一段話放大就標成 H1。Google 不把多個 H1 視為直接違規，但一個清楚概括頁面的主 H1，通常更容易維護，也方便讀者與輔助技術理解。相關寫法可參考SEO 標題優化與SEO Title Tag 大全。

這裡有一個很反直覺的事實值得記下來：Ahrefs 分析過數百萬個搜尋結果頁面，發現大約有 7.4% 排名在前段的頁面，其實連 title tag 都沒有或格式有問題（2021 年 10 月的研究）。這個數字告訴我們兩件事：第一，title tag（搜尋結果裡顯示的標題）跟頁面裡的 H1 是兩個不同的東西，前者是給搜尋引擎與搜尋結果頁用的，後者是給讀者在頁面上看的；第二，即使技術細節沒做到完美，內容本身的價值還是核心。但這不是你偷懶的理由，把 title tag 與 H1 都寫好，是基本功，不是選配。

還有一個跟點擊率有關的視角。Backlinko 分析了數百萬筆 Google 搜尋結果（2025 年 4 月），發現標題與搜尋意圖的契合度，與點閱率有明顯正相關。這個結論對頁面內的標題設計也有啟發：你的 H1 與章節 H2 的用字，要貼近讀者腦裡的問題，別僅顧著說你自己想講的話。換句話說，標題背負的任務遠超過排版：它還要負責「讓讀者一眼覺得這就是我找的」。設計標題時，字型與顏色是表象，文字本身是不是命中讀者的疑問，才是決定他會不會繼續讀的關鍵。

標題效能：字型不要拖垮你的 Core Web Vitals

標題設計做得很美，結果網站開得跟龜一樣，等於白做。字型是網站速度的隱形殺手，尤其是中文標題字型，一個不注意就能把你的 LCP（Largest Contentful Paint）拖到紅燈。Google 自己在 web.dev 上講得很直白：網頁載入速度每多一秒，訪客滿意度與轉換率都會明顯下滑，行動裝置上尤其嚴重。標題常常是首屏最大的那個元素，標題字型載不完，LCP 就上不來。

處理標題字型的效能，有四個動作要做。第一，子集化，前面提過，把字型檔砍到僅剩你用的字，標題字型子集後通常僅有幾十 KB。第二，預載（preload），在 HTML head 用 <link rel="preload" as="font"> 告訴瀏覽器這個字型很重要、要提早抓，這對首屏標題尤其有效。第三，font-display: swap，讓文字先用系統字顯示，字型下載完再換，避免整頁文字空白等字型。第四，快取，設定適當的 Cache-Control，讓回訪讀者不用重新下載字型。

這四個動作裡，Divi 本身僅幫你做了一部分，子集化與預載通常需要你自己處理或靠外掛。如果你用快取外掛來做整站的效能優化，WordPress 快取外掛 有完整的比較；若是想要從字型載入這一塊單獨下手，前面提過的本機託管 Google Fonts 那篇是最直接的入口。圖片延遲載入對標題本身的影響不大，但如果你的標題蓋在一張 Hero 大圖上，圖片的載入策略會連帶影響標題的呈現時機，Lazy Loading 延遲載入實戰指南 可以對照著看。更廣義的網站速度優化思路，我整理在 我們整理的速度指南，標題字型僅是其中一環，主機、圖片、外掛數量都會一起決定你的 Core Web Vitals 成績。

還有一個與標題相關、但常被看漏的效能細節：自訂字型的格式。Divi 接受 woff2、woff、ttf 等格式，現代瀏覽器都支援 woff2，它的壓縮率最好、檔案最小。上傳字型時優先用 woff2，能再省一截大小。如果你手上僅有 ttf 檔，前面提過的 Divi 自訂字體教學裡有線上格式轉換工具的介紹，幾分鐘就能轉好。

把這四個效能動作做完之後，建議用 PageSpeed Insights 或 Lighthouse 跑一次實測，重點看兩個數字：LCP（最大內容繪製）與 CLS（累計版面位移）。LCP 反映首屏最大的元素多快被畫出來，而首屏最大的元素常常就是你的 H1 標題；CLS 反映版面在載入過程中跳動的程度，標題字型用 font-display: swap 之後，文字會從系統字先換成自訂字型，如果兩者寬度差很多，畫面就會跳一下，造成 CLS 變差。解法是調整 fallback 字型的 size-adjust 與 metric override，讓系統字的寬度盡量接近自訂字型，換字時的跳動就會小到讀者幾乎察覺不到。這個細節很技術性，但它正是「字型載入不拖垮體驗」的最終一哩路。

四個最常見的標題設計地雷

看的網站越多，越會發現標題的問題重複性很高。這裡把最常見、也最該優先改的四個地雷整理成下面的對照表，你可以把它當成自查表，回頭對著自己的網站逐一檢查。這幾個錯都不是大問題，但累積起來就會讓一個網站「看起來很不專業」，而專業感往往就藏在這些細節裡。

層級混亂與主標題不清楚會影響閱讀、導覽與輔助技術；字型過多與關鍵字堆疊則會傷害掃讀與信任。處理時先讓章節語意清楚，再統一視覺表現，不必把每個標題細節都解讀成直接排名因素。

還有一個不算地雷、但很值得意識到的點：標題跟接下來的行動呼籲（CTA）按鈕是視覺上的搭檔。標題把讀者的注意力抓過來，CTA 按鈕負責把那股注意力轉成點擊，兩者的配色、字級、間距要互相呼應。如果你的標題做得很有氣勢，下面的 CTA 卻是一顆灰灰小小、沒有存在感的按鈕，前面累積的氣勢就白白浪費了。想把這層關係做好，CTA 行動呼籲按鈕設計指南 把從心理學到實戰案例的完整鏈路講得很清楚，值得跟這篇對照著讀。設計網頁時，把標題與 CTA 想成同一組呼吸，讀者的視線才會自然從標題流轉到行動。

把上述全部兜起來：標題系統的落地流程

講了這麼多層次，真正做案子的時候，這些觀念要怎麼依序落地？我把流程整理成一個固定的順序，建議每個專案都照這個走，可以省下大量回頭修改的時間。這個流程的核心精神是「由上而下、由全局到細節」，先定基線、再調互動、最終修效能。

第一步是定字型與字級基線。在 Theme Options 與 Theme Customizer 裡，把全站的 Body 字型、Heading 字型、H1 到 H4 的字級與行高、Heading 與 Body 的顏色一次設好。這裡用的是前面講的模數比例（例如 1.25），不要憑感覺。設完之後，Divi 預覽任何一頁，標題都應該已經有基本的層次感，不需要再個別調。

第二步是處理中文字型的載入。把你選定的標題字型做子集化、轉成 woff2、上傳到 Divi 或主機、設定 font-display: swap 與預載。這一步做完，你的標題字型就不會成為速度瓶頸，後面再怎麼調視覺都不用擔心拖垮效能。

第三步是在個別區塊做視覺強化。Hero 區的標題可以放大、加背景色塊、配捲動動畫；章節標題可以加 eyebrow 小標或分隔線；卡片標題可以配 Hover 微互動。這一步是發揮設計感的地方，但記得所有強化都要在全域基線之上做微調，不要覆蓋掉基線，否則又回到各頁各自為政的混亂。

第四步是調手機版。把每個關鍵標題切到手機視圖，調字級、行高、斷行，確認標題在窄螢幕上可讀且不擠。這一步常被跳過，但它直接決定行動裝置用戶對你網站的第一印象。

第五步是做語意檢查。回頭看整頁是否有清楚的主 H1、H2 到 H6 能否反映內容嵌套關係，並分別寫好 title tag 與 H1；兩者可以相近，不必為了「不能重複」而硬改成不同意思。這一步用瀏覽器開發者工具或 SEO 外掛就能快速檢查。

五步把全站標題重新拉一遍（行動清單）

如果你手邊已經有一個用 Divi 做的網站，標題系統亂七八糟，想一次整理好，以下是顧問實務裡反覆驗證可行的五步流程。它不會讓你一天變成設計大師，但能讓你的網站在一個週末之內，從「隨便拼起來」升級成「有一致的設計語言」。

1. 盤點現況：打開你流量最高的五個頁面，把每個頁面的 H1、H2、H3 字型、字級、顏色記錄下來。你會發現重複的亂象比想像中多，光是看到這份清單，你就知道問題在哪。
2. 定基線：在 Theme Customizer 裡用模數比例（建議 1.25 或 1.333）重設 H1 到 H4 的字級，統一 Heading 字型與 Body 字型，把顏色對比拉開。這一步做完，全站立刻有一致感。
3. 處理字型載入：把標題用的中文字型做子集、轉 woff2、本機託管、設 swap 與預載。用 PageSpeed Insights 測一次，確認 LCP 沒有因為字型而變紅。
4. 調手機版：切到手機視圖，把 H1 字級降到 32 到 36px，行高微調，關鍵標題手動處理斷行。用實機或瀏覽器的裝置模擬看一遍真實呈現。
5. 修語意：逐頁確認主 H1 清楚、標題層級能反映章節嵌套，並分別寫好 title tag 與 H1。

做完這五步，你的標題系統會從「裝飾」升級成「結構」，這也是我一直強調的觀念：好的標題設計，重點在讓整個網站的資訊架構清楚到讀者不用思考就能找到東西，字變漂亮僅是這個過程的附帶效果。這件事跟 SEO 一樣，不是花錢，是存錢，每多一份系統化，你網站的長期資產就多一層。

如果你在這個過程裡發現自己的網站需要的其實是更大規模的重建，例如主題版本老舊、版型跟不上行動趨勢，或想把 Divi 跟其他頁面編輯器做整體比較再決定方向，WordPress 頁面編輯器比較 可以給你一個更廣的視野；想找擴充功能來強化標題或排版效果，必裝 Divi 外掛推薦 是值得收藏的清單。把標題系統做好，是讓網站從「能用」走向「好用」的第一步，也是讀者與搜尋引擎都會感謝你的一步。