Webflow 教學：從零架站到 CMS、SEO 與上線交付

Webflow 是什麼？適合用來做哪種網站？

Webflow 是一套 No-code 視覺化網站建置平台，適合用來做作品集、品牌網站、企業官網、活動頁與內容型網站。這份 Webflow 教學的重點，是讓初學者理解它如何把設計、CMS、SEO 與上線流程放在同一個架站工具裡。

跟只用拖拉元件拼畫面的工具相比，Webflow 更接近「用視覺介面操作 HTML 與 CSS」。你不一定要寫程式碼，但你做的每個 Section、Container、Div Block、Class，都會影響真實網頁結構。這也是 Webflow 架站一開始比較卡，後面比較好控的原因。

Webflow 跟 WordPress、Wix、Framer 最大差異

Webflow 最大差異在於它同時重視版面控制、CMS 與主機託管。WordPress 比較像內容管理系統與外掛生態，Wix 比較偏快速入門，Framer 則偏設計展示與互動感。

工具	較適合情境	要注意的地方
Webflow	品牌網站、企業官網、作品集、內容型網站	需要理解版面結構、Class、RWD 與 CMS 規劃
WordPress	內容量大、需要大量外掛、多人長期經營的網站	主機、安全性、外掛維護與效能需要另外管理
Wix	小型網站、短期活動頁、預算與時間有限的入門需求	細節控制與後續客製彈性通常較有限
Framer	設計師個人頁、產品概念頁、互動展示頁	內容管理與商業網站維護要先確認需求是否足夠

Webflow 適合做作品集、品牌網站還是企業官網？

Webflow 三者都能做，但最適合的是需要設計質感、頁面速度、內容維護與基本 SEO 同時兼顧的網站。設計師作品集可以用 Webflow 展示作品細節，小型企業官網可以用它管理服務頁與案例頁，顧問個人品牌頁則能結合文章、案例與表單。

我會把 Webflow 優先推薦給「網站不是每天大量發文，但每一頁都需要好看、好讀、好維護」的情境。如果你的網站核心是上千篇文章、會員、論壇或完整電商流程，先評估 WordPress、專門電商系統或客製開發會更務實。

開始學 Webflow 前，需要先準備什麼？

開始學 Webflow 前，先準備網站目標、頁面清單、文案、品牌素材、CTA、圖片與網域。很多 Webflow 初學者不是卡在工具，而是還沒想清楚網站要放什麼內容，結果一進編輯器就開始亂堆區塊。

最有效的入門方式，是先把網站當成一份可上線的內容專案，而不是一張空白畫布。你不用一開始就做到完美，但至少要知道首頁、關於頁、服務頁、案例頁、聯絡頁各自要回答什麼問題。

最小可行網站頁面清單

最小可行網站通常需要首頁、關於頁、服務或作品頁、案例或文章頁、聯絡頁。這些頁面可以先做少量版本，重點是每一頁都有明確任務。

頁面	用途	開始前要準備
首頁	說明你是誰、提供什麼、適合誰	主標題、服務摘要、主要 CTA
關於頁	建立信任與背景說明	品牌故事、經驗、照片或識別素材
服務頁	讓使用者理解方案與流程	服務項目、適用對象、常見問題
案例或文章頁	承接 SEO、展示成果或知識內容	分類、標題格式、CMS 欄位
聯絡頁	收集詢問與轉換	表單欄位、信箱、感謝訊息

沒有 Figma 設計稿能不能開始？

沒有 Figma 設計稿也可以開始，但要先有頁面架構與內容草稿。初學者可以用低保真線框，先決定每個區塊的順序，再進 Webflow 做視覺樣式。

如果你已經熟 Figma，可以先把首頁切成 Hero、問題描述、服務介紹、案例、FAQ、聯絡區塊。若你不熟設計工具，直接用文字列出區塊順序也可以。實務上我寧可看到一份普通但完整的頁面草稿，也不想看到一張漂亮卻沒有內容邏輯的設計稿。

內容先準備，還是邊做邊補？

核心頁面要先準備內容，細節可以邊做邊補。首頁標題、服務名稱、CTA、案例摘要、表單目的，這些會影響版面長度與元件結構，不能全部等到最後才補。

