Webflow快捷键
文章浏览量: 173
Webflow 是一款功能强大的网页设计工具，它允许用户构建响应式网站而无需编写代码。为了加快工作流程并提高效率，学习快捷键可以节省大量时间。
常规
| 快捷方式 |
操作 |
Shift
/ |
显示快捷键备忘单 |
Ctrl
Shift
S |
另存为快照 |
Esc |
取消选择或中止 |
Del |
删除元素 |
Shift
P |
显示发布对话框 |
Shift
E |
显示导出代码对话框 |
Enter |
编辑元素 |
查看
| 快捷方式 |
操作 |
Ctrl
Shift
P |
预览模式 |
Ctrl
Shift
G |
指南叠加 |
Ctrl
Shift
E |
显示元素边缘 |
Ctrl
Shift
X |
X 射线模式 |
左侧工具栏
| 快捷方式 |
操作 |
A |
显示添加面板 |
Z |
显示导航器选项卡 |
P |
显示页面面板 |
Shift
A |
显示符号面板 |
Ctrl
Shift
A |
将选定元素设为符号 |
J |
显示资产管理器 |
右侧选项卡
| 快捷方式 |
操作 |
S |
显示样式选项卡 |
D |
显示设置选项卡 |
G |
显示样式管理器选项卡 |
H |
显示交互选项卡 |
复制/粘贴
| 快捷方式 |
操作 |
Ctrl
C |
复制 |
Ctrl
X |
剪切 |
Ctrl
V |
粘贴 |
Alt
(拖动) |
复制 |
撤消/重做
| 快捷方式 |
操作 |
Ctrl
Z |
撤消 |
Ctrl
Shift
Z |
重做 |
设备视图
| 快捷方式 |
操作 |
1 |
桌面 |
2 |
平板电脑 |
3 |
手机（横向） |
4 |
手机（纵向） |
样式面板
| 快捷方式 |
操作 |
Shift
(拖动) |
边距或填充（所有边距） |
Alt
(拖动) |
边距或填充（顶部和底部，或左侧和右侧） |
Ctrl
Enter |
为选定元素添加类 |
Ctrl
Shift
Enter |
重命名选定元素上的最后一个类 |
其他
| 快捷方式 |
操作 |
Alt
(单击) |
展开或折叠面板部分 |
上/下 |
选择父元素或子元素 |
左/右 |
选择同级元素 |
Alt
左/右 |
选择下一个或上一个元素 |
Ctrl
Shift
L |
切换选定元素上的协作者 |
常规功能
| 快捷键 |
说明 |
Cmd + S |
保存项目 |
Cmd + Z |
撤消上一个操作 |
Cmd + Shift + Z |
重做上一个撤消的操作 |
Cmd + A |
选择当前视图中的所有元素 |
Cmd + Shift + A |
取消选择所有元素 |
Cmd + Shift + S |
保存项目副本 |
Cmd + Q |
退出 Webflow |
Cmd + P |
打开新项目 |
Cmd + R |
刷新项目视图 |
Cmd + Shift + R |
在 Designer 中重新加载当前页面 |
布局和导航
| 快捷键 |
说明 |
Cmd + 1 |
切换到设计器面板 |
Cmd + 2 |
切换到页面面板 |
Cmd + 3 |
打开资产面板 |
Cmd + 4 |
切换到样式面板 |
Cmd + 5 |
切换到交互面板 |
Cmd + 6 |
切换到 CMS 集合面板 |
Cmd + Shift + F |
打开搜索栏 |
Cmd + E |
打开设置面板 |
Cmd + Shift + I |
打开检查面板 |
Cmd + T |
打开新选项卡 |
Cmd + Option + T |
全屏模式打开 Webflow 设计器 |
元素管理
| 快捷键 |
说明 |
Cmd + Shift + D |
复制所选元素 |
Cmd + Shift + C |
克隆所选元素 |
Cmd + Shift + P |
预览项目 |
Cmd + G |
分组所选元素 |
Cmd + Shift + G |
取消分组所选元素 |
Cmd + Shift + X |
剪切所选元素 |
Cmd + C |
复制所选元素 |
Cmd + V |
粘贴复制的元素 |
Cmd + Shift + V |
粘贴复制的元素（不带样式） |
Cmd + Shift + Z |
重做上次撤消的操作 |
文本和输入功能
| 快捷键 |
说明 |
Cmd + B |
加粗所选文本 |
Cmd + I |
斜体所选文本 |
Cmd + U |
为所选文本加下划线 |
Cmd + Shift + K |
删除所选文本 |
Cmd + Shift + L |
左对齐文本 |
Cmd + Shift + R |
右对齐文本 |
Cmd + Shift + C |
居中对齐文本 |
Cmd + Shift + J |
两端对齐文本 |
样式函数
| 快捷键 |
说明 |
Cmd + Option + I |
切换检查面板 |
Cmd + Shift + M |
打开样式管理器面板 |
Cmd + Shift + L |
切换左侧面板可见性 |
Cmd + Option + S |
切换设置面板 |
Cmd + Shift + V |
从另一个元素粘贴样式 |
网格和布局
| 快捷键 |
说明 |
Cmd + Shift + M |
打开网格布局面板 |
Cmd + Option + M |
打开弹性框布局面板 |
Cmd + Shift + P |
切换预览模式 |
Cmd + Shift + H |
隐藏所有面板 |
Cmd + Option + F |
打开 Flexbox 帮助面板 |
预览和发布
| 快捷键 |
说明 |
Cmd + Shift + P |
预览项目 |
Cmd + Shift + E |
发布项目 |
Cmd + Option + P |
发布选定页面 |
Cmd + Shift + B |
在设计和预览模式之间切换 |
浏览器和页面导航
| 快捷键 |
说明 |
Cmd + Tab |
在打开的应用程序之间切换 |
Cmd + Shift + Tab |
切换到上一个打开的应用程序 |
Cmd + Option + 向左箭头 |
在 Designer 中转到上一页 |
Cmd + Option + 向右箭头 |
在 Designer 中转到下一页 |
关于 Webflow
Webflow 是一个网页设计平台，允许用户以可视化方式设计、构建和启动响应式网站。与传统的网站构建器不同，Webflow 让用户无需编码即可控制 HTML、CSS 和 JavaScript。它还集成了强大的 CMS 功能，允许用户创建动态内容驱动的网站。
Webflow 官方信息
以下是 Webflow 用户的一些关键官方资源：
Webflow 快捷键常见问题解答
-
如何在 Webflow 中的不同面板之间切换？
您可以使用 Ctrl + (1-3)（对于 Windows）或 Cmd + (1-3)（对于 MacOS）在设计器、页面和资产面板之间切换。
-
如何快速复制元素？
使用 Ctrl + Shift + D (Windows) 或 Cmd + Shift + D (MacOS) 复制所选元素。
-
预览设计的快捷键是什么？
Windows 的快捷键是 Ctrl + Shift + P，MacOS 的快捷键是 Cmd + Shift + P。
-
我可以在 Webflow 中撤消或重做我的操作吗？
可以，使用 Ctrl + Z (Windows) 或 Cmd + Z (MacOS) 撤消，使用 Ctrl + Shift + Z (Windows) 或 Cmd + Shift + Z (MacOS) 重做操作。
-
是否有快捷方式来选择工作区中的所有元素？
使用 Ctrl + A (Windows) 或 Cmd + A (MacOS) 选择设计器视图中的所有元素。
-
如何取消选择所有元素？
使用 Ctrl + Shift + A (Windows) 或 Cmd + Shift + A (MacOS) 取消选择所有元素。
-
我可以使用快捷方式访问搜索栏吗？
是的，使用 Ctrl + Shift + F (Windows) 或 Cmd + Shift + F (MacOS) 打开搜索栏。
-
是否有快捷方式来访问设置面板？
是的，使用 Ctrl + E (Windows) 或 Cmd + E (MacOS) 打开设置面板。
-
如何快速保存我的工作？
只需使用 Ctrl + S（Windows）或 Cmd + S（MacOS）即可保存您的项目。
总结
掌握 Webflow 的键盘快捷键可以显著增强您的工作流程，并帮助您更高效地设计网站。通过使用上面列出的快捷键，您将能够更快地浏览 Webflow，更快地执行常见操作，并将更多精力放在创造力上，而不是重复性任务上。请务必定期参考 Webflow 官方网站以获取更新和其他资源。
Rate this hotkeys cheatsheet
