Elementor Pro 頁首頁尾設計：打造高質感導航教學

想像一下：你花了三個禮拜把首頁的 Hero 區做得驚為天人，結果客戶打開手機一看，第一眼映入眼簾的，卻是一個 Logo 被擠到變形、主選單直接跑到畫面之外的頁首。訪客根本還沒滑到你那塊精心設計的 Hero，就已經按下了返回鍵。

頁首與頁尾，就是這麼現實的東西。它們是網站的門面與地基：門面決定訪客願不願意往下走，地基決定 Google 看不看得懂你的網站結構。而 Elementor Pro 的 Theme Builder，正是目前 WordPress 生態裡，讓你不用寫一行程式碼，就能把這兩塊「全域範本」做到高質感的最快途徑。

先講結論：這篇要回答的核心問題是「如何用 Elementor Pro 設計出高質感、跨裝置、不踩雷的頁首與頁尾」。三句話講完：第一，頁首頁尾在 Theme Builder 裡是「範本（Template）＋顯示條件（Conditions）」的組合，不是單一頁面，要先建立這個心智模型。第二，頁首的視覺骨架就三個區塊：Logo、主選單、行動按鈕，用 Flexbox 容器排版，再依手機斷點收合。第三，上線前一定要檢查「同時 Active 的範本有沒有重複觸發條件」，這是 Theme Builder 最常見也最致命的雷。

頁首頁尾為什麼是門面與地基：先想清楚再開 Elementor

很多人一裝好 Elementor Pro 就直奔 Theme Builder 開始拉頁首，這直覺沒錯，但順序其實可以更好。在你動手之前，先弄清楚兩件事：這兩塊區域到底背負了什麼任務，以及現在的訪客是怎麼看網站的。

頁首的任務，換句話說，只有三個：告訴訪客「這是哪個品牌」、「這個網站能給我什麼」、「我下一步該點哪裡」。頁尾的任務剛好相反，它是收尾與信任：版權聲明、聯絡資訊、社群連結、第二層導覽、隱私權政策。一個負責引導前進，一個負責安撫與兜底，兩者合起來就是一個網站的「導覽骨架」。

從使用者行為的角度看，頁首是訪客在每一頁都會「重新遇見一次」的元素。眼睛一進到畫面，會先用零點幾秒掃過頂端，確認自己在哪、能去哪，再決定要不要往下看內容。這代表頁首承擔的是一種「重複曝光下的瞬間判讀」任務：它要夠一致、夠清楚、夠好認，不能每一頁長得不一樣，也不能塞滿訪客每次都會跳過的雜訊。頁尾的處境剛好相反，它是訪客「已經讀完內容、準備離開或往下一步」時才會抵達的區域，所以它的任務是給出口、給信任、給二次行動，別再塞一次主選單。把這層心理差異想透，你就不會把頁首頁尾當成兩塊隨便填空的版面，而會把它們當成兩個各有任務的轉換節點。

而這個骨架現在的處境，跟五年前完全不同。手機流量早已是全球網站的大宗，根據 Statista 的追蹤，全球行動裝置網頁流量占比在 2015 到 2026 之間長期維持在五成以上，2026 年第一季的數字也維持在這個區間。Google 也早在 2023 年正式宣告，Mobile-first indexing 已經全面到位，也就是 Google 主要使用手機版內容進行檢索與建立索引，而不是把桌面版視為主要版本（見 Google Search Central 部落格的 〈Mobile-first indexing is here〉公告）。

換句話說，手機頁首要是亂掉，真人使用與 Google 建立索引時看到的內容都可能不完整。也因此，我會說，頁首頁尾的設計順序應該是「先畫手機骨架，再往桌面放大」，而不是傳統那種「先做漂亮的桌面版，再想辦法擠進手機」。這個觀念上的反轉，會決定成品是「勉強能用」的頁首，還是「每個斷點都好看」的高質感頁首。