如果內容還不穩，可以先用接近正式語氣的草稿，不要塞無意義假字。假字會讓按鈕寬度、段落高度與手機版換行都失真，後面調 RWD 時容易重做。

Webflow 基本觀念：Box Model、Class、Section、Container

Webflow 的基本觀念是用視覺介面建立真實網頁結構。Box Model 控制間距與尺寸，Class 控制樣式重複使用，Section、Container、Div Block 則負責頁面層級。先懂這些，Webflow 架站才不會越做越亂。

初學者最常犯的錯，是把 Webflow 當成平面設計軟體，只看畫面像不像，沒有看元素層級。網站會在不同螢幕寬度下重新排列，所以每個區塊都要有清楚的父層、子層與樣式邏輯。

Webflow 不是畫圖工具，而是在產生網頁結構

Webflow 每放一個元素，背後都會形成網頁結構。Section 通常是大區塊，Container 控制內容最大寬度，Div Block 用來包住卡片、欄位、按鈕群或文字組。

舉例來說，企業官網的服務區塊可以是 Section 裡放 Container，Container 裡放標題與三張服務卡片，每張卡片再由 Div Block 包住標題、描述與連結。這樣做比直接把文字和按鈕散落在頁面上更容易維護。

Class 命名怎麼避免後面改不動？

Class 命名要描述用途與結構，避免只用顏色或位置命名。像 service-card、hero-title、section-header，比 red-box、text-big、left-block 更容易在後續修改時理解。

同一種卡片樣式就共用 Class，需要局部調整時再加 Combo Class。初學者常因為每個元素都新增不同 Class，導致全站樣式失控。我的判斷是，若你改一張卡片時不知道會影響哪幾頁，Class 系統已經需要整理。

Section、Container、Div Block 的使用順序

常見順序是先放 Section，再放 Container，最後用 Div Block 組織內容。Section 負責背景與上下間距，Container 控制內容寬度，Div Block 負責局部排版。

如果你要做一段客戶案例，可以先建立案例 Section，裡面放 Container，再放一個 Grid 或 Flex 容器。想理解 Flexbox 與 Grid 的差異，可以延伸閱讀 CSS Flexbox 與 CSS Grid，這會直接影響 Webflow 裡的排版判斷。

從零建立第一個 Webflow 專案

建立第一個 Webflow 專案時，先從 Dashboard 新增網站，選擇空白專案或範本，再到 Site Settings 設定網站名稱、語系、SEO 基本資料與發布相關選項。第一次練習建議先用小型網站，不要一開始挑戰完整企業官網。

Webflow 入門最怕專案太大。你可以先做一個三頁網站：首頁、服務頁、聯絡頁。做完一次完整上線流程，比只學很多單點功能更有價值。

空白專案 vs 範本，初學者怎麼選？

想理解 Webflow 結構，就選空白專案；想快速看懂成品如何組成，可以先拆範本。空白專案比較慢，但能訓練 Section、Container、Class 與 RWD 的基本功。

範本的好處是能看見完整頁面邏輯，缺點是初學者可能只會改文字和顏色，不知道結構為什麼這樣排。若你的目標是接案或做企業網站，我建議至少完成一次空白專案，才不會每次遇到跑版都只能重套範本。

Site Settings 裡先設定哪些項目？

Site Settings 先處理網站名稱、預設 SEO 資訊、語系、Favicon、Open Graph、表單通知與發布設定。正式上線前，再補 Custom Domain、SSL、Sitemap 與索引相關檢查。

這些設定不一定都在第一天完成，但越早確認越能避免返工。尤其是網站名稱、網域、URL Slug 命名規則，會影響 SEO、分享預覽與交付文件。

用 Cloneable 學習別人的結構

Cloneable 適合拿來學結構，不適合直接改成商業網站就上線。你可以打開別人的 Webflow 專案，觀察元素層級、Class 命名、RWD 斷點與 CMS 綁定方式。

拆 Cloneable 時不要只看動畫效果，先看它的 Navigator 裡怎麼分層，再看 Style panel 怎麼設定寬度、間距與排列。看懂這些，才是真的學會 Webflow，而不是只複製外觀。

