版型與頁面建構：銷售頁該有的七個區塊，不用自己刻 CSS
網站長相不好，多半不是「設計能力」的問題，是「沒有清楚的區塊清單」。多數人做出來的銷售頁長得像「一堆文字加一個按鈕」，缺的不是美感，是順序——訪客從上到下掃過去，看不到他需要的資訊就走了。
這篇文章不講怎麼把頁面調得「好看」，講的是：一個會賣東西的銷售頁，應該有這七個區塊，每個區塊做什麼、放什麼。 版型設計跟頁面建構器（後台「版型設計」「頁面」）負責的是「怎麼改」，但改什麼、按什麼順序，是你的事。
銷售頁的七個區塊，順序固定
從上到下：
🔍 點擊放大| 順序 | 區塊 | 做什麼 |
|---|---|---|
| 1 | Hero（第一屏） | 一句話說清楚「這是給誰、解決什麼」，一個主 CTA |
| 2 | 痛點 | 他的問題長什麼樣，講得夠具體讓對方覺得「你懂我」 |
| 3 | 方案 | 你的課／產品怎麼解決，三個重點夠了，不要五個 |
| 4 | 社會證明 | 學員評價、數字（總學員數、完課率）、實拍畫面 |
| 5 | 講師／品牌 | 誰在教、為什麼聽他的，露臉比文字有效 |
| 6 | FAQ | 把「猶豫時會問的三個問題」直接寫出來 |
| 7 | 最後 CTA | 一個明確的下一步＋限時理由（為什麼現在買） |
多數銷售頁的問題是：一、七兩個區塊做了，中間二到六全跳過，直接從 Hero 跳到「買」。訪客還沒被說服，就讓他付錢。
頁面建構器：拖曳加入，看到什麼就是什麼
InfoBox 的頁面編輯器（後台「頁面」→「編輯」）長這樣：左邊是區塊清單（Hero 輪播、多欄、圖文／HTML、按鈕、課程列表、倒數計時器、常見問題…），右邊是即時預覽。拖一個區塊進去，右边立刻看到它放在那裡的樣子。
這個設計省掉的不是「打字」，是「我改完不知道變什麼樣」。傳統寫 HTML 的痛是「改完 reload 才知道」，建構器把它壓縮到「拖完就看見」。
<figure><img src="__IMG_page_builder__" alt="頁面建構器" loading="lazy"><figcaption>頁面編輯器：左側區塊清單可拖曳加入，右側即時預覽，看到什麼就是什麼</figcaption></figure>
重點細節：「課程列表」「商品列表」「最新文章」是活的區塊——你在後台上架一門課，銷售頁上的課程區塊自動出現，不用手動貼。這對「銷售頁要一直跟課程內容同步」的場很有用。
版型設計：一頁調完，全站的視覺基調
「版型設計」（後台「設定 → 版型設計」）管的是全站共用的東西：
🔍 點擊放大- Logo 與 favicon：上傳後自動去背（白底變透明），寬度拖拉即時預覽
- 主色調：六種系統色（靛紫、翠綠、天藍、玫瑰紅、琥珀橘、沉穩灰），套用到按鈕、連結、強調元素
- 全站字型與字級：預設／黑體／宋體，小／標準／大／特大
- 頁首／頁尾外觀：底色、文字顏色（可「自動」依底色明暗切換）
- 頁首功能開關：搜尋、購物車、登入按鈕，用不到的關掉
一個常見誤區：以為「換色」只是把按鈕顏色換了，其實它影響的是整站的視覺一致性。你改主色調，按鈕、連結、强调色、圖示會一起跟著變。這正是「一頁調完」的價值——不用去各頁各改。
<figure><img src="__IMG_theme__" alt="版型設計頁面" loading="lazy"><figcaption>版型設計：Logo、favicon、主色調、字型、字級、頁首頁尾，一頁調完套用到整站</figcaption></figure>
為什麼「不要自己刻 CSS」是真心話
後台有「貼上 HTML」的入口，也容许你在區塊裡貼 HTML。這是進階功能，不是建議功能。原因：
第一，你刻 CSS 會跟「一鍵換色」衝突。 你把一個區塊的手色寫死成 #FF5500，之後換主色調，那個區塊不會跟著變。全站換色換了八個地方，就一個没換，看起來像 bug。
第二，手機端響應式是自動的，你手寫的是不會的。 預設區塊在手機上自動換行、縮排、收合。你自己刻的 position:absolute，在手機上極可能跑出畫面。
第三，改版代價不同。 用區塊的頁面，改版是「拖個區塊重排」；用 HTML 的頁面，改版是「重寫整段」。你的網站會一直改，代價會一直付。
什麼時候該自己貼 HTML：真的需要「區塊清單裡沒有」的複雜元件（例如一個客製化的排程器、互動式圖表），或者要接第三方嵌入式程式碼（像是某些分析 snippet）。這種情況貼之前想好：這段 HTML 未來誰維護、改主色調它會不會跟著壞。
銷售頁之外的頁面，也有該有的結構
「關於我們」「功能說明」這些頁，跟銷售頁的結構不同，但有兩個原則：
🔍 點擊放大- 功能說明頁是「你的後台長這樣」：InfoBox 自己的 features 頁就是用「區塊清單＋逐項講清楚」做的，把每個大功能配一張後台實拍。你的「功能說明」「課程大綱」都該這樣——圖＋一句話，不是長段落。
- 關於我們頁是「為什麼是你」：講你的專業背景、你幫過誰、你的方法論。這一頁對信任感的影響，常被低估到「沒寫」。
<figure><img src="__IMG_pages__" alt="頁面列表" loading="lazy"><figcaption>頁面管理：所有頁面集中管理，可改選單、排序、設上層，改版不必動程式</figcaption></figure>
SEO 健檢：改完再查一次
頁面改完之後，後台「SEO 健檢」會給分數，列出「只有你能填」的待辦（標題、描述、H1、圖片 alt…）。改完一頁就查一次，不用等「全做完再查」——到時候一堆待辦會淹沒你，查不動。
小結
- 銷售頁七個區塊，順序固定：Hero → 痛點 → 方案 → 社會證明 → 講師 → FAQ → 最後 CTA
- 建構器是「看到什麼就是什麼」，省的不是打字，是「改完不知道變什麼樣」
- 版型設計一頁調完，全站視覺基調一起變
- 自己貼 HTML 是進階功能，不是建議功能——手寫色值會跟「一鍵換色」衝突、手機端響應式要自己處理
- 改完頁面查一次 SEO 健檢，待辦多了就查不動