電商促銷信實作

前面三課學了 Table 排版、inline CSS、安全屬性。現在要把所有技巧合在一起，做出一封完整的雙十一促銷信。

想像你是電商行銷，老闆要你做一封「雙十一全站 5 折」的促銷信，包含：主視覺橫幅、四件推薦商品（2x2 排列）、搶購按鈕、底部聯絡資訊。

EDM 的標準結構

一封完整的電商促銷信，結構通常是這樣：

┌─────────────────────────┐
│      Header / Logo      │
├─────────────────────────┤
│     Hero Banner 主視覺   │
├─────────────────────────┤
│    商品區（2x2 格狀排列）  │
├────────────┬────────────┤
│   商品 A    │   商品 B   │
├────────────┼────────────┤
│   商品 C    │   商品 D   │
├────────────┴────────────┤
│      CTA 按鈕（搶購）     │
├─────────────────────────┤
│   Footer（聯絡/取消訂閱）  │
└─────────────────────────┘

每個區塊都是一個 <tr>（列），整封信就是一個大 Table。

完整實作：雙十一促銷信

結構拆解

讓我們回頭看這封信的骨架：

實用小提醒

1. Hero 用文字不用圖片：很多郵件客戶端預設不載入圖片，純文字的 Hero 更可靠
2. Footer 一定要有取消訂閱連結：這是法規要求，也能降低被標為垃圾信的風險
3. 整體寬度用 600px：這是 Email 的「安全寬度」，在大部分螢幕上都能完整顯示
4. 顏色用十六進位全碼：用 #e74c3c 不要用 red 或 #e74，相容性最好

AI 協作：學了這個，跟 AI 怎麼配合？

現在你能做出完整的促銷信了。AI 可以幫你快速產出變化版本。

你的人類優勢：

• 你能決定促銷策略（哪些商品、什麼折扣、什麼文案）
• 你能檢查 AI 生成的 EDM 結構是否完整（有沒有 footer、取消訂閱連結）

可以這樣跟 AI 說：

幫我用上面的促銷信模板，改成「新春特賣」主題：紅金配色，Hero 文字改成「新春福袋 限量搶購」，換四個不同的商品（你幫我編），footer 保留。全部 table layout + inline CSS。

練習題