Breakpoints Shortcuts in Webflow

Breakpoint shortcuts

Learn how to use the number keys to rapidly switch between breakpoints in the Webflow Designer.

https://youtu.be/DV36RpAeNtA

Keyboard shortcuts can help speed up your web design and proofing process.

To switch between breakpoints in the Webflow Designer, use the number keys:

• 1 for Desktop view
• 2 for Tablet view
• 3 for Mobile landscape view
• 4 for Mobile portrait view

• If you’ve added larger breakpoints (1920 pixels, 1440 pixels, or 1280 pixels), the leftmost breakpoint becomes 1, the second-leftmost breakpoint becomes 2, and so on.

  There are keyboard shortcuts for almost everything

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.

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

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: 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 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)