Divi 頁首設計秘訣：告別手動排版

頁首是整個網站曝光率最高的區塊，但它在 Divi 裡的設定也最瑣碎，想在頁首加一個聯絡按鈕、把 logo 置中、讓選單在手機上收成漢堡選單，光是調欄位、對齊、斷點就耗掉整個下午。在 Divi 架站實務上，每當遇到「頁首能不能再精緻一點」這類需求，道理都很清楚：頁首是整個網站投報率最高的那一塊，但它也是最吃細節、最容易把人榨乾的一塊。

這篇要給你一個不一樣的答案。別再從空白版面一行一行拉了，直接站在 Elegant Themes 累積多年的 300 多組現成套版上，把「設計」這件事換成「替換」。先講結論：用 Divi Theme Builder 綁定一組現成 header 套版，再執行品牌色、logo、選單、CTA 的四步替換，三十分鐘內就能產出一個看起來像設計師手作的頁首。下面會把挑選邏輯、套用工作流、手機版、效能地雷、WooCommerce 電商特殊處理一次講完。

頁首要花最多心思，因為它是每一位訪客都會看到的那一塊

實務上常把頁首比喻成一間實體店面的招牌加接待桌。客人推門進來，第一眼掃到的就是招牌（你的 logo 與主視覺），接著視線會自然落到接待桌（你的導覽選單與行動按鈕）。這兩樣東西決定了客人「要不要繼續往裡面走」。頁尾重要嗎？重要，但多數人滾到頁尾時已經讀完內容，那裡是收尾，不是開場。側邊欄呢？在手機版幾乎被壓到底部，影響力有限。算一算，頁首是你全域曝光面積最大、黏著度最高、轉換責任最重的版面。

更關鍵的是，頁首一旦做成 sticky（固定置頂），它就不只是「第一眼」，而是「每一眼」。使用者往下滑、讀完一整篇文章、再回到頂端，那條頁首都黏在螢幕上方。等於你買了一個廣告版位，付一次錢，曝光無限次。這就是為什麼架站時的精力分配要壓在頁首；時間要投在刀口上，別平均撒在每個區塊。

從轉換的角度看，頁首還承擔一個隱形任務：在三秒鐘內回答訪客心裡那句「我來對地方了嗎」。使用者點進你的網站，前幾秒都在無意識地掃描頁首，判斷這個站是不是他要找的、能不能信任、值不值得繼續往下看。如果頁首的視覺傳達與你的定位不一致，或選單結構讓人一頭霧水，很多人在這三秒內就會離開，你後面準備再好的內容都救不回來。於是，這裡要反覆強調：頁首的設計從來就不只是美觀而已，它同時承擔定位與轉換的責任。把這個觀念內化進去，你挑套版與微調時的每個判斷都會更有方向。

換句話說，頁首承擔三個任務：品牌辨識（你是誰）、導覽（能去哪）、轉換（下一步做什麼）。一套好的頁首套版，就是把這三件事的骨架先搭好，你只要把血肉換成自己的就好。如果你對「網站每個區塊的價值比重」還沒概念，可以先參考這篇把企業形象網站整體價值拆解的品牌官網價值分析，回頭會更知道頁首在全局裡的位置。

先把 Divi 頁首的底層邏輯搞懂：Theme Builder 帶來了什麼改變

在談套版之前，得先把 Divi 頁首的運作機制講清楚，不然你套了版也不知道它在哪裡生效。早期的 Divi 頁首是寫死在佈景主題裡的：你進入 WordPress 後台的「選單」設定 logo 與導覽項目，主題用它內建的那組樣式輸出，能改的東西很有限。那個年代要做出「透明頁首疊在 hero 區塊上」「頁首內嵌一個報名按鈕」「不同分類用不同頁首」這類需求，幾乎都得動到 child theme 的 PHP 與 CSS，門檻不低。

