專案背景

客戶是台中一家專門提供寵物善終與生命禮儀服務的品牌——星之所向（Skyway365）。業主希望打造一個溫柔又有品牌感的官方網站，讓毛孩家長在最脆弱的時刻，能夠找到一個有信賴感的服務入口。

這是我第一個 Wix 接案專案，也是第一次需要在 Wix Editor（舊版）的限制內，從零開始規劃一整套品牌設計系統。

ℹ️ 為什麼選 Wix Editor 而不是 Wix Harmony？
客戶需要 Accordion FAQ 元件以及未來建立 CMS 部落格的彈性，這兩個功能目前 Wix Harmony 支援不足，因此選擇維持舊版 Editor 作業環境。

設計系統規劃

這類型的服務網站最難拿捏的就是「調性」——太輕鬆會顯得不莊重，太嚴肅又讓人喘不過氣。我們最終確立的方向是：溫柔、莊重、有品牌感，讓人感受到被照顧，而不是被推銷。

色彩系統

角色顏色名稱色碼用途
主背景米杏色#F5F0E8整體背景，溫暖不刺眼
次背景奶白色#FDFAF4卡片、區塊底色
主品牌色靛藍紫#3D3A9E按鈕、標題重點
輔助色薰衣草紫#6B68C8次要強調、漸層
點綴色金星黃#E8A020星星圖示、品牌符號
深色文字深夜藍#2C2A5E長文閱讀底色區塊

字體選擇

Wix 對中文字體的支援有個很容易踩到的坑：字體預設樣式（Font Preset）不會套用到中文字元，只有英數字會受影響。所以每個區塊都需要手動逐一設定中文字體，不能依靠全域設定一次解決。

英數字使用 Quicksand（圓潤、現代，符合品牌調性）；中文採用系統字 fallback，在 Windows 上顯示微軟正黑體，Mac / iOS 上顯示蘋方。

· · ·

完成頁面一覽

首頁

首頁是整個網站的品牌門面，架構如下：Header 導覽列（Logo 75px，預約服務 CTA 按鈕）、Hero Banner（使用客戶提供的粉花牆實景照片作為背景）、三欄服務亮點、關於我們圓形圖文區塊、三欄服務卡片、火化收費表、星辰相伴六欄卡片、客戶見證、聯絡區塊與 Footer。

服務流程頁（service-flow）

STEP 01 到 STEP 06 採左右交替排版，每個步驟之間用品牌 Logo 作分隔線，底部是感性結尾文案搭配預約按鈕。視覺節奏是這頁的核心，讓家長在最艱難的時刻，能有一個清楚又不倉促的導引。

常見問題頁（FAQ）

9 題手風琴式展開，底部配有深夜藍底色的聯絡區塊。這頁的大部分排版邏輯是靠 HTML 嵌入元件處理的，原因後面會說明。

部落格

利用 Wix 原生部落格功能，針對每篇文章設定 SEO 標題、中繼描述、焦點關鍵字，並將文章 URL 全面改為英文（避免中文 URL 在分享時的編碼問題）。同時修正 H1/H2 標題結構，確保每頁只有一個 H1。

· · ·

技術挑戰與解法

① RWD 價格表 — Wix 做不到，HTML 嵌入來救

Wix 原生的欄位元件在手機版幾乎無法做出理想的表格 RWD 效果。對於火化服務收費這種需要橫向比較的內容，我選擇完全用 HTML 自己刻，再透過 Wix 的 HTML 元件嵌入頁面。

這樣的好處是：RWD 完全自己掌控、樣式可以跟品牌色系精準對齊、桌機版顯示三欄、手機版自動堆疊成單欄。

② iframe 內電話按鈕無法直接撥打

Wix HTML 元件是透過 iframe 載入的，這意味著 tel: 連結預設會被 iframe 的沙箱安全機制擋住，在手機上點了什麼也不會發生。

解法是在點擊事件上加一行：

// iframe 內電話按鈕修正 document.querySelector('.phone-btn').addEventListener('click', function(e) { e.preventDefault(); window.top.location.href = 'tel:+886xxxxxxxxx'; });

window.top 讓行為跳出 iframe 層，直接在最外層視窗觸發，手機就能正常撥打了。

③ HTML 元件高度自動調整

Wix HTML 元件的高度預設是固定的，如果裡面的內容（例如手風琴展開後）高度變化，畫面會出現捲軸或被裁切。解法是用 postMessage 把高度傳給外層：

function sendHeight() { window.parent.postMessage({ type: 'resize', height: document.body.scrollHeight }, '*'); } // 初始化 + 手風琴展開時都呼叫一次

④ URL 重新導向

服務流程頁在開發期間的路徑是 /service-process，後來調整為語意更清晰的 /service-flow。在 Wix 後台設定 301 重新導向，避免舊路徑造成 404。

⑤ 全站懸浮社群按鈕

在每個頁面右側加入懸浮的社群快捷按鈕：FB、IG、WhatsApp、LINE。使用 HTML 元件搭配 position: fixed 實現，讓訪客在任何頁面都能快速聯繫。

· · ·

SEO 設定

🎯 全站主題關鍵字：台中寵物善終與生命禮儀服務
圍繞這個主題，每個頁面再延伸各自的子關鍵字。

完成的 SEO 工作包含：

目前還有一個待修正項目：某個頁面主題欄位的文字少於 10 個字，不符合 Wix SEO Wiz 的建議長度，需要在優化循環中補齊。另外，手機版 LCP 目前偏高（27.6 秒），這是 Wix 平台本身的限制加上圖片尚未優化的結果，後續替換實景圖片時會一併處理。

· · ·

待處理事項

· · ·

這個案子學到的事

Wix 是很有彈性的，但要懂得繞

一開始我對 Wix 的印象停留在「拖拉放的玩具工具」，但這次實際操作後發現：Wix 的 HTML 元件其實非常強大。凡是原生做不到的 RWD 排版、複雜互動、特殊元件，只要你會寫 HTML/CSS/JS，幾乎都能透過 HTML 元件嵌入來解決。iframe 的限制確實存在，但大部分都有對應的繞法。

中文字體在 Wix 裡是一個坑

花了一些時間才搞清楚：Wix 的字體樣式預設只影響英數，中文每個元素都要手動設定。這是使用 Wix 做中文網站最需要注意的細節之一，不先知道的話會耗費大量除錯時間。

調性比功能更重要

這個行業的客戶在使用服務的當下，通常正處於失去毛孩的悲痛中。網站的視覺語言、文案措辭、版面呼吸感，每一個細節都在無聲地傳遞品牌的溫度。這次讓我更深刻理解：對某些客戶來說，一個「感覺對」的網站，遠比一個「功能完整」的網站更重要。

🌟 專案成果快覽

4
完成頁面
2
HTML 嵌入元件
✓
GSC 驗證完成