在遇到 Weblfow 之前,tenten 大部分協助客戶建立網站都是使用自建 CMS (Laravel, Python), 或是選擇最適合的 CMS 如 Wordpress, Drupal, Magento...等去實現,同時我們也會提供客戶網站維護服務、行銷諮詢、增加 Google Core Web Vitals 等分數 ....等,說穿了, 其實我們就是一個專注於打造網站/ 電商/ 與數位產品的團隊,因此對於數位工具我們必須永遠保持如新創團隊般開放心態並具備相當高的敏銳度去找出最好的專業工具。

一直以來,我們都是用標準的網站製作流程打造網站,直到 2018 年底當我們使用了 Webflow 後,一切都變了!我們嘗試將 tenten.co 的主網站移到了 Webflow,它讓我們可以實現更漂亮的設計及動畫,最重要的是節省了非常多的時間與客戶預算。目前我們已有 20% 的客戶已經協助導入 Webflow 作為他們的 Landing Page 工作流程,另外 10% 則是拿 Webflow 用來製作企業網站。

當我們相信 Always find the right tools for the job, 因此並沒有一樣工具能提供完美的解決方案,本文將分享  WordPress 和 Webflow 兩種 CMS平台的優缺點,讓你在下個專案啟動時能夠有更好的判斷基準。

Why? 我們認為未來的網站將會往 Headless Web 及 No-Code 趨勢靠攏

  • Headless Web: 需要有較有經驗的工程團隊, 選擇自家適合的 Stacks 如 React, Vue, or Gatsby 透過 Netlify, 或 Vercel 這種支援 Headless and Edge Cloud 的網頁發佈服務去搭建, 通常適用於技術力整合能力較高的新創或是很積極轉型的大型企業去部屬。因為其優點實在是太多了, 除了網頁服務速度快, 穩定且可以輕易的服務極高流量之外, 其安全性往往也是 CTO 的重要考量之一。
  • No Code: 一般的 B2B 公司的網站功能不外乎電商, Landing page, 企業形象, 而網站的互動功能如 Form, CRM, Newsletter 也能透過 Martech 工具HubSpot, ManyChat 與 Zapier 輕易的實現自動化, 我們認為 Webflow 在 NoCode 網頁設計工具這段無疑是唯一的贏家。
  • 傳統的 CMS: Wordpress, Drupal, Django, Magento, Kentico, Ghost...等,其中 Wordpress 竟然佔了全球流量超過 40% 的市佔率, 一直以來我們都認為 Wordpress (電商 Woocommerce) 的確是不錯的產品, 但其速度與安全性往往會隨著網站越來越大開始會有 Wordpress 效能的問題,而我們也從 2015 年起也針對這個問題改善開始使用 Wordpress Trellis + Bedrock 替有高流量需求的客戶搭建高效能的 Wordpress; 而最近我們更只搭配 Wordpress API 作前後台分離與 Load Balance 搭配 Vercel 去建構 Headless 網站,以打造更穩定安全的 CMS。
而在電子商務網站我們目前也傾向採用 Headless Commerce (混和 Shopline + Nocode tool like Retool/ Xano) 或是 Shopline, Woocommerce 的 API Eco-system 去做開發。

In my opinion: tenten 對於 Wordpress 的生態系統掌握應該算是台灣數一數二專精的工程團隊,但我們還是認為在 Headless 的浪潮下,未來的網站會慢慢往能夠快速發佈/ 穩定/ 安全的 Headless CMS 或是 No Code 靠攏。

Webflow 與 Wordpress 的比較:

若你懶得看這麼長且精闢文章,當然也可以直接參考下面的影片,快速帶你了解 Webflow vs WordPress 的比較及優缺點。

WordPress vs Webflow 誰才是最強CMS平台?|Tenten

Webflow 和 WordPress主要提供什麼服務?

Webflow 和 WordPress都可以用來創建專業網站,且無需任何編碼知識 (當然偶爾在執行客製化的時候也會需要Coding) 。這兩個平台上都有高質量的預製網站模板可以使用,當然也可以從頭開始設計你的網站。

而這種類型的平台都被稱為 "內容管理系統"(CMS),因為它使用戶能夠使用圖形使用者介面發布部落格、新聞網站、商業網站、Profolio、電子商務線上店等。

