The Designer has many keyboard shortcuts to help you speed up your design workflow.

Shortcut keys

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 Webflow keyboard shortcuts
Access the keyboard shortcuts from the help menu
If you have any ideas for a cool keyboard shortcut, let us know and we’ll look into adding it.
General keyboard shortcuts
  • Show shortcut cheatsheet: Shift + /
  • Save as Snapshot: Shift + Command + S (Mac) or Shift + Control + S (Windows)
  • Deselect/Abort: Esc
  • Delete Element: Delete
  • Show Publish Dialog: Shift + P
  • Show Export Code Dialog: Shift + E
View shortcuts
  • ‍Preview mode: Shift + Command + P (Mac) or Shift + Control + P (Windows)
  • Grid 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 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 Navigator tab: F
  • 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
Other shortcuts
  • Margin / padding (all sides): Hold Shift + Drag
  • Margin / padding (top + bottom or left + right): Hold Alt + drag
  • Select parent / child element: Up arrow / Down arrow
  • Select sibling element: Left arrow / Right arrow
  • Select next / previous element: Alt + Left arrow / Right arrow
  • 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)