Divi 頁首要套版還是自製？一套決策流程幫你判斷

上線前一天，業主傳來一句訊息：「頁首感覺不太對，能不能弄成競品那樣？」你打開 Divi，盯著 Visual Builder 裡空白的 Section，猶豫要從版型庫挑一組來改，還是狠下心從零拉一個。這一步估錯方向，賠上的往往超過一個下午：整組頁首砍掉重練。另一種劇本更常見：你在 Visual Builder 裡分明把頁首調好了，切到商品頁或某篇文章，畫面上那一條卻紋風不動，重新整理也沒有用。兩種劇本都是示意，但每天都在真實專案裡發生。

兩種劇本共用同一個誤解：把頁首當成「一個地方的一個區塊」，以為改了就該全站生效。實際上，Divi 的頁首是範本系統的輸出，畫面上那一條顯示什麼，由「哪一份範本、套到哪些頁面」的指派關係決定。動手之前，與其糾結美醜，先把猶豫翻譯成三個判斷題：問題出在哪裡、用什麼方式做、做到什麼程度算完成。下面依序給你分診的方法、決定做法的五個問題、範本指派的機制、套版來源的風險混搭、四道結構檢查、匯入後的驗收、手機體檢、電商取捨，收在頁首的維護與資產化。

快速重點：頁首問題先分診成識別、動線、重量三類；五個問題決定套版、微調或重建；Global Header 是預設而非唯一，指派表畫對，套版才會落在對的頁面；手機當另一個介面體檢，調好就匯出成檔案。

頁首出狀況時，先把問題分成三類再動手

先分診，再動手。頁首的問題在業主嘴裡都是「怪怪的」，拆開看是三類，處方完全不同。識別類的症狀是看起來不像你的品牌：logo 舊了、顏色對不上、字體跟包裝差很遠。動線類的症狀是訪客找不到路：選單項目沒有人點、聯絡按鈕被視線跳過、關鍵頁面的到達率在資料裡就是偏低。重量類的症狀是拖慢每一頁：LCP 偏高、字型請求一堆、行動版互動卡頓。三類的修法互不相干，混著處理只會越修越亂。

把「換一組套版」當萬靈丹，是分診沒做的典型結果。識別類最適合用換套版解，視覺骨架換掉、品牌資產填進去，問題就消掉大半；還有個快檢法可用，把頁首截圖跟名片、包裝、社群頭貼並排放，看起來像同一家公司嗎？答案遲疑，症狀就成立。動線類先不要碰視覺，去改選單結構：項目順序、層級深度、命名方式，這些換一百套套版都不會變好。重量類和套版長相無關，先做診斷找出真正的瓶頸，再決定瘦身的順序。

舉個示意情境。接案設計師收到業主一句「頁首怪怪的」，先不急著報價，花十分鐘把三類症狀各問一遍：首頁與內頁各開一次，是長得不像品牌？找路的時候卡住？還是載入明顯偏慢？分診結果出來，做法與價格都站在同一張地圖上談。頁首在整個品牌官網裡承擔什麼，可以先看過這篇品牌官網價值分析，位置感會更清楚。

每類症狀再留一個排查問題，成因在後面各節展開。識別類問對比夠不夠：透明頁首疊在淺色視覺上，白色文字會直接消失，這是對比問題，不是審美問題。動線類問承載量超過沒有：選單項目多過欄位能放的數量，版面就會撐開或換行。重量類問覆蓋範圍有多大：頁首是全域元素，壞一次等於每一頁都壞。互動卡頓則往主執行緒找，這條線索留到效能那節收網。

分診的價值，是把「頁首重新設計」這種大題目拆成答得出來的小題目。跨區塊的雷遠不只這些，自架網站常見錯誤大公開一次列全，頁首只是其中一環；先分診再動手的習慣，換到任何區塊都適用。

五個問題問完，就知道該套版、微調還是重建

結論先講：多數商業網站落在「套版加品牌替換」這一格；品牌資產齊全、頁首又肩負明確轉換任務時，才值得從零客製。判斷不靠感覺，依序問五個問題，答案會自己收斂。

