Top Webflow Shortcuts to Speed Up Your Workflow (Win & Mac)

When trying to create a website, beginners are often left craving for efficiency. Webflow helps you get over this challenge with some keyboard shortcuts. Mastering the Webflow shortcuts can dramatically speed up your design process. So you can focus on creativity rather than clicks.

Whether you’re a developer fine-tuning interactions or a designer arranging layouts, these shortcuts can be helpful. They streamline tasks, reduce repetitive actions, and boost productivity.

Through this blog, we’ll shed light on shortcuts often used by the Webflow experts to boost efficiency. With these shortcuts, you can work smarter, not harder. Let’s dive in and transform your workflow.

Webflow Keyboard Shortcuts

Working in Webflow shouldn’t feel like a chore—keyboard shortcuts can turn tedious tasks into quick keystrokes. It saves time and keeps your creative flow intact. Let’s look at the popular ones.

General

Command	For Windows	For Mac
Show shortcut cheatsheet	Ctrl + /	Cmd + /
Save as a snapshot	Ctrl + Alt + S	Cmd + Option + S
Deselect/Abort	Esc	Esc
Delete element	Delete	Delete
Show Publish dialog	Shift + P	Shift + P
Publish	Shift + P, Shift + Enter	Shift + P, Shift + Enter
Show Export code dialog	Shift + E	Shift + E
Edit element	Enter	Enter
Open the slash command menu inside the rich text	/ (while editing text)	/ (while editing text)

Components

Command	For Windows	For Mac
Show Components panel	Shift + A	Shift + A
Make the selected element a component	Ctrl + Shift + A	Cmd + Shift + A
Edit the main instance of the selected component	Double-click	Double-click

Copy/Paste

Command	For Windows	For Mac
Copy	Ctrl + C	Cmd + C
Cut	Ctrl + X	Cmd + X
Paste	Ctrl + V	Cmd + V
Duplicate	Ctrl + D	Cmd + D

Main Navigation

Command	For Windows	For Mac
Design	Alt + D	Option + D
CMS	Alt + C	Option + C
Insights	Alt + I	Option + I
Preview	Alt + P	Option + P

Undo/Redo

Command	For Windows	For Mac
Undo	Ctrl + Z	Cmd + Z
Redo	Ctrl + Shift + Z	Cmd + Shift + Z

View

Command	For Windows	For Mac
Comments mode	Shift + N	Shift + N
Guide overlay	Shift + G	Shift + G
Toggle rulers	Shift + R	Shift + R
Show element edges	Ctrl + Shift + E	Cmd + Shift + E
X-ray mode	Ctrl + Shift + X	Cmd + Shift + X
Show empty elements	Ctrl + Shift + M	Cmd + Shift + M

Device Views

Command	For Windows	For Mac
Desktop	1	1
Tablet	2	2
Mobile (L)	3	3
Mobile	4	4

Move Elements

Command	For Windows	For Mac
Move before the previous element	[ or Ctrl + Up	[ or Cmd + Up
Move after the next element	] or Ctrl + Down	] or Cmd +Down
Move before the sibling element	Ctrl + [ or Ctrl + Left	Cmd + [ or Cmd + Left
Move after the sibling element	Ctrl + ] or Ctrl + Right	Cmd + ] or Cmd + Right
Move before the parent element	Ctrl + Shift + Up	Cmd + Shift + Up
Move after the parent element	Ctrl + Shift + Down	Cmd + Shift + Down

Left-hand toolbar

Command	For Windows	For Mac
Show Add panel	A	A
Show the Style selectors panel	G	G
Show Navigator panel	Z	Z
Expand/collapse Navigator elements	Alt + Z	Option + Z
Show Pages panel	P	P
Show Variables panel	V	V
Show Assets panel	J	J
Show Audits panel	U	U
Expand/collapse Audits panel sections	Alt + U	Option + U
Expand/collapse nested page folders	Alt + Shift + Click	Option + Shift + Click

Right-hand tabs

Command	For Windows	For Mac
Show Style tab	S	S
Toggle Style panel Focus mode	Alt + Shift + S	Option + Shift + S
Expand/collapse Style panel sections	Alt + S	Option + S
Show Settings tab	D	D
Show Interactions tab	H	H

Other

