打開任何一個做得好的網站首頁，最先映入眼簾的那一大塊背景圖加標題、再配一顆按鈕的區域，就是 Hero 視覺。它佔據螢幕最值錢的位置，也是訪客判斷「要不要繼續看下去」的關鍵幾秒。許多人以為要做出滿版的 Hero 一定得裝頁面建構器或寫 CSS，其實 WordPress 內建的封面區塊（Cover Block）就能獨力完成，不必外掛、不必改主題程式碼。

封面區塊是少數能「把區塊疊在區塊上面」的核心區塊，背景可以放圖片、影片或純色，前景再擺標題、段落與按鈕。問題在於，多數教學只教你「按下全寬、拉滿高度」，卻沒講清楚滿版高度在手機上會出包的原因、焦點如何在不同螢幕保住主體、以及一張過大的背景圖會拖垮載入速度。這篇會把整套 Hero 從建立到優化講完，並把這些容易踩的坑一次補齊。

封面區塊是什麼，為什麼適合拿來做 Hero

封面區塊是一個容器型區塊，背景層放視覺、前景層放內容，兩層獨立調整。這個雙層結構正是 Hero 視覺的本質：一張會說話的背景，加上一句留得住人的主張。

它和一般圖片區塊最大的差別在於「可以裝其他區塊」。圖片區塊只能顯示一張圖，封面區塊則能在圖片上面再放標題、副標、按鈕，甚至多欄排版。背景媒體支援三種來源，分別是圖片、MP4 影片與純色（或漸層），同一個區塊就能做出圖片 Hero、影片 Hero 或純色 Hero。

封面區塊也內建了 Hero 幾乎一定會用到的功能：滿版對齊、最小高度、覆蓋層透明度、焦點選擇器、固定背景（視差）與雙色調濾鏡。這些都在區塊工具列與右側設定欄裡，不需要額外程式碼。對 WordPress 教學或 WooCommerce 商店首頁來說，這代表編輯者自己就能維護首屏，不必每次改文案都找工程師。

用封面區塊做出滿版 Hero 的完整步驟

先給結論，滿版 Hero 的最短路徑是：插入封面區塊、選背景、把對齊設成「全寬」、再把高度設成整個視窗高度，最後加覆蓋層讓文字看得清楚。以下逐步拆解。

第 1 步、在編輯器裡點加號插入區塊，搜尋「封面」或直接輸入 /cover 後按 Enter。插入後它會要你選背景，可以從媒體庫挑圖、上傳影片，或點色塊選純色。若想讓背景跟著文章的精選圖片走，可勾選「使用精選圖片」，之後換精選圖，Hero 背景就一起換，很適合套用到文章版型。

第 2 步、選取整個封面區塊（用清單檢視 List View 點外層那一格最準），在區塊工具列把對齊改成「全寬」。全寬會讓封面撐滿內容區的左右兩側，這是滿版視覺的前提；若主題本身內容區有寬度限制，也可以在主題版型裡選用沒有標題、透明頁首的全寬版型，讓 Hero 真正貼齊瀏覽器邊緣。

第 3 步、設定高度。工具列上有「切換全高」按鈕，按下去會把最小高度設成整個視窗高度，這是做滿版 Hero 最快的開關。若想精準控制，可到右側設定欄的「尺寸」區，自行輸入最小高度數值並切換單位。常見做法有兩種，一是直接給整個視窗高度，二是把封面設成視窗高度的八成、頁首設成兩成，兩者加起來剛好填滿首屏，頁首不會壓到 Hero。

第 4 步、加覆蓋層。背景圖再漂亮，文字壓上去若沒有對比就讀不到。到右側設定欄的「覆蓋層」選一個顏色（深色 Hero 通常選黑），把透明度調到讓底圖隱約可見、文字又清楚的程度。經驗值是圖片背景至少三成、影片背景四到六成，因為影片畫面一直在動，需要更厚的覆蓋層穩住可讀性。

