ListsBest Keyboard Shortcuts for Webflow 2023: top recommendations

Best Keyboard Shortcuts for Webflow 2023: top recommendations

Increase your productivity with these essential keyboard shortcuts for Webflow web designers.

The Designer offers a wide range of the best keyboard shortcuts for webflow to enhance your design workflow. You can press Shift + / to quickly see the full list of shortcuts in the Designer. You can also find this list in the Designer’s help menu, which is at the bottom left. By using shortcuts in your design process, you can make sections much faster than before.

Webflow has a lot of helpful keyboard shortcuts, but some parts of the Webflow designer, like div-blocks and sections, don’t have shortcuts yet. To get around this problem, we made a tool that lets you make your own shortcuts and assign them to any key combination you want. This gives you the power to customize your workflow and make designing easier. Below we have mentioned the best keyboard shortcuts for webflow.

Best Keyboard Shortcuts for Webflow

General Keyboard Shortcuts:

Ctrl + SSave
Ctrl + ZUndo
Ctrl + YRedo
Ctrl + XCut
Ctrl + CCopy
Ctrl + VPaste
Ctrl + ASelect All
Ctrl + FFind
Ctrl + GFind Next
Ctrl + HReplace
Ctrl + NNew Page
Ctrl + OOpen Page
Ctrl + PPrint
Ctrl + DDuplicate
Ctrl + EExport
Ctrl + LPublish
Ctrl + UUnpublish
Ctrl + Shift + SSave as Template
Ctrl + Shift + FPublish and Open in Editor
Ctrl + Shift + CClear Cache
Ctrl + Shift + EExport Code
Ctrl + Shift + LLogout
Ctrl + /Show/Hide Keyboard Shortcuts Help
F1Show/Hide Navigator
F2Show/Hide Style Panel
F3Show/Hide Pages Panel
F4Show/Hide Assets Panel
F5Refresh Preview
F6Toggle Preview Mode
F7Toggle Fullscreen Mode
F8Toggle Grid
F9Toggle Debug Mode
F10Toggle Overlay
F11Toggle Preview Size
F12Toggle Developer Tools

Designer Keyboard Shortcuts:

Ctrl + GGroup Selection
Ctrl + Shift + GUngroup Selection
Ctrl + Shift + MToggle Ruler
Ctrl + Alt + XSwitch to Multi-Select
Ctrl + Alt + MToggle Device Menu
Ctrl + Alt + GToggle Grid Overlay
Ctrl + Alt + RToggle Rulers Overlay
Ctrl + Alt + ;Toggle Hotspots Overlay
Ctrl + Alt + LToggle Layout Mode
Ctrl + Alt + PToggle Properties Panel
Ctrl + Alt + SToggle Style Manager
Ctrl + Alt + AToggle Add Panel
Ctrl + Alt + TToggle Transform Panel
Ctrl + Alt + CToggle Canvas
Ctrl + Alt + VToggle Visualizer
Ctrl + Alt + DToggle Display Flexbox
Ctrl + Alt + IToggle Interaction Panel
Ctrl + Alt + UToggle Preview Toolbar
Ctrl + Alt + NToggle Navigator Panel

Best Keyboard Shortcuts for Webflow for Different Platforms

Webflow Keyboard Shortcuts for Windows and Linux:

Ctrl + SSave
Ctrl + Shift + ZRedo
Ctrl + ZUndo
Ctrl + XCut
Ctrl + CCopy
Ctrl + VPaste
Ctrl + ASelect All
Ctrl + DDuplicate
Ctrl + ECenter Align
Ctrl + LLeft Align
Ctrl + RRight Align
Ctrl + Shift + IItalicize
Ctrl + Shift + BBold
Ctrl + Shift + UUnderline
Ctrl + Shift + SStrikethrough
Ctrl + –Zoom Out
Ctrl + =Zoom In
Ctrl + 0Reset Zoom
Ctrl + /Toggle Comment
Ctrl + Shift + CCopy CSS properties
Ctrl + Shift + VPaste CSS properties
Ctrl + Shift + EEdit as HTML
Ctrl + Shift + LShow Element Hierarchy
Ctrl + Shift + MToggle Navigator
Ctrl + Shift + PPreview

Webflow Keyboard Shortcuts for macOS:

Cmd + SSave
Cmd + Shift + ZRedo
Cmd + ZUndo
Cmd + XCut
Cmd + CCopy
Cmd + VPaste
Cmd + ASelect All
Cmd + DDuplicate
Cmd + ECenter Align
Cmd + LLeft Align
Cmd + RRight Align
Cmd + Shift + IItalicize
Cmd + Shift + BBold
Cmd + Shift + UUnderline
Cmd + Shift + SStrikethrough
Cmd + –Zoom Out
Cmd + =Zoom In
Cmd + 0Reset Zoom
Cmd + /Toggle Comment
Cmd + Shift + CCopy CSS properties
Cmd + Shift + VPaste CSS properties
Cmd + Shift + EEdit as HTML
Cmd + Shift + LShow Element Hierarchy
Cmd + Shift + MToggle Navigator
Cmd + Shift + PPreview


What are the 7 special keys in keyboard?

Shift+or Shift+. , , , , , Tab, Caps Lock, Enter, Alt, Ctrl, Num Lock, Shift, backspace, Esc, etc. are all examples of special keys on a keyboard. Characters on a computer keyboard that were not on the original typewriter keyboard were called “special characters.”

What is hot shortcut key?

A “hot key” is a key or group of keys on a computer keyboard that, when pressed all at once, does something faster than a mouse or other input device. For example, a hot key might start an application. Shortcut keys are another name for hot keys. A lot of operating systems and programs can use hot keys.

Where is the code in Webflow?

Select the element you want to embed on the canvas and click the “cog” icon for settings. Click Open code editor in the Settings panel under HTML embed settings and then click the Embed element on the canvas.

Dian Erwin
Dian Erwin
Dian Erwin is a review writer for Bollyinside, covering topics related to computing, such as laptops, tablets, phones, and other hardware. Dian spends much too much of his free time on Twitter, reading speculative fiction novels, playing video games, and reading comic books. He also enjoys reading video game manuals.
Trending Today
- Advertisment -