1. 主選單有幾項？五項以內，常見套版的欄位都放得下；超過七項，先篩掉欄位數不足的候選，或把次要項目收進下層。後悔的樣子：套版載入後選單爆版，才回頭找欄位更多的版本。
2. 品牌資產齊不齊？logo、色票、字型、CTA 文案都定案，替換就快；缺一大半，先把盤點補完再挑。後悔的樣子：拿漂亮套版當品牌方向的替身，之後回頭改的工比起省下的多。
3. 需不需要分頁面換頁首？需要，而且頁面意圖差異大，指派複雜度跟著上升，套版要挑結構乾淨的。後悔的樣子：為了三組頁首混了三種設計語言，全站視覺反而破碎。
4. 之後誰維護？業主自己動手，樣式愈單純愈好；設計師長期照顧，才考慮互動複雜的版本。
5. 上線時程多急？時程緊，套版替換是務實解；時間充裕，從零客製投入的決策成本才攤得回來。

五個答案對應三種處方：幾乎都答「少、齊、不用、業主自己、很急」，套版替換就夠；選單多、要分頁面換頁首，但資產齊，走套版大改，挑結構乾淨的底，改欄位與互動；資產齊、頁首肩負明確轉換任務、時程又充裕，才考慮從零客製，用 Visual Builder 把每一列每一個模組自己排。三種處方沒有優劣，只有合不合你的答案；拿別人網站的處方套自己的問題，是這一步最常見的浪費。

五個問題之外有一個前置動作：盤點品牌資產。把 logo 檔案、色碼、字型名稱與授權、CTA 文案列成清單，這份清單直接餵給後面的四道結構檢查，盤點愈齊，檢查走完愈快。套版省的是從空白起步的決策成本；整體縮短多少時間，仍取決於選單數量與手機版調整的幅度，沒有固定的完成時數可以承諾。

這五問是全文的樞紐：答案決定你去哪裡找素材、檢查什麼、怎麼驗收。帶著自己的答案往下讀，每一節都會多一層對照。想先看素材池的長相，Divi 佈局版型的整理可以把選項攤開來。

你改的從來不是頁首，而是一份範本

開場第二種劇本的答案在這裡：改了不生效，多數時候不是故障，而是你改到一份沒有被指派到那個頁面的範本。Divi 的頁首是 Theme Builder 範本系統的輸出，主題內建頁首、Global Header、Custom Header 可能同時存在，畫面顯示哪一份，由指派條件決定；條件愈精準的範本，優先於覆蓋範圍更廣的範本。改到沒被指派的那份，前台自然沒有反應。

關鍵是把 Global Header 當成「全站預設」，而不是「唯一」的頁首。Default Website Template 之外，另外開一份首頁專用、一份部落格專用、一份商店專用的 Custom Header，是 Theme Builder 本來就支援的用法，不同頁面因此能拿到各自匹配的那一條。指派關係弄對，改動才會落在你以為的頁面上；一份範本當全站預設、少數頁面另建專用頁首，這個結構是後面所有動作的地基。

這套全域與條件式頁首的機制，出處是 Elegant Themes 自己的文件：官方的Theme Builder 說明文件把範本與指派講得完整，支援中心的用 Theme Builder 自訂全站頁首頁尾一文，再把 Global Header 與條件式頁首的關係演示了一次（兩份都是 2026 年 9 月查閱）。讀官方文件的好處是介面版本對得上，第三方教學常常新舊版本混著講。

覆蓋順序講白：頁面要輸出頁首時，先看有沒有條件命中它的 Custom Header，有就用它；沒有，退回 Global Header；再沒有，才落到主題內建頁首。三層誰贏的規則記住，「某幾頁的頁首憑空消失」這類排查就有章法。更早的年代，佈景主題的頁首是寫死的，改樣式得靠 CSS 覆寫或子主題；範本化之後，多數換頁首的需求變成介面裡的指派操作，但特殊需求仍要看介面與外掛能力，不是每件事都能點一點完成。

照這個機制排查「改了不生效」，順序固定：先到 Theme Builder 的範本清單，看現在有幾份頁首範本、各自掛了什麼條件；再開出問題頁面，比對它實際吃的是哪一份；確定改的就是那份，前台就會有反應。多數時候問題在第二步就現形：你想改的那份，跟頁面正在使用的那份，不是同一份。

