12 keyboard shortcuts to create faster on Webflow

I love productivity.

Optimizing your time is (in my opinion) super important! And what about you?

In this article, I have compiled a list of some keyboard shortcuts that will allow you to create more quickly in Webflow! 🏎

General Shortcuts

• Copy an element: Command + C (mac) or Control + C (windows)
• Paste an element: Command + V (mac) or Control + V (windows)
• Undo the last action: Command + Z (mac) or Control + Z (windows)

Adding Elements

• Add an element (A): Command + E (mac) or Control + E (windows)

Styling

• Assign a class to an element: Command + enter (mac) or Control + enter (windows)
• Change the spacing format for all four sides at once: Shift + drag (mac) or Shift + drag (windows)
• Modify horizontal or vertical spacing only: Option + drag (mac) or Alt + drag (windows)
• Change dynamic page: Shift + option + ◀️ ▶️ (mac) or Shift + Alt + ◀️ ▶️ (windows)

Responsive Display: Device View

With a single click, switch between different display formats! From computer to mobile, adapt your design to all formats! (Reminder: over 50% of global traffic comes from smartphones)

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

Bonus

Publish your Webflow site

1. Open the menu  : Shift + P (mac) or Shift + P (windows)
2. Publish it  : Shift + enter (mac) or Shift + enter (windows)

Find more of our Webflow tutorials and tips on our blog.

Bonus: Create your own keyboard shortcut in Webflow or Design more efficiently in Figma with these keyboard shortcuts!