把設計稿做成 Webflow 網頁

把設計稿做成 Webflow 網頁，要先拆區塊，再建立共用元件，接著處理桌機版、平板版與手機版 RWD，最後才加互動效果。Figma to Webflow 的關鍵不是照圖貼上，而是把設計轉成穩定的網站結構。

如果你是 UI/UX 設計師，最需要轉換的觀念是：設計稿裡的群組不一定等於 Webflow 裡的結構。網站需要考慮內容變長、圖片比例不同、手機換行、CMS 重複資料，這些都會影響做法。

先拆區塊，再做元件，不要直接照畫面堆元素

設計稿要先拆成 Hero、特色、服務、案例、FAQ、聯絡等區塊，再找出可重複使用的卡片、按鈕、標題組與表單元件。先拆結構，後面才容易維護。

例如服務型公司網站常有三到六個服務項目，這些卡片應該共用同一套 service-card 樣式。若每張卡片都獨立調整，短期看起來方便，長期會讓 CMS、RWD 與後續改版變得很痛苦。

桌機版完成後，如何調整平板與手機？

桌機版完成後，要依序檢查平板、手機橫向與手機直向的斷點。優先調整寬度、欄數、文字行距、按鈕排列與圖片比例，而不是每個元素都重新設計一次。

常見做法是桌機三欄卡片改成平板兩欄、手機一欄；左右並排的圖文區塊在手機改成上下排列。你可以把 RWD 想成內容優先順序的整理，不是把桌機版硬塞進小螢幕。

互動動畫什麼時候該加，什麼時候不要加？

互動動畫只在能幫助理解、引導視線或提升品牌感時加入。若動畫讓載入變慢、按鈕難點、內容閱讀被打斷，就不值得加。

作品集網站可以用細緻動效呈現個人風格，企業官網則要克制。行銷頁最重要的是讓使用者看懂服務、信任內容並完成表單，動畫只是輔助，不該搶走主要資訊。

Webflow CMS 教學：哪些內容該做成 Collection？

Webflow CMS 的 Collection 適合管理會重複出現、格式固定、需要新增多筆的內容，例如部落格文章、案例、團隊成員、服務項目與常見問題。只出現一次的頁面，通常用靜態頁更清楚。

CMS 規劃是很多 Webflow 教學容易略過的部分，但它會決定網站後台好不好用。Collection 設錯，前台看起來仍可上線，後台維護的人卻會每天被欄位名稱與內容規則卡住。

靜態頁與動態頁怎麼判斷？

判斷方式很直接：只需要一頁、內容不會大量新增，用靜態頁；同一種內容會一直新增多筆，用動態頁與 Collection。

內容類型	建議做法	原因
關於我們	靜態頁	內容通常只有一份，版面可自由設計
服務介紹	視情況使用靜態頁或 Collection	服務少可用靜態頁，服務多且格式固定可用 CMS
部落格文章	Collection	標題、作者、分類、日期、內文格式可重複管理
客戶案例	Collection	每個案例欄位類似，適合建立案例頁模板
活動頁	視活動頻率判斷	單次活動用靜態頁，長期活動列表用 CMS

Collection 欄位怎麼命名？

Collection 欄位要用維護者看得懂的名稱，並讓欄位對應前台用途。文章 Collection 可包含標題、URL Slug、摘要、分類、作者、發布日期、SEO Title、Meta Description、Open Graph 圖片欄位。

案例 Collection 可包含客戶名稱、產業、服務項目、成果摘要、案例內文、排序權重與是否顯示於首頁。欄位不是越多越好，欄位越多，維護者越需要清楚規則。若欄位名稱只有設計者看得懂，交付後很快會出問題。

哪些欄位要留給客戶或團隊編輯？

適合開放編輯的是標題、摘要、內文、分類、圖片、發布狀態與 SEO 摘要；不適合隨意開放的是版面結構、進階樣式、重要轉址與全站設定。

交付企業官網時，我會把可編輯欄位限制在內容維護需要的範圍。這不是限制客戶，而是避免後台使用者改到會影響全站樣式與索引的地方。若團隊需要長期寫文章，可以補一份 CMS 基礎說明 或參考 CMS 選擇指南 來統一維護規則。