Command	For Windows	For Mac
Margin/padding (all sides)	Shift + Drag	Shift + Drag
Margin/padding (top + bottom or left + right)	Alt + Drag	Option + Drag
Select the parent/child element	Up/Down arrow	Up/Down arrow
Select sibling element	Left/Right arrow	Left/Right arrow
Select the next/previous element	Alt + Up/Down arrow	Option + Up/Down arrow
Add a class to the selected element	Ctrl + Enter	Cmd + Enter
Duplicate the last class on the selected element	Ctrl + Alt + Enter	Cmd + Option + Enter
Rename the last class on the selected element	Ctrl + Shift + Enter	Cmd + Shift + Enter
Remove the last class on the selected element	Alt + Shift + Enter	Option + Shift + Enter
Expand/collapse panel sections	Alt + Click	Option + Click
Toggle collaborators on the selected element	Ctrl + Shift + L	Cmd + Shift + L
Wrap the element in a Div block	Ctrl + Alt + G	Cmd + Option + G
Wrap the element in a Link block	Ctrl + Alt + A	Cmd + Option + A
Wrap the element in H Flex	Alt + G	Cmd + G
Wrap the element in V Flex	Ctrl + G	Cmd + G
Unwrap element	Ctrl + Shift + G	Cmd + Shift + G

Find

Command	For Windows	For Mac
Quick find	Ctrl + E or Ctrl + K	Cmd + E or Cmd + K
Help	Ctrl + Shift + /	Cmd + Shift + /

You can also access this cheat sheet in the Webflow editor by using the command “Shift + /”. From there, you can use the appropriate Webflow shortcut to increase development efficiency.

Speaking of improving efficiency, there are a few other ways to go.

Tip to Improve Webflow Development Efficiency

Webflow’s visual development platform is powerful, but mastering these workflow optimizations can save you hours of work. Here’s how to work smarter, not harder:

Master Keyboard Shortcuts

Every second counts in web design. Webflow’s keyboard shortcuts let you perform actions instantly—without hunting through menus.

Start with core shortcuts like Cmd/Ctrl + E (new element) and Cmd/Ctrl + D (duplicate). Then gradually incorporate advanced ones like Option/Alt + Arrow (nudge elements). Over time, muscle memory will supercharge your workflow.

Use Global Swatches & Classes

Inconsistent colors slow down edits and create messy designs. Define global swatches for brand colors and reusable classes (e.g., .card, .heading-lg) to ensure uniformity.

Prefix global classes with _ (e.g., _primary-color) to keep them organized at the top of your Styles panel.

Componentize Reusable Elements

Buttons, nav bars, and footers should never be rebuilt from scratch. Turn them into components (Cmd/Ctrl + Alt + C) for one-click updates across your entire site.

Here’s a pro tip. Use “Override on instance” sparingly to maintain scalability.

Leverage the Navigator Panel

Complex layouts can become a tangled mess. The Navigator (Cmd/Ctrl + \) gives you a bird’s-eye view of your structure. Here’s a pro tip for the same. Name layers clearly (e.g., “Hero Section – Container”) and use folders to group related elements.

Optimize with Quick Find

Time wasted scrolling = money lost. Hit Cmd/Ctrl + F to instantly jump to any element, page, or style. Here’s a tip. Combine this with Webflow’s slash commands (e.g., /div) for rapid element insertion.

Preview Responsive Designs Faster

Manually resizing the viewport is outdated. Use device presets (Cmd/Ctrl + Shift + 1/2/3) to toggle between desktop, tablet, and mobile. Here’s a tip. Test interactions in Preview Mode (Cmd/Ctrl + Shift + P) before publishing.

You can also enable the option “Publish Only Changed” through the project settings to reduce deployment times. These practices all combined can help cut development time in half while maintaining precision.

You can also hire our professional Webflow development company to ensure the best website is built in no time.

FAQs on Webflow Shortcuts

Let’s Summarize

Mastering Webflow shortcuts isn’t about memorizing every key combo—it’s about saving time so you can focus on what matters: building great websites. Start with the essentials (like Ctrl/Cmd + E for new elements or Ctrl/Cmd + D to duplicate). Then, gradually integrate more advanced shortcuts into your workflow.

The more you use them, the more intuitive they’ll become, turning tedious tasks into quick keystrokes. These shortcuts cut out the clutter and let you work at the speed of thought.

So, want help with designing the best Webflow website? Then consult with our Webflow professionals today!