【Webflow實戰】數位遊牧者必學技能：快速架站、形象網站一網打盡！

Hi! 親愛的吉莉朋友們，

你今天好嗎？

今天吉莉要來分享一個可以快速架出漂亮網站的工具 —— Webflow，並且分享我的踩坑經驗。踩坑不稀奇，解坑才有自學樂趣。讓我們一起解決過程中的各種技術挑戰吧！

為什麼數位遊牧生活，我選擇用 Webflow 架站？

吉莉最早期架站，第一個使用的是Webflow。在網路上查找架站相關資料時，發現Webflow對於支援網站畫面的呈現，有許多豐富的動態效果，與零程式碼的快速架站特性。

當時吉莉希望架出一個雜誌內容型態的入口網站，要兼具形象與內容並行，而Webflow的特性，即剛好符合當時吉莉架站的需求。

跟著吉莉，一起發揮你的自學精神，讓我們一起用Webflow架設網站吧！。

數位遊牧者也能輕鬆操作！Webflow 架站流程全紀錄

🔐登入Webflow

Webflow整體從登入開始，在使用認知體驗上，就很簡易操作。
吉莉是用gmail作為登入帳號，你也可以選擇設定其他email帳號密碼登入。

📋Webflow dashboard介面

由於吉莉之前已經有嘗試先架了一個站，所以在Dashboard All sites 裡可以綜覽架設的站。

建立新站：點擊右上角的 +New site 按鈕。

🆕在Webflow上「建立新站」

進入建立新站的介面後，彈跳視窗上出現兩個選項：

Blank site (空白網站) ：自由度高，自行客製化版型。

Template (模版網站)：有free(免費)/paid(付費)，初期沒有太多想法，或是追求效率，可以選擇以模版方式進行，之後也可以再依照需求，客製化修改調整。

吉莉選擇以 Template (模版網站) 開始架站。

即使是free(免費)的版型，Webflow一樣提供Preview template(預覽版型)的功能。

而且厲害的是，即便是free版型，整體UI設計與動態效果也令人驚艷。

吉莉一直都是自學架站，所以在網路上搜尋各種資源有效學習是吉莉能不停在這條路上成長的方法。在使用Weflow架站時，參考了一些YouTube影片，通常吉莉主要選擇英文的影片為主，除了快速獲得新知，學習架站知識外，訓練培養自己的外語能力是進入數位遊牧世界很重要的一項技能喔！

自學架站不孤單：數位遊牧生活下的 Webflow 學習管道

吉莉在架站的時候，需求是將網站定位在雜誌類型的內容入口網站，因此除了需要美觀UI與動態效果流暢的版型作為形象首頁之外，內容上會需要使用到部落格上的文章發佈，也就是內容管理系統。在Webflow裡，位在左側工具列裡的CMS。

踩坑問題：以CMS動態生成Tabs

需求情境：以CMS動態生成Tabs，並在Tab內置一個及以上的Collection List。

需求延伸規劃

內容未來會增加，因此希望以Tabs做內容的頂層分類，並以CMS內容動態新增Tabs分類，並在各別Tabs分類內，產生各自的Collection list。

這時候吉莉再次發揮自學精神，反正不懂的時候就是去找資源。於是發現Webflow本身就提供很好的社群，提供大家交流與討論。社群裡有很多熱心的開發者，大家都很願意互相幫忙。除了官方社團，FB上也有相關的中文社團，資源很多，大家都可以嘗試加入討論。

數位遊牧者的技術支援站！Webflow 中文與英文社群資源推薦

Webflow Forum

Webflow 官方論壇，有豐富的討論與資源。

Webflow中文社群｜網頁設計交流版｜UIUX｜動態｜電商｜新創

非官方的 Facebook 社團，有很多活躍的 Webflow 使用者。很適合中文語系的用戶來這邊交流討論。

吉莉結語｜數位遊牧生活下的架站心得與總結：Webflow 值得嗎？

新手友善

Webflow 對於架站的新手來說，非常友善！操作流程非常直覺與快速，從登入、挑選版型、開始架站，介面與流程上簡化了許多使用者認知上的困惑。

形象網站&作品集網站

基本上，如果你的網站沒有太強烈的客製化需求，尤其是製作一個簡易的形象網站或是作品集網站，Webflow 在這個部分表現十分優秀。即便操作介面僅提供英語，也讓使用者不會感到害怕。

零程式碼&程式碼都OK!

雖然Webflow 講求無程式碼的使用者體驗感，但也不是完全不能以程式碼去編輯。若你有程式碼的背景，一樣可以輸入程式碼，按照你的需求，客製化網站內容。

價格與方案

唯一，讓吉莉覺得算是缺點的是他的價格與方案。付費方式比較複雜，使用者需要多方考量要使用哪一個方案。

如果使用者的需求是形象網站或是作品集網站，不需要去連動金流或是動態新增資料流，Webflow有提供免費的方案可以使用，但功能上就有一定的限制。請參考Webflow付費方案。

🌍 數位遊牧電商平台比一比

✅ Webflow（適合形象型官網）

• 適合誰：內容導向數位遊牧者、自媒體、品牌方
• 付款金流：僅支援 Stripe/PayPal，亞洲金流整合困難
• 多語系支援：需額外安裝工具，無原生多語系功能
• 建站難度：介面友善、設計彈性高
• 適合電商嗎？：❌ 不推薦做跨國購物網站

---

✅ Shopify（適合全球銷售）

• 適合誰：產品型數位遊牧者、跨境電商經營者
• 付款金流：支援多國金流，含台灣/亞洲地區
• 多語系支援：內建多語功能
• 建站難度：操作簡單、模版化導向
• 適合電商嗎？：✅ 非常推薦

---

✅ WooCommerce（偏技術型自由度高）

• 適合誰：懂技術或有團隊協助的進階使用者
• 付款金流：幾乎任何金流都能整合
• 多語系支援：靠外掛自訂化程度高
• 建站難度：需熟悉 WordPress 架構
• 適合電商嗎？：✅ 高自由度但需維護力

---

✅ Ecwid（適合快速開店）

• 適合誰：想快速上線、不想搞太複雜的創作者
• 付款金流：支援多幣別與主要第三方支付
• 多語系支援：原生支援
• 建站難度：非常簡單，可嵌入現有網站
• 適合電商嗎？：✅ 好入門的輕量電商工具

以下是吉莉使用Webflow後的評分

新手友善：⭐⭐⭐⭐⭐
操作體驗：⭐⭐⭐⭐⭐
社群支援：⭐⭐⭐⭐
價格方案：⭐⭐⭐

延伸閱讀：

• 【WordPress 實戰】數位遊牧者的部落格指南：用 Blocksy 佈景主題打造你的個人品牌網站
• 【AI神器】ChatGPT + Canva：數位遊牧接案必學！設計高質感品牌視覺的技巧
• 【數位遊牧創業】《一人公司起步的思維與挑戰》

可愛的讀者，
有沒有其他想法呢？
都歡迎留言與吉莉討論喔！