Theme Builder 出現之後，整個遊戲規則變了。它把頁首、頁尾、文章範本、分類彙整、404 頁這些過去被主題綁死的區域，全部變成可以用 Visual Builder 拖拉設計的「全域版面」。你可以在 Divi → Theme Builder 裡新增一個 Global Header，用跟設計內頁一模一樣的模組化方式去排頁首，然後指派給整個網站，或只指派給某個條件範圍。Elegant Themes 官方文件對這套機制有完整說明，細節可以對照Elegant Themes 的 Divi Theme Builder 文件（2026 年 6 月查閱）。

這裡有一個很多人會混淆的點要特別提醒：Global Header 不是「唯一」的頁首，而是「預設」的頁首。你完全可以再開第二、第三個 Custom Header，各自指派給首頁、部落格、WooCommerce 商店頁。這正是後面會著墨的 Conditional Headers 玩法的基礎。如果你想先建立對 Divi 整體介面與操作的宏觀認識，建議搭配Divi 主題終極指南與Divi 5 全新介面深度解析一起看，會更踏實。

300 多組套版到底藏在哪？三個你該知道的合法下載來源

「300+ 現成套版」這個數字是怎麼來的，先講清楚，免得你找半天找不到。Divi 的套版生態主要有三個來源，各自的性質與授權都不太一樣，搞混了會白花錢或踩到授權地雷。

第一個來源是 Elegant Themes 隨 Divi 會員方案提供的 Layout Packs（版型包）。每組通常包含同一產業的首頁、關於、服務與聯絡等頁面版型，但不等於一定附有可匯入 Theme Builder 的頁首與頁尾。官方持續新增版型，實際數量以版型庫為準。你可以在 Visual Builder 裡點「Load from Library」→「Premade Layouts」瀏覽；頁首仍應確認來源、授權與 Divi 版本相容性。版型挑選可參考Divi 佈局版型。

第二個來源是Divi Marketplace 與第三方設計師販售的 header 專包。官方 Layout Pack 講究的是「免費、通用、好上手」，而 Marketplace 上的第三方作品通常更敢玩視覺，會做互動式選單、mega menu、動態滾動效果這類進階樣式。買之前務必看清授權條款，有的只授權單站、有的可多站使用。我們在Divi Marketplace 免費資源總整理與Divi 高質感版型庫兩篇裡，把可信任的來源與挑選要點整理得比較細，這裡先不重複。

第三個來源是最被低估、卻是實務上最推薦的：你自己匯出、自己重用的私有 header 資產。當你第一次把某個 header 套版調校到滿意，可以用 Divi 的 Portability 功能把它匯出成 .json 檔，往後每一個新專案都能匯入再微調。如果你有 Divi Cloud，這些私有 header 還能雲端同步到所有網站，不必再手動複製檔案。這件事會在後面工作流那節再講一遍。先建立雲端版型管理概念的話，看Divi Cloud 完整指南就夠了。

把三個來源拆開來看，你會發現「300+」其實是保守說法。官方 Layout Pack 的 header 加上 Marketplace 的第三方作品，再加上你自己累積的私有資產，數量只會更多。重點從來不是「有多少套版可選」，而是「你知不知道怎麼挑、怎麼改、怎麼重用」。

挑套版的五個判準：不是愈華麗愈好

新手挑 header 套版最大的陷阱，就是被縮圖的美感綁架。螢幕上看起來驚豔的頁首，套進你的網站常常是一場災難：欄位數對不上你的選單、配色與你的品牌色打架、手機版整排擠在一起。實務上把挑選標準收斂成五個判準，照著檢查能省掉八成回頭重做的工。

第五個判準特別想多講兩句。很多漂亮的 header 套版是「展示用」的，整條頁首只有 logo 與選單，沒有留任何一個行動按鈕的位置。這在作品集類網站沒問題，但如果你做的是要轉換的商業網站或電商，頁首沒有一個高對比的 CTA，等於把最值錢的那塊版面浪費掉了。CTA 的設計邏輯可參考另一篇CTA 行動呼籲按鈕設計指南，挑套版時可以把「能不能放進一顆夠醒目的按鈕」當成硬指標。