首先,它們都是很棒的平台,擁皆有支持它們的 Community。然而,在您創建網站的方式上存在明顯的對比:一個以視覺為重點,而另一個則側重於內容管理。以下是 Webflow 與 WordPress 之間的主要區別。

Webflow 允許設計師建立超美的響應式網站,同時也具有一個用戶友好的前端網站建設者和編輯器,有大量的網站模板可供選擇,同時可支援電子商務(但台灣金流沒辦法走這塊)。

儘管註冊 Webflow 和設計網站是免費的,但如果你想在網上發布網站,當然也是需要註冊一個 premium plan。在 Webflow 中,獨特的設計是使用 Webflow 設計器創建的。這是一個現代化的拖放式頁面編輯器,可以讓你定製排版、顏色、元素、Layout等。

wordpress.com

在 WordPress 的核心版本中,你可以在 WordPress 主題定製器中調整你的網站設計,並使用 WordPress 塊狀編輯器(也稱為 Gutenberg)創建多樣性的貼文和頁面。

Quick Take Away:

Webflow 無疑是一個使用起來更簡單的解決方案,因為大多數管理任務都是在同一個平台理好,且無需增加任何第三方插件。包括網站托管、SSL 、搜索引擎優化和網站備份。

WordPress 則是一個更靈活建站的解決方案,因為可以利用用外掛以成千上萬種不同的方式擴展你的網站,包括 SEO 或是一些其他的客製化需求。

1. 操作易於使用

註冊 Webflow 非常容易,只需電子信箱、密碼和姓名,接著回答一些關於技術經驗和想創建的網站類型的問題及可。

雖然 Webflow 可以讓設計師直接使用空白畫布創建網站,但初學者最好選擇一個可用的模板來練習。

若你以前從未使用過網站頁面生成器,你可能會發現Webflow 設計器一開始有點難用,因為它的介面有幾十個按鈕。Weblfow 官方影片教程可以幫助你了解所有的功能,當然 tenten 也有出了一系列的 Weblfow 基礎課程影片。但最快熟悉使用者介面的最好方法是自己先玩一玩預先製作的模板。

https://www.youtube.com/user/tentencreative/videos


Webflow 發布內容所有的一切都可以在介面中找到,包括你的網站設計、頁面、CMS集合和電子商務產品或是圖片等。部落格文章、類別、項目、活動、列表和其他類型的內容可以使用CMS集合來創建。在 Dashboard 工作版這邊,您可以配置網站設置、Hosting、Billing、SEO、備份、與第三方整合甚至客製化 Code。

在 WordPress,你需要安裝一些基礎的插件才能開始施作一些功能。雖然大多數網站托管公司都會為你安裝WordPress,這也意味可以替你省去大部分的時間。

如果你想寫部落格文章和頁面,WordPress 的塊狀編輯器提供了比 Webflow 更友好的用戶體驗。從設計的角度看,它的功能不那麼強大,然而我們相信 WordPress 的最小化編輯方法會比較適合部落格和作家。

大多數 WordPress 主題允許你使用 WordPress 主題定製器來修改你的網站設計。像塊狀編輯器一樣,這些自定義器很容易使用,有時在設置之間不斷地來回跳動可能會很麻煩。

https://elementor.com/


WordPress的主管理菜單可以在管理區的左側找到。一切都可以從這裡控制,包括帖子、頁面、主題、外掛和設置。

https://wordpress.org/plugins/classic-editor/

初學者應該能夠自如地配置 WordPress,但由於 WordPress 是一個自我托管的解決方案,確實需要對安全、更新和性能採取更多的實踐方法。

有了 WordPress 的自動更新系統和管理 WordPress 的托管公司負責托管、安全和備份,管理 WordPress 網站要比以前容易得多。以前 WordPress 的安全問題在過去幾年中一直都是它們的大問題,但目前管理 WordPress Hosting 公司已經接管了許多這些責任,所以它不像以前那樣如此不穩定了。

2. Template 和使用者介面

Webflow的模板系統非常棒!每個模板,你可以看到描述、 截圖預覽和功能列表。有些模板甚至可以 Clone 來更改,你可以再 Weblfow 裡面預覽或是直接以網頁的方式預覽。Webflow 大部分可購買的 Premium 主題在 19 美元至 149 美元之間。