第 5 步、放前景內容。在封面區塊裡按 Enter 加入標題、段落與按鈕。標題建議用 H2 而非 H1（文章頁的 H1 通常已由標題渲染，多一個 H1 會傷結構）。用工具列的「變更內容位置」九宮格，把文字放到置中或左中等位置，引導視線。

滿版高度在手機上出包的原因與解法

這是多數教學跳過、實務上最常被回報的問題：你在電腦上把 Hero 設成滿版很完美，到手機上卻發現底部被切掉，或捲動時 Hero 高度忽大忽小。根源有兩個。

第一個是單位設計上的歷史問題。封面區塊早期的「最小高度」預設單位曾是視窗寬度單位（vw）而非視窗高度單位（vh），導致直覺上設「滿高」卻拿寬度去算，在直式手機螢幕上比例完全跑掉。現在的版本已可在尺寸欄手動切換成 vh，設定全高時務必確認單位是視窗高度，而不是寬度。

第二個是手機瀏覽器的網址列行為。當你把高度設成整個視窗高度時，手機瀏覽器一開始把網址列算進可視範圍，捲動後網址列收起，可視高度突然變大，Hero 就會跳動或留白。比較穩的做法是不要死守「正好一個視窗高」，改用稍小於滿版的最小高度（例如視窗高度的八成到九成），保留一點緩衝；或在自訂 CSS 裡改用較新的動態視窗高度單位，讓瀏覽器自行吸收網址列的伸縮。封面區塊的進階設定可以填入額外的 CSS 類別，再到主題的附加 CSS 針對那個類別覆寫高度。

不論用哪種解法，原則一致：滿版 Hero 一定要在真實手機上預覽，不能只看編輯器或桌機。WordPress 官方教學課程也反覆強調，封面設計完成後務必檢查小螢幕顯示，這不是可有可無的步驟。

焦點選擇器怎麼用，背景主體才不會在手機上被切掉

焦點選擇器（Focal Point Picker）的作用是告訴 WordPress：當這張背景圖被裁切時，請優先保留我指定的那個點。它直接決定了同一張 Hero 圖在寬螢幕和窄螢幕上各保住什麼。

設定方式在右側設定欄的媒體設定區，畫面上會有一個可拖曳的圓點，把它移到圖片裡最重要的位置即可，也能直接輸入左、上的百分比數值精準定位。原理是封面區塊用 CSS 背景定位的方式把圖鋪滿容器，當容器比例和圖片比例不同（手機是直的、圖片是橫的），系統會以焦點為中心去裁切兩側或上下。

實務上的選圖與設焦點策略是這樣：挑背景圖時優先選主體偏一側、另一側留白的構圖，把留白處留給文字，主體設為焦點。這樣寬螢幕看得到完整畫面，窄螢幕裁掉的也是留白而非主角。若主體剛好在正中央，手機裁切會比較安全；但若主體靠邊又沒設焦點，手機上很可能只看到一片背景、主角消失。影片背景同樣有焦點選擇器，邏輯一致。

如果不希望圖片被裁切，封面區塊的「外觀比例」設定可以鎖定固定比例（例如傳統的三比二），讓圖片在手機上等比縮放、完整顯示而不裁切，代價是 Hero 不再是滿版高度。滿版視覺與完整構圖之間，要依設計目的取捨。

影片背景與視差效果怎麼設，又有哪些代價

封面區塊除了靜態圖，還能放 MP4 影片當背景，或用固定背景做出視差捲動。兩者都能讓 Hero 更有張力，但各有要付的成本，事先知道才不會做完才後悔。

影片背景：直接把 MP4 上傳到封面區塊即可，建議檔案壓到很小（官方範例以五 MB 以下為基準），長度控制在十到三十秒並做成無接縫循環。覆蓋層透明度要拉到四到六成，動態畫面才壓得住文字。最大的坑在行動裝置：許多手機為了省流量會擋掉自動播放，所以一定要設一張海報圖（poster）當退路，而且這張退路圖本身就要夠好看，因為很多訪客看到的其實是它而不是影片。影片也比圖片重得多，對載入速度和流量都是負擔，內容站或 WooCommerce 商店要評估值不值得。

