關於頁面全寬打破邊框排版與聯絡表單信任文案優化

整理日期：2026-04-06

狀況

關於頁面背景被限縮：重做「關於我」頁面時，使用了 GenerateBlocks V2 區塊排版，設計了不同區塊背景顏色交替（例如淺灰、純白、深藍漸層）。然而，因為全站 CSS 限制了主要內容區最大寬度（.page .site-main { max-width: 42rem }），導致背景色無法向左右延伸至螢幕邊緣，看起來像是一格一格的被框住的盒子。
聯絡表單過於單調：聯絡頁面原本只有一個裸露的表單，沒有任何標題或導言，顯得冷冰冰，可能降低訪客填寫的意願。

佈局限制：檢視全站 CSS 設定中是否有對主要內容容器（如 .site-main 或 .entry-content）設定了最大寬度限制。
全寬延伸（Breakout）技巧：如何在不修改全站 CSS 的前提下，讓特定頁面的主要區塊能夠突破父容器的寬度限制，實現全寬（Full Width）滿版效果。
文案結構：如何透過溫和、口語化且實務感重的導言，建立品牌與讀者之間的信任，提高表單諮詢率。

全站的文字閱讀流寬度被限制在 42rem（約 672px），這對純文字閱讀非常舒適，但對於帶有背景圖或背景色交替的雜誌風／Landing Page 頁面，這種限制會導致背景色無法填滿螢幕。

要解決這個限制，除了解除該頁面的 max-width 限制外，還能透過 CSS calc() 進行「容器突破（Breakout）」。而聯絡表單則需要補上具體的「回覆時間承諾」和「歡迎訊息」，消除訪客送出表單後的焦慮感。

第二步：使用 CSS Snippet 針對該頁面 ID 覆寫主要內容區的最大寬度限制：

/* 移除特定頁面 site-main 的最大寬度限制 */
.page-id-3235 .site-main {
    max-width: none !important;
    margin: 0 !important;
}

第三步：在 GenerateBlocks 的容器（Container）上套用 CSS Breakout 屬性，使其寬度強行拉伸至 100% 視窗寬度（100vw），並自動向左位移補償：
```
/* 突破父容器限制實現全寬背景 */
width: 100vw;
margin-left: calc(-50vw + 50%);
box-sizing: border-box;
```

在原本的聯絡表單（如 Fluent Forms 短代碼）上方，新增以下結構的文字區塊，置中排版：

這段文字明確表明了寫信的範疇與預期的回覆時程，給予訪客清晰的安全感。