當然我們也會通過像是 Flowbase 等第三方平台來找 Webflow 模板,但通常這些模板可能比較單薄一些,或許找一些 UI widget會很適合。

Webflow Designer 是一個 all-in-one 的解決方案,同時也是添加內容及網站設計進行修改的地方。它是 Webflow 的核心,也是最大的服務賣點。儘管有時候載入介面會需要一些時間,尤其是遇到網路很慢的時候。(像是下面這樣)

沒事的深呼吸!很快就轉完了

Webflow 中有大量的元素可用,包括動畫、CSS過渡、符號、圖像、影片和其他媒體。所要做的就是點擊頁面的編輯器來改變它的設計、大小、顏色等等。對於開發者來說,也有一些有用的選項,包括一個樣式管理器和一個導出程式碼的選項,如 HTML、CSS 和 Javascript。預製的布局可以在幾秒鐘內用於建構頁面,並且可以使用內置的導航器查看頁面的結構。

由於 WordPress 擁有網上最大的網站所有者和開發者社區,你可以獲得大量的免費和高級主題和外掛。


在官方的 WordPress 主題目錄中,有大約 4000 個免費的 WordPress 主題,還有超過 10,000 個來自第三方開發者的免費和高級設計。

儘管 Webflow 設計器比 WordPress 原生提供的任何東西都更精巧,但 WordPress 用戶可以使用 ElementorDivi BuilderBeaver Builder 等 WordPress 頁面建設外掛來讓整個設計界面更加完善。

這些前端頁面編輯器為你解鎖了數以千計的新設計選項,併為你提供了比 Webflow 更高級的設計選項,如模板系統、改進的行銷整合和大型布局。

3. CMS 內容管理系統的功能

Webflow 允許您輕鬆添加頁面並將其分配到資料夾中。這種分層管理頁面的方式真的很有幫助。對於每一個頁面,你可以定義標題、slug 和 SEO 設置。且每個 item 都可以獨立成為一個頁面,這就是 Webflow 非常強大的地方。

Webflow 有個比較致命的缺點 - 網站被限制在100頁以內,但你仍可以利用購買 CMS plan 的集成來解決這個痛點,這種方式在團隊、產品或是 blog 文章統一格式來說效果非常好,但若要編寫深入的內容仍有限制。

無論你在網站的後台還是前台進行編輯,因為只有少數的格式選項,而且頁面上發生的事情太多,無法讓你專注於寫作。與其直接在 Webflow 中編輯內文,我們會建議若有中文的需求先在其他地方完成之後再複製貼上 Weblfow 編輯會是比較快的。

另一方面,WordPress 是一個真正的內容管理系統。對你添加多少貼文、頁面、用戶或圖片沒有任何限制。自定義貼文類型允許開發人員使用 WordPress 外掛添加其他類型的內容。這使得 WordPress可 以被改造成會員制網站、討論區等等。

隨著你添加更多的外掛,WordPress 可能會變得有點慢,但不可否認的是,它仍是網上最強大和最靈活的解決方案之一。甚至可以將 Webflow 整合到 WordPress 網站中!

雖然不像 Ghost 部落格平台那樣簡約,但我一直認為在 WordPress 的塊狀編輯器中編寫內容是一種樂趣。

全屏編輯模式去掉了 WordPress 的管理菜單,所以你看到的只有你的文章,每當想添加其他媒體內容時,只需要點擊頁面頂部的 "+"圖標,就可以載入可用的內容塊。

對於那些喜歡在 "所見即所得"(WYSIWYG)風格的編輯器中寫作的人來說,經典的編輯器仍然可用,你也可以使用頁面生成器 WordPress 外掛在網站的前端編輯內容。

Quick Take Away:

Webflow 雖然是一個很棒的解決方案,可以讓你添加許多類型的內容,但只有 100 頁的限制是大家都要留意的,儘管這個限制對大多數網站所有者來說不應該是一個問題,且他其實是可以靠升級 CMS Plan 來解決的。

WordPress 是一個更強大的內容管理系統。對你添加多少項目沒有限制,而且 WordPress 的自定義帖子類型允許你以許多奇妙的方式擴展平台。撰寫長篇內容也是一種更愉快的體驗。

4. 電子商務平台 Ecommerce

