Use keyboard shortcuts in Webflow to make your workflow as quick and efficient as possible.
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
The Designer has many keyboard shortcuts to help you speed up your design workflow. The quickest way to see the list of all shortcuts in the Designer is pressing Shift + /. You can also access this list from the help menu on the bottom left of the Designer.
Access the keyboard shortcuts from the help menu
General keyboard shortcuts
Show shortcut cheatsheet: Shift + /
Save as Snapshot: Shift + Command + S (Mac) or Shift + Control + S (Windows)
Deselect Element/Exit: Esc
Delete Element: Delete
Show Publish Dialog: Shift + P
Show Export Code Dialog: Shift + E
Edit element: Enter
View shortcuts
Preview mode: Shift + Command + P (Mac) or Shift + Control + P (Windows)
Guide overlay: Shift + Command + G (Mac) or Shift + Control + G (Windows)
Show element edges: Shift + Command + E (Mac) or Shift + Control + E (Windows)
X-ray mode: Shift + Command + X (Mac) or Shift + Control + X (Windows)
Left-hand toolbar shortcuts
Show Add panel: A
Show Navigator tab: Z
Show Pages panel: P
Show Symbols panel: Shift + A
Make selected element a Symbol: Command + Shift + A (Mac) or Control + Shift + A (Windows)
Show Asset Manager: J
Right-hand tabs shortcuts
Show Style tab: S
Show Settings tab: D
Show Style Manager tab: G
Show Interactions tab: H
Copy/paste shortcuts
Copy: Command + C (Mac) or Control + C (Windows)
Cut: Command + X (Mac) or Control +X (Windows)
Paste: Command + V (Mac) or Control +V (Windows)
Duplicate: Hold Alt + Drag
Undo/redo shortcuts
Undo: Command + Z (Mac) or Control + Z (Windows)
Redo: Shift + Command + Z (Mac) or Shift + Control + Z (Windows)
Device view shortcuts
Desktop: 1
Tablet: 2
Phone (landscape): 3
Phone (portrait): 4
Style panel shortcuts
Margin / padding (all sides): Hold Shift + Drag
Margin / padding (top + bottom or left + right): Hold Alt + drag
Add class to selected element: Command + Enter (Mac) or Control + Enter (Windows)
Rename Last Class on Selected Element: Command + Shift + Enter (Mac) or Control + Shift + Enter (Windows)
Other shortcuts
Expand/collapse panel sections: Alt + click on section
Select parent / child element: Up arrow / Down arrow
Select sibling element: Left arrow / Right arrow
Select next / previous element: Alt + Left arrow / Right arrow
Toggle Collaborators on selected element: Command + Shift + L (Mac) or Control + Shift + L (Windows)
Find
Quick Find: Command + E (Mac) or Control + E (Windows) / Command + K (Mac) or Control + K (Windows)
If you have any ideas for a cool keyboard shortcut, let us know and we’ll look into adding it.
