Getting Started with Beaver Builder: A Basic User's Guide

What is Beaver Builder?

Beaver Builder is a front-end WYSIWYG (What You See is What You Get, pronounced whiz-ee-wig) page builder for WordPress that allows both professional designers and non-tech team members to quickly and easily build compelling page layouts and designs. Mastering site builders like Beaver Builder, Elementor, Avada, and others is a web design discipline in itself, but the basics are easy to grasp. I’ll show you how to do the most basic and frequent actions in this guide.

Why Use Beaver Builder?

Basically, Beaver Builder helps people of all skill levels build attractive and professional custom websites more quickly. There are a ton of different modules for any kind of website, whether it’s a brochure, e-commerce, blog or anything else. It’s SEO ready, which is vital in today’s competitive online world. It’s also fast, lightweight, and endlessly customizable, so as you grow in your skill and understanding of web design and HTML+CSS you’ll be able to create better and better websites.

Maybe most importantly, it’s fun to use!

Getting Started: Installing and Activating Beaver Builder

Beaver Builder is a paid plugin. You can get more information on the different plans at https://www.wpbeaverbuilder.com/pricing/. Parrot Digital uses the pro package since we build multi-sites and use the Beaver Builder Theme occasionally. For most people the Standard package is fine. You can also grab the free/lite version here if you want to try it out and see if Beaver Builder works for your needs.

Whatever version you get, you’ll get a zip file. Navigate to Plugins, then click Add New and then Upload File. Choose your Zip File and hit Install Now.

Activate the plugin afterwords and you’re good to go! Now there’s two ways to launch Beaver Builder on your pages. The first is to create a new page or navigate to the page you want to edit and click Launch Beaver Builder.

The other is to head to the page and click Beaver Builder in the WordPress toolbar.

You should see the basic layout editing page like this, with the modules and rows in the top right corner:

Awesome, we’re ready to start building a page. Generally we build our websites completely from scratch. I'll show you how to use some of the basic tools first and then demonstrate how to use and edit a template.

Build a Landing Page in Less Than a Minute

Watch the .gif below to see just how easy and fast it is to build with Beaver Builder. In less than a minute, I build a page with a header, text, image, and form. Of course, you need all the assets ready to go and I would do a lot more styling after this, but do you see how useful this could be for rapid prototyping and deployment?

Most of Beaver Builder is as simple as drag, drop, and style. I recommend setting up your rows first, in whatever division increments you want, and then filling them with modules.

Remember you can hover over a column and style the column independent of the row and module as well.

Want to put pages together even faster? Check out -

Beaver Builder Templates

Beaver Builder comes pre-loaded with a few dozen templates for landing and content pages. These are a great option if you just need to get a site live as quickly as possible, or you’re having some trouble getting creative with your design.

We choose the Moon Landing landing page for this tutorial because space is cool.

1. 
   

1. 
   

Changing Text

So, first things first. How do we change text in Beaver Builder? It’s super easy. Hover over the text, click, and edit in the pop-up text editor just the same as you would in any other text editor. Click save and your edits are ready to go!

Changing Images

Changing photos and images in Beaver Builder is equally easy. Just click on the photo, remove the old photo, and select a new one from your Media Library.

Changing a Link

To change a button link, you just need to click on the button and change the destination URL. If the link is within a block of text, it’s as simple as changing out the hyperlink the same way you would in any text editor, like MS Word or Google docs.

Adding a Form to a Page

Adding a form is easy, assuming you’ve already made the form within whichever form builder plugin you use. I personally use Ninja Forms. Search for Forms in Modules and select Contact Form if you just have Beaver Builder, or the relevant plugin styler if you have PowerPack or some other third party plugin.

Drag, drop, and style!

Recommended Plugins

I use a few key plugins in concert with Beaver Builder for best results.

For Forms, I use Ninja Forms. It’s a powerful and easy-to-use form plugin that has quite a few extensions and integrations for almost any use case. Gravity Forms is another great option.

For enhancing Beaver Builder, I like PowerPack and WooPack by IdeaBox Creations. They give you all kinds of great modules, like accordions, before and after image sliders, and more.

Further Learning

Whether it’s WordPress, web design, or digital marketing - any field in tech is constantly and incessantly evolving. That means you have to keep evolving too.

To learn more about Beaver Builder, check out this exhaustive list of tutorials. The Beaver Builder Knowledge Base also has a few hundred articles that could be of use to you.

You’ll run into a wall with web design work unless you start learning some programming. HTML+CSS is the easiest and most sensible place to start. I learned with Team Treehouse and highly recommend their teaching style - they integrate videos with quizzes and coding challenges to keep you engaged with the material. They’re $29/mo. There’s also plenty of free options, like FreeCodeCamp, CodeAcademy, or about a million different YouTube channels.

Conclusion

Building websites with Beaver Builder and similar WYSIWYG site builders is a paradigm shift from the old ways of pure HTML and CSS code or back-end editors. You can put together a compelling visual experience in hours instead of weeks, test and improve designs extremely rapidly, and do it all with minimal prior knowledge.

It's worth taking the time to learn the ins-and-outs of Beaver Builder so you can maximize your impact with the plugin. I hope this introductory guide got you interested in exploring further with Beaver Builder!