還有一個很少人提、但很實用的判準：注意套版用了幾種 Google Fonts。有些第三方 header 為了視覺效果，同時載入三四套字體，光頁首就要下載好幾個字型檔，直接拖垮首屏載入速度。挑的時候打開瀏覽器開發者工具看 Network，字型請求太多的直接淘汰，或至少下載後手動改成只用一兩套。這跟後面效能地雷那節是同一件事的兩面。

頁首的字體與視覺層級：別讓標題與選單搶戲

挑好套版、換好品牌色之後，多數人會卡在「字體」這一關。頁首的空間很有限，卻要同時塞 logo 文字、選單項目、CTA 按鈕，三者的字體大小、粗細、顏色如果沒有刻意拉開層級，整條頁首看起來就會糊成一團。實務上的習慣是建立三層視覺層級：logo 文字最大且最重，通常用品牌字型或粗黑體；主選單項目中等字級、常規字重，要清楚但不搶眼；CTA 按鈕用較小的字級，但以高對比的色塊包裹，靠顏色而非字級來突顯。這三層各自承擔不同任務，混在一起就會互相打架，訪客的視線也會找不到落點。

字體本身的挑選也有講究。頁首因為面積小、又常被放大檢視，建議選用筆畫清晰、小字級下仍好辨認的字型，避開筆畫太細或裝飾性太強的字體。中文頁首尤其要注意字級下限，實務上通常不會讓選單文字小於 14px，再小就會在視網膜螢幕與普通螢幕之間出現明顯的清晰度落差，看久了也傷眼。想把標題與字體的整體設計邏輯學得更系統，可以搭配Divi 標題設計技巧，裡頭有針對視覺層級的具體做法；中文字型本身的選擇，則看中文字體設計指南，把字體這關弄懂，你的頁首質感會直接拉一個檔次。

「套用、不從零蓋」的四步工作流（核心實戰）

挑好套版之後，真正的工作才開始。實務上把整個流程濃縮成四個步驟，這套順序在每個 Divi 專案裡反覆驗證有效。你只要照著走，幾乎不會漏東漏西。

第一步：把 header 套版載入 Global Header。進入 Divi → Theme Builder，新增一個 Global Header，在 Visual Builder 裡用 Load from Library 把你挑好的 header 版面載進來。載入後先別急著改任何東西，先存檔、先在手機與桌機兩種視窗預覽一次，確認它在你的環境裡長什麼樣。這個「先看再改」的習慣很重要，能幫你提早發現套版與你內容結構的不相容。

第二步：換 logo 與品牌色。把套版裡的佔位 logo 換成你的，再把所有主色一次替換成你的品牌色。Divi 的好處是顏色可以用全域的方式管理，但 header 套版常常把顏色寫死在每個模組裡，你得手動一個一個換。建議在這一步同時把品牌色記錄下來，建立一組固定色碼，之後每個新專案都套用同一組，視覺一致性才會出來。品牌色怎麼定的學問不小，可以參考品牌色彩挑選指南；logo 本身的設計與配色，則看網站 Logo 設計與配色實戰。

第三步：接上導覽選單。把套版選單模組裡的佔位項目，替換成你 WordPress 後台已經建好的選單。這裡最常見的錯誤是選單項目太多，把頁首撐爆或擠到第二行。如果你的服務分類很多，硬塞行不通，這時請改用 mega menu，或把次要項目收進下拉選單。選單的整體設定邏輯，建議先讀一遍WordPress 選單設定教學，會知道後台與前台的對應關係。

第四步：綁定 Theme Builder 條件並匯出備份。決定這組 header 要套用到全站、還是只套用特定範圍，然後存檔。最後，用 Portability 把調好的 header 匯出成 .json，存進你的私有資料庫。這個動作的價值會在第三次、第五次架站時爆發出來：你等於在累積一組「自己品牌的頁首模板」，越用越快。如果你常做多元站，把這些模板丟上 Divi Cloud 之後，新專案匯入只要幾秒鐘。