Theme Builder 是 Elementor Pro 的付費功能，可建立全站頁首、頁尾與其他主題範本；免費版主要用於編輯單頁內容（依 2026 年 6 月的 Elementor 官方定價頁）。WordPress 在全球 CMS 市場占有率超過四成（依 W3Techs 2026 年 6 月的統計）；是否採用 Elementor Pro，仍應比較網站需求、授權成本、效能與長期維護方式。

Theme Builder 的心智模型：把頁首頁尾當成「全域範本」

Theme Builder 學不會的人，十個有九個卡在同一個地方：他們把頁首當成「一個頁面」在編輯。這個觀念一旦錯了，後面條件、顯示、覆蓋全部會跟著錯。我先幫你把心智模型建起來，後面的實作會輕鬆一半。

Theme Builder 的核心觀念是三個字：Template（範本）、Condition（顯示條件）、Active（啟用狀態）。一個頁首範本，本質上是一份「設計藍圖」，它本身不屬於任何一頁；你要透過「顯示條件」告訴 Elementor「這份藍圖要套用到哪些頁面」，條件成立時，藍圖才會被啟用、出現在前台（運作方式見 Elementor 的 Theme Builder 介紹頁）。

這個模型跟單頁編輯最大的差別，在於「一份範本可以覆蓋無數個頁面」。你改一個字、換一張 Logo，全站幾十頁、幾百頁同時更新。這是 Theme Builder 的威力，也是它的危險：威力來自集中管理，危險來自條件設錯會全站炸掉。所以請把這個三角關係記牢，後面 troubleshoot 全靠它。

這個三角還藏著一個新手常錯過的第四個觀念：範本之間的優先順序。當兩份 Header 範本的條件同時成立時，舉例來說，一份是 Entire Site、另一份是 Product Detail，而訪客正好打開一個商品頁，Elementor 不會隨機挑一份顯示，而是依照條件的「具體程度」決定覆蓋順序，越窄、越具體的條件優先級越高。這個邏輯跟你寫 CSS 的 specificity 幾乎一模一樣，懂 CSS 的人會秒懂，不懂也沒關係，只要記得「規則越細越贏」這六個字就夠用了。

• Template（範本）：你設計出來的那份頁首或頁尾藍圖，存在 Elementor 的 Templates 庫裡。
• Condition（顯示條件）：一份範本能套用到哪裡的規則，例如 Entire Site（整個網站）、Singular（單篇文章）、WooCommerce Product Detail（商品詳情頁）。
• Active（啟用狀態）：當條件被觸發時，這份範本會進入「Active」狀態，前台才看得到。同一個位置可以有多份範本同時 Active，這正是地雷所在。

把這三個觀念弄通之後，你就會明白為什麼 Theme Builder 的新手常常遇到「我明明改了，前台卻沒變」或「頁首重複出現兩層」這類怪事。這類問題常出在條件與啟用狀態的邏輯，而不是版面設計。後面會用一個常見情境詳細講。

頁首的解剖學：Logo、主選單、行動按鈕的視覺骨架

心智模型搞懂了，接下來進入設計。頁首不管做得多花俏，視覺骨架就三個區塊：Logo（品牌識別）、主選單（導覽）、行動按鈕（CTA）。這三個區塊怎麼排列，決定了頁首的版型性格。我用一張表把最常見的幾種版型拆給你看，你挑一個最符合品牌調性的當起點就好，不用從零發明。

版型	排列邏輯	適合情境	潛在陷阱
經典三段式	Logo 左 / 選單中 / CTA 右	企業形象、服務型網站	選單項目一多，中段容易擠
左 Logo 右選單	Logo 左 / 選單與 CTA 全靠右	內容站、部落格、媒體	CTA 不夠突出，容易被選單淹沒
置中 Logo	Logo 置中 / 選單分兩側對稱	精品、設計師品牌、餐飲	手機版通常需要重新安排導覽與 CTA
雙層頁首	上層次選單（語言/帳號）/下層主選單	電商、跨國、會員站	高度吃掉首屏，壓迫感重
滿版透明疊加	頁首疊在 Hero 圖上、字白色	攝影、建築、時尚	滾動後沒轉實心色，字會糊在內文上