Webflow SEO 基礎設定怎麼做？

Webflow SEO 基礎設定要逐頁處理 SEO Title、Meta Description、URL Slug、Heading、圖片替代文字、Open Graph、Sitemap、Robots、Canonical 與 Noindex。重點不是填滿欄位，而是讓搜尋引擎與使用者都看得懂每一頁的用途。

Webflow 對 SEO 友善與否，取決於你有沒有把架構做好。工具提供欄位，不等於網站自動有排名。尤其是 CMS 頁面，如果模板與欄位規則沒設好，後續每新增一篇文章都可能帶著同樣錯誤上線。

每個頁面都要設定的 SEO 欄位

每個重要頁面都要設定頁面標題、Meta Description、清楚的 URL Slug、唯一 H1、合理 H2/H3、圖片替代文字與社群分享預覽。這些欄位會影響搜尋結果呈現、分享點擊與頁面理解。

首頁標題要講清楚品牌與主要服務，服務頁標題要對應服務名稱與地區或對象，文章頁則要符合搜尋意圖。若你正在規劃企業官網，也可以延伸看 企業網站建置 的頁面架構做法。

CMS 頁面如何套用動態 SEO 標題？

CMS 頁面應使用 Collection 欄位產生動態 SEO 標題與描述。文章頁可以用文章標題搭配品牌名稱，案例頁可以用客戶產業、服務項目與案例名稱組合。

更好的做法，是在 Collection 裡保留獨立 SEO Title 與 Meta Description 欄位，讓重要頁面可以手動調整。若欄位留空，再回退到文章標題與摘要。這樣能兼顧維護效率與重要頁面的搜尋呈現。

如何避免空 CMS 頁面被索引？

避免空 CMS 頁面被索引，要先檢查內容是否完整，再決定是否發布，必要時使用 Noindex 或暫時不公開。不要把只有標題、沒有內文、沒有摘要的 CMS 頁面直接上線。

上線前可以篩選 Collection 裡缺少主圖、摘要、SEO 欄位或內文過短的項目。若網站已有大量舊內容，還要檢查 Canonical、Sitemap 與內部連結，避免搜尋引擎抓到重複或低品質頁面。想理解體驗指標與 SEO 的關係，可延伸閱讀 Core Web Vitals。

Webflow 網站上線前檢查表

Webflow 網站上線前要檢查 Custom Domain、SSL、DNS、GA4、Google Search Console、Sitemap、Noindex、301 Redirect、表單通知與手機版顯示。發布按鈕只是上線的一步，真正重要的是確認網站能被正確瀏覽、追蹤與索引。

這個階段最容易出現「畫面看起來好了，但技術設定漏掉」的問題。尤其是舊網站搬到 Webflow 時，URL、轉址與索引設定會直接影響既有 SEO 成效。

發布前 10 個必檢項目

發布前至少檢查十個項目：網域、SSL、DNS、表單、RWD、SEO 欄位、Sitemap、Noindex、追蹤碼與轉址。每一項都要實際打開或測試，不要只看設定頁。

檢查項目	要確認什麼	漏掉的風險
Custom Domain	正式網域是否正確連到網站	使用者打不開網站或連到舊頁
SSL	網址是否使用 HTTPS	瀏覽器警示與信任感下降
DNS	網域紀錄是否依平台指示設定	部分地區或裝置無法連線
表單	送出後是否收到通知	詢問流失但團隊不知道
RWD	手機、平板、桌機是否正常顯示	手機使用者體驗不佳
SEO 欄位	Title、Description、Slug 是否完整	搜尋結果呈現不清楚
Sitemap	重要頁面是否可被提交	搜尋引擎發現頁面較慢
Noindex	測試頁、空頁是否避免索引	低品質頁面被收錄
GA4	是否能收到流量事件	上線後無法判斷成效
301 Redirect	舊網址是否導向新網址	既有流量與權重流失

GA4 與 Google Search Console 何時設定？

GA4 與 Google Search Console 最好在正式上線前設定，並在上線當天確認資料有進來。GA4 看使用者行為，Google Search Console 看索引、搜尋字詞與技術問題。

