Webflow 教學｜設計師的專業網站建構工具入門

Webflow 是近年最受設計師歡迎的架站工具。

它讓你在視覺化介面中，做出幾乎可以媲美客製開發的專業網站。不用寫程式碼，但能達到寫程式碼的效果。

這篇教學會帶你認識 Webflow，了解它適不適合你，以及如何開始使用。

什麼是 Webflow？

Webflow 是一個視覺化的網頁設計和開發平台。

Webflow 的定位

你可以把 Webflow 想成：

Figma（設計工具）+ WordPress（CMS）+ Netlify（主機）

三合一的解決方案。

在 Webflow 中，你可以：
- 視覺化設計網頁
- 管理內容和資料
- 直接發佈上線
- 不寫一行程式碼

Webflow vs 其他平台

Webflow 的優勢

1. 設計自由度極高

不像其他架站平台被模板限制，Webflow 讓你可以設計任何想要的版面。

每個元素的大小、位置、間距、動畫都可以精確控制。

2. 乾淨的程式碼

Webflow 產生的 HTML/CSS 非常乾淨，不像很多 Page Builder 會產生一堆冗餘代碼。

這對 SEO 和網站效能都有幫助。

3. 強大的 CMS 功能

Webflow 的內容管理系統讓你可以建立動態內容，例如：
- 部落格文章
- 產品目錄
- 團隊成員
- 作品案例

4. 內建互動動畫

不用寫 JavaScript，就能做出專業的互動動畫效果。

5. 響應式設計工具

可以針對不同螢幕尺寸精確調整設計。

Webflow 的限制

1. 學習曲線較陡

Webflow 的功能強大，但這也意味著需要更多時間學習。

完全沒有網頁設計概念的人，可能會覺得很困難。

2. 價格較高

如果需要 CMS 功能或 E-commerce，Webflow 的費用不低。

3. 電商功能有限

雖然有電商功能，但比不上 Shopify 專業。

4. 某些進階功能受限

會員系統、複雜的表單邏輯等，需要整合第三方服務。

Webflow 適合誰？

在投入時間學習之前，先確認 Webflow 適不適合你。

適合使用 Webflow 的人

✅ 網頁設計師
想要更大的設計自由度，不想被模板限制。

✅ UI/UX 設計師
熟悉 Figma、Sketch 等工具，想把設計直接變成網站。

✅ 行銷人員
需要快速建立 Landing Page，且追求設計品質。

✅ 創意工作室
需要展示獨特設計風格的作品集。

✅ 願意學習的人
有耐心學習新工具，追求更好的成果。

不太適合的人

❌ 完全不懂設計的人
Webflow 的自由度是雙面刃，不懂設計可能做出很糟的網站。

❌ 只想快速上線的人
如果只是要快速有個網站，Wix 會更適合。

❌ 大型電商需求
電商功能不夠專業，建議用 Shopify。

❌ 預算非常有限的人
付費方案比其他平台貴。

:::cta
不確定 Webflow 適不適合你？
VibeFix 可以幫你評估需求，找到最適合的架站方案。
免費諮詢
:::

Webflow 方案介紹

了解 Webflow 的定價結構。

網站方案（Site Plans）

用於發佈網站。

電商方案（E-commerce Plans）

用於銷售產品。

工作空間方案（Workspace Plans）

用於團隊協作。

建議： 如果是個人使用，Basic 或 CMS 方案就夠用。

Step 1：註冊和認識介面

開始你的 Webflow 之旅。

1.1 註冊帳號

1. 前往 webflow.com
2. 點擊「Get started — it's free」
3. 使用 Google 帳號或 Email 註冊
4. 完成基本設定

1.2 建立新專案

1. 在 Dashboard 點擊「New Site」
2. 選擇：
   - Blank Site：從空白開始
   - Template：從模板開始
3. 為專案命名

建議： 第一次使用建議選一個模板，先了解 Webflow 的結構。

1.3 認識 Designer 介面