挑版型有個小訣竅：品牌越理性、資訊量越大，越往三段式靠；品牌越感性、視覺導向，越可以玩置中或透明疊加。但不管選哪一種，都請把「CTA 按鈕」當成頁首裡優先順序最高的元素，因為它是整個頁首唯一承擔轉換任務的東西。如果你對 CTA 的設計邏輯還不熟，可以先看我們寫的CTA 行動呼籲按鈕設計指南，把「按鈕為什麼要這樣配色、這樣寫字」的底層邏輯先打穩，回來排頁首會很有感。

再往細裡看一層，頁首的「視覺重量」要輕。它是導覽工具，不是資訊佈告欄。太多網站把電話、地址、社群、語言切換、購物車、搜尋、CTA 全塞進頁首，結果每一項都變得不顯眼。一個好的頁首，核心元素不該超過五個，次要資訊請往下沉到手機版的漢堡選單展開區，或乾脆放到頁尾。這個取捨邏輯，跟一般網頁版面設計的層次觀念是一致的：越上層越要留白、越要精煉。

和留白同樣重要的，是頁首的垂直節奏（vertical rhythm）。頁首的高度、內距、Logo 與選單之間的間距，最好都遵循同一個固定的節奏單位，例如以 8px 為基數倍增，像是 8、16、24、32 這組數字。這個習慣看起來龜毛，卻會讓整個頁首的視覺穩定度大幅提升，訪客說不出哪裡好看、就是直覺「這個網站很專業」。Elementor 的 Container 可以直接用這套數值去設定 padding 與 gap，我會建議你把它定義成這個專案的設計規範，之後頁尾、Hero、卡片全部沿用同一組數字，整站的設計一致性就會自然浮現。色彩計畫也是同樣的道理，先把你這組頁首的主色、輔色、文字色定下來，跟我們在網頁配色實戰指南裡講的四步驟流程對齊，才不會做到一半才發現顏色越用越亂。

從零拉出一個頁首範本：Flexbox 容器、斷點與黏性定位的實戰順序

這一段我給你一個我實際使用的「決策順序」。注意，這份順序著重的是每一個岔路口你該怎麼判斷，並非要你照表操課，因為不同網站會在不同地方需要不同的選擇。

第一步：開 Theme Builder 新增 Header 範本

在 WordPress 後台進入 Elementor 的 Templates → Theme Builder，選 Header 新增。系統會問你要不要匯入預設區塊，我的建議是第一次做就選空白，自己拉。因為預設區塊是舊版 Section/Column 架構的產物，而你現在應該用的是新一代的 Container（Flexbox 容器）架構，兩者混用會越做越亂。如果你想看完整的 Elementor 基礎觀念，可以回頭翻Elementor 完整教學；如果你想理解為什麼 Theme Builder 是 Pro 才有，以及 Pro 還包含哪些模組，Elementor Pro 完整功能指南有詳細的拆解。

第二步：用一個 Container 把三段裝進去

新增一個 Container，方向設 Horizontal（水平），對齊設 Space Between（兩端對齊）。這個動作的意義是：你告訴 Elementor「Logo 在最左、CTA 在最右、中間的空間留給主選單」。然後在這個 Container 裡依序放三個子 Container 或 Widget：Image（Logo）、Nav Menu（主選單）、Button（CTA）。Space Between 會自動把三者撐開到畫面兩端，這就是 Flexbox 排版的精髓。

選單的來源是 WordPress 原生的選單（Menu）系統，Elementor 的 Nav Menu Widget 只是把它「視覺化呈現」，所以你要先在後台「外觀 → 選單」把選單項目建好，再回到 Elementor 指定要顯示哪一組選單。這個順序搞反的人很多，會以為 Widget 壞掉，其實是沒有選單可選。

