Hero 首頁主視覺：三秒決定訪客留不留下

TL;DR

• Hero 是訪客進站後前三秒看到的區塊，直接決定「繼續看」或「關掉」。
• AHHA 提供三種版型：置中（Center）、左右分割（Split）、全版背景（Fullbleed），對應不同產業氣質。
• 主標題尺寸可選 sm/md/lg/xl，配合版型微調視覺節奏。
• 桌機與手機可各自指定背景圖，避免手機被橫向圖片裁切變形。
• CTA 按鈕一顆就夠，文案用動詞 + 具體結果（例：「立即預約諮詢」）勝過「了解更多」。

---

Hero 解決的是信任與方向問題

訪客點進你的網站時，他在問兩個問題：「這是做什麼的？」「值得我花時間嗎？」Hero 如果沒在三秒內回答，他就會離開——而且大多數網站分析工具顯示，首屏跳出率常佔整體跳出率的 60% 以上。

Hero 區塊的任務不是炫技，是一句話說清楚你是誰、做什麼、為誰服務，然後給一個明確的下一步動作。

---

三種版型怎麼選

Center 置中版：主副標題與 CTA 垂直置中，搭配全版背景圖。氣質俐落、品牌感強，適合診所、顧問、律師、高端美容。

Split 左右分割版：左側文字、右側圖片（或反之）。資訊量最大，適合需要展示產品、空間、主理人照片的品牌——餐廳、工作室、選物店常用這個。

Fullbleed 全版背景：整張 Hero 就是一張巨大背景圖，文字疊在上方。視覺衝擊力最高，攝影師、婚攝、健身房、空間品牌首選。

選錯了會怎樣？ 服務型產業用 Fullbleed 常會變成「照片很美、但我看完還是不知道你在賣什麼」；產品型品牌用 Center 則常顯得太空。挑版型前先想：我希望訪客第一眼看到的是什麼？

---

編輯器重點欄位

• 主標題 / 副標題：這兩個是你的 elevator pitch。主標題用一句話切品牌定位，副標題補一句「為誰、為什麼」。
• 主標題尺寸：sm 到 xl 四段可選，預設 lg 即可；若首屏文字太多，降成 md 會更舒服。
• CTA 按鈕：文案 + 連結。指向最關鍵的轉換點（預約頁、商品頁、聯絡表單錨點），不要放「了解更多」。
• 背景圖 / 手機背景圖：AHHA 支援兩張獨立上傳，手機若沒有專屬圖會自動用桌機版；但直式版面建議一定要給手機版。
• 背景遮罩透明度：全版背景圖上的文字看不清時調這個，常用值 0.3～0.5。
• i18n 分頁：所有文字欄位都支援語言分頁，切換 tab 就能填英文、日文版。

---

搭配其他 block 的節奏

Hero 之後最常見的組合是：

Hero → About → Services（或 Product List）→ Testimonials → CTA Banner

Hero 建立第一印象，About 展開品牌故事與信任，Services/Product 交付具體內容，Testimonials 補社會證明，CTA Banner 最後收尾再推一次轉換。這是經過驗證的「自我介紹 → 交付承諾 → 臨門一腳」節奏。

---

三個常見錯誤

1. 塞兩顆 CTA 按鈕：訪客的注意力被分散，選項多反而不做選擇。留最重要那一顆。
2. 背景圖過亮、文字讀不到：調高遮罩透明度，或換成純色底搭配 Split 版型。
3. 副標題寫成公司簡介：「成立於 1995 年，秉持著⋯⋯」這種文案請搬到 About。副標題只要一句話：「為誰解決什麼問題」。

---

寫在最後

Hero 是整個網站裡改寫成本最低、影響最大的區塊。設定完第一版後，每個月回來看一次，根據 GA4 的首屏停留時間與 CTA 點擊率微調——你會驚訝一句主標題改動帶來的轉換差異。

登入 AHHA 後台 → 頁面管理 → 打開首頁 → 編輯 Hero 區塊，五分鐘就能完成第一次優化。