Keyboard shortcuts in Webflow

Updated

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

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 + /. Alternatively, you can click the Webflow logo in the top bar of the Designer and choose Keyboard shortcuts from the hamburger menu that appears on hover.

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
  • Expand/collapse all nested page folders: Option + Shift + click (Mac) or Alt + Shift + click (Windows)
  • Expand/collapse all pages: Option + click (Mac) or Alt + click (Windows) any page section header
  • Expand/collapse all folders: Option + click (Mac) or Alt + click (Windows) any folder

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 teammates working in the Editor 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

Markdown shortcuts

These Markdown shortcuts let you format text (e.g., bold, italicize, add a hyperlink) and block elements (e.g., headings, lists) within rich text elements and rich text fields using only your keyboard.

  • Italicize text: *text* or _text_
  • Bold text: **text** or __text__
  • Italicize and bold text: ***text*** or ___text___
  • Insert hyperlink: [hyperlink text](https://www.url.com)
  • Insert Heading 1: # + Space
  • Insert Heading 2: ## + Space
  • Insert Heading 3: ### + Space
  • Insert Heading 4: #### + Space
  • Insert Heading 5: ##### + Space
  • Insert Heading 6: ###### + Space
  • Insert Blockquote: > + Space
  • Insert unordered (i.e., bulleted) list: - + Space‍
  • Insert ordered (i.e., numbered) list: 1. + Space

Slash command shortcuts

When you’re editing content inside a rich text element (RTE) or rich text field (RTF), you can use the ‘slash command’ shortcut to quickly add new content elements. To use the slash command shortcut, press “/” (forward slash) on your keyboard and select the desired element from the Add menu or begin typing to filter the list of elements:

  • Heading (H1–H6)
  • Numbered list
  • Bulleted list
  • Paragraph
  • Blockquote
  • Image
  • Video
  • Rich content
  • HTML embed
  • Code block

You can also use the Up and Down arrows on your keyboard to move through the list of elements. Press the Return key to select an element and add it to your RTE or RTF.

Flex and grid layout shortcuts

You can use the following shortcuts with the align box to quickly align flex and grid children inside their parent elements.

Flex shortcuts

  • Set justification (i.e., justify-content) to space between: double-click an align box cell or Command (on Mac) or Control (on Windows) + click an align box cell
  • Set alignment (i.e., align-items) to stretch: Option (on Mac) or Alt (on Windows) + click an align box cell

Learn more about aligning flex children.

Grid shortcuts

  • Set justification (i.e., justify-items) to stretch: double-click an align box cell or Command (on Mac) or Control (on Windows) + click an align box cell
  • Set alignment (i.e., align-items) to stretch: Option (on Mac) or Alt (on Windows) + click an align box cell

Learn more about aligning grid children.

‍

Related articles