Logo 這個 Widget 有一個新手常踩的小坑，順便提醒你。若來源可信且站點已做好 SVG 安全處理，可優先使用 SVG；照片或複雜點陣圖則用適當尺寸的 WebP、PNG 或 JPG。SVG 是向量格式，縮放時邊緣清晰，但檔案不一定比所有 PNG 小。WordPress 預設不允許直接上傳 SVG；若要開放，應使用能清理 SVG 的安全機制，不能只放寬副檔名。同一個 Widget 裡，記得再給 Logo 一個明確的 max-height（例如桌面 60px、手機 40px），避免原始圖尺寸把頁首撐高，這也是維持 Sticky 頁首高度一致的前置動作。

第三步：設斷點，把手機版收合成漢堡

Elementor 的 Responsive Mode 有三個主要斷點：Desktop、Tablet、Mobile。你在 Desktop 排好三段式之後，切到 Mobile，會發現 Logo、選單、按鈕全擠在一起。這時的標準動作是：把 Nav Menu 設成「在手機與平板隱藏」，再放一個 Toggle（漢堡按鈕）Widget，點擊後展開選單。

這裡有個關鍵判斷：平板要不要也收合？我的原則是，平板直式（768px 以下）一律收合成漢堡，橫式（1024px 以上）才考慮展開。原因很簡單，平板直式的寬度跟大手機差不多，硬展開選單只會擠成一團。這個判斷邏輯跟響應式設計的核心觀念完全一致，如果你想把整體 RWD 的觀念補強，響應式網頁設計 RWD 這篇有完整的脈絡說明。

第四步：決定要不要黏性（Sticky）

Sticky Header（頁首黏在頂端不動）是近年很流行的設計，好處是訪客隨時都能點到選單，缺點是它會吃掉固定的視窗高度。我的判斷標準是：內容導向的網站（部落格、媒體）適合 Sticky，因為讀者會一直往下滑；首頁型、視覺導向的網站（攝影、精品）則要慎重，因為 Sticky 會壓縮 Hero 的視覺衝擊。如果你決定用 Sticky，請務必做一件第三步沒講到的事：在滾動後把頁首背景從透明切換成實心色，不然字會糊在內容上，這是透明疊加版型最容易翻車的地方。

第五步：到 Conditions 指定 Entire Site

設計做完了，記得在左下角設定顯示條件，把這份範本指給 Entire Site。按下 Save 後，Elementor 會提示這份範本進入 Active 狀態，這時前台才看得到。很多新手做到第四步就以為結束了，結果前台一片空白，就是少了這個「指定條件」的動作。也因此，我前面花一整段講心智模型：條件才是讓範本「活過來」的開關。

手機頁首是另一個戰場：漢堡選單、安全區與拇指區

前面說過，Google 主要使用手機版內容建立索引。所以手機頁首不是「桌面頁首的縮小版」，它是一個獨立的設計課題。這段我把三個最容易在手機頁首翻車的點拆開講。

第一個是漢堡選單的展開行為。預設的 Elementor Toggle 點下去，選單會從頁首下方往下推開，這個行為在內容短的頁面沒問題，但在長頁面會造成訪客失去方向感。比較好的做法是讓展開的選單「全螢幕覆蓋」，也就是鋪一層半透明底色、選單置中放大，這樣訪客的注意力會被強制集中在導覽上。這個全螢幕覆蓋的技巧，跟我們在Elementor 彈跳視窗教學裡講的 Popup 全螢幕邏輯是相通的，技術上甚至可以直接用 Popup 來做手機選單，彈性更大。

第二個是iPhone 劉海與安全區（Safe Area）。如果網站以全螢幕模式顯示，頁首可能與狀態列或感測器區域重疊。這時可依實際 viewport 設定，用 CSS 的 env(safe-area-inset-top) 預留空間。Elementor Pro 的 Container 可以在進階設定裡自訂 CSS，把這段補上；完成後仍要用實機檢查。