Divi 4 與 Divi 5 的 Theme Builder 介面有差異，操作名稱以你手上的版本為準，機制本身相同。要系統性補課，Divi 主題終極指南與Divi 5 全新介面深度解析兩篇，把前後版本講得比這裡完整。

需要幾組頁首？從訪客意圖畫指派表

答案先給：用一組全域預設頁首上線，再依數據逐頁補專用頁首，不必一開始就建三四組。要幾組，從訪客意圖反推：還在認識你的首頁訪客、要快速導讀的內容讀者、快要成交的商店訪客、正在結帳的使用者，意圖不同，頁首的任務就不同。

指派條件怎麼設，核心邏輯是「頁面套用最匹配的那一組」：首頁、商店頁、文章分類、單一頁面都可以當條件，訪客落在哪個條件，就拿到對應的頁首。基本頁面條件在 Theme Builder 裡可以設定；特殊邏輯仍要按現行介面與外掛能力確認，不是每種規則都有現成選項。

舉一個模擬情境。伴手禮烘焙品牌，首頁用透明頁首疊在全版產品視覺上，結帳頁換成只留 logo 與返回連結的極簡頁首，指派表兩列就畫完：首頁一列填透明頁首，結帳相關頁面一列填極簡頁首，其餘頁面全部落在全域預設。兩列的表攤開，哪個頁面長什麼樣一目了然，交接時交這張表就夠。

兩組範本搶同一個頁面時，比的是條件的精準度，誰勝出以 Theme Builder 的說明與實測為準；排查時直接開那個頁面看輸出，比猜規則快。邊際頁面要逐一點開檢查：404 頁、搜尋結果頁、預覽草稿，這些頁面有時會吃到不同的頁首，上線前沒看到，上線後就變成驚喜。

專用頁首要不要建，判斷句只有一個：會不會干擾當下任務。結帳與登入頁收掉主選單，因為任何一條額外的路都在拉人離開任務；首頁用透明頁首，是為了讓第一屏的視覺完整。透明頁首的失敗狀態也要先想：白字疊在淺色視覺上會直接消失，這是對比不足的機制問題，挑視覺素材時要把頁首文字的顏色一起算進去。一頁式網站的頁首取捨與按鈕的設計邏輯，分別有完整討論：Divi 一頁式網頁設計實戰、CTA 行動呼籲按鈕設計指南。

免費、付費、自己匯出：三種頁首來源的風險混搭

三條路線性質不同，混搭前先分清。官方範本與 Layout Pack 隨會員提供，但 Layout Pack 的數目不等於可匯入的頁首數，包裝裡未必附頁首檔；Marketplace 的第三方作品要逐項核對授權與版本相容；自己匯出的 Theme Builder JSON 最可控，重用價值最高。成熟做法是混搭：官方打底，特定需求買單點，把自己的調校存成私有資產。

挑來源前先分清手上是哪一種檔案：Layout Pack 是一組頁面版型，包裝裡未必附頁首檔；頁首版面 JSON 只裝頁首的內容與樣式，匯入時要先開著一份 Global Header 或 Custom Header 的編輯畫面，它填的是版面，不會自己動範本指派；Theme Builder 的範本 JSON 才連範本與指派條件一起進出。官方的Divi 5 課程頁首篇提供可下載的頁首版面 JSON，示範的就是在 Global Header 編輯畫面裡匯入版面；Divi 5 的自訂範本教學再把範本建立與指派的流程完整走一遍（2026 年 9 月查閱）。跟著做一次，比看十篇轉述更能建立手感。

第三方作品的檢查點三條：授權是單站還是多站、支援的 Divi 版本、更新與維護紀錄。跨站重用前，把來源與版本記進檔名或文件，半年後回頭才分得清哪些能升級、哪些該淘汰。

這一節是採購決策，不是資源清單，排序的軸線是風險與可控度。官方來源授權最乾淨，版號對齊的成本最低；第三方勝在視覺表現，代價是授權與相容自己把關；私有 JSON 前期要投入調校，換來之後每個專案都能重用。展示用的套版沒有 CTA 槽位，商業網站直接篩掉，這是五問裡轉換任務那題的延伸。

套版省下的是決策成本，不是調整成本。品牌色常寫死在模組裡，要一個一個換；選單項目多過欄位承載量，版面照樣崩。該花的收斂工省不掉，差別在起點：一邊是已經成立的結構，一邊是完全的空白。要擴大搜尋範圍，Divi Marketplace 免費資源總整理與Divi 高質感版型庫兩篇，把可信來源怎麼找、挑的時候看什麼，寫得比這裡詳細。

