Webflow 中的热键

Designer 提供了许多热键来加速您的设计过程。要快速查看 Designer 中所有热键的完整列表，请按 Shift + /。您还可以在 帮助菜单 位于设计器界面的左下角。

本教程涵盖：

1. 常规快速命令
2. 屏幕命令
3. 左侧工具栏的快捷命令
4. 右侧选项卡的快捷命令
5. 复制和粘贴命令
6. 撤消和重做的命令
7. 查看不同设备命令中的选项
8. 样式面板的命令
9. 各种其他快速命令
10. 搜索命令
11. 移动元素命令
12. Markdown 专用的快捷键
13. 特定于 Flex 和网格布局的键盘快捷键

提醒： 如果你对有趣的键盘快捷键有任何建议， 让我们知道，我们会考虑添加它。

常规热键

• 显示热键参考： Shift + /
• 另存为快照： Shift + Command + S （Mac）或 Shift + Control + S （视窗）
• 取消选择或退出元素： Esc键
• 删除元素： 删除
• 显示发布对话框： Shift + P
• 显示导出代码对话框： Shift + E
• 编辑元素： 进入

屏幕命令

• 预览模式： Shift + Command + P （Mac）或 Shift + Control + P （视窗）
• 指南叠加： Shift + Command + G （Mac）或 Shift + Control + G （视窗）
• 显示元素边缘： Shift + Command + E （Mac）或 Shift + Control + E （视窗）
• X射线模式： Shift + Command + X （Mac）或 Shift + Control + X （视窗）

左侧工具栏快捷方式

• 显示添加面板： A
• 显示导航器面板： 是
• 显示页面面板： 磷
• 显示组件面板： Shift + A
• 将选定的元素转换为组件： Command + Shift + A （Mac）或 Control + Shift + A （视窗）
• 显示资产面板： J
• 展开/折叠所有嵌套的页面文件夹： 选项 + 转移 + 点击 （Mac）或 Alt + 转移 + 点击 （视窗）
• 展开/折叠所有页面： 选项 + 点击 （Mac）或 Alt + 点击 (Windows) 任何页面部分标题
• 展开/折叠所有文件夹： 选项 + 点击 （Mac）或 Alt + 点击 (Windows) 任何文件夹

右侧选项卡的命令

• 显示样式面板： 年代
• 显示元素设置面板： 德
• 显示样式管理器面板： G‍
• 显示交互面板： H

复制和粘贴热键

• 复制： 命令 + C （Mac）或 Control + C （视窗）
• 切： 命令 + X （Mac）或 Ctrl + X （视窗）
• 粘贴： 命令 + V （Mac）或 控制 + V （视窗）
• 复制： 命令 + D （Mac）或 Control + D （视窗）
• 复制： 选项+拖 （Mac）或 Alt + 拖动 （视窗）

撤消和重做热键

• 撤消： Command + Z （Mac）或 Control + Z （视窗）
• 重做： Shift + Command + Z （Mac）或 Shift + Control + Z （视窗）

设备视图命令

• 桌面： 1
• 药片： 2
• 电话（横向）： 3
• 电话（肖像）： 4

样式面板热键

• 边距/填充（所有边）： 按住 Shift + 拖动
• 边距/填充（顶部+底部或左侧+右侧）： 按住 Alt + 拖动
• 为选定元素添加类： Command + Enter （Mac）或 Control + Enter （视窗）
• 重命名选定元素的最后一个类： Command + Shift + Enter （Mac）或 Control + Shift + Enter （视窗）

...继续列表，保持原始内容不变（例如，将 Slider 蒙版重新定位到 Slider 包装器之外），整个父节点（例如，Slider 包装器）将会移动。

Markdown 快捷键

这些 Markdown 快捷键可帮助您仅使用键盘来设置富文本组件和富文本字段内的文本样式（例如，强调、斜体、合并超链接）和块元素（例如，标题、列表）。

• 斜体文本： *文本* 或者 _文本_
• 加粗字体： **文本** 或者 __文本__
• 使文本变为斜体和粗体： ***文本*** 或者 ___文本___
• 添加超链接： [超链接文本](https://www.url.com)
• 插入标题 1： # + 空间
• 插入标题 2： ## + 空间
• 插入标题 3： ### + 空间
• 插入标题 4： #### + 空间
• 插入标题 5： ##### + 空间
• 插入标题 6： ###### + 空间
• 插入区块引用： > + 空间
• 插入无序列表（换句话说，项目符号列表）： - + 空间‍
• 插入有序（即编号）列表： 1. + 空间

弹性和网格布局快捷键

您可以选择利用以下快捷键以及对齐框来快速对齐其父节点内的弹性和网格后代。

Flex 快捷键

• 将 justification (即 justify-content) 设置为 之间的空间：双击对齐框 细胞 或者 命令 （在 Mac 上）或 控制 （在 Windows 上）+ 点击对齐框 细胞
• 将对齐方式（或对齐项）设置为 拉紧: 选项 （在 Mac 上）或 Alt （在 Windows 上）+ 点击对齐框 细胞

获取有关调整 flex 后代的更多见解。

网格快捷键

• 将 justification (或 justify-items) 设置为 拉紧：双击对齐框 细胞 或者 命令 （在 Mac 上）或 控制 （在 Windows 上）+ 轻敲 对齐框 细胞
• 将对齐方式（或对齐项）设置为 拉紧: 选项 （在 Mac 上）或 Alt （在 Windows 上）+ 点击对齐框 细胞

了解有关对齐网格后代的更多信息。

‍