Step 2：理解 Box Model 概念

使用 Webflow 前，需要了解網頁的基本概念。

什麼是 Box Model？

網頁中的每個元素都是一個「盒子」。

盒子由外而內包含：
- Margin：與其他元素的距離
- Border：邊框
- Padding：內容與邊框的距離
- Content：實際內容

理解這個概念，才能正確使用 Webflow 的排版工具。

Flexbox 排版

Webflow 大量使用 Flexbox 進行排版。

Flexbox 的優點：
- 容易水平/垂直置中
- 元素可自動分配空間
- 輕鬆調整排列順序

設定方式：
1. 選擇容器元素
2. 在 Style 面板找到「Layout」
3. 選擇「Flex」
4. 調整對齊方式

Grid 排版

更複雜的網格排版可以使用 CSS Grid。

適合情境：
- 多欄位排版
- 複雜的版面配置
- 作品集展示

Step 3：建立基本頁面結構

開始動手設計。

3.1 規劃頁面結構

一個典型的網頁結構：

- Navbar（導航列）
- Hero Section（主視覺區）
- Content Sections（內容區塊）
- Footer（頁尾）

3.2 新增 Navbar

1. 點擊左側「Add（+）」
2. 找到「Navbar」元件
3. 拖曳到畫布上
4. 修改 Logo 和選單項目

3.3 建立 Hero Section

1. 新增一個 Section 元素
2. 設定背景顏色或圖片
3. 加入標題和副標題
4. 加入 CTA 按鈕
5. 使用 Flexbox 置中內容

3.4 建立內容區塊

1. 新增 Section
2. 加入 Container（控制最大寬度）
3. 建立 Grid 或 Flexbox 排版
4. 填入內容

3.5 建立 Footer

1. 新增 Section
2. 加入公司資訊、連結、版權聲明
3. 設定背景色區分

Step 4：樣式設定

讓網站看起來更專業。

4.1 Class 系統

Webflow 使用 Class（類別）來管理樣式。

為什麼要用 Class？
- 一次設定，多處使用
- 修改時全部一起改
- 保持設計一致性

命名建議：
- 使用有意義的名稱（例如：hero-title）
- 使用 BEM 命名法（例如：card, card__image, card__title）
- 保持命名一致

4.2 設定字體

1. 進入 Project Settings → Fonts
2. 選擇 Google Fonts 或上傳字體
3. 在 Style 面板選擇字體

4.3 設定顏色

建議使用 Global Color（全域顏色）：

1. 在調色盤中建立品牌顏色
2. 設為 Global Color
3. 需要修改時，一處改全站改

4.4 設定間距

保持間距的一致性：

• 使用 8px 或 4px 為基準單位
• 常用間距：16px、24px、32px、48px、64px
• 使用 Class 管理重複的間距設定

Step 5：響應式設計

確保網站在各種裝置上都好看。

5.1 理解斷點

Webflow 有四個預設斷點：

5.2 調整響應式樣式

5.3 常見的響應式調整

Step 6：CMS 內容管理

建立動態內容，讓網站更容易維護。

6.1 什麼是 CMS？

CMS（Content Management System）讓你可以：
- 建立內容結構（Collection）
- 批量管理內容
- 用模板顯示內容

適合用於：部落格、作品集、產品目錄、團隊成員等。

6.2 建立 Collection

1. 點擊左側「CMS」
2. 點擊「Create new Collection」
3. 命名（例如：Blog Posts）
4. 新增欄位：
   - Name（名稱）
   - Slug（網址）
   - 封面圖片
   - 內容
   - 發佈日期
   - 等等...

6.3 新增內容項目

1. 在 Collection 中點擊「New Item」
2. 填寫各欄位內容
3. 儲存

6.4 建立 Collection Page

Collection Page 是單一內容的顯示模板。

1. 在 Pages 中找到自動建立的 Collection Page
2. 設計版面
3. 將元素連接到 CMS 欄位

6.5 建立 Collection List