第三個是拇指觸控區（Thumb Zone）。手機大量操作是用拇指完成，而拇指最舒服的觸控範圍通常靠近螢幕下緣，不是頂端。這也是為什麼很多大型電商會做「底部導覽列」。但對一般形象網站來說，頁首放頂端還是主流，所以你要確保的是：頁首上的 CTA 按鈕要有足夠大的觸控區與間距。44×44 px 可當作容易操作的實務起點，但仍要依裝置與版面實測。

這三個點，桌面版根本不會遇到，但一到手機就決生死。你在設計頁首時，請把手機版當成一份獨立的設計稿來看待，別把它當桌面的附屬品。

無障礙是隱形的質感分：鍵盤導覽、focus 狀態與 aria 標記

一個頁首視覺上再漂亮，如果只能用滑鼠點、鍵盤按 Tab 完全跳不到選單，對某些訪客來說它就是壞的。無障礙（Accessibility，常縮寫為 a11y）本質上是讓更多人能完成操作的基本品質，不應包裝成獨立的 Google 排名加分。實務上要檢查鍵盤操作、焦點可見性、語意標記與對比，而不是只看視覺效果。

頁首頁尾要過無障礙這一關，有四個點一定要顧。第一，鍵盤導覽。把滑鼠拿掉，只用 Tab 鍵走一遍你的頁首，Logo、每個選單項目、CTA、購物車圖示都要能被 Tab 依序聚焦，而且聚焦時要有清楚的可見樣式（focus ring）。Elementor 預設會把 focus 樣式弱化，這是它最被詬病的無障礙缺陷之一，你要在 Container 或 Widget 的進階設定裡，把 focus 樣式手動加回來，例如給一個 2px 的藍色外框，讓鍵盤使用者隨時看得到自己現在停在哪。

第二，圖示按鈕要掛 aria-label。漢堡選單、搜尋放大鏡、購物車這類只用圖示、沒有文字的按鈕，對螢幕閱讀器來說是「無名按鈕」，視障訪客完全聽不懂。正確做法是給每個圖示按鈕一個語意標籤，例如搜尋按鈕標「搜尋」、漢堡按鈕標「開啟主選單」、購物車標「購物車，目前 N 件商品」。Elementor 的按鈕 Widget 在進階設定裡可以手動補上這些屬性，花你三分鐘，卻讓網站質感整個拉開。

第三，跳到主內容（Skip to content）連結。這是一個藏在頁首最前面、平常看不見、按 Tab 時才浮出來的錨點連結，讓鍵盤使用者可以一鍵跳過冗長的頁首、直接進入正文。這是 WCAG 2.1 的 A 級要求，做了它等於跟所有重視無障礙的評測器證明「這個網站是認真的」，沒做則會在 Lighthouse 等稽核工具裡被直接標紅。

第四，色彩對比與動態尊重。頁首文字與背景的對比度，淺色背景建議至少 4.5:1，這是 WCAG AA 標準；透明疊加版型滾動轉實心後，要重新檢查對比，因為底色變了、原本合規的字色可能突然不夠清楚。動態這邊也要顧，如果你用了 Sticky 的滑入動畫或漢堡展開動畫，請透過 CSS 媒體查詢 @media (prefers-reduced-motion: reduce) 把動態降為瞬切，尊重對動態敏感的使用者。這幾個動作單獨看都不花俏，疊起來卻是把頁首從「好看」推升到「可用且體面」的關鍵。

頁尾不是收納箱：用它補足信任資訊與內部連結

絕大多數人對頁尾的理解是「把不知道放哪的東西全塞進去」。這個觀念要反過來。頁尾其實有兩個高價值的任務：補足網站信任資訊，以及提供清楚的第二層導覽。做錯了，它就只是一塊視覺垃圾。

