首頁主視覺要做成滿版，不是把一個 Container 拉寬就好。先把 GeneratePress 的頁面內容容器改成 Full Width，再用兩層 GenerateBlocks Container：外層管滿版底色與留白，內層把文字收在舒服的寬度。
以下用「好喝咖啡」做一個純色 Hero，放店名、副標和「看菜單」按鈕。沒有背景圖、輪播或動畫，先把最常用、也最好維護的版本排好。
快速重點
| 製作需求 | 在哪裡做 |
|---|---|
| 讓底色貼齊頁面兩側 | GeneratePress Layout → Content Container → Full Width |
| 控制滿版底色與上下留白 | Hero 外層 Container |
| 控制文字寬度 | Hero 內容 Container |
| 放店名、副標、按鈕 | Headline、Text、Button |
文中的 PADDING、MAX WIDTH 是畫面上欄位的原樣，照著字面找就可以。
1.先把頁面版型設成滿版
打開頁面右側的「頁面」分頁，找到 GeneratePress 的 Layout。Sidebar Layout 選 No Sidebars，Disable Elements 勾選 Content Title，Content Container 從 Default 改成 Full Width。這三個設定會拿掉側欄、避免頁面標題和 Hero 的 H1 重複，並讓內容真的貼齊頁面兩側；只改 GenerateBlocks 的寬度，外面還是會被佈景主題的內容容器卡住。
2.在頁面頂部加入外層 Container
把插入點放到頁面最上方，點左上角「＋」，搜尋 container，選 GenerateBlocks 的 Container。頁面已經有內容的話，可以先用清單檢視選第一個區塊，從選單按「於前方插入」，再加入 Container。接著把這層改名成「Hero 外層」，等一下裡面再放一層 Container 時比較不會選錯。
3.在外層裡再放一個 Container
點外層 Container 裡的「＋」，再加入一個 Container，改名成「Hero 內容」。完成後打開清單檢視，結構應該是 Hero 外層包著 Hero 內容，Headline、Text、Button 之後都放在內層。
4.替外層 Container 選背景色
選 Hero 外層，右側切到樣式分頁（半圓圖示），打開 Backgrounds。在 Background Color 選全域色 Base 2，示範站會套用前面設定過的奶油米色。如果你的網站沒有 Base 2，直接選自己的淺色背景，或先看全域顏色與字型設定。
5.用 Padding 做出 Hero 的高度
同一個外層 Container 打開 Spacing，在 PADDING 填上 Top 7rem、Right 2rem、Bottom 7rem、Left 2rem。上下留白把主視覺撐開，左右 2rem 則避免文字在較窄的螢幕貼邊。先不要用固定高度，因為內容變多、字型載入或手機換行時容易把文字切掉，Padding 會跟著內容自然長高。
6.把內層內容限制在 720px 並置中
改選 Hero 內容 Container，在樣式分頁的 Sizing 把 Max Width 設成 720px。接著到 Spacing，把 Margin 的 Left、Right 設為 auto，再到 Typography 把 Text Alignment 選置中。外層繼續鋪滿整頁，內層只負責收住文字，這就是需要兩層 Container 的原因。
7.加入店名 Headline，改成 H1
在 Hero 內容裡加入 Headline，輸入「好喝咖啡」。GenerateBlocks 的 Headline 預設是 H2，從區塊工具列的標籤選單改成 Heading 1，再到 Typography 把 Font Size 設為 4rem、Line Height 設為 1.1。這是頁面最主要的一句話，所以使用 H1；前面已停用 Content Title，前台不會同時出現兩個 H1。
8.加入副標與「看菜單」按鈕
在 H1 下面加入 Text，輸入「一杯，喝得到產地」，Font Size 設 1.25rem、Margin Bottom 設 2rem。再加入 Button，輸入「看菜單」，背景改選全域色 Accent，Border Radius 設 999px。點工具列的連結圖示，示範填 #menu。這是頁內連結，只有頁面上已經有 HTML ID 為 menu 的區塊時才會移動；如果還沒有菜單區，可以先貼菜單頁網址，或暫時留空。
9.切到 Mobile，縮小外層留白
用右上角「檢視」切到行動裝置，選 Hero 外層，右側會切到 Mobile 設定。到 Spacing，把 Padding 改成 Top 4rem、Right 1.25rem、Bottom 4rem、Left 1.25rem。這樣會縮短手機上的上下留白，也保留左右安全距離。
10.把手機標題改成 2.5rem
改選「好喝咖啡」Headline，在 Mobile 的 Typography 把 Font Size 設成 2.5rem。手機畫面捲一遍，確認標題沒有切字、按鈕按得到、左右沒有橫向捲軸，再按右上角「儲存」。需要複習手機版設定，可以接著看用 GenerateBlocks 調整手機間距、對齊與堆疊。
常見問題
為什麼 Hero 要用兩層 Container？
外層和內層做的事不同。外層負責把底色與留白鋪滿整個頁面，內層用 Max Width 把文字收窄並置中。如果只用一層，設了 Max Width 之後，背景也會跟著縮成同樣寬度。
Container 已經設 100%，為什麼背景還是沒有滿版？
通常是外面還被 GeneratePress 的頁面內容容器限制。到頁面的 Layout，把 Sidebar Layout 改成 No Sidebars、Content Container 改成 Full Width，再看一次。GenerateBlocks 的 Container 本身沒有 WordPress 的滿幅對齊按鈕，這層佈景主題設定不能省。
Hero 用 H1 會不會和頁面標題重複？
會，所以第一步要在 GeneratePress Layout 的 Disable Elements 勾選 Content Title。前台只保留 Hero 裡的 H1，頁面結構才不會出現兩個主標題。
按鈕填 #menu 為什麼點了沒有移動？
#menu 是頁內連結，目標區塊也要有 menu 這個 HTML ID 才會生效。如果還沒有菜單區，可以先填真正的菜單頁網址；等菜單區做好，再到目標區塊的進階設定補上 HTML ID。
下一步
這個 Hero 已經可以自己換店名、副標、按鈕文字和背景色。頁面下面如果還沒有內容，可以先用三欄版面排出首頁特色，最後再統一區段順序與間距。
照著做如果畫面跟這裡不一樣，或者不確定版面該怎麼安排、想連整個網站外包給我們製作，歡迎與我們聯絡。