不要等網站上線一個月後才想看成效。若追蹤一開始沒裝好，後面就少了一段關鍵資料。對企業官網來說，表單送出、電話點擊、重要按鈕點擊都可以列入追蹤規劃。

舊網站搬到 Webflow 時為什麼要做 301？

舊網站搬到 Webflow 時要做 301 Redirect，因為舊網址可能已經有搜尋排名、外部連結與使用者書籤。若不轉址，使用者會遇到錯誤頁，搜尋引擎也難以理解新舊頁面的對應關係。

轉址不是只把首頁導到首頁，而是要把重要舊頁對應到最相關的新頁。若要建立轉址表，可以參考 301 轉址與 HTTPS 的基本觀念，再逐一檢查舊網址是否有正確落點。

Webflow 價格、限制與適用情境

Webflow 價格與方案會調整，2026 撰寫或發布前都應以官方方案頁為準，不要在文章裡寫死金額。判斷 Webflow 是否適合，應看正式網域、CMS、託管、匯出、維護成本與團隊能力，而不是只看月費高低。

Webflow 很適合重視設計品質與前台體驗的網站，但它不是所有架站需求的最低成本答案。若你需要大量外掛、完整會員系統、複雜電商或特殊後端流程，要先確認 Webflow 是否能承接。

Webflow 免費版可以正式上線嗎？

Webflow 免費版適合練習、測試與內部預覽，不適合作為正式商業網站的最終上線方式。正式網站通常需要自訂網域、品牌呈現、表單、CMS 或流量相關能力，這些都可能牽涉方案限制。

發布前請回到 Webflow 官方方案頁確認當下的免費版、Site plan、Workspace、CMS 與 Hosting 限制。不要用舊文章的價格做採購決策，因為方案名稱、額度與功能可能變動。

Webflow 缺點有哪些？

Webflow 常見缺點包含學習曲線較高、CMS 與方案限制要先理解、進階需求可能需要額外工具、匯出與託管不等同完整搬家，以及客戶後台權限需要規劃。

對初學者來說，最真實的門檻不是英文介面，而是網頁結構觀念。對企業主來說，最需要注意的是後續誰維護、誰能改 CMS、誰負責 SEO 檢查。若這些責任沒分清楚，再好的網站工具也會變成維運成本。

什麼情況該選 WordPress、Wix 或 Framer？

內容量大、外掛需求多，優先評估 WordPress；只要快速做簡單網站，可評估 Wix；重視設計展示與互動概念頁，可評估 Framer；需要設計控制、CMS 與上線品質平衡，再選 Webflow。

需求	較適合工具	判斷理由
顧問個人品牌頁	Webflow 或 Framer	頁面少、重視設計與轉換
小型企業官網	Webflow 或 WordPress	看 CMS、維護人力與擴充需求
大型內容站	WordPress	內容管理、權限與外掛選擇較成熟
短期活動頁	Wix、Framer 或 Webflow	看上線速度、設計需求與追蹤設定
接案作品集	Webflow 或 Framer	需要展示設計能力與作品細節

初學 Webflow 最常遇到的錯誤

初學 Webflow 最常遇到的錯誤是 Class 命名混亂、RWD 跑版、圖片過大、動畫卡頓、CMS 空頁發布與 SEO 欄位漏填。這些問題多半不是工具壞掉，而是結構、素材與發布檢查沒有做好。

排錯時不要急著刪掉重做。先看 Navigator 的元素層級，再看 Class 是否共用，接著檢查斷點、寬度、圖片尺寸與 CMS 欄位。問題通常會在這幾個地方出現。

Class 命名亂掉怎麼救？

Class 命名亂掉時，先列出頁面上重複出現的元件，再把相同用途的樣式合併成共用 Class。不要一邊看一邊隨手改，否則容易把能運作的頁面也改壞。

實務做法是先處理按鈕、卡片、標題組、Section 間距這四類。把主要樣式統一後，再刪除不用的 Class。若是已上線網站，修改前要先複製測試版本，避免直接影響正式頁面。

手機版跑版通常是哪裡出問題？

手機版跑版通常來自固定寬度、過大的圖片、沒有換行的文字、Grid 欄數未調整，或父層與子層寬度互相衝突。先檢查是否有元素寬度超過螢幕。