第一個任務是補足訪客需要的信任資訊。頁尾很適合放公司全名、統一編號、聯絡地址、電話、客服信箱、隱私權政策與服務條款。這些資訊不等於直接的排名加分，但能讓訪客確認營運主體，也能降低聯絡或交易前的不確定感（頁面體驗訊號的定位，見 Google Search Central 2020 年 5 月的 〈Evaluating page experience〉 一文）。

第二個任務是內部連結的第二層導覽。頁尾是放「分類導覽」與「重要頁面二次曝光」的絕佳位置。想像一個訪客讀完一篇文章，往下滾到頁尾，這時你如果能給他「服務項目、熱門分類、關於我們、聯絡我們」這幾個出口，他就有機會繼續留在站內、繼續往下探索，降低直接跳出的機率。這個觀念跟我們在內部連結與網站架構優化裡講的「分散權重、引導爬蟲」是同一件事，頁尾等於是這套體系的安全網。

實作上，頁尾我通常切成三到四個欄位：

• 品牌欄：Logo 縮圖 + 一句品牌承諾 + 社群圖示連結。
• 導覽欄：主要分類的二次連結，每欄不超過六個項目。
• 聯絡欄：地址、電話、信箱、營業時間，搭配嵌入式地圖更好。
• 法務欄（最底）：版權聲明、隱私權政策、服務條款連結。

這裡有個小技巧：版權年份用動態標籤。Elementor Pro 的動態標籤功能可以讓你插入「當前年份」，這樣每年一月就不用手動改年份。這個功能很多人不知道，但它就是頁尾保持「網站還活著」訊號的免費保險。一個寫著「© 2018」的頁尾，會讓訪客直覺認為這站已經荒廢。實作時，選一個 Text Widget，在編輯器點動態標籤圖示，選 Current Date 的 Year 格式，前後再手動補上「© 」與「 你的品牌名 All Rights Reserved.」，一段永不過期的版權宣告就完成了。

條件才是 Theme Builder 的靈魂：一個網站為什麼需要好幾組頁首

走到這裡，你已經會做一個頁首、一個頁尾了。但 Theme Builder 真正的威力，是在「同一個網站、不同情境、顯示不同的頁首」。這個觀念懂了，你做的就不再是一個「部落格等級」的網站，而是一個「企業級」的導覽系統。

什麼叫不同情境？舉幾個實際例子。一個有會員系統的網站，未登入時頁首顯示「登入／註冊」按鈕，登入後改成「會員中心／登出」。一個有部落格的企業網站，首頁頁首放主選單與「立即諮詢」CTA，但進到文章頁時，頁首改成「回到首頁」與「訂閱電子報」。一個 WooCommerce 購物車，商品頁的頁首要顯示購物車圖示與數量徽章，但一般文章頁不需要；條件設定可參考 Elementor 的 Theme Builder Conditions 文件。

這些「情境式頁首」都是靠條件做出來的。Elementor 的條件系統有兩個層次：Include（包含）與 Exclude（排除）。你可以設「包含整個網站，但排除結帳頁」，也可以設「只包含商品詳情頁」。多份範本之間的優先順序，由條件的「具體程度」決定，越具體的條件優先級越高，例如「WooCommerce Product Detail」會蓋過「Entire Site」。

我用一個常見的組合情境，把條件的優先級邏輯示範一次。假設你同時經營一個企業形象首頁、一個部落格、一個 WooCommerce 商店，你需要的不會只是一組頁首。我會開出來的範本組合大概長這樣，你可以拿來當成自己網站的規劃起點。

範本	顯示條件 Include	排除條件 Exclude	差異重點
預設頁首	Entire Site	結帳頁、商品詳情頁	Logo、主選單、聯絡 CTA，作為多數頁面的預設頁首
商品頁頁首	WooCommerce Product Detail	無	加上購物車圖示與數量徽章，強調結帳路徑
結帳頁頁首	Checkout Page	無	精簡到只剩 Logo，移除所有會分心的選單與外部連結
文章頁頁首	Singular → Post	無	把 CTA 從「立即諮詢」換成「訂閱電子報」

