Webflow 是一款可视化建站工具,你可以使用它制作出专业级的响应式网站,无需代码基础。

可视化地“编写”网站

Webflow 提供了标准的 HTML5 元素,如标题、按钮、视频等,你可以直接将它拖进画布,来设计出符合语义的界面。

html5.png

同时,还支持可复用 Symbol,即将常用的组件如 Header、Footer 保存起来。

symbol.png

Webflow 支持响应式设计,你可以很容易地设计出不同尺寸下的样式。

responsive.png

你还可以将常用的样式保存为 CSS 的 Class,直接复用到其它元素。

class.png

还可以使用常见的布局方式,如弹性布局、栅格布局。

layout.png

交互动效

Webflow 的交互动效工具能够帮助你设计复杂的效果,包括视差滚动、进度条等等,不用写一行代码也能做出复杂代码才能实现的效果。

animation.png

内置 CMS(内容管理系统)

Webflow 内置 CMS,支持直接定义字段,添加数据,并在界面上渲染出来,这样你的网站上就都是真实内容了。

cms.png

发布或导出

完成设计后,你可以直接将网站发布,供所有人访问,你可以邀请朋友直接在界面上修改发布的内容。Webflow 还提供了一系列营销、统计工具,方便后续对数据的分析。

publish.png

Webflow 也支持导出 HTML、CSS、JavaScript 代码,图像、视频资源。导出的代码是做了浏览器兼容的,可以帮你节省很多时间,当然你也可以在导出的代码中加入自己的代码,来实现其他效果。

export.png

值得一提的是,Webflow 的官网就是用 Webflow 做的。