能進指派表的套版，要過四道結構檢查

挑套版只看一條軸線：結構相容性。四道檢查都過，才值得匯入：欄位數對選單項目數、字型請求數、CTA 槽位、斷點行為。

第一道，欄位結構。先數主選單有幾項，再看套版的欄位放不放得下，順序反了就會掉進縮圖陷阱：看起來都很好，載入才發現放不下。選單的建置與層級設定，WordPress 選單設定教學有完整說明，先把選單整理乾淨，承載量才有得算。

第二道，字型請求數。打開瀏覽器開發者工具的 Network 面板，重新載入頁面，數字型檔的請求。超過兩套字型的候選，淘汰，或下載後手動收斂到一兩套；中文字型檔案大，這條對中文網站尤其有感，字型本身的挑選邏輯看中文字體設計指南。

第三道，CTA 槽位。商業網站的頁首要有一個明顯的行動按鈕位置，這是硬指標；純導覽的展示型頁首再漂亮，沒有按鈕位置就先淘汰。第四道，斷點行為。切到手機預覽，看漢堡選單的觸發、logo 的尺寸、按鈕有沒有被擠到第二行。四道檢查在縮圖上都做不了，要進到實際預覽才算數。

四道過了，才輪到視覺層級。頁首同時放 logo、選單、按鈕，份量要拉開：logo 最重，選單中等，CTA 用色塊突顯，不靠字級堆高。中文選單的字級有個經驗下限，低於十四像素辨識開始吃力，實際數字依字型筆畫粗細浮動。層級與標題的整體處理，Divi 標題設計技巧講得具體。

品牌替換有固定順序：先換 logo，再動選單，顏色用一組固定色碼清單管理，每次替換才會一致。色碼怎麼定，看品牌色彩挑選指南；logo 的設計與配色，看網站 Logo 設計與配色實戰。

匯入後的第一個小時，只做四件事

驗收先於修改：核對匯入範圍沒有覆寫既有指派、桌機與手機各預覽一次、點過每一個選單與按鈕連結、存檔並用 Portability 匯出 JSON 備份。四件事做完，才開始改樣式。

載入路徑有兩種，層級不同：換頁首內容，在 Visual Builder 裡用 Add From Library 載入，或在頁首的編輯畫面匯入版面 JSON，這一層只動內容，不碰範本指派；拿到的是 Theme Builder 範本 JSON，才走 Portability 的官方匯入流程，這一步會問你要覆寫什麼，範圍先看清楚：你要的是加一份新範本，不是把整組 Theme Builder 設定蓋掉。既有指派一旦被覆寫，回頭救的工比匯入本身多。

匯入與指派的整套流程，官方影片 Using The Divi Theme Builder in Divi 5從頭演示過一次，從新增範本、設定條件到前台驗證都包括，跟著畫面走一遍，介面位置不用背（2026 年 9 月查閱）。

先看再改是原則。任何樣式修改都排在驗收與備份之後，因為「套版本身有問題」和「我改壞了」要能分開：匯入當下先預覽存檔，之後出狀況才知道是素材的問題還是調整的問題。兩個習慣順手養成：社群圖示原則上收進頁尾，真要放進頁首，只挑一兩個跟品牌關係最深的，做法參考Monarch 社群按鈕教學；頁首的文字不要搶內文標題的層級，訪客的閱讀動線才不會被頁首打斷。

備份不是儀式，是版本管理的第一步。官方的範本匯入匯出說明把 Theme Builder 範本的進出講清楚了，每調整到一個穩定狀態就匯出存檔，檔名帶日期與版本。這個習慣的價值，要等你做到第三個、第五個網站才看得到，資產化的細節收在末段。整個 Divi 架站流程裡頁首的位置，Divi 主題架站全攻略把前後環節串得起來。

手機上的頁首是另一個介面：三項體檢

手機上的頁首要當另一個介面檢查，三項體檢：漢堡選單展開後的樣式與好按程度、logo 在手機的高度上限、按鈕與選單的點擊面積。為什麼值得單獨檢查，流量結構說明了一半：Statista 對全球網站流量的長期統計裡，行動裝置占比多年維持在一半以上（2026 年 9 月查閱），多數訪客第一次看到你的頁首，是在六吋螢幕上。

