I have been using the Beaver Builder Plugin and Theme since 2014. The site you’re on right now was designed with this amazing “Design Building Mammal”. The creators Robby, Billy and Justin have not stopped updating this crazy thing. They seem to have more and more powerful updates every few months.
In this post, I’m going to break down some of the basics of the builder and how they work.
Let’s have a look at the backside of WordPress.
What you will notice is that I created a new page. I have the Beaver builder plugin installed. I also have the theme for beaver builder installed as well. The plugin and the theme go hand in hand and I recommend them both. So I just named the page sample page and have a new tab called Page Builder. When I click on the Page Builder tab it will bring up the front-end editor.
Choosing a Template
It will default to a module that lets you choose a pre-made template like an about page or contact page and so forth. You can also create custom layouts that you can use for later. Another cool thing you can create is Global Row’s and Modules for footers and other special things like advertisements.
Were going to start with a simple company page. We will click on the page and it will load it right into the builder.
Editing Objects on the Page
Every object on the screen is completely editable. You can hover over any object and edit it’s preferences.
When I hover over the text object I can edit all of it’s preferences. Under the Style tab is the ability to change the font style with most of the Google Font’s baked in. You can adjust the font size and more.
When I click on the row that the text is contained in, I can adjust it’s Style. We can change the background type from Color, Photo, Video, Slideshow and Parallax.
Let’s add another picture to the current 3 on the page. I’m going to click on the Add Content button at the top right.
Then click on Row Layouts and drag 1 Column next to the out side edge of the 3rd picture.
Now we have 4 columns on the page.
Next we need to duplicate one picture and drag it into the column.
Another way to add a picture to the column is to click on the Add Content button and drag the picture into the column.
Now select a photo from the module under the General tab.
Once you’ve selected your photo from the media library, click the Save button.
You can do really cool things with the photos like cropping. You can click the crop dropdown and change it to a circle. This will make the photo have rounded edges.
Next is margin and padding. You can make fine adjustments using the margin and padding options under the Advanced tab. Modules have Margin and columns have Margin and Padding.
Beaver Builder comes with many other advanced features. I would be here for 3 days making this blog post just to cover them all.
Check out Beaver Builder’s official website here.
Please leave any questions or comments below.