The Keyboard Shortcut to Quickly Open Beaver Builder’s Responsive Editing Mode (Plus Other Helpful Keyboard Shortcuts for Beaver Builder)

The Keyboard Shortcut To Quickly Open Beaver Builder’s Responsive Editing Mode (plus Other Helpful Keyboard Shortcuts For Beaver Builder) Featured Image

 

If you’re familiar with Beaver Builder’s responsive editing mode, you’ll know just how much of a useful tool it is for building responsive websites. However, if you need to make a lot of responsive edits on a page, opening the editing mode via the dropdown menu or the buttons in the module settings can get quite tiring.

Luckily, Beaver Builder has a shortcut for that!

To open the responsive editing mode in Beaver Builder, just press “r” – you can also continue pressing “r” to toggle between the different breakpoint sizes, or “shift + r” to toggle backwards (so you don’t have to press “r” three times to go back around through all the breakpoints).

 

Other helpful keyboard shortcuts for Beaver Builder:

“p” opens preview mode

The developers also added keyboard shortcuts to open all of the 4 tabs you use to add modules and rows. They actually lined them up in a row of 4 consecutive keys (“j” “k,” “l,” and “;”) to make it easy to remember and use without looking at the keys. So:

“j” opens the “modules” tab

“k” opens the “rows” tab

“l” opens the “templates” tab, and

“;” opens the “saved” tab

“shift + o” opens/closes the timeline so you can view and jump to all your rows and modules

“command + g” (or “shift + g” for Windows) opens the global style settings, so you can set global fonts and colors on your page

 

We hope these tips come in handy to help make your web building experience more streamlined (and help you save your wrist too!).

Happy web building!

Looking for more website tips? Read more articles in our Website Tips Series below:

How to Easily Make Responsive Headers for Mobile and Tablets in Beaver Builder (Step-by-Step Guide with Pictures)

7 Elements of a Successful Homepage

Best Practices for Business Website Images (4 Tips for Optimizing Your Photos)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top