這四步走完，你產出的不是「一個頁首」，而是一個「可重複變現的頁首資產」。這是值得反覆強調的觀念：架站不要每一次都從零開始，要把重複的勞動固化成資產。對「怎麼把整個 Divi 架站流程串起來」還沒完整輪廓的人，Divi 主題架站全攻略是很好的起點。

進階玩法：用 Conditional Headers 給不同頁面不同的頁首

到這裡為止，你已經能用套版快速做出一個全站通用的頁首。但 Divi 真正值回票價的地方，是它能給不同頁面配不同的頁首。這個能力多數人沒在用，因為他們以為頁首只能有一組。下面直接說明實戰配置：一個網站通常會準備三到四組 header，分別綁定到不同的漏斗階段。

第一組是給首頁與登陸頁用的透明頁首。這組頁首疊在滿版 hero 圖或影片上，沒有底色，logo 與選單文字是白色，目的是讓第一屏的視覺衝擊最大化。這組不能套用全站，只能綁定首頁與少數幾個行銷登陸頁，否則在白底內頁上會完全看不到字。如果你做的是一頁式行銷頁，這組是必備，可以參考Divi 一頁式網頁設計實戰。

第二組是給部落格與內容頁用的固定置頂頁首。這組有底色、有 sticky，logo 與選單清楚，還會塞一個搜尋圖示，方便讀者在長文裡隨時搜尋其他文章。內容型網站的讀者停留時間長，固定頁首能讓他們讀到一半想跳走時，隨時有路可走。

第三組是給 WooCommerce 商店與商品頁用的電商頁首，這組會在下一節專門講。第四組則是給登入會員、會員專區這類頁面用的極簡頁首，只留 logo 與帳戶圖示，刻意拿掉主選單，目的是減少分心、讓使用者專注在當下的任務（登入、填表、結帳）。

實際在 Theme Builder 裡設定這些條件，邏輯很直觀。每一組 Custom Header 都可以附加一或多個指派條件，例如「首頁」「所有 WooCommerce 商店頁」「特定文章分類」或「單一頁面」。Divi 會根據使用者當下瀏覽的頁面，自動套用最匹配的那組 header，過程完全不用寫程式。建議從最明確的兩個情境開始練手：先把首頁獨立指派一組透明 header，再把結帳頁獨立指派一組極簡 header。這兩個極端案例做完，你就完全掌握條件式頁首的運作邏輯，之後要再加部落格、會員專區的專屬頁首，幾乎是複製貼上再微調而已。

這套多頁首策略的價值，在於你終於能「對不同意圖的訪客說不同的話」。首頁的訪客還在認識你，給他最大氣的視覺；商店頁的訪客已經要買了，給他最快的結帳入口。把頁首當成漏斗的一部分來設計，別把它當成一個全站統一的裝飾，這是新手與成熟架站者最大的觀念分水嶺。

手機版頁首：別讓你的套版在六吋螢幕上崩盤

講完桌機的多頁首策略，接下來這節要單獨談手機，因為手機版的頁首是最容易翻車的地方。Statista 的數據指出，全球網站流量中超過六成來自行動裝置，而且這個比例連續多年維持在高檔（2026 年 4 月）。你以為大家用桌機看你的網站，真相是多數人是用六吋螢幕在瀏覽，而你的頁首在手機上長什麼樣，才是真實的第一印象。

手機版頁首要特別處理三件事。第一是漢堡選單的觸發與樣式。多數套版在手機上會自動把選單收成漢堡圖示，但收起來之後那個全螢幕選單的樣式常常很陽春。你要手動調整展開後的選單背景色、項目間距、字體大小，讓它在手指觸控時好按。按鈕之間的點擊範圍至少要有 44px，這是公認的觸控友善下限。

