銷售漏斗頁首與主視覺間隙排查與版面設定優化
整理日期：2026-04-06
在維護一個使用 WPFunnels 外掛建立的產品銷售漏斗落地頁（Landing Page）時，發現網頁頁首（Header）與主視覺區塊（Hero Section）之間出現了一條莫名的空白間隙。
先拆成幾層看
Section titled “先拆成幾層看”- CSS 樣式層：檢查是否有全域或特定的 CSS Snippet 影響了該銷售頁的外層容器，或者是邊距（margin/padding）設定不一致。
- 主題設定層：佈景主題（如 GeneratePress）針對一般頁面或自訂文章類型（Post Type，如
wpfunnel_steps）的預設內容容器內縮（Content Padding）設定。 - 區塊層：Hero 區塊內部是否為了補償間距，使用了負邊距（Negative Margin）等排版補丁。
經過瀏覽器開發者工具（DevTools）逐層檢視：
- 原本該頁面的 Hero 區塊內建了
margin-top: -128px的 CSS 補丁。這是建置頁面時，為了抵消 GeneratePress 主題預設「全站內容上方內縮（Content Padding-top）」所做的手動補償。 - 後續因佈景主題更新或調整了全域的 Content Padding 數值，導致預設內縮與負邊距的數值不再精準匹配，從而產生了數個像素的間隙。
- 曾試圖在全域 CSS 中強制將該頁面的 padding/margin 歸零，但此舉過於激進，反而破壞了原本正常固定的 Header 結構。
捨棄脆弱的負邊距補丁，改以 WordPress 佈景主題內建的單頁覆寫功能進行標準化調整：
- 清除 CSS 補丁：進入頁面編輯器，選取 Hero 區塊，將原本手動設定的
margin-top: -128px負邊距清除，還原為0。 - 單頁覆寫主題設定：在該銷售頁的編輯畫面右側，找到佈景主題的版面設定區塊（以 GeneratePress 為例，為 Layout 面板）：
- 將 Content Padding 的上方（Top）數值設為
0。此設定會覆蓋全站預設的上方內縮，且僅在該頁面生效。
- 將 Content Padding 的上方（Top）數值設為
- 區塊微調：直接在 Gutenberg 區塊編輯器中，為 Hero 區塊設定上方內距為
3rem（或依視覺微調），確保與其他頁面的視覺間距一致。
此做法無須撰寫任何 custom CSS 程式碼，也不會破壞全站樣式。
不建議先做的事
Section titled “不建議先做的事”- 避免直接在全域 CSS Snippet 中強行使用
!important歸零body.single-wpfunnel_steps的所有 padding 與 margin。這雖然能消除縫隙，但會連帶讓 Header 的背景溢出或導致選單文字被 Hero 區塊壓住。 - 不要使用額外的外掛來強制隱藏頁首，這對需要保留基本導覽的漏斗頁面不切實際。
下次遇到可以先整理什麼
Section titled “下次遇到可以先整理什麼”- 出現間隙頁面的 Body Class（例如一般頁面是
.page，特殊外掛頁面可能是.single-wpfunnel_steps）。 - 在 DevTools 點選 Hero 區塊，看其樣式表（Styles Panel）中是否有負數的
margin-top，確認是否存在前人留下的排版補丁。 - 確認所使用的佈景主題是否支援「單頁版面設定（Page Layout Settings）」功能，優先以主題內建的關閉 headline、調整 padding 功能處理。
GeneratePressWPFunnelsContent PaddingCSS Hack銷售頁排查