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.

Webflow HotKeys

2024 年 12 月 30 日2025 年 1 月 9 日

Post Views: 129

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
`Ctrl` `Shift` `S`	Save as a snapshot
`Esc`	Deselect or abort
`Del`	Delete element
`Shift` `P`	Show publish dialog
`Shift` `E`	Show export code dialog
`Enter`	Edit element

View

Shortcut	Action
`Ctrl` `Shift` `P`	Preview mode
`Ctrl` `Shift` `G`	Guide overlay
`Ctrl` `Shift` `E`	Show element edges
`Ctrl` `Shift` `X`	X-ray mode

Left-hand Toolbar

Shortcut	Action
`A`	Show add panel
`Z`	Show navigator tab
`P`	Show pages panel
`Shift` `A`	Show symbols panel
`Ctrl` `Shift` `A`	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
`Ctrl` `C`	Copy
`Ctrl` `X`	Cut
`Ctrl` `V`	Paste
`Alt` `(drag)`	Duplicate

Undo/Redo

Shortcut	Action
`Ctrl` `Z`	Undo
`Ctrl` `Shift` `Z`	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)
`Ctrl` `Enter`	Add class to selected element
`Ctrl` `Shift` `Enter`	Rename last class on selected element

Find

Shortcut	Action
`Ctrl` `K`	Quick find

Other

Shortcut	Action
`Alt` `(click)`	Expand or collapse panel sections
`Up/Down`	Select parent or child element
`Left/Right`	Select sibling element
`Alt` `Left/Right`	Select next or previous element
`Ctrl` `Shift` `L`	Toggle collaborators on selected element

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

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:

Official Website: https://webflow.com
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.
Shortcut Key List: https://webflow.com/blog/keyboard-shortcuts

Webflow Shortcut Keys FAQs

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.