換一顆按鈕和一張照片，估計多募了6,000萬美元
2007 年 12 月，歐巴馬的總統競選團隊，在官網首頁做了一個小實驗。
他們準備了 4 種按鈕、6 種首圖（3 張照片、3 支影片），組合成 24 個版本，讓 310,382 位訪客隨機看到其中一個。
團隊心裡早有答案：大家最喜歡的，是一支叫「Sam's Video」的影片。如果不做測試，它幾乎一定會被放上首頁。
結果出來，所有的影片，表現都比所有的照片差。
贏的是一張全家福照片，配上一顆寫著「Learn More」的按鈕。
註冊率從 8.26% 變成 11.6%，提升了 40.6%。
負責這個實驗的數據分析主管 Dan Siroker 事後估算：這多出了大約 288 萬個 Email，換算成競選期間的捐款，大約多了 6,000 萬美元。
（我上次改按鈕顏色，只換來一句「好像比較亮」。）
這篇不教你把頁面調得「好看」。讀完你會知道：一個會賣東西的銷售頁，該有哪七個區塊、按什麼順序、每個區塊放什麼；以及為什麼「不要自己刻 CSS」是真心話。
▋團隊最愛的，訪客不一定要
團隊愛那支影片，但訪客是來找資訊的，找得到就留下，找不到就走。
啊！原來網站長相不好，多半不是「設計能力」的問題，是沒有清楚的區塊清單。
大多人做出來的銷售頁，長得像「一堆文字加一個按鈕」。缺的不是美感，是順序。
▋銷售頁的七個區塊，順序固定
從上到下：
🔍 點擊放大- Hero（第一屏）：一句話說清楚「這是給誰、解決什麼」，配一個主要的行動按鈕。
- 痛點：他的問題長什麼樣，講得夠具體，讓對方覺得「你懂我」。
- 方案：你的課或產品怎麼解決。三個重點就夠了，不要五個。
- 社會證明：學員評價、數字（總學員數、完課率）、實拍畫面。
- 講師／品牌：誰在教、為什麼要聽他的。露臉比文字有效。
- FAQ：把「猶豫時會問的三個問題」直接寫出來。
- 最後的行動按鈕：一個明確的下一步，加上限時理由（為什麼現在買）。
大多銷售頁只做了第一和第七塊，中間全跳過：訪客還沒被說服，就要他付錢。
歐巴馬團隊那顆贏的按鈕寫的是「Learn More」（了解更多）。剛進門的人，要的是先了解。
▋頁面建構器：拖進去，看到什麼就是什麼
InfoBox 的頁面編輯器（後台「頁面」→「編輯」）長這樣：
左邊是區塊清單（Hero 輪播、多欄、圖文／HTML、按鈕、課程列表、倒數計時器、常見問題…），右邊是即時預覽。
拖一個區塊進去，右邊馬上看到它放在那裡的樣子。
它省掉的不是打字，是「改完不知道會變什麼樣」：傳統寫 HTML 要重新整理才知道，建構器是拖完就看見。
還有一個重點：「課程列表」「商品列表」「最新文章」是活的區塊。
你在後台上架一門課，銷售頁上的課程區塊就自動出現，不用手動貼。
▋版型設計：一頁調完，全站的視覺基調
「版型設計」（後台「設定 → 版型設計」）管的是全站共用的東西：
🔍 點擊放大- Logo 與 favicon：上傳後自動去背（白底變透明），寬度拖拉即時預覽
- 主色調：六種系統色（靛紫、翠綠、天藍、玫瑰紅、琥珀橘、沉穩灰），套用到按鈕、連結、強調元素
- 全站字型與字級：預設／黑體／宋體，小／標準／大／特大
- 頁首／頁尾外觀：底色、文字顏色（可設「自動」，依底色明暗切換）
- 頁首功能開關：搜尋、購物車、登入按鈕，用不到的關掉
常見誤會：以為「換色」只是換按鈕顏色。其實它影響的是整站的視覺一致性。你改主色調，按鈕、連結、強調色、圖示會一起跟著變。
這就是「一頁調完」的價值。
▋為什麼「不要自己刻 CSS」是真心話
後台有「貼上 HTML」的入口，也允許你在區塊裡貼 HTML。
這是進階功能，不是建議功能：
第一，你刻的 CSS 會跟「一鍵換色」打架。
你把某個區塊的顏色寫死成 #FF5500，之後換主色調，那個區塊不會跟著變。全站八個地方都換了，就它沒換，看起來像 bug。
第二，手機版的排版是自動的，你手寫的不會。
預設區塊在手機上會自動換行、縮排、收合。你自己刻的 position:absolute，在手機上很可能跑出畫面。
第三，改版的代價不一樣。
用區塊做的頁面，改版是「拖個區塊重排」。用 HTML 做的頁面，改版是「整段重寫」。網站會一直改，代價就一直付。
什麼時候該自己貼 HTML？
需要區塊清單裡沒有的複雜元件（例如客製的排程器、互動式圖表），或要接第三方的嵌入程式碼（像某些分析工具的程式碼片段）。
這種情況，貼之前先想好：這段 HTML 以後誰維護？換主色調的時候它會不會壞？
▋銷售頁之外的頁面，也有該有的結構
「關於我們」「功能說明」這些頁，結構跟銷售頁不同，但有兩個原則：
🔍 點擊放大- 功能說明頁＝「你的後台長這樣」：InfoBox 自己的功能頁，就是用「區塊清單＋逐項講清楚」做的，每個大功能配一張後台實拍。你的「功能說明」「課程大綱」也該這樣：一張圖＋一句話，不是一大段文字。
- 關於我們頁＝「為什麼是你」：講你的專業背景、你幫過誰、你的方法。這一頁對信任感的影響，常常被低估到乾脆沒寫。
▋SEO 健檢：改完就查一次
頁面改完，後台的「SEO 健檢」會給分數，列出「只有你能填」的待辦（標題、描述、H1、圖片替代文字…）。
改完一頁就查一次，不要等全部做完才查。到時候待辦會多到把你淹沒，查不動。
▋小結
- 銷售頁七個區塊，順序固定：Hero → 痛點 → 方案 → 社會證明 → 講師 → FAQ → 最後的行動按鈕
- 建構器是「看到什麼就是什麼」，省的不是打字，是「改完不知道會變什麼樣」
- 版型設計一頁調完，全站視覺基調一起變
- 自己貼 HTML 是進階功能，不是建議功能：寫死的顏色會跟「一鍵換色」打架，手機版也要自己處理
- 改完頁面就查一次 SEO 健檢，待辦累積多了就查不動
▋我的看法
我們幫客戶做網站，每個老闆都有自己最愛的那支影片、那段文案。
我們的做法是先把七個區塊排好，再談美感。順序對了，頁面通常不會太差；順序錯了，再漂亮也留不住人。
這個實驗裡，我最記得的不是那 6,000 萬美元。
是那支全隊都愛、差點就被放上首頁的「Sam's Video」。
你的網站上，可能也有一支。
祝你的每一頁，都排在訪客想看的順序上。
（寫完這篇，我回頭把自己最愛的那張首圖拿掉了。有點心痛，但數字會說話。）
💡 不確定你的銷售頁缺了哪一塊？請我們幫你看看
資料來源：Dan Siroker，〈How Obama Raised $60 Million〉（歐巴馬 2008 競選官網首頁實驗紀錄），Optimizely 部落格，2010 年 11 月 29 日