這張表想傳達的觀念只有一個：規劃多組頁首時，要明確定義各範本的 Include 與 Exclude 條件，避免同一位置出現互相衝突的規則。Elementor 會依顯示條件判斷套用哪一份範本，但不要只靠「條件越具體就一定覆蓋」的口訣；發布前仍要逐頁確認實際結果。

前台出現兩層頁首時，不要先假設是兩份 Elementor 範本同時輸出。更常見的情況是主題原生頁首與 Elementor 頁首同時存在，或頁面版面配置、顯示條件與快取結果不一致。

典型情境是新版 Elementor 頁首已套用 Entire Site，但主題的原生 Header 仍在輸出，前台因此看見兩層導覽。這時要分別確認兩個輸出來源，而不是只在 Theme Builder 裡反覆停用範本。

正確的除錯順序是：先確認 Elementor 範本的發布狀態與 Display Conditions，再檢查頁面是否使用 Elementor Canvas（會隱藏主題頁首頁尾）、主題原生 Header 是否仍啟用，最後重新產生 Elementor CSS 與清除頁面快取。Draft 範本不應因為保留舊條件就正常出現在前台；若仍看到舊版面，應從快取、主題輸出與實際套用條件逐項排查。

這裡要特別區分「範本條件」與「快取結果」。範本改成 Draft 後不該繼續被正常套用；若畫面仍是舊版，先用未登入視窗確認，再清除頁面快取、CDN 與 Elementor 產生的 CSS，避免把舊快取誤判成條件仍在生效。

若發布狀態、條件與快取都正確，接著檢查主題設定、頁面版面與是否有其他全域導覽元件。把每個可能輸出 Header 的來源逐一關閉測試，比直接堆 CSS 隱藏更容易找到根因。

上線前必跑的 9 項頁首頁尾健檢清單

頁首頁尾是全域範本，一旦出錯就是全站出錯，所以上線前的健檢不能省。我把它整理成 9 個檢查點，是每次交站前都該走一遍的清單，建議照著走。

1. 顯示條件檢查：到 Theme Builder 核對 Header 與 Footer 的發布狀態與 Display Conditions，並確認主題原生頁首頁尾或 Elementor Canvas 版面沒有造成覆蓋或隱藏。
2. 斷點逐一手測：用手機、平板直式、平板橫式、桌機四個尺寸，親自點過每一個選單項目與 CTA，確認沒有被裁切或重疊。
3. CTA 觸控目標：手機上所有可點擊元素都要有足夠大的觸控區與間距；44×44 px 可作為容易操作的實務起點，再用實機確認。
4. Logo 連回首頁：點 Logo 是否能正確回首頁，這是訪客的肌肉記憶，壞了會讓人覺得網站不專業。
5. 外部連結開新分頁：頁尾的社群、合作夥伴連結，是否都設成 target="_blank"，避免把訪客帶離你的站。
6. 版權與法務連結：隱私權政策、服務條款頁面是否存在且可開啟，這是法規與信任的雙重需求。
7. 語言標記：頁首頁尾的文字是否都是繁體中文，沒有混入簡體或未翻譯的英文佔位字。
8. 載入效能：頁首頁尾的背景圖、Logo 圖檔是否壓縮過，是否啟用延遲載入（Logo 除外，Logo 不能 lazy load）。
9. 結構化資料：若網站有輸出 Organization 或 WebSite 結構化資料，確認名稱、網址與 Logo 等內容和頁面可見資訊一致。這能提供明確的網站實體資訊，但不保證特定搜尋版型。

這份清單看起來瑣碎，但它就是「業餘網站」跟「專業網站」的分水嶺。九項全過，你的頁首頁尾才算真正上線。如果你想把這套檢查觀念擴大到整個網站的必備元素，想深入可以讀網頁設計必備的 8 個關鍵元素，把整體的品質標準拉齊。

效能與 SEO：頁首頁尾別拖垮你的 Core Web Vitals

