鯤航 — 師資頁面更新計畫

現況分析

目前「授課師資」頁面使用的是 Elementor 模板的預設假資料（Ethan Reynolds、Maya Thompson 等英文名），需要替換為實際的 10 位教師資料。

網站風格：深藍 + 海洋青綠的企業感設計，卡片式排版。

教師名冊（10 位）

Elementor 頁面架構設計

各 Section 的 Elementor 操作方式

Section 1：Hero Banner

• 用「Section」元件，背景設為深藍漸層（#003d5c → #005a7a）
• 加 Heading Widget：「專業師資團隊」，白色，字級 36px
• 加 Text Editor Widget：副標文字，#8cb4d8 色
• Section 高度設 300px，padding 上下 60px

Section 2：數字亮點

• 用 4 欄 Inner Section
• 每欄放 Counter Widget + Heading（小字說明）
• 數字用 #003d5c 深藍，說明文字用 #5a6a7e 灰

Section 3：教師卡片

• 用 Loop Grid 或手動排列 3 欄卡片
• 每張卡片用 Inner Section，白底 + 圓角 12px + 陰影
• 照片：Image Widget（暫時用預設頭像佔位）
• 姓名：Heading H3，#003d5c
• 職稱：Text Editor，#5eb3b7 海洋青綠
• 教學項目：Icon List Widget
• 證照：用 HTML Widget 做 tag 樣式
• hover 效果：卡片上移 + 加深陰影

Section 4：證照總覽

• 3 或 4 欄 Icon Box
• 每個 Icon Box 代表一種證照類型
• 圖示用船錨、方向盤、證書等 icon

Section 5：CTA

• 深藍背景 Section
• 白色標題 + Button Widget 連結到報名頁
• 按鈕樣式：白底深藍字，hover 反轉

待辦清單

Phase 1：準備工作

• 確認 10 位教師資料是否都要上架（跟老闆確認）
• 為每位教師撰寫一段精簡介紹（1-2 句話，突出亮點）
• 準備預設頭像佔位圖（統一風格的剪影或 icon）
• 確認教師排列順序（依資歷？依教學項目？）

Phase 2：Elementor 頁面製作

• 備份現有師資頁面（Elementor 匯出 JSON）
• 製作 Hero Banner Section
• 製作數字亮點 Section（Counter Widgets）
• 製作 10 張教師卡片（含佔位照片）
• 製作證照總覽 Section
• 製作底部 CTA Section
• 手機版 RWD 調整（卡片改 1 欄，字級調整）
• 加入微動畫（Elementor Motion Effects：Fade In Up）

Phase 3：其他頁面導航調整

• 題庫頁面加「返回首頁」按鈕
• 招生簡章頁面加「返回首頁」按鈕
• 課程課表頁面加「返回首頁」按鈕
• 課程花絮頁面加「返回首頁」按鈕
• 教學影片頁面加「返回首頁」按鈕
• 師資頁面（本次更新的）不加返回按鈕（已有導覽列）

Phase 4：照片更新（後續）

• 待素材跟老闆要 10 位教師個人照片（半身照佳）
• 待素材照片統一裁切比例（建議 1:1 或 3:4）
• 待素材照片壓縮轉 WebP 後上傳替換佔位圖

物超所值的加分設計

讓老闆覺得這次更新不只是換資料，而是整體升級：

• 加分數字亮點區 — 用動態計數器展示團隊數據，視覺衝擊強
• 加分證照 badge 設計 — 每位教師的證照用精緻標籤呈現，凸顯專業度
• 加分hover 動畫 — 卡片滑鼠移過時上浮 + 陰影加深，增加互動感
• 加分手機優化 — 卡片自動堆疊，滑動體驗流暢
• 加分證照總覽區 — 額外的 section 展示團隊整體持照情況
• 加分CTA 導流 — 底部引導報名，完善轉換流程
• 加分各頁面導航按鈕 — 改善使用者體驗，讓瀏覽動線更順