Webflow 中的熱鍵

使用 Webflow 中的鍵盤快速鍵可讓您的工作流程盡可能有效率。
利用 Webflow 中的熱鍵來優化您的工作流程效率。

Designer 提供了大量熱鍵來加速您的設計流程。若要快速查看設計器中所有熱鍵的完整列表,請按 Shift+/。您也可以在以下位置找到此列表 幫助菜單 位於設計器介面的左下角。

本教學涵蓋:

  1. 通用快速指令
  2. 螢幕指令
  3. 左側工具列的快速命令
  4. 右側選項卡的快速命令
  5. 複製和貼上命令
  6. 撤銷和重做命令
  7. 查看不同設備指令中的選項
  8. 樣式面板的指令
  9. 各種其他快速指令
  10. 搜尋命令
  11. 移動元素命令
  12. 特定於 Markdown 使用的快捷鍵
  13. Flex 和網格佈局特定的鍵盤快速鍵
提醒: 如果您對有趣的鍵盤快捷鍵有任何建議, 讓我們知道,我們會考慮添加它。

通用熱鍵

  • 顯示熱鍵參考: Shift+/
  • 另存為快照: Shift + Command + S (蘋果機)或 Shift + Control + S (視窗)
  • 取消選擇或退出元素: Esc鍵
  • 刪除元素: 刪除
  • 顯示發布對話框: Shift + P
  • 顯示匯出程式碼對話框: Shift + E
  • 編輯元素: 進入

螢幕指令

  • ‍預覽模式: Shift + Command + P (蘋果機)或 Shift + Control + P (視窗)
  • 指南覆蓋: Shift + Command + G (蘋果機)或 Shift + Control + G (視窗)
  • 顯示元素邊緣: Shift + Command + E (蘋果機)或 Shift + Control + E (視窗)
  • X射線模式: Shift + Command + X (蘋果機)或 Shift + Control + X (視窗)

左側工具列快捷方式

  • 顯示新增面板: A
  • 顯示導航器面板: Z
  • 顯示頁面面板:
  • 顯示組件面板: Shift + A
  • 將選定的元素轉換為元件: Command + Shift + A (蘋果機)或 Control + Shift + A (視窗)
  • 顯示資產面板: J
  • 展開/折疊所有巢狀頁面資料夾: 選項 + 轉移 + 點選 (蘋果機)或 替代 + 轉移 + 點選 (視窗)
  • 展開/折疊所有頁面: 選項 + 點選 (蘋果機)或 替代 + 點選 (Windows) 任何頁面部分標題
  • 展開/折疊所有資料夾: 選項 + 點選 (蘋果機)或 替代 + 點選 (Windows) 任何資料夾

右側選項卡的命令

  • 顯示樣式面板: S
  • 顯示元素設定面板: D
  • 顯示樣式管理器面板: G
  • 顯示互動面板: H

複製及貼上熱鍵

  • 複製: 指令+C (蘋果機)或 控制+C (視窗)
  • 切: 指令+X (蘋果機)或 控制+X (視窗)
  • 貼: 指令+V (蘋果機)或 控制+V (視窗)
  • 複製: 指令+D (蘋果機)或 控制+D (視窗)
  • 複製: 選項+(蘋果機)或 Alt + 拖曳 (視窗)

撤銷和重做熱鍵

  • 撤銷: 指令+Z (蘋果機)或 控制+Z (視窗)
  • 重做: Shift + Command + Z (蘋果機)或 Shift + Control + Z (視窗)

設備視圖指令

  • 桌面: 1
  • 藥片: 2
  • 電話(橫向): 3
  • 電話(縱向): 4

樣式面板熱鍵

  • 邊距/填充(所有邊): 按住 Shift + 拖曳
  • 邊距/填充(頂部+底部或左側+右側): 按住 Alt + 拖曳
  • 將類別新增至所選元素: 命令+輸入 (蘋果機)或 控制+輸入 (視窗)
  • 重新命名所選元素上的最後一個類別: Command + Shift + Enter (蘋果機)或 Ctrl + Shift + Enter (視窗)

....繼續清單保持原始內容不變。

Markdown 快速鍵

這些 降價 快速鍵可協助您只使用鍵盤即可在富文本元件和富文本欄位中設定文字樣式(例如,強調、斜體、合併超連結)和區塊元素(例如標題、清單)。

  • 斜體文字: *文字* 或者 _文字_
  • 加粗字體: **文字** 或者 __文字__
  • 將文字設為斜體並加粗: ***文字*** 或者 ___文字___
  • 新增超連結: [超連結文字](https://www.url.com)
  • 插入標題 1: # + 空間
  • 插入標題 2: ## + 空間
  • 插入標題 3: ### + 空間
  • 插入標題 4: #### + 空間
  • 插入標題 5: ##### + 空間
  • 插入標題 6: ###### + 空間
  • 插入區塊引用: > + 空間
  • 插入無序(換句話說,項目符號)清單: - + 空間
  • 插入有序(即編號)清單: 1. + 空間

Flex 和網格佈局快捷鍵

您可以選擇利用下列快速鍵和對齊方塊來快速對齊父節點中的 flex 和 grid 子節點。

Flex 快速鍵

  • 將對齊方式(即 justify-content)設定為 之間的空間:雙擊對齊框 細胞 或者 命令 (在 Mac 上)或 控制 (在 Windows 上)+ 點選對齊框 細胞
  • 將對齊(或對齊項目)設為 拉緊: 選項 (在 Mac 上)或 替代 (在 Windows 上)+ 點選對齊框 細胞

獲得更多有關調整柔性後代的洞見。

網格快捷鍵

  • 將理由(或 justify-items)設定為 拉緊:雙擊對齊框 細胞 或者 命令 (在 Mac 上)或 控制 (在 Windows 上)+ 輕敲 一個對齊框 細胞
  • 將對齊(或對齊項目)設為 拉緊: 選項 (在 Mac 上)或 替代 (在 Windows 上)+ 點選對齊框 細胞

了解更多關於對齊網格後代的資訊。

麥伊凡
Ewan Mak 的最新帖子 (看全部)