在其他頁面顯示內容列表：

1. 新增 Collection List 元素
2. 選擇要顯示的 Collection
3. 設計列表項目的外觀
4. 連接 CMS 欄位

:::cta
Webflow CMS 設定有點複雜？
VibeFix 提供 Webflow 架站服務，幫你搞定技術問題。
取得協助
:::

Step 7：互動動畫

讓網站更生動。

7.1 Webflow Interactions

Webflow 內建強大的動畫工具，不需要寫 JavaScript。

觸發類型：
- Page Load（頁面載入）
- Scroll（滾動）
- Click（點擊）
- Hover（滑過）
- 更多...

7.2 建立簡單動畫

以「滑入效果」為例：

1. 選擇元素
2. 點擊右側「Interactions」面板
3. 選擇觸發類型（Scroll into view）
4. 建立動畫：
   - 初始狀態：opacity 0, transform Y 20px
   - 最終狀態：opacity 1, transform Y 0
5. 設定持續時間和 Easing

7.3 動畫最佳實踐

• 動畫要有目的，不要為動畫而動畫
• 保持簡潔，太多動畫會分散注意力
• 注意效能，複雜動畫可能影響載入
• 提供 reduce motion 選項

Step 8：發佈網站

完成設計，讓網站上線。

8.1 發佈到 Webflow 子網域

免費方案可以發佈到 xxx.webflow.io：

1. 點擊右上角「Publish」
2. 選擇「Publish to Selected Domains」
3. 完成

8.2 連接自訂網域

1. 在 Project Settings → Hosting 中新增自訂網域
2. 依照指示設定 DNS
3. 等待 DNS 生效
4. 發佈到自訂網域

8.3 設定 SSL

Webflow 會自動幫你設定免費的 SSL 憑證。確保網域設定正確後，HTTPS 會自動啟用。

常見問題 FAQ

Q1：Webflow 難學嗎？

比 Wix 難，但比手寫程式碼簡單。

如果你有設計背景或了解基本的 HTML/CSS 概念，學習會比較快。

建議的學習資源：
- Webflow University（官方免費教學）
- YouTube 教學影片
- 實際動手練習

Q2：Webflow 網站效能好嗎？

很好。

Webflow 產生的程式碼很乾淨，加上使用 AWS CloudFront CDN，效能通常很不錯。

Q3：可以匯出程式碼嗎？

可以，但需要付費方案。

匯出的是純靜態 HTML/CSS/JS，可以放到任何主機。

但注意：CMS 內容無法匯出，匯出後也無法在 Webflow 編輯。

Q4：Webflow 可以做電商嗎？

可以，但功能比較基本。

適合小型電商（幾十個產品）。大型電商建議用 Shopify。

Q5：和 Figma 可以整合嗎？

可以。

有一些工具可以把 Figma 設計轉換成 Webflow，但通常需要手動調整。

建議的工作流程：在 Figma 設計 → 在 Webflow 重建（可參考 Figma 設計）

Webflow 架站要點與下一步建議

Webflow 是非常強大的架站工具，特別適合追求設計品質的人。

這篇教學涵蓋的內容：
1. 了解 Webflow 的定位和優缺點
2. 認識介面和基本概念
3. 建立頁面結構和樣式
4. 響應式設計
5. CMS 內容管理
6. 互動動畫
7. 發佈網站

下一步建議：
- 完成 Webflow University 的課程
- 嘗試重建喜歡的網站設計
- 參加 Webflow 社群交流
- 持續練習，累積經驗

Webflow 的學習曲線較陡，但學會之後，你能做出的網站品質會遠超其他平台。

:::cta
想用 Webflow 但沒時間學？
VibeFix 提供 Webflow 網站設計服務，讓專業的來。
了解服務
:::

延伸閱讀

• 2025 網站架設完整指南
• WordPress 架站完整教學
• Wix 架站完整教學
• 網站架設費用完整解析
• 形象網站設計重點解析
• 一頁式網站製作指南