第二是logo 在手機上的尺寸。桌機上看起來剛好的 logo，到手機上常常太大、把整條頁首撐高，壓縮到內容空間。建議在行動裝置斷點把 logo 寬度設一個上限，必要時換一個精簡版 logo（例如只留圖示、拿掉文字）。第三是頁首元素的顯示順序。手機版空間有限，logo、漢堡選單、CTA 按鈕三者誰該出現、出現在哪個位置，會直接影響點擊率。Divi 可以針對不同裝置個別開關模組，也能用 CSS 調整排序，具體做法可參考Divi 手機版排序教學，照著做就能把行動版面順序調到最佳。

這裡要誠實提醒一件容易看漏的事：手機版的 sticky 頁首要慎用。固定置頂的頁首在桌機上是加分，但在手機上會吃掉寶貴的垂直空間，讓實際可用內容區域變小。如果你的頁首本身就高（例如有兩排資訊），在手機上建議關掉 sticky，或者改成滾動時自動收合，往下滑就隱藏、往上滑才重新出現。響應式設計不是把桌機版縮小就好，而是要為每種螢幕重新想一次版面，這個觀念在響應式網頁設計 RWD那篇有更完整的討論。

套版頁首的效能地雷：漂亮卻會拖垮分數的那幾件事

頁首是每一頁都會載入的全域元素，所以它對效能的影響是被「乘上全站頁數」的。一個肥大的頁首，等於在每一頁都加上同樣的負擔。Google 在評估網頁體驗時，把載入速度、互動穩定度、視覺穩定性都納入訊號，官方在 Search Central 部落格（2020 年 5 月）明確把這些歸類為「page experience」的一部分。而速度之所以重要，不只是為了分數，更是因為它直接影響使用者是否願意留下來（見 web.dev 的研究，2026）。

套版頁首常見的效能地雷有四個。第一是過多的列數與模組。有些套版為了視覺豐富，頁首疊了三四列、塞了十幾個模組，每個模組都有自己的 DOM 節點與樣式。頁首不需要這麼複雜，兩列、三五個模組通常就夠了。第二是多套 Google Fonts 同時載入，這在前面挑套版那節提過，頁首用了三四套字型會讓首屏多出好幾個網路請求，建議整個頁首只用一到兩套字型。中文字型的處理另有學問，可以看Divi 自訂字體上傳教學。

第三是用圖片做選單文字或圖示。把選單項目做成圖片、或用圖片檔代替向量圖示，不但拖慢載入，還會讓字體無法隨系統縮放、對 SEO 與無障礙都不利。選單文字用真正的文字、圖示用內嵌 SVG 或圖示字型，才是正解。第四是過重的滾動與動畫 JavaScript。某些第三方 header 為了炫技，綁了很多 scroll event 與動畫函式，在手機上會造成互動遲鈍、影響 INP 指標。

講了這麼多地雷，你大概會問：到底要怎麼知道自己頁首有沒有中獎？最直接的方法是用 Google 的 PageSpeed Insights 或 Lighthouse 跑一次首頁檢測，重點看兩個指標：LCP（最大內容繪製）與 INP（互動到下次繪製）。如果 LCP 偏高，多半是頁首載入了過大的資源，例如未壓縮的 logo 圖或整包字型；如果 INP 偏高，往往是 sticky 頁首的滾動監聽或動畫函式在拖累主執行緒。量完之後，對照上面四個地雷逐一排查，通常能抓出主要元兇。長期監控這些數據，建議把網站接上 Google Search Console，它會在體驗報告裡持續追蹤你的 Core Web Vitals 表現，相關設定與判讀方式整理在Google Search Console 實戰教學，養成每個月看一次的習慣，問題才不會累積到掉排名才發現。

這四個地雷的本質都一樣：頁首要輕，因為它沒有「只載入一次」的特權。網站速度優化的完整做法，另外整理在載入速度優化全攻略，搭配WordPress 快取外掛推薦與WordPress 圖片優化指南一起看，能把包含頁首在內的全站效能一起拉起來。

WooCommerce 電商頁首要特別處理：購物車、搜尋、帳戶三圖示

