12 keyboard shortcuts to create faster on Webflow

Documentation
December 17, 2021
3 min
A hand pointing at a computer keyboard with a white Webflow logo in the background.
Key points

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!

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today