5.5 Time-Saving Pro Tips for Beaver Builder Lovers
If you are reading this, you probably know the basics of how to use Beaver Builder and have already fallen in love with it.
If you haven’t fallen in love yet, just wait… after this blog, you will.
Beaver Builder is, in my humble opinion, the best WordPress plugin ever. By using the ole “drag and drop” technique and giving you a ton of styling options, it can easily cut your development time in half. However, a tool is only as good as it’s user.
So without further ado, here are five and a half tips that will make your Beaver Building go much smoother and faster:
1. Global Settings
Consistency is essential to good website design; but when you are building ten individual pages, each one needing its own unique content, things can get a bit messy. At least that’s what Beaver Builder thought, because they made an easy site-wide solution for that very problem called “Global Settings”. It allows you to define the width settings for all the rows, columns, and modules on your site and set the breakpoint settings for small and medium devices, making responsive changes much faster.
To access it, you need to edit a page in Beaver Builder and press the name of the page in the top left corner. This will reveal a secret drop down menu called “Tools” with a link called “Global Settings.”
To override one of the settings for an individual module, simply edit the module in Beaver Builder and change the widths in the “Advanced Settings” tab. Furthermore, you can set the breakpoint settings for small and medium devices, making responsive changes much faster.
Note: If you have the Ultimate Beaver Builder add-on (which I also highly recommend) there are “UABB- Global Settings” that will give you even more settings to change.
2. Saving Items
“Global Settings” is great for responsive settings and makes widths consistent, but it lacks the plethora of styling options that the Beaver Builder users grow accustomed to. So, Beaver Builder added an even better feature – because they are amazing!
They created a function that allows any module, column, row, or page to be a saved as a template and reused anywhere else on the site. To do this just edit a page in Beaver Builder, edit a row, column, or module, press “Save As” (in the bottom right corner of the pop-up), name your item, click “Save,” and publish the page.
Note: You can even make the item global (keep the same content and style across the site)! This is a great option to use if you ever have something like a side bar menu that will have the same content on every page.
To save a whole page as a template: edit the page in Beaver Builder, press the name of the page in the top left corner to open up the “Tools” dropdown menu, and click “Save Template,” name the template, click “Save,” and publish the page.
To use them while editing a page with Beaver Builder, click the “+” button (in the top right corner), click “Saved,” and just drag your items to your page. To use a saved template click “Templates” (next to the “Saved” tab), click the drop down menu called “Landing Pages,” and hit “Saved Templates.” This will take you to all of your saved templates. To use the template on the page you are editing simply click on the name of your template and decide how much of the page you want it to replace.
3. Responsive View
Beaver Builder automatically makes their items responsive; however, it does need to be cleaned up a bit. This is when the responsive view comes in handy.
It is a new update from Beaver Builder that changes your viewport while editing the page. That way you can see how the changes you are making will affect the mobile-friendliness of the page, in real time.
You’ll access this amazing feature by clicking the little computer monitor icon to the left of many settings in a Beaver Builder modules.
Note: I say “many” because this feature is only found on certain settings of the module’s settings. If you can’t find one check the “Advanced” tab, they always have one next to the width settings.
4. Linking Values
This one won’t save you hours of editing like the “Saving Module” feature, but it will save you a few seconds of having your hand go between your mouse and your keyboard a billion times. #firstworldproblems
This feature is used by pressing the link icon that shows up next to fields where values can be entered, in Beaver Builder modules. When pressed, any value you put in one of the fields will be equal. Like so:
Another amazing tool (that has saved my butt on multiple occasions) is the “Revision” feature. It is your last hope if you accidentally discard a page instead of publishing it. You can find it in the “Tools” dropdown when editing a page in Beaver Builder under “Revisions.” It lets you pick a page that has been previously saved, preview it, and restore it to the page you are currently editing.
.5 Dark Theme
This is only a half tip because it is not exactly a “time-saver,” but it will make you look really cool and will let you edit in style. It allows you to change the color of the background to a dark grey when you edit a page on Beaver Builder. To be cool like me, all you have to do is go to the “Tools” drop down menu and click “Change UI Brightness.”
If you have any other Beaver Building tips or if you just want to brag on them a little bit, feel free to comment below. I hope these tips will help you become a faster, smarter, and even more stylish developer.