Webflow is a powerful web design tool that allows users to build responsive websites without writing code. To speed up your workflow and become more efficient, learning the shortcut keys can save a lot of time.
Webflow Windows Shortcut Keys
General
Shortcut
Action
Shift/
Show shortcut cheatsheet
CtrlShiftS
Save as a snapshot
Esc
Deselect or abort
Del
Delete element
ShiftP
Show publish dialog
ShiftE
Show export code dialog
Enter
Edit element
View
Shortcut
Action
CtrlShiftP
Preview mode
CtrlShiftG
Guide overlay
CtrlShiftE
Show element edges
CtrlShiftX
X-ray mode
Left-hand Toolbar
Shortcut
Action
A
Show add panel
Z
Show navigator tab
P
Show pages panel
ShiftA
Show symbols panel
CtrlShiftA
Make selected element a symbol
J
Show asset manager
Right-hand Tabs
Shortcut
Action
S
Show style tab
D
Show settings tab
G
Show style manager tab
H
Show interactions tab
Copy/Paste
Shortcut
Action
CtrlC
Copy
CtrlX
Cut
CtrlV
Paste
Alt(drag)
Duplicate
Undo/Redo
Shortcut
Action
CtrlZ
Undo
CtrlShiftZ
Redo
Device View
Shortcut
Action
1
Desktop
2
Tablet
3
Phone (landscape)
4
Phone (portrait)
Style Panel
Shortcut
Action
Shift(drag)
Margin or padding (on all sides)
Alt(drag)
Margin or padding (top and bottom, or left and right)
CtrlEnter
Add class to selected element
CtrlShiftEnter
Rename last class on selected element
Find
Shortcut
Action
CtrlK
Quick find
Other
Shortcut
Action
Alt(click)
Expand or collapse panel sections
Up/Down
Select parent or child element
Left/Right
Select sibling element
AltLeft/Right
Select next or previous element
CtrlShiftL
Toggle collaborators on selected element
Download Webflow Windows Shortcut Keys Cheatsheet PDF
We provide a Webflow Windows Shortcut Keys PDF download feature. Click the download button to get the file. Please note that generating the PDF may take some time, so please be patient. Download
Webflow MacOS Shortcut Keys
General Functions
Shortcut Key
Description
Cmd + S
Save the project
Cmd + Z
Undo the last action
Cmd + Shift + Z
Redo the last undone action
Cmd + A
Select all elements in the current view
Cmd + Shift + A
Deselect all elements
Cmd + Shift + S
Save a copy of the project
Cmd + Q
Quit Webflow
Cmd + P
Open a new project
Cmd + R
Refresh the project view
Cmd + Shift + R
Reload the current page in Designer
Layout and Navigation
Shortcut Key
Description
Cmd + 1
Switch to the Designer panel
Cmd + 2
Switch to the Pages panel
Cmd + 3
Open the Assets panel
Cmd + 4
Switch to the Style panel
Cmd + 5
Switch to the Interactions panel
Cmd + 6
Switch to the CMS Collections panel
Cmd + Shift + F
Open the search bar
Cmd + E
Open the settings panel
Cmd + Shift + I
Open the Inspect panel
Cmd + T
Open a new tab
Cmd + Option + T
Open the Webflow designer in full-screen mode
Element Management
Shortcut Key
Description
Cmd + Shift + D
Duplicate the selected element
Cmd + Shift + C
Clone the selected element
Cmd + Shift + P
Preview the project
Cmd + G
Group the selected elements
Cmd + Shift + G
Ungroup the selected elements
Cmd + Shift + X
Cut the selected element
Cmd + C
Copy the selected element
Cmd + V
Paste the copied element
Cmd + Shift + V
Paste the copied element without style
Cmd + Shift + Z
Redo the last undone action
Text and Typing Functions
Shortcut Key
Description
Cmd + B
Bold selected text
Cmd + I
Italicize selected text
Cmd + U
Underline selected text
Cmd + Shift + K
Strike through selected text
Cmd + Shift + L
Align text left
Cmd + Shift + R
Align text right
Cmd + Shift + C
Align text center
Cmd + Shift + J
Justify text
Styling Functions
Shortcut Key
Description
Cmd + Option + I
Toggle the Inspect panel
Cmd + Shift + M
Open the Style Manager panel
Cmd + Shift + L
Toggle the left panel visibility
Cmd + Option + S
Toggle the settings panel
Cmd + Shift + V
Paste styles from another element
Grid and Layout
Shortcut Key
Description
Cmd + Shift + M
Open the grid layout panel
Cmd + Option + M
Open the flexbox layout panel
Cmd + Shift + P
Toggle preview mode
Cmd + Shift + H
Hide all panels
Cmd + Option + F
Open the Flexbox helper panel
Preview and Publishing
Shortcut Key
Description
Cmd + Shift + P
Preview the project
Cmd + Shift + E
Publish the project
Cmd + Option + P
Publish the selected page
Cmd + Shift + B
Toggle between design and preview modes
Browser & Page Navigation
Shortcut Key
Description
Cmd + Tab
Switch between open applications
Cmd + Shift + Tab
Switch to the previous open application
Cmd + Option + Arrow Left
Go to the previous page in Designer
Cmd + Option + Arrow Right
Go to the next page in Designer
Download Webflow MacOS Shortcut Keys Cheatsheet PDF
We provide a Webflow MacOS Shortcut Keys PDF download feature. Click the download button to get the file. Please note that generating the PDF may take some time, so please be patient. Download
About Webflow
Webflow is a web design platform that allows users to design, build, and launch responsive websites visually. Unlike traditional website builders, Webflow gives users control over HTML, CSS, and JavaScript without the need for coding. It also integrates powerful CMS features, allowing users to create dynamic content-driven sites.
Webflow Official Information
Here are some key official resources for Webflow users:
Download Webflow: Webflow is a cloud-based application, so there is no need to download or install anything. Simply sign up and start using Webflow in your browser.
How do I switch between different panels in Webflow?
You can use Ctrl + (1-3) for Windows or Cmd + (1-3) for MacOS to switch between the Designer, Pages, and Assets panels.
How can I quickly duplicate an element?
Use Ctrl + Shift + D (Windows) or Cmd + Shift + D (MacOS) to duplicate the selected element.
What is the shortcut for previewing my design?
The shortcut is Ctrl + Shift + P for Windows or Cmd + Shift + P for MacOS.
Can I undo or redo my actions in Webflow?
Yes, use Ctrl + Z (Windows) or Cmd + Z (MacOS) to undo, and Ctrl + Shift + Z (Windows) or Cmd + Shift + Z (MacOS) to redo actions.
Is there a shortcut to select all elements in the workspace?
Use Ctrl + A (Windows) or Cmd + A (MacOS) to select all elements in the Designer view.
How do I deselect all elements?
Use Ctrl + Shift + A (Windows) or Cmd + Shift + A (MacOS) to deselect all elements.
Can I access the search bar with a shortcut?
Yes, use Ctrl + Shift + F (Windows) or Cmd + Shift + F (MacOS) to open the search bar.
Is there a shortcut to access the settings panel?
Yes, use Ctrl + E (Windows) or Cmd + E (MacOS) to open the settings panel.
How do I save my work quickly?
Simply use Ctrl + S (Windows) or Cmd + S (MacOS) to save your project.
Conclusion
Mastering Webflow's keyboard shortcuts can significantly enhance your workflow and help you design websites more efficiently. By using the shortcuts listed above, you’ll be able to navigate Webflow faster, perform common actions more quickly, and focus more on creativity rather than repetitive tasks. Be sure to regularly refer to the Webflow official website for updates and additional resources.
