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:
| Shortcut | Action |
|---|---|
| Ctrl + S | Save |
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Ctrl + X | Cut |
| Ctrl + C | Copy |
| Ctrl + V | Paste |
| Ctrl + A | Select All |
| Ctrl + F | Find |
| Ctrl + G | Find Next |
| Ctrl + H | Replace |
| Ctrl + N | New Page |
| Ctrl + O | Open Page |
| Ctrl + P | |
| Ctrl + D | Duplicate |
| Ctrl + E | Export |
| Ctrl + L | Publish |
| Ctrl + U | Unpublish |
| Ctrl + Shift + S | Save as Template |
| Ctrl + Shift + F | Publish and Open in Editor |
| Ctrl + Shift + C | Clear Cache |
| Ctrl + Shift + E | Export Code |
| Ctrl + Shift + L | Logout |
| Ctrl + / | Show/Hide Keyboard Shortcuts Help |
| F1 | Show/Hide Navigator |
| F2 | Show/Hide Style Panel |
| F3 | Show/Hide Pages Panel |
| F4 | Show/Hide Assets Panel |
| F5 | Refresh Preview |
| F6 | Toggle Preview Mode |
| F7 | Toggle Fullscreen Mode |
| F8 | Toggle Grid |
| F9 | Toggle Debug Mode |
| F10 | Toggle Overlay |
| F11 | Toggle Preview Size |
| F12 | Toggle Developer Tools |
Designer Keyboard Shortcuts:
| Shortcut | Action |
|---|---|
| Esc | Deselect |
| Del | Delete |
| Ctrl + G | Group Selection |
| Ctrl + Shift + G | Ungroup Selection |
| Ctrl + Shift + M | Toggle Ruler |
| Ctrl + Alt + X | Switch to Multi-Select |
| Ctrl + Alt + M | Toggle Device Menu |
| Ctrl + Alt + G | Toggle Grid Overlay |
| Ctrl + Alt + R | Toggle Rulers Overlay |
| Ctrl + Alt + ; | Toggle Hotspots Overlay |
| Ctrl + Alt + L | Toggle Layout Mode |
| Ctrl + Alt + P | Toggle Properties Panel |
| Ctrl + Alt + S | Toggle Style Manager |
| Ctrl + Alt + A | Toggle Add Panel |
| Ctrl + Alt + T | Toggle Transform Panel |
| Ctrl + Alt + C | Toggle Canvas |
| Ctrl + Alt + V | Toggle Visualizer |
| Ctrl + Alt + D | Toggle Display Flexbox |
| Ctrl + Alt + I | Toggle Interaction Panel |
| Ctrl + Alt + U | Toggle Preview Toolbar |
| Ctrl + Alt + N | Toggle Navigator Panel |
Best Keyboard Shortcuts for Webflow for Different Platforms
Webflow Keyboard Shortcuts for Windows and Linux:
| Shortcut | Action |
|---|---|
| Ctrl + S | Save |
| Ctrl + Shift + Z | Redo |
| Ctrl + Z | Undo |
| Ctrl + X | Cut |
| Ctrl + C | Copy |
| Ctrl + V | Paste |
| Ctrl + A | Select All |
| Ctrl + D | Duplicate |
| Ctrl + E | Center Align |
| Ctrl + L | Left Align |
| Ctrl + R | Right Align |
| Ctrl + Shift + I | Italicize |
| Ctrl + Shift + B | Bold |
| Ctrl + Shift + U | Underline |
| Ctrl + Shift + S | Strikethrough |
| Ctrl + – | Zoom Out |
| Ctrl + = | Zoom In |
| Ctrl + 0 | Reset Zoom |
| Ctrl + / | Toggle Comment |
| Ctrl + Shift + C | Copy CSS properties |
| Ctrl + Shift + V | Paste CSS properties |
| Ctrl + Shift + E | Edit as HTML |
| Ctrl + Shift + L | Show Element Hierarchy |
| Ctrl + Shift + M | Toggle Navigator |
| Ctrl + Shift + P | Preview |
Webflow Keyboard Shortcuts for macOS:
| Shortcut | Action |
|---|---|
| Cmd + S | Save |
| Cmd + Shift + Z | Redo |
| Cmd + Z | Undo |
| Cmd + X | Cut |
| Cmd + C | Copy |
| Cmd + V | Paste |
| Cmd + A | Select All |
| Cmd + D | Duplicate |
| Cmd + E | Center Align |
| Cmd + L | Left Align |
| Cmd + R | Right Align |
| Cmd + Shift + I | Italicize |
| Cmd + Shift + B | Bold |
| Cmd + Shift + U | Underline |
| Cmd + Shift + S | Strikethrough |
| Cmd + – | Zoom Out |
| Cmd + = | Zoom In |
| Cmd + 0 | Reset Zoom |
| Cmd + / | Toggle Comment |
| Cmd + Shift + C | Copy CSS properties |
| Cmd + Shift + V | Paste CSS properties |
| Cmd + Shift + E | Edit as HTML |
| Cmd + Shift + L | Show Element Hierarchy |
| Cmd + Shift + M | Toggle Navigator |
| Cmd + Shift + P | Preview |
FAQs
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.”
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.
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.
