快速入门
本指南涵盖了Webflow的所有功能：
- 入门 — 创建账户和基本设置
- 如何使用页面构建器 — 以视觉方式设计任何网页
- 如何使用共享库 — 跨页面重用组件
- 如何使用内容管理系统（CMS） — 轻松管理动态内容
- 如何使用主机服务 — 发布到有效域名
- 如何使用本地化 — 将您的网站翻译成全球语言
- 如何使用电子商务 — 构建完整的在线商店
- 如何使用分析功能 — 跟踪访客和性能
- 如何使用优化功能 — 在您的页面上运行 A/B 测试
- 如何使用SEO — 在搜索结果中排名更高
所需时间： 每部影片 5 分钟
本指南还包含以下内容： 专业提示 | 常见错误 | 故障排除 | 定价 | 替代方案
为什么信任本指南
我使用 Webflow 已经两年多了，并且测试过这里提到的所有功能。这篇入门指南源于真实的实践经验，而非营销噱头或厂商截图。
Webflow是目前功能最强大的网页设计平台之一。
但大多数用户仅仅触及了它功能的冰山一角。
本指南将向您展示如何使用所有主要功能。
一步一步教你，附带截图和专业技巧。
Webflow教程
这篇完整的 Webflow 使用教程将一步一步地引导您了解每个功能，从初始设置到高级技巧，让您成为高级用户。
Webflow
无需编写代码即可构建自定义响应式网站。Webflow 通过可视化界面，让设计师和开发者完全掌控 HTML、CSS 和 JavaScript。立即免费开始使用。
Webflow入门指南
使用任何功能之前，请先完成此一次性设置。
大约需要3分钟。
请先观看这段简短的概述：
现在让我们一步一步来。
第一步：创建您的帐户
前往 Webflow 网站并点击注册。
输入您的电子邮件地址并创建密码即可登录。
您也可以注册一个谷歌账号，以便更快地访问。
✓ 检查点： 检查你的 收件箱 请发送确认邮件。
第二步：开始你的第一个项目
在 Webflow 控制面板中，单击“新建项目”。
选择一张空白画布或 浏览 使用 Webflow 模板快速入门。
✓ 检查点： 你应该会看到 Webflow 设计器中有一个空白画布。
步骤 3：探索界面
左侧工具栏包含结构工具、页面和 CMS 面板。
右侧面板控制样式、设置和元素详细信息。
✅ 完成： 您已准备好使用以下任何功能。
如何使用 Webflow 页面构建器
页面构建 允许您使用 Webflow 画布上的拖放功能，从空白画布开始构建任何网页。
以下是使用步骤。
步骤 1：打开设计器
从 Webflow 控制面板点击“设计器”打开您的项目。
步骤二：向画布添加元素
使用左侧工具栏将元素拖到画布上。
从结构模块、布局和排版元素中进行选择。
这就是它的样子：
✓ 检查点： 您的元素将出现在空白画布上，可以进行样式设置。
步骤 3：使用面板进行造型
选择元素，然后在右侧面板中调整字体、颜色和间距。
✅ 结果： 你用简洁的代码构建了一个自定义网页——没有手动编写任何 HTML 或 CSS 代码。
💡 专业提示： 使用类一次性设置多个元素的样式，而不是逐个设置每个元素的样式。
如何使用 Webflow 共享库
共享图书馆 允许您在页面之间重复使用设计组件，从而保持网站的一致性。
以下是使用步骤。
步骤 1：创建组件
选择画布上的任意元素，然后按 Cmd+Shift+A。
步骤 2：保存到您的库
给组件命名，然后在面板中单击“保存”。
现在它出现在左侧工具栏的“组件”下方。
这就是它的样子：
✓ 检查点： 保存的组件周围会出现绿色边框。
步骤 3：跨页面重用
将组件从左侧工具栏拖到项目中的任何页面上。
✅ 结果： 对共享组件进行一次编辑，即可更新网站上所有实例。
💡 专业提示： 首先将导航栏和页脚构建为共享组件——随着网站的发展，这将节省大量时间。
如何使用 Webflow CMS
内容管理系统 无需编写代码即可管理动态内容，例如博客文章和作品集。
以下是使用步骤。
步骤 1：创建集合
在左侧面板中选择 CMS，然后单击“新建集合”。
步骤 2：添加字段和内容
为您的内容管理系统定义标题、图片和正文等字段。
上传图片，并在一行中输入每条内容的详细信息。
这就是它的样子：
✓ 检查点： 您的收藏中至少包含一件已出版的作品。
步骤 3：连接到页面
创建一个集合页面，并将每个字段绑定到匹配的元素。
✅ 结果： 您的内容管理系统已上线——添加新项目后，它们将自动显示在网站上。
💡 专业提示： 使用 CMS 筛选器和搜索功能，让访客按类别或日期对内容进行排序。
如何使用 Webflow 主机
主机 让您可以将您的网站发布到实时域名，平台内置一级托管服务。
以下是使用步骤。
步骤 1：打开网站设置
点击主菜单图标，然后选择“网站设置”。
步骤 2：添加自定义域名
在“主机”下，输入您的域名并更新您的DNS记录。
免费套餐会将内容发布到类似 yoursite.webflow.io 的子域名。
这就是它的样子：
✓ 检查点： 域状态显示为“已连接”。
步骤 3：发布您的网站
点击“发布”，然后选择您的测试环境或生产环境。
✅ 结果： 您的网站已上线，Webflow 会为您处理 SSL、CDN 和服务器管理。
💡 专业提示： 先发布到测试环境预览更改，然后再推送到生产环境。
如何使用 Webflow 本地化
本土化 让您可以将网站翻译成多种语言，从而触达全球受众。
以下是使用步骤。
步骤 1：启用本地化
打开网站设置，点击本地化添加新的语言环境。
步骤二：翻译您的内容
在 Webflow 设计器中切换到新的语言环境并进行编辑 文本 在画布上。
每个地区都有自己版本的网站页面。
这就是它的样子：
✓ 检查点： 语言切换器会显示您新的语言选项。
步骤 3：发布所有语言环境
点击“发布”按钮，即可同时上线所有语言版本。
✅ 结果： 访客可以根据浏览器或网址设置，以他们偏好的语言查看您的网站。
💡 专业提示： 首先专注于流量最高的地区——这样可以控制学习曲线。
如何使用 Webflow 电子商务
电子商务 让您可以在 Webflow 中创建包含产品页面、购物车和结账功能的在线商店。
以下是使用步骤。
第一步：启用电子商务
升级到 商业 在网站设置中规划并启用电子商务功能。
步骤二：添加产品
在 Webflow 界面中打开电子商务面板，并添加产品详情。
上传图片，设定价格，并为每个商品撰写描述。
这就是它的样子：
✓ 检查点： 您的产品已显示在产品系列中，所有详细信息均已填写完整。
步骤三：设计店铺布局
将产品列表元素拖到页面上，并使用设计器设置其样式。
✅ 结果： 您拥有一个功能齐全的在线商店，并提供丰富的定制选项。
💡 专业提示： 使用 Webflow 的 CMS 管理产品变体，以便客户可以按尺寸或颜色进行筛选。
如何使用 Webflow Analyze
分析 内置分析功能，可跟踪访客行为并衡量网站性能。
以下是使用步骤。
步骤 1：打开分析仪表板
点击主菜单中的“分析”按钮，即可查看您的流量概览。
第二步：审查关键指标
在面板中查看页面浏览量、独立访客和表现最佳的页面。
使用日期筛选器比较每周的交通流量。
这就是它的样子：
✓ 检查点： 仪表盘显示您所选时间范围内的数据。
步骤三：根据数据采取行动
找出流量低的页面，更新其内容或布局以改善效果。
✅ 结果： 您清楚地了解访客如何使用您的网站，以及下一步应该关注哪些方面。
💡 专业提示： 注意跳出率高的页面——它们通常需要更有力的开头或更快的加载速度。
如何使用 Webflow Optimize
优化 可让您运行 A/B 测试并微调您的网站，从而获得更好的转化率。
以下是使用步骤。
步骤 1：创建测试
点击左侧工具栏中的“优化”，然后选择“新建实验”。
步骤 2：设置变体
复制您的页面并更改标题、布局或行动号召。
Webflow 会自动将流量分配到各个版本。
这就是它的样子：
✓ 检查点： 两种变体在“优化”面板中均显示为“已启用”。
步骤三：查看结果
在获得足够的流量后，检查哪个版本表现更好，并发布表现最佳的版本。
✅ 结果： 您是在做出数据驱动的决策，而不是猜测什么方法对您的网站有效。
💡 专业提示： 每次实验只测试一个要素——改变太多变量会很难判断哪些因素有效。
如何使用 Webflow SEO
SEO 允许您控制元标题、描述和网站结构，以便搜索引擎对您的页面进行排名。
以下是使用步骤。
步骤 1：打开页面设置
点击页面上的齿轮图标即可打开其SEO设置。
步骤 2：添加元数据
为页面编写独一无二的标题标签和元描述。
Webflow 会自动生成简洁的 HTML 和语义结构，以利于搜索引擎优化。
这就是它的样子：
✓ 检查点： 预览图会显示您的标题和描述在搜索结果中的显示效果。
步骤 3：设置重定向和站点地图
前往网站设置下的 SEO 选项卡，管理 301 重定向和自动生成的网站地图。
✅ 结果： 您的网页结构和元数据都已完全准备好，可供搜索引擎使用。
💡 专业提示： 将 Webflow 自动生成的站点地图提交到 Google Search Console，以加快索引速度。
Webflow 专业技巧和快捷键
经过两年多的Webflow测试，以下是我总结的最佳技巧。
观看我的个人使用体验视频，了解更多详情：
这些快捷方式将加快您的日常工作流程。
键盘快捷键
| 行动 | 捷径 |
|---|---|
| 打开搜索栏 | Cmd/Ctrl + K |
| 预览您的网站 | Cmd/Ctrl + Shift + P |
| 切换桌面断点 | 1 / 2 / 3 / 4 |
| 发布到测试环境 | Cmd/Ctrl + Shift + S |
大多数人错过的隐藏功能
- Webflow 大学： 一个免费的课程库，包含 Webflow 教程和视频，涵盖从基础知识到高级交互的所有内容——学习 Webflow 的最佳资源。
- 互动面板： Webflow 的交互面板允许您构建滚动驱动的动画和动态图形而无需 JavaScript——大多数初学者从未发现过这个工具。
- 社区资源： Webflow 社区论坛和展示库中充满了免费模板和创意，您可以将其作为起点，从头开始开发自己的布局。
避免Webflow常见错误
错误一：使用固定像素值来调整尺寸
❌ 错误： 将容器设置为固定像素宽度，这会导致在较小的屏幕上显示不正常。
✅ 右图： 使用百分比或自动宽度，使布局能够响应每个断点。
错误二：跳过类和内联样式
❌ 错误： 直接将样式应用于单个元素，而不创建可重用的类。
✅ 右图： 明确命名类并重复使用——Webflow 在桌面断点处的样式会层叠到更小的断点处。 设备.
错误三：忽略移动响应式设计
❌ 错误： 只在桌面断点处进行设计，从不检查小屏幕。
✅ 右图： 测试每个断点——移动设备上的元素应该增大尺寸，以提高触摸可访问性。
Webflow故障排除
问题：设计师无法加载
原因： Webflow 运行设计器需要最小屏幕宽度为 1268px。
使固定： 请更换更大的显示器或缩小浏览器窗口以达到最小宽度要求。
问题：自定义域无法连接
原因： DNS记录尚未完全传播，或者添加了错误的记录类型。
使固定： 请对照 Webflow 的指南仔细检查您的 DNS 设置，并等待最多 48 小时以使其生效。
问题：样式在移动设备上无法应用
原因： 在 Webflow 软件中，较小断点处设置的样式不会向上叠加。
使固定： 始终先从桌面断点开始设置样式，然后针对每个设备向下调整。
📌 笔记： 如果以上方法均无法解决您的问题，请联系 Webflow 支持。
Webflow是什么？
Webflow 是一个网页设计和开发平台，无需编写代码即可构建自定义的响应式网站。
把它想象成一个可视化代码编辑器——你在画布上进行设计，Webflow 会在后台自动生成简洁的 HTML、CSS 和 JavaScript。
观看这段快速概览：
它包含以下主要特点：
- 页面构建： 通过拖放元素，从空白画布开始创建任何网页布局。
- 共享库： 保存并重复使用网站内的所有设计组件。
- 内容管理系统： 一个用于管理动态内容（例如博客和作品集）的内容管理系统。
- 主机： 直接发布到具有内置一级主机服务的有效域名。
- 本土化： 将您的网站翻译成多种语言，面向全球用户。
- 电子商务： 搭建包含产品页面和结账功能的完整在线商店。
- 分析： 通过内置控制面板跟踪流量和访客行为。
- 优化： 基于真实数据进行 A/B 测试，以提高转化率。
- 搜索引擎优化： 控制元标签、站点地图和站点结构，以获得更好的搜索排名。
Webflow 允许多个用户协作编辑网站，并支持现代浏览器的最近三个主要版本。
如需完整评测，请参阅我们的 Webflow 评测.
Webflow 设计器通过样式面板提供对每个 HTML 和 CSS 属性的精细控制，这使得已经了解 Web 开发基础知识的开发人员能够轻松上手。
以下是该软件实际运行的界面：
Webflow 定价
以下是Webflow在2026年的费用：
| 计划 | 价格 | 最适合 |
|---|---|---|
| 起动机 | 自由的 | 初学者学习基础知识 |
| 基本的 | 每月14美元 | 拥有自定义域名的个人网站 |
| 内容管理系统 | 每月 23 美元 | 博客和内容丰富的网站 |
| 商业 | 每月 39 美元 | 电子商务和企业网站 |
免费试用： 是的——Webflow 提供免费的入门计划，没有时间限制。
退款保证： 虽然没有正式保证，但您可以随时取消付费计划。
付费定制域名套餐起价为每月 14 美元。
以下是定价明细：
💰 性价比最高： CMS方案——它以实惠的价格为不断发展的网站提供动态内容管理功能。
Webflow 与其他方案的比较
Webflow 与其他同类产品相比如何？以下是竞争格局：
| 工具 | 最适合 | 价格 | 等级 |
|---|---|---|---|
| Webflow | 采用简洁代码的可视化网页设计 | 免费至每月 39 美元 | ⭐ 4.6 |
| WordPress | 插件的灵活性和博客 | 免费至每月 45 美元 | ⭐ 4.4 |
| Wix | 快速拖放设置 | 免费至每月 159 美元 | ⭐ 4.3 |
| Squarespace | 精美的创意模板 | 每月 16 至 52 美元 | ⭐ 4.4 |
| Shopify | 专用电子商务平台 | 每月 29 美元至 399 美元 | ⭐ 4.5 |
| 框架 | 设计师从 Figma 迁移 | 免费至每月 30 美元 | ⭐ 4.5 |
快速精选：
- 综合最佳： Webflow——完全掌控设计，并生成简洁的代码
- 最佳预算： Wix——为简单网站提供慷慨的免费方案
- 最适合初学者： Squarespace——精美的模板，学习曲线极低
- 最适合电子商务： Shopify——专为在线商店打造
🎯 Webflow 的替代方案
正在寻找 Webflow 的替代方案？以下是一些最佳选择：
- 🚀 WordPress（含 Elementor/插件）： 最灵活的 网站建设者 拥有数千款插件和主题，满足任何业务需求。
- 💰 Wix： 一款对新手友好的拖放式建站工具，提供免费套餐和数百个现成模板。
- 🎨 Squarespace： 精美、设计师品质的模板，内置电子商务功能——非常适合创意作品集。
- ⚡ Shopify： 专为在线商店打造的首选平台，提供支付处理和库存管理功能。
- 🔧 框架： 一款设计到代码的工具，深受希望根据 Figma 模型快速开发网站的开发人员的欢迎。
完整列表请参见我们的 Webflow 的替代方案 指导。
⚔️ Webflow 对比
以下是Webflow与各竞争对手的对比：
- Webflow 与 WordPress： Webflow 提供可视化设计和简洁的代码输出；WordPress 则在插件种类和社区规模方面胜出。
- Webflow 与 Wix 的对比： Wix 对初学者来说更容易上手，但 Webflow 让设计师对布局和 CSS 拥有更大的控制权。
- Webflow 与 Squarespace： Squarespace 的现成模板更好；Webflow 在自定义设计方面更胜一筹。
- Webflow 与 Shopify： Shopify 更适合纯粹的电子商务；Webflow 更适合设计感强、带有商店功能的品牌网站。
- Webflow 与 Framer： Framer 更适合简单的落地页；Webflow 更擅长处理复杂的多页面网站和内容管理系统。
立即开始使用 Webflow
你已经学会了如何使用Webflow的所有主要功能：
- ✅ 页面构建
- ✅ 共享图书馆
- ✅ 内容管理系统
- ✅ 主机托管
- ✅ 本地化
- ✅ 电子商务
- ✅ 分析
- ✅ 优化
- ✅ SEO
下一步： 选择一项功能，立即试用。
大多数人都是从页面搭建开始的。
只需不到5分钟。
常见问题解答
学习 Webflow 的最佳方法是什么？
先从 Webflow University 入手——它提供涵盖所有功能的免费课程。将教程与实践项目结合起来，可以更快地掌握基础知识。
Webflow 学习起来有多难？
学习曲线适中。如果您熟悉HTML和CSS等基本网页设计概念，一周内即可轻松上手Webflow界面。
人工智能会取代Webflow开发人员吗？
不太可能。人工智能可以加快重复性任务的速度，但Webflow开发人员带来的是创造性的愿景和用户体验方面的决策。 人工智能工具 2026年无法复制。
Webflow的课程是免费的吗？
是的。Webflow University 提供免费课程库，其中包含涵盖基础到高级主题的视频教程——无需付费。
什么是 Webflow？如何使用它？
Webflow 是一个可视化网页设计平台，可以生成简洁的代码。使用方法很简单，只需将元素拖放到画布上，然后在设计器中设置样式即可——无需编写任何代码。
English 
Spanish 
Chinese 
German 
French 
Arabic 
Russian 
Portuguese 
Japanese 
Korean 
Italian 
Turkish 
Dutch 
Polish 
Indonesian 
Thai 
Vietnamese 