第一項，漢堡選單怎麼觸發、點開之後長什麼樣。套版到了手機，選單幾乎都會摺進漢堡圖示；真正的短板在展開後：全螢幕選單常常是整組頁首裡最陽春的部分，背景色、項目間距、字級多半還是預設值。展開後的選單要用手指的角度檢查，互動目標以 24×24 CSS px 為 AA 基本目標（或符合間距例外），44×44 CSS px 是 AAA 加強目標，重要的選單項目值得往加強目標做。

點擊面積的數字不是經驗法則，是 WCAG 2.2 的正式規範。W3C 對應 AA 的Target Size Minimum把基本目標定在 24×24 CSS px，間距足夠時可以符合例外；對應 AAA 的Target Size Enhanced把加強目標拉到 44×44 CSS px。規範講的是可點範圍，不是視覺大小，按鈕看起來小沒有關係，周圍留出可點的緩衝一樣合格。

第二項，logo 的高度。桌機剛好的 logo，到手機常把頁首撐高，壓到內容區；在行動斷點給 logo 一個寬度上限，必要時改用精簡版標誌，圖示留下、文字收掉。元素在手機上的顯示與排序可以逐項調整，Divi 手機版排序教學拆得很細，響應式的整體觀念在響應式網頁設計 RWD那篇。

固定置頂頁首在手機上，用「佔掉多少內容高度」衡量。可用內容區變小是機制問題，不是感覺問題：一條兩排資訊的頁首黏在頂端，六吋螢幕一次能看到的內容就少一截。頁首偏高的站，在手機關掉 sticky 或改成往下滑自動收合，通常是划算的選擇；只有一排的頁首影響有限，不必一刀切。

頁首是每一頁都要付的效能稅

頁首是全域元素，重量會乘上全站頁數，沒有哪一頁能替它分擔。動手瘦身之前先診斷，找到真正的瓶頸再修，順序反了就是憑感覺改。

搜尋引擎把速度與互動穩定度納入評估。Google Search Central 部落格在 2020 年 5 月的文章裡說明過 page experience 訊號的定位，page experience 說明文件對定義持續更新。速度為什麼重要，web.dev 整理的研究講的是同一件事：頁面慢，離開的人就多。

診斷用 PageSpeed Insights 或 Lighthouse 跑一次首頁，看兩個指標：LCP（最大內容繪製）與 INP（互動到下次繪製）。LCP 偏高，到實測資料裡確認 LCP 元素是什麼，不要用猜的，頁首的 logo 圖與字型是常見主因之一；INP 偏高，往主執行緒找，固定頁首綁了過多滾動動畫是第四個加稅項，手機上尤其明顯。LCP 的優化方法，web.dev 有專文把成因與解法列完整。

頁首常見的加稅項四個：列數與模組過多、多套字型同時載入、選單文字或圖示以圖片檔呈現、過重的滾動動畫腳本。對照診斷結果排順序，數據指到哪裡先修哪裡。前兩項吃的是網路請求與下載量，後兩項吃的是裝置運算，成因不同修法也不同：請求類減量，運算類拆掉或延後。字型收斂的具體做法，可以照Divi 自訂字體上傳教學走一遍。

長期監控交給 Search Console 的體驗報告，它持續追蹤實際訪客的核心指標，設定與判讀在Google Search Console 實戰教學。全站層面的速度工程，搭配載入速度優化全攻略、WordPress 快取外掛推薦與WordPress 圖片優化指南；效果視站而異，都要實測驗證。

電商頁首的取捨題：哪個入口真的幫助成交

電商頁首要即時反映購物狀態，但入口不是越多越好；購物車、搜尋、帳戶顯示哪些，依商品數量與會員流程決定，結帳頁可以測試更精簡的專用頁首，每個取捨用站內搜尋與結帳資料驗證。規模感可以從W3Techs 的技術使用統計看：WooCommerce 長年是 WordPress 生態最普遍的電商方案（2026 年 9 月查閱），頁首怎麼配，值得單獨當一題算。