如果你的網站是電商，頁首的設計邏輯要整個換一套。根據 W3Techs 的統計（2026 年 6 月），WooCommerce 在所有使用內容管理系統的網站裡，佔有相當高的市佔，是 WordPress 生態最大的電商解決方案。而電商頁首與一般內容站頁首最大的差別，在於它必須即時反映「使用者的購物狀態」。

一個合格的 WooCommerce 頁首，至少要常駐三個圖示：購物車、搜尋、帳戶。購物車圖示要能即時顯示目前商品數量，使用者一加車就能看到數字跳動，這是降低結帳焦慮的關鍵。搜尋圖示對電商尤其重要，因為多數消費者是「帶著明確需求來找特定商品」的，一個顯眼的搜尋入口能大幅縮短他們的路徑。帳戶圖示則讓已登入會員快速查看訂單、願望清單。這三個圖示的位置與樣式，建議放在頁首右側、CTA 按鈕的旁邊，視覺上集中、動線上順暢。

這裡要特別強調搜尋圖示的行為設計。多數套版的搜尋是點擊後跳轉到獨立的搜尋結果頁，這對內容站夠用，但對電商卻遠遠不夠。電商網站更理想的做法，是讓搜尋圖示點擊後展開一個 inline 的搜尋輸入框，甚至帶出即時的熱門關鍵字與商品建議。使用者輸入的第一個字就能看到候選商品，等於把搜尋從「找頁面」升級成「直接找商品」，這對高 SKU 數的電商轉換提升非常明顯。如果你的商品數量不多，至少也要確保搜尋結果頁能正確列出符合的商品，並把缺貨商品明確標示，別讓使用者點進去才發現白跑一趟。搜尋體驗做好，頁首就從被動的導覽列，升級成主動的銷售助理。

電商頁首還有一個容易漏的細節：結帳頁與購物車頁要換成極簡頁首。這呼應前面提過的多頁首策略。當使用者進入結帳流程，你最不希望的就是他分心去點別的選單、跳出結帳。所以在 Theme Builder 裡，把結帳頁與購物車頁單獨指派一組只留 logo 與「繼續購物」連結的頁首，移除主選單與所有分心元素。這個小動作對轉換率的影響，往往比你想像的大。

如果你正在規劃整個 WooCommerce 網站，頁首只是其中一環，建議把幾個關鍵流程一起看過：WooCommerce 購物網站架設全攻略講整體架站流程，最佳 WooCommerce 佈景主題推薦幫你挑對主題底層，WooCommerce 結帳表單客製化處理結帳頁的欄位，WooCommerce 商品頁 SEO 優化則補上商品頁的搜尋引擎能見度。電商是一個系統工程，頁首是入口，但入口後面的每一頁都要顧到。如果你做的是 3C 這類高單價商品，可以再參考3C 產品購物網站架設教學，裡頭有針對高客單商品的頁首配置建議。

五個建議主動避開的頁首設計地雷（誠實清單）

累積下來，有些頁首錯誤反覆出現、每次都讓人忍不住想搖頭。以下把它們列成一份誠實清單，有些是套版本身的問題，有些是使用者在客製時自己踩出來的。對照檢查一下，你現在的頁首中幾項？

地雷一：透明頁首配上淺色 hero 區。透明頁首要成立，前提是它疊在夠深、夠有對比的背景上。如果你的 hero 是淺色照片或白底，白色字會直接消失，使用者根本看不到選單。這不是套版的問題，是搭配的問題，套用前請務必確認 hero 區的明暗。

地雷二：頁首塞滿社群圖示。把 Facebook、Instagram、LINE、YouTube、Email 全擠進頁首，視覺上像在趕集。社群圖示建議放頁尾，頁首頂多留一兩個與品牌最相關的。社群按鈕的整體規劃可以看Monarch 社群按鈕教學。

地雷三：用圖片當選單項目。前面提過，這會拖慢速度、犧牲無障礙與 SEO。再漂亮也不要這麼做。