Webflow 讓您只需點擊一個按鈕即可創建一個網上商店。計劃的費率為每月 29 美元起,這與使用其他電子商務解決方案如 BigCommerce、Shopify 和 Squarespace 的費用差不多。

實體或數位產品都可以通過你的 Webflow 商店銷售,可以在任何時候添加新的產品和類別,並定義自定義產品欄位、產品變數、銷售價格、優惠券和促銷活動。甚至還可以為世界各地得地區設置稅收和運輸規則,並可以在專門的訂單頁面上查看所有訂單。

Webflow 可以讓您使用信用卡、Stripe、Apple Pay、Google Pay 和 PayPal 接受來自 200 多個國家的付款。每售出一件產品都有 2% 的交易費,若升級到電子商務 Plus 計劃,這筆費用就會被取消。但千萬要注意的是!因為 Webflow 目前和台灣金流還沒辦法串接,因此台灣電商不建議使用 Weblfow 來發展業務。

最多人使用 WordPress 的電子商務解決方案  -WooCommerce。數以千計的免費和高級 WordPress 外掛可以幫助你大大擴展功能,這給店主提供了一個開放的商店畫布。

雖然 WooCommerce 都可以免費下載和使用,但請注意,你可能需要購買高級外掛來獲得你需要的功能。這可能會大大增加你的商店的營運成本。

5. 技術支援

無論你選擇什麼平台,獲得良好的技術支持都是非常重要的。

為了更好地了解 Webflow 的功能,我建議查看 Webflow 大學的影片,因為它有數百個影片課程、課程和教程,以幫助您最大程度地利用該平台。你也應該看看 Webflow 的部落格,因為他們會定期發布有用的提示和使用 Webflow 創建的網站的例子。

從積極的方面看,Webflow 有英語討論區 ; tenten 也有提供 中文討論區,你可以在那裡尋求幫助。

Facebook Webflow 中文社群

Webflow 官方也有提供定期的 community活動,每個人都可以免費參加。還有一個狀態工具,幫助你檢查服務的運行狀態。

WordPress.org 擁有一個超大的論壇,可以幫助你學習這個平台並解決你可能面臨的常見問題。由於 WordPress 是最流行的網站建設方式,在網上快速搜索也會出現數以萬計的 WordPress 教程。

如果你需要支持,你可以在 WordPress.org 支持論壇上尋求幫助,不過要注意的是,在官方支持論壇上獲得良好的支持可能會有一點失誤,因為幫助是由其他 WordPress 用戶提供的。

由於 WordPress 的 Hosting 是一個開放原始碼的解決方案,所以沒有辦法從WordPress 本身獲得直接的幫助,但是絕大多數網站托管公司都會幫助客戶解決 WordPress 的問題。

Webflow 有一個很好的 support 和資料查找區,而對於大多數 WordPress 網站所有者來說,這些 support 是由他們的主機公司提供的。因此,當你為公司的 WordPress 網站選擇一個主機時,請務必考慮到他們所提供的服務質量。

6. 費用

Webflow 的定價政策是透明的,其年度會員的費用比月度會員的費用低 20% 左右。註冊 Webflow 並創建兩個項目是免費的。請注意,免費帳戶實際上只是用於測試。它不允許你添加頁面,也限制了其他一些功能。

你可以以每月 24 美元的價格將項目數量增加到 10 個,以每月 42 美元的價格增加無限的項目。這些價格降低到每月 16 美元的價格,如果你每年支付,則為每月 35 美元。

如果你需要與團隊成員合作,也可以在頂級專業計劃中增加額外的用戶。

當你準備在網上發布你的項目時,你將需要從三個可用的網站計劃中選擇一個。這些計劃的零售價為每月 15 美元、20 美元和 45 美元。如果你按年支付,這些計劃的有效費率降低到每月 12 美元、16 美元和 36 美元。


從流量的角度來看,Webflow 的定價是非常有競爭力的。他們的基本計劃允許每月有 25,000 名訪客,他們的 CMS 計劃允許 100,000 名訪客,而他們的商業計劃允許高達1,000,000名。

Webflow 將所有網站限製為 100 個靜態頁面。這對大多數企業來說不應該是一個問題,因為關鍵頁面,如你的關於和聯繫頁面,可以作為靜態頁面存儲,集合項目可以用來發布其他類型的內容。

