Keyboard shortcuts in Webflow

Use keyboard shortcuts in Webflow to make your workflow as efficient as possible.

getting-started
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

In this lesson, you’ll learn:

  1. General shortcuts
  2. View shortcuts
  3. Left-hand toolbar shortcuts
  4. Right-hand tabs shortcuts
  5. Copy/paste shortcuts
  6. Undo/redo shortcuts
  7. Device view shortcuts
  8. Style panel shortcuts
  9. Other shortcuts
  10. Find shortcuts
  11. Move element shortcuts
Note: If you have any ideas for a cool keyboard shortcut, let us know and we’ll look into adding it.

General 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 panel: Z
  • Show Pages panel: P
  • Show Components panel: Shift + A
  • Make selected element a component: Command + Shift + A (Mac) or Control + Shift + A (Windows)
  • Show Assets panel: J

Right-hand tabs shortcuts

  • Show Style panel: S
  • Show Element settings panel: D
  • Show Style Manager panel: G
  • Show Interactions panel: 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: Command + D (Mac) or Control + D (Windows)
  • Duplicate: Option + Drag (Mac) or Alt + Drag (Windows)

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 content editors on selected element: Command + Shift + L (Mac) or Control + Shift + L (Windows)
  • Duplicate last class on selected element: Command + Option + Enter (Mac) or Control + Alt + Enter (Windows)
  • Remove last class on selected element: Option + Shift + Enter (Mac) or Alt + Shift + Enter (Windows)
  • Wrap element in H Flex: Option + G (on Mac) or Alt + G (on Windows) 
  • Wrap element in V Flex: Command + G (on Mac) or Control + G (on Windows) 
  • Unwrap element: Command + Shift + G (on Mac) or Control + Shift + G (on Windows)

Find shortcuts

  • Quick find: Command + E (Mac) or Control + E (Windows) / Command + K (Mac) or Control + K (Windows)

Move element shortcuts

These shortcuts let you move elements on the canvas:

  • Move element before previous element: [ or Command + Down (Mac) or Control + Down (Windows)
  • Move element after previous element: ] or Command + Up (Mac) or Control + Up (Windows)
  • Moves element before sibling element within current parent: Command + [ or Command + Left (Mac) or Control + Left (Windows)
  • Moves element after sibling element within current parent: Command + ] or Command + Right (Mac) or Control + Right (Windows)
  • Move element before parent element: Command + Shift + Up (Mac) or Control + Shift + Up (Windows)
  • Move element after parent element: Command + Shift + Down (Mac) or Ctrl + Shift + Down (Windows)

Move element shortcut limitations:

  • You won’t be able to move elements outside of dynamic elements (e.g., a Collection list)
  • If you try to move a pinned element from its parent element (e.g., moving a Slider mask outside of the Slider wrapper), the entire parent element (e.g., the Slider wrapper) will move

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?