常見修法包含把固定 px 寬度改成百分比或最大寬度、讓三欄卡片改成單欄、調整文字大小與行距、檢查圖片是否有正確縮放。若你常遇到手機跑版，代表你需要補一點前端基礎，可參考 設計師學前端 的學習方向。

圖片太大會影響哪些 SEO 與體驗指標？

圖片太大會影響載入速度、手機體驗、互動等待與 Core Web Vitals。搜尋引擎不只看文字，也會看使用者能不能順利打開與閱讀頁面。

Webflow 裡的圖片要注意檔案大小、顯示尺寸、替代文字與是否真的需要。不要把設計稿輸出的超大圖片直接放上網站，也不要用背景圖承載重要文字，因為這會同時傷害可讀性、SEO 與維護效率。

Webflow 網站交付與後續維護

Webflow 網站交付不只給網址，還要交付帳號權限、CMS 欄位說明、頁面對照、表單通知、SEO 設定、轉址規則與維護注意事項。交付做得好，團隊才能自己更新內容而不破壞網站。

很多網站專案失敗不是因為上線當天不好看，而是三個月後沒人知道怎麼改文章、怎麼新增案例、怎麼避免 SEO 欄位漏填。交付文件不用厚，但一定要讓維護者看得懂。

交付時不只給網址，還要給什麼？

交付時要提供登入方式、權限角色、頁面清單、CMS Collection 說明、表單收件設定、追蹤工具狀態、網域與 DNS 備註、轉址表與常見維護流程。

如果是接案網站，還要寫清楚哪些地方可由客戶自行編輯，哪些地方需要設計者或網站負責人協助。這能減少後續「只是改一段文字卻動到整個版面」的風險。若企業正在評估自做或外包，可參考 自架網站與外包網站 的分工判斷。

CMS 欄位備註怎麼寫？

CMS 欄位備註要寫給實際維護者看，內容包含欄位用途、建議字數、是否必填、圖片比例、SEO 注意事項與範例。不要只寫給設計師自己看得懂的縮寫。

例如「文章摘要」可以備註為搜尋結果與列表頁可能使用，建議寫一到兩句完整描述；「案例成果」可以備註為前台案例卡片會顯示，避免放太長。好的欄位備註能直接降低後台教育成本。

哪些內容讓客戶自己改，哪些不要開放？

適合讓客戶自己改的是文章、案例、服務文字、團隊成員、FAQ 與簡單圖片；不建議隨意開放的是全站樣式、導航結構、追蹤碼、轉址、Canonical、Robots 與重要 SEO 技術設定。

我的交付原則是：內容讓團隊自由維護，會影響全站結構與搜尋風險的設定要有負責人控管。這樣客戶能更新網站，也不會因為一次誤改造成大量頁面出問題。

Webflow 學習路線與下一步

Webflow 學習路線建議先學結構，再學樣式，接著練 RWD、CMS、SEO 與上線檢查。初學者不要一開始追求酷炫動畫，先做出一個能在手機正常瀏覽、能更新內容、能被搜尋引擎理解的網站。

一個合理的練習目標，是用一週完成一個小型網站，第二週再改成有 CMS 的版本。比起看很多零散技巧，完整做完一次上線流程，會更快知道自己缺哪一塊。

第一週練習順序

第一週先完成首頁、服務頁、聯絡頁，再處理手機版、表單與基本 SEO。不要一開始做太多頁，先確保每個核心流程都能跑完。

階段	練習重點	完成標準
第 1 天	頁面清單與內容草稿	每頁有標題、段落與 CTA
第 2 天	Section、Container、Div Block	首頁結構清楚，不靠亂堆元素
第 3 天	Class 與共用元件	按鈕、卡片、標題組可重複使用
第 4 天	RWD 調整	手機版不跑版，文字可讀
第 5 天	SEO 與表單	主要欄位完整，表單可收到通知

如何用 Cloneable 反推高手架構？

用 Cloneable 學習時，先看 Navigator，再看 Class，最後看互動動畫。順序錯了，就容易只學到表面效果。

