Hotkeys in Webflow

The Designer provides numerous hotkeys to accelerate your design process. To view the complete list of all hotkeys in the Designer quickly, press Shift + /. You can also find this list in the help menu located at the bottom left corner of the Designer interface.

This tutorial covers:

1. General quick commands
2. Screen commands
3. Shortcut commands for the left-hand toolbar
4. Quick commands for right-hand tabs
5. Commands for copying and pasting
6. Commands for undo and redo
7. Viewing options in different devices commands
8. Commands for the style panel
9. Various other quick commands
10. Searching commands
11. Moving elements commands
12. Shortcuts specific to Markdown usage
13. Keyboard shortcuts specific to Flex and grid layouts

Reminder: If you have any suggestions for an interesting keyboard shortcut, let us know, and we’ll consider adding it.

General Hotkeys

• Show hotkey reference: Shift + /
• Save as a snapshot: Shift + Command + S (Mac) or Shift + Control + S (Windows)
• Deselect or exit element: Esc
• Delete element: Delete
• Show publish dialog: Shift + P
• Show export code dialog: Shift + E
• Edit element: Enter

Screen Commands

• ‍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
• Convert selected element into 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

Commands for right-hand tabs

• Show Style panel: S
• Show Element settings panel: D
• Show Style Manager panel: G‍
• Show Interactions panel: H

Copying and Pasting Hotkeys

• ‍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 and Redo Hotkeys

• Undo: Command + Z (Mac) or Control + Z (Windows)
• Redo: Shift + Command + Z (Mac) or Shift + Control + Z (Windows)

Commands for device views

• ‍Desktop: 1
• Tablet: 2
• Phone (landscape): 3
• Phone (portrait): 4

Style Panel Hotkeys

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

…Continued list remaining unchanged as per the original content.(for example, relocating a Slider mask outside of the Slider wrapper), the complete parent node (for example, the Slider wrapper) will shift.

Markdown quick keys

These Markdown quick keys help you style text (for instance, emphasize, italicize, incorporate a hyperlink) and block elements (for example, titles, lists) inside rich text components and rich text fields utilizing solely your keyboard.

• Italicize text: *text* or _text_
• Bold text: **text** or __text__
• Italicize and make text bold: ***text*** or ___text___
• Add 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 (in other words, bulleted) list: - + Space‍
• Insert ordered (i.e., numbered) list: 1. + Space

Flex and grid layout quick keys

You have the option to leverage the following quick keys along with the align box to rapidly align flex and grid offspring within their parent nodes.

Flex quick keys

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

Get more insights on aligning flex offspring.

Grid quick keys

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

Get to know more about aligning grid offspring.

‍