For each page and post within WordPress you get a basic text editor. It’s much like working within your favourite word processing application: you can write/insert and format your text, insert images and videos very easily! This is often just fine for blog posts and even many pages. However in some cases you want to do more than just basic text and images: you might want to set up multiple columns of text or images or you might want to create completely separate rows with colour-banded backgrounds.
To accomplish this, you need a page builder. Page builders are everywhere now for WordPress, so how do you pick which one to use? We had some pretty high demands before we’d use one, namely:
- Rapid development
- Ease of use (after all, we want our clients to be able to make edits easily)
- An aesthetically pleasing interface
- SPEED. Give us all the speed. If your framework is slowing down your site, you’ve got a problem.
There’s the ubiquitous “Visual Composer” that gets bundled with a ton of themes out there, but goodness it’s cumbersome and just not pleasant to work with. I know, a lot of people love it, but I’ve never been able to get any joy from it.
Divi was one we enjoyed for a bit, it’s powerful and pretty, and we still have a license for it, but we still got frustrated with many of its quirks.
We had heard of Beaver Builder before but, honestly, the name put us off for a long time. I don’t remember what it was that finally got us to give it a real shot, but since we did we haven’t looked back. Beaver Builder offers a sleek interface where you can iterate very quickly, on top of that it’s just a pleasure to work with. It’s not cumbersome or frustrating, it works beautifully and does its job very well. On top of that, it doesn’t bog down a website. We’re still able to get excellent page speed results with it, even when using a variety of advanced modules.
We found Beaver Builder to be the only option to provide all of the above features in one package. Beaver Builder has very quickly became our favourite tool for WordPress development.
We also recently gave Beaver Builder a coveted spot on our “Recommended Resources” page because not only do we believe in it, we use it for every website we build (even this one). But how easy is it to use? How exactly do you use it? You’re in the right spot. Here’s a very quick walkthrough of using Beaver Builder.
For the purpose of this example, I used the Beaver Builder Agency version – the one we use in-house – but you’ll find many of the same features and versatility in the free version available on the WordPress.org plugin directory.
Create a new page
Go to Pages -> Add New
Set up the page
Add the title and click on “Page Builder”
Click and drag a module onto the page to add it. In this example I dragged a “Header” module into the page and put in some content for it.
Next we’ll look at styling the header.
The Style Tab
The style tab lets you change the styles for the module you’re editing. In this case we’ll change the heading to an H1 heading and center it.
Changing Row Settings
By hovering over a row you’ll display the row settings controls. Click on the wrench to open the row’s settings dialogue.
In this case, as with many headers, we want to make the row full width. Beaver Builder gives you the option to make the row itself full width while leaving the content at a fixed width. This is fantastic for things like full-width backgrounds.
Speaking of backgrounds…
Scroll down and you’ll find the background settings for the Row. We’re going to change this one to a photo background.
Add the photo
Once you’ve selected “Photo” you’ll be given a section to select the photo you want to use.
Select the photo you want to use
Highlight the photo in the WP Library, or add photos to the library, and click “Select Photo”
More row changes..
Want a full-height hero section? There’s an option right in the style section to do that.
When you’ve got a full-height row, you can select the content alignment.
If you’re not using a full-height row, this is done by adding padding above or below the content area.
Saving the settings
Click on the “Save” button to save the changes. Notice how the changes are executed live behind the window.
Clicking “Save As” here would let you save the row to use again and again.
Deleting a row
Hover over the row and click the X in the controls to delete a row (or any module, or column).
Beaver Builder is pretty good about not letting you delete things too hastily. You can’t undo changes, so heed its warnings.
Loading a pre-built template
First, open up the Beaver Builder menu by clicking the + button in the top right.
Click on “Templates” button
Click on the template you want to use
Once you click on the template it will be loaded on the live site behind you.
Changing content is as easy as clicking on it!
Make your changes
Make the changes you want to the content and click “Save”. Typically those changes are made live behind the window.
Voila, you’re done!
Now to save your work, click “Done”
Publish your work
You can save the work just in Beaver Builder, Discard the work, or publish it to the actual website.