設計與條件都講完了，接著把鏡頭拉到效能與 SEO。頁首頁尾因為是全域載入，等於每一頁都會載入一次，所以它對網站速度的影響是「乘上全站頁數」的。一個小問題放在單頁沒事，放在頁首就會放大幾百倍。

第一個要盯的是Sticky Header 的 CLS（Cumulative Layout Shift）。頁首一旦做黏性，它在滾動時如果發生高度的瞬間變化（例如透明轉實心時加了 padding），就會產生版面位移，直接吃掉你的 Core Web Vitals 分數（見 Google Search Central 2020 年 5 月的 頁面體驗評估說明）。解法是： Sticky 與非 Sticky 兩種狀態的高度要一致，視覺變化只靠背景色或陰影，不要動高度。Core Web Vitals 的完整優化邏輯，我們在Core Web Vitals 攻略裡有更深入的拆解。

第二個是字體載入。頁首因為在第一屏，它用的字體（尤其是 Icon 字體，像 Font Awesome 或 Elementor 內建 Icons）會被視為關鍵資源。如果你的頁首用了五六種圖示字體，每種都要發一次請求，LCP（Largest Contentful Paint）就可能被拖慢。建議是：頁首用的圖示盡量統一一套，SVG 優先於圖示字體，能用內聯 SVG 就不要外掛字體庫。中文字體更要小心，完整的中文 Web Font 可能很大；可優先使用系統字型堆疊，若使用 Noto Sans TC 等 Web Font，則設定 font-display: swap 並依實際字集切分，避免整包載入。

第三個是快取與資產最佳化。頁首頁尾的 CSS 與 JS 應該妥善快取；壓縮、延後或條件載入則要依實測逐項開啟，不必把所有檔案一律合併。若頁首樣式被延後到首屏之後，第一幀可能出現「沒樣式的頁首閃一下再變正常」的 FOUC（Flash of Unstyled Content），這時應調整關鍵 CSS 或排除規則。完整流程可參考網站速度優化指南。

第四個是圖檔最佳化。頁尾如果有嵌入地圖縮圖、社群圖示、合作Logo 牆，這些圖檔請務必壓縮。頁尾圖雖然不在第一屏，但會被算進整體頁面重量，過大的圖會拖累行動裝置的整體載入體驗。圖片壓縮的工具選擇與觀念，我們在圖片壓縮工具實測與WordPress 圖片優化兩篇裡都有完整整理。

把這四件事顧好，你的頁首頁尾就不會成為網站速度的拖油瓶，反而會是穩定提供導覽與信任訊號的資產。

六步上線行動方案

講完觀念，接著給你一個可以今天就動手的行動方案。這六步整理自常見交站流程，照著走能減少來回試錯。

1. 盤點品牌資產：把 Logo（橫版＋簡版）、品牌色、主選單項目、CTA 文字、聯絡資訊、社群連結全部列成清單。沒有這份清單，設計做不下去。
2. 畫手機骨架草圖：拿紙筆或任何繪圖工具，先畫手機版的頁首與頁尾，再畫桌面版。順序不能反，因為手機是 Google 看的第一個版本。
3. 建立一份 Header 範本：用 Container + Flexbox 排三段式骨架，先求有再求好，視覺細節留到後面調。
4. 設定 Conditions 指到 Entire Site：按 Save，到前台確認 Active。這一步沒做，前面都白工。
5. 建立一份 Footer 範本：四欄式（品牌／導覽／聯絡／法務），版權年份用動態標籤。
6. 跑 9 項健檢清單：逐項目測、修正、再測。九項全過，才算真正上線。

頁首頁尾看起來只是兩塊區域，但一個網站的專業度，往往就取決於這兩塊做得紮不紮實。把心智模型弄對、把條件邏輯管好、把效能與無障礙顧到，你的 Elementor Pro 網站就會從「能用」升級成「值得信任」。現在，打開你的 Theme Builder，把這六步走完吧。