購物車、搜尋、帳戶三個入口，不必全放。商品少、沒有會員制，購物車加搜尋就夠，帳戶圖示留給有訂單查詢與願望清單需求的站；商品一多，搜尋入口的優先順序往前挪。帳戶入口還要對照會員流程：沒有會員功能卻掛帳戶圖示，訪客點進去是一面登入牆，信任先扣分；有會員專區與訂單查詢，這個入口才從多餘變必要。固定的公式不給，判斷條件是訪客帶著什麼意圖上門。

搜尋入口的行為設計看商品量：品項少的站，點了跳到搜尋結果頁就夠用；SKU 一多，展開式輸入框帶即時建議，把找頁面縮成找商品。哪種做法真的縮短尋找路徑、對轉換有幫助，要回到站內搜尋紀錄與結帳資料驗證，不是套上去就會變好。

結帳與購物車頁的極簡頁首，就是指派表那節的電商那一列，這裡講指派，不再設計一次。把結帳相關頁面指派給只留 logo 與返回、客服路徑的頁首，移除主選單；這個配置是否提高結帳完成率，要前後資料或實驗證明，方向合理不代表效果自動成立。

高客單的 3C 類購物站，頁首要多承擔規格比較與信任訊息的引導，配置邏輯同一套：意圖先講清楚，入口跟著意圖走。整個商店的架構，從WooCommerce 購物網站架設全攻略、最佳 WooCommerce 佈景主題推薦，到WooCommerce 結帳表單客製化與WooCommerce 商品頁 SEO 優化，頁首是入口，入口後面每一頁都要接上；3C 產品購物網站架設教學針對高客單情境另有展開。

調好的頁首是資產：維護、交接與誠實邊界

調好的頁首要變成資產，三個動作：版本化匯出的 JSON、記錄字型與色碼決策、文件化指派條件。做完這三件事，頁首從一筆工時變成一組檔案，維護與交接才有依據。

重用的紀律很樸素：私有 JSON 命名帶版本與日期，記錄每版動了什麼；有 Divi Cloud 的話，私有頁首可以跨站同步，不必手動搬檔，概念與設定看Divi Cloud 完整指南；跨站匯入前，先確認目標站的 Theme Builder 指派不會被覆寫，這是匯入那節講過的範圍問題。

交接檢查三樣：指派條件、字型清單、CTA 連結對照。指派條件寫清楚哪組頁首管哪些頁面；字型清單交代用了哪些字型與授權來源；對照表列每顆按鈕連去哪裡。非原作者接手，靠這三份文件就能繼續維護，不必逆向還原。

三種情況，套版反而繞遠路

誠實講邊界。品牌識別已有嚴格規範的站，色彩、字型、間距都被規範書押著，套版的既有結構要拆到符合規範，拆除成本會超過省下的決策成本，從結構自建反而快。頁首只需要極簡骨架的站，一個 logo 一組選單，從零拉是幾分鐘的事，匯入套版再刪乾淨是繞路。頁首要承載複雜互動的站，動態選單、登入狀態切換這類邏輯，套版給的是視覺不是邏輯，該寫的程式不會因為套版消失。套版是預設路徑，不是唯一路徑。

回頭看整條決策線：分診把症狀歸類，五問決定處方，指派機制解釋改動落在哪裡，三種來源管理風險，四道檢查篩結構，第一小時做驗收，手機體檢與效能瘦身把關品質，電商取捨回到意圖，資產化讓工時沉澱成檔案。每一節回答一個判斷題，答案串起來，是一套可以重複使用的流程。

要往視覺延伸，輪播、視差滾動與圖片懸停各有專篇：Divi 輪播外掛、Divi 視差滾動效果、Divi 圖片懸停特效。要往功能擴充，必裝 Divi 外掛推薦、Divi Supreme 模塊擴充評價與Divi 子主題推薦把工具面整理好了。頁首加效果元件時，回到四道結構檢查再走一次，承載與效能那一關照樣要過。

頁首的複雜需求，像是一個品牌多個站點要把頁首規格統一、電商要把結帳動線的頁首收斂好，判斷比單一網站多一層，Whoops 在這類 WordPress 與 Divi 的實戰專案提供諮詢；多數需求照這篇的決策流程走，自己就能完成。打開 Theme Builder，把指派表畫出來，第一份頁首資產從今天開始累積。