三個電子商務計劃可供那些想在其網站上銷售產品的人使用。它們的零售價為每月 42 美元、83 美元和 235 美元。如果按年支付,這些計劃減少到每月 29 美元、74 美元和 212 美元的有效價格。


標準電子商務計劃是建立在 CMS 計劃之上的。它允許 500 種產品,3 個員工帳戶,年銷售額為 50,000 美元。

高級計劃是建立在商業計劃的基礎上。它取消了 2% 的交易費,並將您的產品數量增加到 1,000件,員工帳戶增加到 10 個,年銷售額增加到200,000美元。高級計劃允許 3,000 件產品,15 個員工帳戶,以及無限的年銷售額。

由於 Webflow 的每月費用是固定的,如果你知道你的流量水平和你的電子商務利潤水平,就可以相當直接地計算出他們的服務將花費你多少錢。

雖然 WordPress 是免費下載的,但你需要考慮到許多其他的事情。使用 WordPress 的有效成本有可能低於 Webflow,也可能大大高於 Webflow。

這完全取決於你選擇什麼樣的網站托管套餐,你使用什麼樣的 WordPress 主題,以及你依靠什麼樣的高級 WordPress 外掛來運行你的網站。

tenten 提供的 Hosting 託管服務分為三種 Starter/ Growths/ Professional Plan,取決於你的流量及需求。年費通常是美金 $700/ $1,300 / $2,000。細節可以參考 Hosting 的Pricing 頁面。若不知道自己適合哪種,歡迎聯繫我們來幫你評估。

用 WordPress 營運一個網上商店的成本也有很大的不同。你可以使用 WooCommerce 和 Easy Digital Downloads 等免費外掛建立一個簡單的網上商店,但你可能最終每年花費數千美元來獲得你營運商店所需的額外功能。

結論: Webflow 與 WordPress 都幾?

Webflow 和 WordPress 都是現代超級超級偉大的網站建設解決方案,且各有好壞。需要考慮到很多因素,像是你需要網站的功能、預算、託管方式以及公司內部是否有管理人員可以維持等。

Webflow 的主要特點

  • 拖放頁面構建器
  • 可導出的干淨且合規的代碼
  • 快速加載時間
  • 自定義 301 重定向
  • 每日網站備份
  • 添加您需要的任何代碼
  • 使用來自 Google 和 Typekit 的任何字體(2000 多種字體系列)
  • 響應式圖像
  • 100 多個響應式網站模板
  • 無代碼設計交互
  • Zapier 集成
  • 對 SEO 友好
  • 內容模板
  • 將 CMS 內容導出為 CSV
  • HTML/CSS 滑塊和輪播
  • 社交分享
  • 谷歌分析集成
  • 在 Webflow 中從 Google Domains 購買域名
  • 電子郵件支持和優先支持取決於您的計劃。

我們相信 Webflow 對於初學者、中小型網站所有者和那些想開網店的人來說是個不錯的選擇。它的製作成本大大降低,且該服務解決了營運網站的許多耗時問題,這樣你就可以專注於創建內容和行銷你的產品。

WordPress的主要特點

  • 高靈活性
  • 搜索引擎優化友好
  • 58,000 多個 WordPress 插件可擴展您的網站功能
  • 龐大的 WordPress 社區可以交流想法並尋求同行的幫助
  • 移動響應
  • 媒體管理
  • 用戶管理
  • 完全合規
  • 網站主題
  • 擁有您的數據

當您使用 WordPress 時,很容易使用模板和主題自定義設計。但是,如果您想要一個完全定制的網站,您需要自己編寫代碼或聘請開發人員。

雖然 Webflow確實有一些對開發人員和設計師是一個非常棒的選項,但 WordPress 無疑是更強大的網站建設平台。不會被添加多少頁面所限制,多少人都可以同時編輯的網站,也不會被頁面建構器來設計網站所限制。當然也可以自由地改變你使用的電子商務解決方案。

WordPress 對作家來說也是更好的解決方案。編輯體驗不像 Webflow 那樣讓人感覺介面繚亂,可以使用外掛完全改變你的寫作和設計的設置。

更多產業關鍵字:

Webflow 中文熱門關鍵字

  • webflow教學
  • webflow作品集
  • webflow wordpress比較
  • webflow缺點
  • webflow免費
  • webflow中文
  • webflow是什麼
  • webflow後台
  • webflow台灣
  • webflow介紹

Wordpress 中文熱門關鍵字

  • wordpress登入
  • wordpress教學
  • wordpress架站
  • wordpress官網
  • wordpress意思
  • wordpress是什麼
  • wordpress缺點
  • wordpress網站範例
  • wordpress下載
  • wordpress課程

了解更多:
Webflow 與 Squarespace 都幾?超詳解比較
這麼多年來,我們一直在使用且比較眾多 CMS 網站建置平台,Webflow 與 Squarespace 都是兩個令人印象深刻的且對設計友好的平台。如果你正在閱讀本指南,那麼你可能已經略知幾點。我們將直接跳到它們之間的區別:Webflow 使用難度高,但提供了更大的靈活性,而 Squarespace 提供了易用性、高質量的功能和令人驚嘆的模板—以完全設計自由為代價。
Wix vs Squarespace都幾?超詳解比較
Squarespace 和 Wix 是網站建設者領域的兩個超大的入門平台,我們看過很多開發經驗較弱的設計師都使用 Wix 來製作自己的作品集網站,因為介面非常直觀,透過拖拉是即可完成一個還不錯看的網站,然而 Wix 也是一個多合一的平台網站,可以讓你啟用及管理不同類型的網站。Squarespace 則更適合較新創商業網站或是剛入行的設計師,通常使用 Squarespace 的設計師網站往往看起來比較吸睛,因為它強大的套版可以讓你的網站看起來非常漂亮。
Webflow vs Wix都幾? 超詳解比較
Wix 和 Webflow 都是具有強大功能的網站構建器,可以使整個網站開發過程變得簡單直觀。今天我們將指出兩者之間的主要區別,將幾個比較大的主題做分析給大家。
Webflow 與 Shopify差異?哪個更適合電商網站
今天要來比較的是開店平台 Shopify 與 Weblfow 兩間龍頭公司,而這兩個平台都為網頁設計、電商管理和業績增長為賣家提供了一站式的解決方法。
Weblow 定價指南:我應該選哪個計畫?每個計畫差異到是什麼?
Webflow 的定價可能有令人不知所措。因爲它有超多種不同的計劃可供選擇,要找出最適合自己項目的計畫可能會有點無頭緒,為了幫助你更輕鬆地做出決定,我們整理了這份Webflow定價指南。請繼續閱讀以了解如何為你的 Webflow 網站選擇正確的計劃。
最適合設計師的 No-code 自架網站工具 — Webflow
「No-code」是近兩年在網站、app 製作中很流行的新概念。透過簡單易懂的UI 設計,讓複雜的程式碼,被幾個按鈕或欄位取代。只要有基本的 HTML、CSS 觀念讓你不需要寫任何 Code 也可以完成一個網站!今天要介紹的 Webflow 就是目前使用下來我覺得最適合設計師的網站架設工具。
Headless CMS (無頭 CMS) 的開發心得分享
什麼是無頭CMS? 跟傳統網站製作 CMS 的差異在哪? 為什麼需要無頭CMS? 前後端分離後帶來的好處有什麼?
Webflow 初學者入門指南
你是 Webflow 的新手嗎?若你是設計師,且第一次接觸 Webflow,甚至了解一點基礎代碼,我們保證你絕對能夠很快速的掌握它,甚至最後可能會學習到如何編碼。若你是因為有興趣而接觸 Webflow且編碼基礎也沒關係,相信你看完這些基礎文章也可以很快掌握它。
Webflow 的10大優點及3大缺點
Webflow 到底有多神?它真的如此完美沒缺點嗎?tenten 因為今年開始大量使用 Webflow ,讓我們在網站設計及開發上已經達到某種新的高度,幾年前看起來很複雜的東西,甚至需要投入 2、3 個人力以上製作的網站,都被 Webflow 徹底解決了。

學習 Webflow 權威指南 - 來自 Tendmy

Tendemy 學院旨在協助設計師創造一個成功而充實的職涯,我們將教會您實現目標所需的熱門設計技能與思考。

最適合設計師學習的網頁設計工具 Webflow - Tendemy 線上課程
Share this post