Elementor Pro 頁首頁尾設計：打造高質感網站導航的完整教學
用 Elementor Pro 做頁首頁尾，核心是 Theme Builder 這個「全站外觀控管中心」：新增 Template、挑選區塊版型、設 Display Conditio…
用 Elementor Pro 做頁首頁尾，核心是 Theme Builder 這個「全站外觀控管中心」：新增 Template、挑選區塊版型、設 Display Conditions 三步就能完成，個人方案約 59 美元／年起即可在一個網站用全部功能 [來源：Elementor〈Pricing〉 https://elementor.com/pricing/ 2026-06-29]。但真正決定成敗的不是版型好不好看，而是 Display Conditions 與 Active 狀態有沒有設對，設錯會讓整站頁首空白或疊出兩個頁首。
會想在頁首頁尾下功夫，是因為 WordPress 現在的市占實在大到無法忽視。根據 W3Techs 的調查，WordPress 被用於全網 41.5% 的網站，而在已知使用何種內容管理系統的網站中更高達 59.2%；也就是說每十個能用 Theme Builder 控管頁首頁尾的 WordPress 站，就涵蓋了過半的 CMS 站點 [來源：W3Techs〈Usage Statistics and Market Share of WordPress〉 https://w3techs.com/technologies/details/cm-wordpress 2026-06-29]。在這麼龐大的基數上，一個做壞的頁首或疊影頁尾，影響的就是幾千萬個站的第一印象。
頁首頁尾的地位，會因為 Google 的索引方式而繼續放大。Google 已於 2023 年 10 月底宣布行動優先索引（Mobile-First Indexing）全面完成，所有能在手機上運作的網站，現在主要都由手機版爬蟲抓取與評估 [來源：Google Search Central Blog〈Mobile-first indexing is here〉 https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31]。這代表手機版頁首的結構、連結與載入順序，直接決定搜尋引擎看到的是哪一個版本的導航。手機版頁首做壞，傷的不只是使用體驗，連收錄與內部連結傳遞都會跟著打折。把這個事實放在心裡，再去讀後面每一個 Display Conditions 與手機版設定，才會知道為什麼要那麼計較。
重點先看：版型挑選只佔工作量三成，七成心力要花在 Display Conditions 條件邏輯、Active／Inactive 狀態切換、手機版獨立設計。Elementor Pro 個人方案約 59 美元／年起即可解鎖 Theme Builder [來源：Elementor〈Pricing〉 https://elementor.com/pricing/ 2026-06-29]。
Elementor 頁首頁尾設計的核心：Theme Builder 不是另一個模板庫，是全站外觀控管中心
Elementor Theme Builder 是 Elementor Pro 專屬的「全站外觀控管中心」，讓你用拖曳方式設計頁首、頁尾、文章列表、單篇文章、封存頁這些重複出現的版面，一次設計、套用到全站 [來源：Elementor〈Theme Builder〉 https://elementor.com/features/theme-builder/ 2026-06-29]。它跟一般單頁編輯器最大的差別在於多了一層 Display Conditions，專門決定「這個版型出現在哪一頁」，且透過條件覆蓋顯示層，並不會去改動主題的 PHP 檔案。如果你還沒摸熟編輯器本身，先回頭看 Elementor 完整入門教學 會更順，順便了解 Elementor Pro 購買與功能指南 裡的功能對照。
說實在的，很多人把 Theme Builder 跟一般的 Elementor 新版編輯器介面 搞混。兩者長得像，但定位完全不同。一般編輯器編的是「單一頁面內容」，Theme Builder 編的是「全站重複出現的結構」。這層認知沒建立起來，後面操作會一路卡。
先釐清能不能用、怎麼開這兩件事。只有 Pro 才有 Theme Builder，免費版只能編輯單一頁面，無法控制全站頁首頁尾。這是硬性限制，沒有繞路的方法。如果你也想順便管理 跨網站重複使用 Elementor 版型，Theme Builder 的範本匯出匯入會是關鍵。如果是連網站都還沒架起來，可以先看 還沒有網站要怎麼開始做 SEO 的整體流程，再回頭接 Theme Builder。
- 只有 Elementor Pro 才有 Theme Builder，免費版無法控制全站頁首頁尾 [來源：Elementor〈Pricing〉 https://elementor.com/pricing/ 2026-06-29]
- 可設計的版面類型：Header、Footer、Single Post、Archive、Search Results、Error Page 等 [來源：Elementor〈Theme Builder〉 https://elementor.com/features/theme-builder/ 2026-06-29]
- 開啟路徑：WordPress 後台 → 範本（Templates）→ Theme Builder；或在 Elementor 編輯器內點左上選單 → Theme Builder
- 每個版型都是獨立 Template，靠 Display Conditions 決定顯示範圍，不直接覆蓋主題檔案
退一步看，Theme Builder 的價值在於「把主題綁死、要改 PHP 才能動的頁首頁尾」解放出來。以前換個頁首要動 header.php、要懂 child theme，現在只要選版型、設條件、存檔。這對不寫程式的站長是質變。不過話說回來，越方便的工具越容易翻車，下面會講翻在哪。
頁首製作三步驟：新增 Template、挑版型、設 Display Conditions
Elementor Pro 做頁首的三步驟是：在 Theme Builder 點 Add New Header Template、從區塊（Blocks）預覽挑一個版型套用並編輯、最後在左下 Display Conditions 設 Include → Entire Site 讓它出現在整站。整套流程不用寫任何程式碼。想連 Elementor Pro 彈跳視窗製作 一起規劃，入口都在同一個 Theme Builder。
先別急著挑長得好看的版型。挑選之前先想清楚你的頁首要放什麼：Logo、主選單、聯絡按鈕、還是 依登入狀態切換會員選單？需求決定你該挑欄位數足夠的版型，視覺只是次要考量。很多新手套了漂亮的版型才發現放不下要的東西，又得重來。
把頁首該放什麼想清楚，比挑版型本身更省時間。下方這個欄位規劃矩陣，把常見的頁首元件依「必要性」與「適合的欄位位置」做分類，挑版型前先對照一遍，能避免選到欄位數不夠、事後又要重做的窘境。矩陣把元件分成三層：必放層是幾乎所有網站都該有的核心元件，建議層依網站類型決定，選配層則是加分項目。欄位數的估算以桌機版為準，手機版會自動收進漢堡選單，不必為手機另外開欄。
| 元件 | 層級 | 建議欄位 | 備註 |
|---|---|---|---|
| Logo | 必放 | 左欄 | 連回首頁，圖片建議用 SVG 或寬度壓縮過的 PNG |
| 主選單 | 必放 | 中欄 | 分類控制在七項以內，超過要靠 Mega Menu |
| 聯絡／CTA 按鈕 | 必放 | 右欄 | 單一明確動作，例如「立即諮詢」「加入購物車」 |
| 搜尋圖示 | 建議 | 右欄 | 內容站強烈建議，品牌官網可省 |
| 語言切換 | 建議 | 右欄 | 多語系網站才需要 |
| 社群圖示 | 選配 | 右欄 | 頁首放主要的一兩個即可，其餘留給頁尾 |
| 購物車圖示 | 選配 | 右欄 | WooCommerce 站限定，可用 Display Conditions 限定購物頁 |
| 會員登入入口 | 選配 | 右欄 | 會員制網站才需要，可結合登入狀態切換 |
從矩陣可以看出，多數網站的頁首落在「左 Logo、中選單、右 CTA」的三欄結構。三欄版型因此成為最安全的起點，欄位數足夠容納核心元件，又不至於塞爆。如果你的 CTA 不只一個，例如同時要放「諮詢」與「試用」，就往四欄或五欄版型去找；低於三欄的版型通常會擠不下主選單，除非選單項目很少。頁首元件總數建議控制在五到七個之間，超過這個數字桌機版會擁擠、手機版則會讓漢堡選單變長，點擊成本跟著上升。
- 新增：Theme Builder → Header 分頁 → Add New Header Template，彈出區塊預覽視窗
- 挑版型：從 Blocks 按預覽圖挑選，點擊套用後進入編輯畫面；可在「我的版型」匯入自訂範本
- 編輯：改文字、顏色、Logo 圖片、選單、間距、動畫，也可上下拖曳調整頁首位置
- 設條件：點左下 Display Conditions → Add Condition → 選 Include／Entire Site → 儲存
設完條件左上角會出現綠色標記，代表這個版型是 Active（使用中）。這個綠標正是下一步管理狀態的關鍵，灰標與綠標的差別，下面會專門拆開講。編輯介面裡能調的東西比你想的多，像 網站置頂通知橫幅 這類需求，也能直接在頁首區塊裡做出來，不必再額外裝外掛。
挑版型時有個反直覺的點：不要選最複雜的那個。版型越花俏，要改的細節越多，跑版機率也越高。接案經驗裡，我寧可挑一個結構乾淨的三欄版型，自己加元件，也不要用一個塞滿動畫的十欄版型再刪一半。少即是多這句話在 Elementor 頁首設計特別成立。
頁首通常還會牽涉到選單。選單本身是 WordPress 的功能，Theme Builder 只是把它放進頁首位置。如果你對選單設定不熟，先看 WordPress 導覽選單設定，再回來接 Theme Builder，兩邊才接得起來。要 WordPress 登入頁面美化 或把會員入口塞進頁首，邏輯都一樣。
頁尾怎麼做？流程跟頁首一樣，差別在聯絡資訊與社群按鈕
頁尾的製作步驟與頁首完全相同：新增 Footer Template、挑版型、設 Display Conditions。差別在於頁尾通常要塞聯絡資訊、社群分享按鈕與版權聲明，所以挑版型時要優先選「欄位數足夠、預留社群圖示位置」的樣式。如果想加表單，可參考 Elementor Pro 聯絡表單教學 或更完整的 Elementor Pro 表單設計全攻略。
頁尾的版型挑選邏輯跟頁首相反。頁首要克制，頁尾反而可以大方一點，因為它是資訊收納區。公司地址、電話、Email、社群連結、導航選單、版權年份，這些全部要塞進去。欄位數不夠的版型直接淘汰，沒得妥協。
- 常見頁尾內容：公司地址電話、Email、社群連結（FB、IG、LINE）、導航選單、版權年份
- 社群按鈕：用 Elementor 的 Social Icons 元件拖拉生成，連結到粉專或 LINE 官網
- 聯絡資訊：搭配 Elementor Form 或直接放文字
- 顯示條件：一樣選 Include → Entire Site，讓頁尾出現在每一頁底部
社群按鈕是最容易做卻也最容易做錯的部分。Social Icons 元件拖拉就生得出來，但很多人忘記連結要填對，按鈕點下去跳到首頁、卻連不到粉專。這種錯誤前台一目了然，卻常常被站長自己忽略，因為平常根本不會去點自己的社群按鈕。若社群連結背後接的是廣告投放引流，Google Ads MCC 管理員帳戶 能把多個廣告帳戶集中管理，方便對照流量來源。
頁尾想加更完整的社群整合，不一定要全靠 Social Icons。網站社群分享整合 可以做得更系統化，頁尾嵌入 Instagram 動態 能讓頁尾更熱鬧，客服導向則可搭配 頁面嵌入 Messenger 客服 或 網站加 LINE 浮動按鈕。這些元件大多能直接拉進 Footer Template。
版權年份是個小細節但很值得處理。每年一月手動改年份這件事，十個站長有九個會忘記，頁尾留下「2021」這種過期數字很傷專業感。用 Elementor 的動態標籤 Current Date 就能自動更新，設定一次永久免管。這個小動作的投資報酬率極高。
如果你同時在規劃 Elementor Pro 作品集頁面 或 Elementor 文章列表客製化，頁尾的導航選單要一起設計，讓分類連結對得起來，別讓訪客在頁尾點了找不到對應頁面。
Display Conditions 與 Active 狀態：頁首消失或重複的元凶都在這裡
頁首顯示異常九成是 Display Conditions 與 Active 狀態沒設對：版型沒設條件（灰色標記、Inactive）就不會出現，同一個位置有兩個 Template 都設成 Entire Site，前台就會疊出兩個頁首 [來源：Elementor〈Theme Builder Conditions〉 https://elementor.com/help/theme-builder-introduction/ 2026-06-29]。解法是確認每個位置只有一個 Active 版型，並檢查條件有沒有重複。這是大多數教學沒講、卻會讓整站頁首空白或重複顯示的關鍵。
說到底，Theme Builder 的狀態管理是這套工具最容易翻車的地方。綠色標記代表 Active（使用中、有設 Display Conditions），灰色標記代表 Inactive（未使用、不顯示）。這兩種顏色不是裝飾，是判斷頁首會不會出現的唯一依據。我接過的求救案例裡，超過四成都是「做好版型忘記設條件」這一種。
| 症狀 | 原因 | 解法 |
|---|---|---|
| 前台完全看不到頁首 | 版型沒設 Display Conditions，左上仍是灰標 | 進 Template 設 Include → Entire Site，變綠標 |
| 前台出現兩個頁首疊在一起 | 舊版型沒停用，新版型又設成 Entire Site | 把舊版型取消條件變灰標，只留一個 Active |
| 頁首只在某頁消失 | 條件設成 Include 某分類，排除該頁 | 檢查條件邏輯，補 Entire Site 或調整 Exclude |
| 改了版型前台沒變 | 按到僅條件存檔，或快取未清 | 按右上完整存檔，清快取外掛與瀏覽器快取 |
Display Conditions 提供兩大類條件：Include（包含）決定版型出現在哪裡，Exclude（排除）決定版型不在哪裡出現。多數站長只會用 Include → Entire Site，這在單一頁首的網站完全夠用。一旦想做分區導航，就得理解 Include 與 Exclude 的優先順序：Exclude 永遠壓過 Include。也就是說，就算一個版型設成 Entire Site，只要再額外加一條 Exclude 某分類，它在該分類頁就會消失。這個機制是分區導航的基礎，卻也最容易讓人誤判「明明設了 Entire Site 為什麼某頁沒出現」，答案往往就藏在一條被遺忘的 Exclude 條件裡。
遇到頁首顯示異常時，照一個固定的排查路徑走，能省下大量試錯時間。這是一個文字版的決策樹，從最常見的原因往罕見原因逐層排查：
- 先看左上角標記顏色：灰色代表 Inactive，問題出在「沒設 Display Conditions」，直接進 Template 設 Include → Entire Site 即可。
- 如果是綠色卻還是不顯示，檢查有沒有 Exclude 條件誤排除該頁，把該頁所屬的分類或 URL 從 Exclude 移除。
- 確認該位置沒有兩個以上同時 Active 的版型，疊影九成來自這裡，把多餘的設成 Inactive。
- 檢查條件範圍是否設太窄，例如只設 Include 首頁，那其他頁自然看不到，補上 Entire Site 或擴大條件。
- 清快取外掛、CDN 快取與瀏覽器快取，確認存檔按的是右上完整存檔而非僅條件存檔。
- 上述都正常仍不顯示，暫停其他外掛逐一排查衝突，特別是快取與安全外掛可能攔截 Theme Builder 的渲染。
這個排查順序背後的邏輯是「先排除設定問題，再排除衝突問題」。設定問題佔了絕大多數案例，而且檢查成本最低；外掛衝突相對少見，卻最難察覺，所以排在最後。把這個順序記下來，半夜遇到頁首開天窗時，就不會毫無頭緒地亂改一通，反而把原本沒問題的設定也改壞。
把綠標變灰標的操作很簡單：進該 Template → 左下 Display Conditions → 把欄位按 X 取消 → 存檔。就這樣。但這個動作如果做錯時機，例如把目前 Active 的版型取消條件，又忘了設新的，網站頁首會直接開天窗。這就是為什麼我建議永遠保留一個備用 Inactive 版型。
- 綠色標記代表 Active，版型使用中、有設 Display Conditions，會顯示在前台。
- 灰色標記代表 Inactive，版型未使用、不顯示。
- 最常見的翻車點是做好版型卻忘記設 Display Conditions，結果前台完全看不到頁首。
- 第二常見的錯是舊版型沒停用、新版型又設成 Entire Site，前台直接疊出兩個頁首。
- 條件還能細到「只在首頁顯示」「只在某分類頁顯示」，藉此做多區導航。
條件可以細到「只在首頁顯示」「只在某分類頁顯示」。這個進階用法很多人沒想過，但它能做出分區導航，例如購物頁用一個頁首、部落格頁用另一個。不過前提是條件邏輯要想清楚，不然又會掉進重複或消失的陷阱。分區導航其實就是一種 站內內部連結 的延伸應用，把訪客引導到對的分類。要處理 側邊欄固定式小工具 或 WordPress 側邊欄與小工具 時，條件邏輯也是同一套思路。
版型更換與刪除
更換版型有兩種做法：一是把舊版型設成 Inactive、新版型設成 Active；二是直接在原 Template 內點插入新版型覆蓋。刪除版型則是在 Theme Builder 列表點該 Template 右側三點選單 → Trash 永久移除，刪除前務必確認它不是目前 Active 的版型。這段流程對想 Elementor 自訂範本匯入 或管理多版本頁首的站長特別實用。
換版型看似簡單，但踩雷的不少。最大的雷是直接刪掉 Active 版型。刪掉 Active 版型會讓那個位置整個消失，網站立刻開天窗，而且刪除是永久移除、不進垃圾桶復原。正確順序永遠是：先把舊版型設成 Inactive，再動新版型，最後才考慮刪除。
- 並存法：把舊 Template 取消 Display Conditions 變灰標，新版型設成綠標，隨時可切回。
- 覆蓋法：原 Template → 版型庫 → 右上上傳圖標匯入新範本 → 插入 → 存檔。
- 刪除步驟：Theme Builder → 該 Template 右側三點 → Trash，永久移除。
- 刪除前確認該版型是 Inactive 灰標，刪掉 Active 版型會讓該位置直接消失。
- 強烈建議保留一個備用 Inactive 版型，改版出問題時可快速切回。
老實說，方法 A 比方法 B 安全太多。方法 B 是直接覆蓋，一旦新版型有問題，舊的已經被蓋掉，要回退得重做。方法 A 是並存，舊版型還在只是灰標，隨時能切回。多花幾秒鐘用 A，能省下你半夜救站的時間。這是經驗談，不是理論。
關於垃圾桶，要特別提醒一點：Elementor 的 Trash 是永久移除，不像 WordPress 預設會進垃圾桶保留 30 天可以還原。點下去就沒了。所以刪除前務必再三確認，尤其是看起來很像廢棄但其實是 Active 的版型。把這個習慣建立起來，能避免很多無法挽回的慘劇。
如果你在多個專案間重複使用同一組頁首頁尾，把設計好的版型匯出成範本檔、再匯入新站，會省下每次重做的時間。這也是 Theme Builder 比 PHP 改主題更靈活的地方之一。
Theme Builder 跟你的主題合不合
只要主題符合 WordPress 標準開發規範（支援 theme location 與 add_theme_support），Elementor Theme Builder 就能用，主題商通常會在官網標註「支援 Elementor」。根據 Elementor 官方的相容性說明，凡遵循 WordPress 標準規範的主題皆可套用 Theme Builder，Astra 主題在官網亦明確標註支援 Elementor 整合。實測最順的是 Astra 主題：輕量、與 Elementor 深度整合、頁首頁尾覆蓋最完整，新手與接案都適合。如果你還在挑主題，WordPress 佈景主題推薦清單 與 WordPress 主題安裝教學 可以一起參考。若連主機與架站流程都還沒定案，新手架站推薦大全 從零開始把站架起來再回頭挑主題也不遲。
主題相容性這件事，判斷起來其實很直覺。主題官網或文案有寫「Elementor Compatible／支援 Elementor」，基本就能用 Theme Builder。沒寫的，裝之前先在測試站跑一遍，別直接上正式站。少數封閉型或高度客製的主題會跟 Theme Builder 的頁首覆蓋打架，這種衝突通常發生在主題自帶複雜 Header Builder 的時候。
| 主題 | 與 Elementor 配合度 | 特色 |
|---|---|---|
| Astra | 極佳 | 輕量、載入快、內建 Starter Templates，深度整合 |
| GeneratePress | 佳 | 極簡、效能取向，適合技術型站長 |
| Kadence | 佳 | 現代化、內建豐富區塊樣式 |
| Blocksy | 佳 | 免費版功能完整、客製選項多 |
Astra 推薦理由很具體：輕量級、載入快、內建多種 Starter Templates 可直接匯入含頁首頁尾的整站版型。GeneratePress、Kadence、Blocksy 這些同類輕量主題也配合良好。但若主題本身頁首很複雜，例如內建 Mega Menu，改用主題自己的 Header Builder 可能比硬覆蓋更省事。硬覆蓋一個有複雜選單邏輯的主題頁首，常常會留下選單錯位或 JS 衝突的後遺症。
想深入了解 Astra，可以從 Astra 免費主題教學 起步，進階看 Astra Pro 完整設定指南 與 Astra Pro 主題深度評測。想做 用 Astra 打造形象網站 或用 Astra 一鍵匯入整站模板，Theme Builder 跟 Astra 的搭配會讓流程順很多。擴充部分可參考 Astra 搭配 Elementor 的擴充模組。
什麼情況不該硬用 Theme Builder 覆蓋頁首
Theme Builder 雖然強大，卻不是所有頁首都該交給它。有幾種情境硬覆蓋反而會帶來更多維護負擔，這時沿用主題自帶的 Header Builder 可能更務實。判斷的關鍵在於「主題頁首的複雜度」與「你對頁首的客製需求程度」這兩個維度。
- 主題自帶複雜 Mega Menu 邏輯：當主題頁首已經內建多層下拉、圖文並列的 Mega Menu，硬用 Elementor 重建會非常費工，且容易留下選單錯位或 JS 衝突，沿用主題設定更穩。
- 頁首含大量動態資料：例如即時庫存、會員等級、購物車金額這類由主題或外掛即時運算的資料，Theme Builder 要重新接變數才能顯示，成本高於直接用主題頁首。
- 只需要微調樣式：只想改顏色、字體、間距這類純視覺項目，用主題本身的自訂器或一小段 CSS 就能完成，動用 Theme Builder 反而是殺雞用牛刀。
- 主題封閉且與 Elementor 已知衝突：少數高度封閉的商業主題會在 header.php 做特殊處理，與 Theme Builder 的覆蓋機制打架，這種情況覆蓋後常出現間歇性問題，升級主題時又會復發。
用一個二維象限來輔助判斷會更清楚。橫軸是「主題頁首複雜度」（左低右高），縱軸是「你的客製需求程度」（下低上高）。落在左下象限（主題簡單、需求低）的站，用主題自訂器即可；右下象限（主題複雜、需求低）直接沿用主題頁首最省事；左上象限（主題簡單、需求高）是 Theme Builder 的最佳戰場，主題限制少、客製空間大；右上象限（主題複雜、需求也高）最棘手，要嘛評估換一個更適合 Elementor 的輕量主題，要嘛做好長期維護的心理準備。這個象限不是絕對答案，卻能幫你在動工前先做一次成本評估，避免做到一半才發現自己選了一條最累的路。
免費版 vs Pro：沒買 Pro 能不能做頁首頁尾
免費版做不了全站頁首頁尾，因為 Theme Builder 是 Pro 專屬功能；免費版只能在單一頁面用拖曳做內容區塊 [來源：Elementor〈Pricing〉 https://elementor.com/pricing/ 2026-06-29]。Pro 個人方案約 59 美元／年起，可在一個網站用全部功能，對只需要一個網站的站長，買最低方案就夠，差別主要在可使用的網站數量，可至 Elementor 官方定價頁（elementor.com/pricing）比對方案。
錢花在哪裡，要講清楚。Pro 解鎖的不只是 Theme Builder，還有 50 多個進階元件、300 多種進階版型、Popup Builder、Form、WooCommerce Builder [來源：Elementor〈Pricing〉 https://elementor.com/pricing/ 2026-06-29]。如果你的需求只是頁首頁尾，59 美元看似貴；但如果同時要做表單、彈窗、商品頁，這筆錢就攤得很薄。判斷標準是：你用得到幾個 Pro 功能，而不是「Pro 比較強所以買 Pro」。
| 項目 | 免費版 | Pro |
|---|---|---|
| Theme Builder（頁首／頁尾／單文／封存） | 無 | 有 |
| 進階元件 | 基本款 | 50+ 進階元件 |
| 進階版型庫 | 有限 | 300+ 版型 |
| Popup Builder | 無 | 有 |
| Form | 無 | 有 |
| WooCommerce Builder | 無 | 有 |
| 價格 | 免費 | 個人方案約 59 美元／年起 |
方案結構上，Pro 分個人用與公司用，功能幾乎相同，差別只在「可用網站數」。單站站長買最低方案即可，不用為了多站授權多花錢。建議的節奏是：先用免費版熟悉編輯器，確認需要全站頁首頁尾再升 Pro，避免一開始就過度投資。很多人衝動買了 Pro 結果只用免費版功能，那就浪費了。
如果你在比較不同編輯器，WordPress 頁面編輯器比較 有橫向對照，Bricks Builder 新世代編輯器 是另一個選項，Gutenberg 區塊編輯器外掛 則是原生效能路線。想擴充 Elementor 本身，擴充 Elementor 的必裝外掛 列了常用組合。
七個最常踩到的頁首頁尾設定問題
這七個問題涵蓋手機版選單消失、頁首 sticky 置頂、WooCommerce 購物車圖示、頁尾年份自動更新、兩個頁首疊影、版型套用後跑版、Theme Builder 改了前台沒更新。每一項都有明確的判斷路徑與解法，也直接對應到 響應式網頁設計 RWD 與 網站速度優化技巧 這類日常維運需求。排查索引異常時，搭配 Ahrefs SEO 工具教學 能快速定位被排除的頁面。
- 手機版頁首選單消失：檢查版型是否設了行動版獨立條件，或 Toggle 元件沒拉進 Header
- 頁首要置頂：用 Pro 的 Sticky／Motion Effects 設定，免費版需額外 CSS
- WooCommerce 頁首放購物車：Theme Builder 內放 Cart 元件，條件可設 Only Shop Pages
- 頁尾年份自動更新：用動態標籤 Current Date，免每年手改
- 前台改了沒更新：清快取外掛與瀏覽器快取，確認按的是右上完整存檔
- 版型套用後跑版：主題或外掛 CSS 覆蓋，暫停其他外掛逐一排查衝突
- 兩個頁首疊影：同位置兩個 Active Template，把其中一個設成 Inactive
手機版選單消失是最棘手的一個，因為桌機看起來一切正常，要拿手機開才會發現。原因通常是兩個：版型設了行動版獨立條件（所以桌機頁首在手機不顯示），或漢堡選單的 Toggle 元件根本沒拉進 Header 結構裡。排查時先開手機版預覽，確認 Toggle 元件存在，再檢查條件有沒有排除行動裝置。RWD 相關的觀念，Elementor 響應式電商網頁 與 AWD 與 RWD 響應式比較 講得更細。
手機版頁首之所以必須單獨驗收，是因為行動裝置早已不是次要入口。根據 Statista 的資料，2026 年第一季行動裝置（不含平板）占了全球網站流量的 52.27%，已超過一半 [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。換句話說，多數訪客第一眼看到的頁首，是手機版那個經過縮排、只留漢堡選單的版本，桌機頁首反而成了第二現場。手機版頁首做壞，等於直接放棄一半以上的第一印象。
WooCommerce 站的頁首要放購物車，做法是 Theme Builder 內放 Cart 元件，條件可設 Only Shop Pages，讓購物車只在購物流程相關頁面出現。這比每頁都掛購物車圖示更乾淨。延伸閱讀可看 WooCommerce 購物網站架設、WooCommerce 完整架站教學、WooCommerce 佈景主題推薦，以及 Astra 與 WooCommerce 購物網站。
跑版與前台沒更新這兩個問題，本質都是「改了但沒生效」。跑版多半是主題或外掛的 CSS 覆蓋，解法是暫停其他外掛逐一排查；前台沒更新則九成是快取，清快取外掛、清瀏覽器快取、確認存檔按對位置。快取管理可參考 WordPress 快取加速外掛、WP Rocket 快取設定，圖片相關看 WordPress 圖片優化指南 與 圖片壓縮工具實測，效能指標則對照 Core Web Vitals 效能指標。改完頁首也想確認搜尋引擎看到的是正確版本，可順手檢查 標準網址 canonical 設定 與 XML Sitemap，避免舊頁首被當成重複內容。
頁首的載入速度直接綁在 Core Web Vitals 上，而 Google 早在 2018 年 7 月就讓行動版網頁速度成為搜尋排名因素之一，2020 年 5 月更進一步宣布把 Core Web Vitals 整合進頁面體驗排名訊號 [來源：Google Search Central Blog〈Evaluating page experience〉 https://developers.google.com/search/blog/2020/05/evaluating-page-experience 2020-05-28]。頁首是每一頁最先載入的區塊，若塞了未壓縮的大圖、過多 Web 字體或連續動畫，會拖慢 Largest Contentful Paint 與 Interaction to Next Paint 兩個關鍵指標。設計頁首時把效能當成硬性條件：Logo 用向量格式、字體子集化、動畫只在進入視窗時觸發一次、避免頁首載入時就拉第三方追蹤碼。這些細節累積起來，就是速度與體驗的差距。
頁首頁尾上線前的檢查清單
做完頁首頁尾別急著收工，先過一份完整的檢查清單，能擋掉八成上線後才發現的問題。清單分成「顯示狀態」「內容正確性」「手機版」「效能」四類，每一項都附上檢查方法，逐項確認就能在正式發布前把風險降到最低。
顯示狀態
- 每個位置（Header、Footer）只有一個 Active 綠標版型，沒有疊影風險。
- 所有 Active 版型都設了 Display Conditions，沒有漏設的綠標。
- 備用 Inactive 版型保留至少一組，改版出問題時可快速切回。
- 用無痕視窗開啟前台，確認頁首頁尾在未登入狀態下正常顯示。
內容正確性
- Logo 連結指向首頁，CTA 按鈕連到正確的報名或購物頁。
- 主選單每一項都連得到對應頁面，沒有 404 或空白頁。
- 社群圖示連結都填對，點下去不會跳回首頁。
- 頁尾版權年份用動態標籤 Current Date，不會過期。
- 聯絡資訊（地址、電話、Email）與實際一致，客服管道可用。
手機版
- 手機版預覽下，漢堡選單的 Toggle 元件存在且可點開。
- Display Conditions 沒有意外排除行動裝置。
- 頁首高度在手機上不超過螢幕的四分之一，避免壓縮內容區。
- CTA 按鈕的點擊範圍夠大，單指能準確點中。
效能
- Logo 圖檔已壓縮或改用 SVG，檔案控制在合理大小以內。
- 頁首使用的字體已子集化，沒有載入整套字重。
- 動畫設定為僅播放一次或進入視窗觸發，不持續消耗資源。
- 用 PageSpeed Insights 或 Lighthouse 跑一次行動版報告，確認 Core Web Vitals 指標落在綠區。
把 Theme Builder 的邏輯延伸到整站
頁首頁尾只是 Theme Builder 的起點。學會之後，同樣的邏輯能套到單篇文章、文章列表、封存頁、搜尋結果頁。把全站的重複結構都用 Theme Builder 統一控管，改一處全站同步，這才是 Pro 真正的價值所在。這種把全站結構理清楚的思維，正好呼應 SEO 友善的網站架構 的核心精神，結構順了搜尋引擎才爬得動。延伸到首頁主視覺，可參考 Elementor 首頁滿版輪播設計 與 Elementor 圖片輪播效果；一頁式內容看 Elementor 一頁式銷售頁製作。
設計層面，頁首頁尾牽涉到版面、配色、字體、CTA 這幾個維度。版面思考看 網頁版面設計攻略 與 網頁排版設計範例，必備元素看 網頁設計必備關鍵元素。CTA 設計看 CTA 行動呼籲按鈕設計，字體看 排版與字體設計技巧 與 中文字體挑選推薦，配色看 網頁配色工具推薦 與 網站色彩計畫配色。如果想讓設計流程更快，搭配 Claude Design 設計工具 先把版面草圖打掉再丟進 Elementor，會省下不少試錯時間。
講了這麼多，回顧一下最關鍵的一點：Elementor Theme Builder 讓頁首頁尾變成「選版型、設條件、存檔」三步驟，但真正讓網站開天窗的不是版型醜，是 Display Conditions 設錯或同位置放了兩個 Active 版型。把綠標灰標的邏輯摸熟、把條件管理當成日常維護的一部分，半夜就不必再為了空白頁首或疊影爬起來救站。結構清楚不只方便維護，也讓爬蟲與 AI 助理的 Agentic Browsing 更容易讀懂你的網站。搭配 WordPress 頁面編輯操作、WordPress 文章與頁面差異、WordPress 外掛安裝方法 這些基礎觀念，整站結構會更穩。
如果你的目標是做品牌官網，頁首頁尾的設計會直接影響第一印象。品牌官網設計全攻略、品牌官網架設指南、品牌網站設計建議 能把頁首頁尾放進更大的品牌脈絡裡思考，而不只是把它們當技術設定做完就結束。站做好之後想確認搜尋引擎有沒有正確收錄，可以從 Google Search Console 基礎介紹 著手觀察索引狀態。
FAQ 快速解答
Q1：Elementor 免費版能不能做頁首頁尾？
不行。Theme Builder 是 Pro 專屬，免費版只能編單一頁面內容，無法控制全站頁首頁尾。需要全站頁首頁尾就得升 Pro，個人方案約 59 美元／年起。
Q2：為什麼做好頁首後前台看不到？
九成是 Display Conditions 沒設。檢查該版型左上角是不是灰色標記（Inactive），進 Template 設 Include → Entire Site 並存檔，變綠標就會出現。若懷疑是收錄問題，可先用 Google Search Console 安裝設定 確認頁面有沒有被正確索引。
Q3：為什麼前台出現兩個頁首？
同一個位置有兩個 Template 都設成 Entire Site。把其中一個取消 Display Conditions 變灰標，只保留一個 Active 版型即可。
Q4：Elementor Theme Builder 支援哪些主題？
符合 WordPress 開發規範、支援 theme location 的主題都能用，主題商通常會標註「支援 Elementor」。實測最順的是 Astra，GeneratePress、Kadence、Blocksy 也配合良好。確認主題相容後，若想擴大搜尋引擎收錄範圍，可一併參考 Bing Webmaster Tools 安裝設定。
Q5：頁首要怎麼換成新版型？
兩種做法：把舊版型設成 Inactive、新版型設成 Active（並存，可隨時切回）；或在原 Template 直接插入新範本覆蓋。建議用並存法，較安全。
Q6：不用的版型怎麼刪除？
Theme Builder 列表點該 Template 右側三點選單 → Trash 永久移除。刪除前務必確認它是 Inactive 灰標，刪掉 Active 版型會讓該位置消失。
Q7：頁首能在手機版獨立設計嗎？
可以。Elementor 編輯器有行動版獨立預覽，可針對手機調整元件顯示與位置；也能用 Display Conditions 設行動版獨立條件。手機選單消失通常是 Toggle 元件沒拉進 Header 或條件排除行動裝置。
Q8：頁首要怎麼置頂（sticky）？置頂會不會拖慢網站？
用 Elementor Pro 的 Sticky 與 Motion Effects 設定，在進階標籤裡把頁首設為置頂即可，免費版則要靠額外 CSS。置頂本身對效能影響有限，會拖慢網站的通常是頁首裡的大圖、整套字體或連續動畫。把 Logo 改成向量格式、字體子集化、動畫設成只播一次，置頂頁首就能兼顧體驗與速度。
Q9：什麼時候該做分區頁首（不同分類用不同頁首）？
當網站同時經營性質差很大的內容，例如購物區與部落格區導航需求完全不同時，就值得用 Display Conditions 做分區頁首。做法是為每個分類各建一個 Header Template，用 Include 設定只出現在對應分類，並用 Exclude 避免重複。前提是條件邏輯要想清楚，否則容易掉進重複或消失的陷阱。內容單一、導航需求一致的網站，則不必做分區，單一頁首反而更好維護。