【Webflow 架站指南】從零開始也能做好! 新手最完整流程教學

Hi!我是吉莉。

你最近是不是也正在做以下這些事?
A|想替自己的品牌快速做出一個漂亮又能代表形象的網站。
B|比較 WordPress、Webflow、Shopify,不確定該選哪一套。
C|在 YouTube 上看了一堆架站教學,但越看越不知道從哪一步開始。
D|明明按著步驟做,卻還是遇到排版跑掉、找不到功能、東西不會動等問題。

你心裡大概也會冒出那句話:
「嗯…我現在做的方式真的安全、正確嗎?」

過去我在不同領域的網站開發、內容架構調整與追蹤事件規劃中,
逐步整理出一套能降低風險、提升穩定性的專案方法論。

因此在介紹 Webflow 時,我不再以工具教學的角度切入,
而是從 「網站 × 專案整合顧問」的視角 出發,
針對資訊結構、互動邏輯、流程一致性與後續擴充性,
說明如何讓建站過程變得更清晰、更可控。


本篇你會拿走的四件事

  1. 必學的 CMS、Tabs 動態內容架構概念
  2. Webflow 新手的最佳上手路線
  3. 真正需要注意的 UI/功能位置(附圖示)
  4. 模版 VS 自建的差異與選法

一、登入 Webflow:介面友善,新手不會迷路

Webflow 從登入開始,整體使用體驗就很簡單直覺。
吉莉我是用 Gmail 登入,你也可以用 email/密碼方式註冊。

吉莉數位|Lucky Nomads-Webflow 登入介面操作示意

二、Dashboard 介面:你會在這裡管理所有網站

登入後會進到 Webflow Dashboard。
若你之前已經建立過網站,會像畫面一樣列出所有專案。

吉莉數位|Lucky Nomads-Webflow Dashboard 站點總覽

你可以點右上角 + New site 建立新專案。


三、建立新站:Blank Site 還是 Template?

進入建立新站的視窗後,你會看到兩種方式:

  • Blank site(空白網站):從零客製化、自由度最高。
  • Template(模版):可 Free(免費)或 Paid(付費),適合追求效率、初次架站者。
吉莉數位|Lucky Nomads-建立新站的兩種方式:Blank 與 Template

吉莉推薦:
✔ 若你剛起步 → 用 Template
✔ 若你想做客製化 → 用 Blank site


四、挑選 Template:免費版也很夠用

Webflow 提供很多風格一致的免費模版,而且可以預覽版本內容。

吉莉數位|Lucky Nomads-Webflow 模版挑選畫面

即便是 Free 版,UI 設計 + 動態效果仍然非常美、非常專業。

你可以點 Preview template 先查看動態效果:

吉莉數位|Lucky Nomads-Webflow 模版預覽功能示意

五、自學架站必學:CMS(內容管理系統)

如果你的網站會包含「文章、案例、部落格內容」,那 CMS 是一定要會的。

在左側工具列就能看到 CMS:

吉莉數位|Lucky Nomads-Webflow CMS 內容管理後台

六、常見卡關:CMS 動態生成 Tabs(範例教學)

很多初學者會遇到的需求:

我想讓 Webflow 的 Tabs 自動依 CMS 新增內容而生成。

用 CMS 做到動態分類 + 動態列表,大概會長這樣:

吉莉數位|Lucky Nomads-Webflow CMS 動態生成 Tabs 規劃示意圖

這類需求確實可能會卡關,但 Webflow 社群提供非常多範例與討論,是很好解法來源。


七、社群資源推薦:英文+中文都很好找答案

Webflow Forum(官方論壇)

吉莉數位|Lucky Nomads-Webflow 官方論壇介面

FB Webflow 中文社群

很多台灣的 Webflow 使用者都在其中交流,也能找到常見的實作案例。


八、Webflow 與其他架站方式比較

項目 Webflow WordPress
適合新手 ✅ 介面友善、快速上手 🟧 中等,需理解主題+外掛
客製化程度 🟧 高 ✅ 非常高(但複雜度也高)
動態效果 ✅ 內建強大互動(無程式碼) 🟧 看主題/外掛需求
價格 🟧 偏高 ✅ 彈性高,適合長期成長

常見問題 FAQ|Webflow 架站流程全指南

Q1|Webflow 新手需要付費才能開始架站嗎?

不需要。你可以用免費帳號練習整個編輯介面,包含版型挑選、元素拖拉、CMS 設定。只有在「要上線網站」或使用進階功能時,才需要購買方案。

Q2|Webflow 適合哪種類型的網站?

最適合:形象網站、作品集、品牌官網、教育型頁面、互動強烈的展示網站。

若你需要台灣金流或大型電商功能,會更建議 WordPress + WooCommerce 或 Shopify。

Q3|如果沒有程式基礎,也能順利使用 Webflow 嗎?

可以。Webflow 主打「零程式碼建站」。大部分互動(Animation / Interaction)都能用可視化介面完成,不需要寫任何 JS 或 CSS。

若你會程式,只會讓客製化能力更強,但不是必需條件。

Q4|Webflow 的 Template(模版)可以完全客製化嗎?

可以。Webflow 所有模版的排版、標題、圖片、段落、按鈕、動畫都能調整。你可以把模版當成「起始點」,再打造專屬自己的品牌風格。

Q5|什麼情況下我應該選擇 WordPress 而不是 Webflow?

若你需要:

  • 台灣金流(綠界、藍新、LINE Pay)
  • 大型部落格或高流量內容網站
  • 大量資料庫內容、自動化 API 串接
  • 更彈性的 SEO 控制(架構化資料、多語系)

這些情況 WordPress/WooCommerce 會更適合你。

吉莉結語|Webflow 適合誰?哪種情況值得用?

如果你符合以下特徵,Webflow 絕對是你該先試的架站工具:

✅ 想用少量時間達到高視覺效果
✅ 想使用零程式碼完成互動效果
✅ 想快速產出形象網站、作品集
✅ 想減少 WordPress 外掛帶來的維護成本

但如果你是這些狀況:

📌 需要金流整合(台灣金流)
📌 要做跨國電商
📌 擁有大量文章/複雜資料流

那 WordPress + WooCommerce 或 Shopify 會更適合你。


延伸閱讀:

可愛的讀者,
有沒有其他想法呢?
都歡迎留言與吉莉討論喔!

吉莉Lucky
吉莉Lucky
文章: 31