你可以挑一個接近自己需求的 Cloneable，例如作品集、顧問網站或服務型公司網站。先記錄它的 Section 組成，再觀察哪些元件共用 Class，哪些地方用 CMS，哪些地方只做靜態頁。這種拆法比單純模仿畫面更有學習價值。

要不要先學 HTML/CSS？

不用先學完整 HTML/CSS 才能開始 Webflow，但要理解基本網頁結構、Box Model、Flexbox、Grid、Class 與 RWD。這些基礎會讓你少走很多彎路。

若你的目標只是做個人網站，可以邊做邊補；若你想接案或做企業官網，建議把前端基礎補到能看懂元素層級與樣式繼承。Webflow 教學的真正目標，是讓你用視覺工具做出可上線、可維護、可被搜尋理解的網站。

Webflow 是什麼？跟一般架站工具差在哪？

Webflow 是 No-code 視覺化網站建置平台，能用視覺介面建立響應式網站、CMS 頁面與基本 SEO 設定。它跟一般入門架站工具的差異，在於更接近真實網頁結構，能控制 Section、Container、Class、RWD 與 CMS 模板。

完全不會寫程式，也能照 Webflow 教學做出網站嗎？

可以，但要懂基本網頁結構。你不需要手寫程式碼，也要理解區塊、容器、間距、Class 與手機版斷點，否則網站容易在後續維護與 RWD 調整時出問題。

學 Webflow 前一定要懂 HTML/CSS 嗎？

不一定要先完整學會 HTML/CSS，但要知道 Box Model、Flexbox、Grid、Class 與元素層級。這些觀念會直接影響你在 Webflow 裡排版、命名與修手機版跑版的能力。

Webflow 適合做企業官網還是作品集？

Webflow 適合做企業官網，也適合做作品集。作品集重視設計呈現，企業官網則要多注意 CMS、SEO、表單、權限與交付維護。若網站需要大量內容與複雜外掛，則要再評估其他系統。

Webflow CMS 是什麼？哪些內容該做成 Collection？

Webflow CMS 是管理動態內容的功能。部落格文章、案例、團隊成員、服務項目、FAQ 等重複格式內容適合做成 Collection；只出現一次的關於頁、聯絡頁，多半用靜態頁即可。

Webflow 對 SEO 友善嗎？上線前要設定什麼？

Webflow 可支援基本 SEO 設定，但結果取決於網站結構與內容品質。上線前要檢查 SEO Title、Meta Description、URL Slug、Heading、圖片替代文字、Open Graph、Sitemap、Noindex、Canonical、GSC 與 GA4。

Webflow 缺點有哪些？

常見缺點是學習曲線較高、方案與 CMS 限制需要確認、進階功能可能要搭配其他工具、匯出與自行託管不一定符合所有需求，還有客戶後台權限需要事先規劃。

Webflow、WordPress、Wix、Framer 怎麼選？

重視設計控制、CMS 與品牌網站品質，可選 Webflow；內容量大、外掛需求多，可選 WordPress；只想快速做簡單網站，可選 Wix；重視設計展示與互動頁，可評估 Framer。

Webflow 免費版可以正式上線嗎？

免費版較適合練習、測試與預覽，不建議當成正式商業網站的最終方案。正式上線通常需要自訂網域、品牌呈現、CMS、表單或流量能力，實際限制要以 Webflow 官方方案頁為準。

Webflow 可以匯出程式碼自己託管嗎？

Webflow 的匯出能力與可用範圍會受方案與功能限制影響，發布前要查官方說明。即使可匯出前台程式碼，CMS、表單、託管與後台編輯能力也不等於能完整搬到任意主機使用。

Webflow 手機版跑版怎麼修？

先檢查固定寬度、圖片尺寸、Grid 欄數、文字換行與父層寬度。常見修法是改用最大寬度、讓多欄改成單欄、壓縮圖片、調整間距，並逐一查看每個 Breakpoint。

做完 Webflow 網站後，要怎麼交給客戶或團隊維護？

交付時要提供帳號權限、CMS 欄位說明、頁面清單、表單收件設定、追蹤工具狀態、轉址表、SEO 注意事項與維護規則。內容欄位可以開放團隊編輯，會影響全站結構與搜尋風險的設定要控管權限。