視差效果：在右側設定欄勾選「固定背景」，背景就會在前景內容捲動時保持不動，產生視差。WordPress 官方課程示範過一個進階玩法：放兩個固定背景的封面區塊、各放一張圖，再把它們框進一個群組區塊，把群組的區塊間距設為零，就能讓兩段視差無縫銜接。要注意固定背景在部分行動瀏覽器支援不佳，可能失效或卡頓，同樣要實機測試。

雙色調濾鏡：工具列的雙色調（Duotone）可以把背景圖換成兩色調風格，一色套陰影、一色套亮部，適合統一品牌色系。它純屬視覺風格，不影響結構，但和固定背景同時使用時，過去曾出現過渲染衝突，新版已修正，仍建議設好後預覽確認。

Hero 文字怎麼對齊、怎麼確保讀得清楚

封面區塊裡的文字預設會跟著內容位置走，但要做到「文字寬度受控、又能整體置中」，需要一個常被忽略的小技巧：用群組區塊包住前景內容。

直接在封面裡放標題和段落時，文字寬度會貼著內容寬度跑，想統一控制對齊不好處理。比較乾淨的做法是把標題、段落、按鈕一起選起來轉成一個群組區塊，取消群組的「內部區塊使用內容寬度」選項，再把群組對齊設成你要的方向，整組前景內容就能當成一個單位來排，置中、靠左都好控制。

可讀性方面有三道防線。第一道是覆蓋層，前面提過，深色覆蓋層配淺色文字是最穩的組合。第二道是文字本身的顏色與字重，背景複雜時把標題加粗、字級拉大，對比才夠。第三道是無障礙與 SEO 的交集：背景圖一定要填替代文字（alt text），描述圖片內容與用途，螢幕報讀軟體和搜尋引擎都靠它理解這張圖。若背景圖純屬裝飾、沒有資訊量，替代文字可留空讓報讀軟體略過，但「該描述卻空著」會同時傷無障礙與 SEO。

別讓滿版背景圖拖垮載入速度

Hero 圖通常是整頁最大、最先被看到的圖，它直接影響使用者感受到的速度，也是搜尋引擎衡量首屏載入的重點對象。做滿版 Hero 卻不管圖片大小，等於用最顯眼的位置擺一塊最重的石頭。

最常見的兩個問題，一是圖片太大拖慢載入，二是圖片在滿版容器裡反而變模糊。模糊的成因通常是上傳的原圖尺寸不足以鋪滿大螢幕，被放大後失真；解法是準備足夠寬度的原圖（橫向至少約一千九百二十像素以上的寬度較保險），並確認主題或圖片設定沒有強制套用偏小的尺寸版本。

加速則有幾個方向。上傳前先把圖片壓縮、轉成較新的格式（例如 WebP），在不犧牲肉眼品質的前提下大幅縮小檔案。Hero 圖因為位於首屏、會立刻被看到，通常不該被延遲載入（lazy-load），否則訪客會先看到一塊空白再跳出圖，反而拖慢首屏觀感；許多最佳化外掛允許把首屏圖排除在延遲載入之外。影片 Hero 的負擔更大，除了壓小檔案，也要評估是否該對行動裝置改用靜態海報圖，省下流量。

從一張背景圖到留得住人的首屏，下一步怎麼做

封面區塊把做 Hero 需要的工具幾乎都備齊了：滿版對齊、最小高度、覆蓋層、焦點選擇器、固定背景與雙色調，全部內建、不靠外掛。真正決定成敗的不是會不會按這些按鈕，而是有沒有避開那些只在實機才現形的坑——手機上的滿版高度跳動、焦點沒設好被切掉的主角、一張沒壓縮就上線拖慢首屏的大圖。

接下來的動作很單純：挑一張主體偏一側、留白給文字的背景圖，壓縮後上傳，設好焦點與覆蓋層，把前景文字用群組區塊包好控制對齊，然後務必拿真手機開一次首頁，確認高度不跳、主角還在、圖不模糊也不拖速度。把這幾件事做對，內建的封面區塊就足以撐起一個專業、會把人留下來的首屏。