地雷四：忘了幫 404 頁與搜尋結果頁設定頁首。Theme Builder 預設把全域頁首套用到所有頁面，但 404 與搜尋結果這類特殊頁面，有時會因為範本優先順序而吃到不一樣的頁首，或根本沒套到。記得進 Theme Builder 檢查這些邊際頁面的頁首指派。

地雷五：過度動畫的 sticky 頁首。有些設計師喜歡在頁首滾動時加上縮放、變色、淡入淡出等多重動畫，在桌機上看很炫，在手機上卻會造成互動卡頓，也容易讓使用者感到分心。動畫點到為止就好，頁首的任務是穩定地提供導覽與轉換，不是表演。更多網頁設計的常見錯誤，整理在自架網站常見錯誤大公開，建議整篇讀過一遍，很多地雷是跨區塊的。

行動方案：今天就打造你的第一個套版頁首

觀念講完了，最後給你一份可以立刻執行的行動清單。不要等到「把 Divi 學完」才開始，今天就用你現在手上的網站走一遍，做完你就會發現頁首這件事沒有想像中難。

1. 盤點你的選單與品牌資產。把你要放進頁首的主選單項目、logo、品牌色色碼、CTA 文字先列出來。沒有清單，你連套版都挑不準。
2. 從官方 Layout Pack 挑一組 header。第一次先用免費的官方版本練手，別急著買第三方。挑的時候照前面那五個判準檢查一遍。
3. 在 Theme Builder 建一個 Global Header 並載入。載入後先存檔、先在桌機與手機預覽，確認沒有崩版再往下改。
4. 執行品牌色、logo、選單、CTA 的四步替換。每改一項就存檔一次，方便出問題時回溯。
5. 匯出成 .json 存檔。這是你的第一份私有頁首資產，往後每個專案都能重用。
6. 規劃第二組頁首給你最在意的轉換頁。多頁首策略從一組開始就好，先給 WooCommerce 商店或最重要的登陸頁換上專屬頁首。

執行這份清單時有一個心態要先建立：第一組頁首不需要完美，要的是「能用、能上線」。很多架站者卡在頁首的細節裡，logo 對齊差一像素、顏色差一個色階就反覆調整，結果網站遲遲無法上線。實務上的建議是先求有、再求好，把第一版頁首做出來、讓網站可以正常運作，實際累積一兩週的真實訪客數據後，再回頭根據數據優化。你會發現，很多原本執著的細節，訪客根本沒注意到；而真正影響轉換的問題，往往要上線後才看得見。

這份清單走完，你手上的就不只是一個頁首，而是一套可複用的頁首工作流。下一次架站，你會把第一天的頁首工作壓縮到三十分鐘以內，把省下來的時間花在內容與轉換優化上，那才是真正拉開差距的地方。

頁首是網站的門面，也是每一位訪客都會經過的關卡。把它的設計從「每次重拉」升級成「套用加替換」，再進階到「一個網站多組頁首」，你會發現 Divi 不只是一個佈景主題，而是一套能陪你長期累積設計資產的系統。如果你想把這套系統擴得更深，Divi 的延伸資源可以一路看下來：需要更多功能模組就看必裝 Divi 外掛推薦與Divi Supreme 模塊擴充評價；想用子主題快速開站就看Divi 子主題推薦；要為頁首搭配輪播、視差、圖片懸停這類視覺效果，則參考Divi 輪播外掛、Divi 視差滾動效果與Divi 圖片懸停特效。把它們一塊一塊接起來，你的頁首與整站視覺會越做越有底氣。

如果你在實作的過程裡，碰上比較複雜的需求，例如多站品牌矩陣的頁首標準化、或電商結帳流程的頁首動線優化，而一時拿不定主意，我們 Whoops SEO 也協助這類 WordPress 與 Divi 的實戰專案諮詢。多數需求照著這篇文章做就能完成，真的卡關時 Whoops 很樂意陪你把頁首與轉換動線一起看。無論如何，現在就打開你的 Theme Builder，把第一組套版頁首載進去吧。