Develop Faster by Customizing Webflow Keyboard Shortcuts

Documentation
March 20, 2023
3 min
Webflow and Flowbase logo with a preview of the custom keyboard shortcuts feature.
Key points

Developing a project in Webflow can be time-consuming. Adding new divs, inserting a heading, then a paragraph, and so on. There are so many small tasks that take up some of our time, but when added together, they extend the overall development time.

Today, we will explore how, with the Flowbase extension, you can optimize your development time in Webflow using keyboard shortcuts.

Basic Webflow Keyboard Shortcuts

We have previously written an article that includes a list of around ten keyboard shortcuts to help you speed up your creation process in Webflow.

In that list, we particularly mention shortcuts for adding elements (Ctrl or Cmd + E) and for publishing (Shift + Enter).

Creating Your Own Webflow Shortcuts

The Flowbase extension is a Chrome plugin that assists in development within Webflow. With this plugin, you can import a color palette from Figma or compress your images in Webflow.

A new feature now allows you to create your own keyboard shortcuts. To do this, you need to:

  • Go to your Webflow project
  • Click on the Flowbase extension
  • Select Tool Belt
  • Click on Shortcuts Manager
  • Enable the Shortcuts feature
  • Define your own keyboard shortcuts

Currently, there is a limited number of available shortcuts:

  • Add a section
  • Insert a div block
  • Add a container
  • Insert a heading
  • Add a paragraph
  • Insert a button
  • Publish the site / Webflow project
  • Open the Flowbase extension
Custom Webflow keyboard shortcuts: Flowbase extension

However, you can assign specific keys to perform these actions.

In the future, the list of options will likely be expanded, but with this feature, you can already boost your productivity as a Webflow developer.

For more tips, tutorials, and advice on Webflow, you can check out our blog and our YouTube channel. If you’re looking for a site that generates leads, you can see our expertise in developing websites.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications
Webflow frameworks: Client-First vs Lumos
Documentation
Development

Client-First vs Lumos: Which Webflow framework to choose in 2025?

Client-First vs Lumos: Which Webflow framework to choose in 2025?
ChatGPT logo vs Midjourney
Documentation
AI

ChatGPT 4o vs Midjourney: Which Is the Best AI Image Generation Tool?

ChatGPT 4o vs Midjourney: Which Is the Best AI Image Generation Tool?

Want to turn your website into your most valuable asset?

Contact us today