WordPress Page Builders and Beaver Builder
This article is part of the WordPress Curriculum on WebDevStudents.com.
In this lesson we will learn how to create a fully designed web page with a WordPress page builder called Beaver Builder. If you prefer to read this content in a slideshow, use this presentation: WordPress Page Builders.
Ever see a beautiful home page for a website, and wish that you could do that? Well, with a Page Builder you can!
Right now, the most popular page builder is called Elementor. However, I don’t have a license for Elementor. If you have the chance to work on an Elementor website, be sure to take it, because it is the most used page builder.
We will be using the Beaver Builder page builder. Beaver Builder is the “developer-friendly” page builder, and is the one I have a license for. One huge advantage with Beaver Builder is that it allows unlimited websites. (Elementor has a limit of 10 on its top tier. I have over 100 on my BB license.)
This lab assumes that you have access to the Beaver Builder page builder. However, the Beaver Builder page builder is a paid product, so you probably don’t have access to it if you are not in one of my courses. In that case, you may want to skip to Lesson 7. If learning the Beaver Builder page builder is important to you, you can always contact me privately and perhaps I can help you.
In addition to the content in this article, I have a more detailed set of videos on how to use the both the Beaver Builder page builder and theme.
The Dream Destination Lab
Do you have a place you really want to go on vacation someday?
For the Page Builder and the E-Commerce segments, you are first going to build a Dream Destination page with the Page Builder. Then next week you will build a pretend tourist package product for sale.
Step 1: Choose a Dream Destination
Choose a destination that has photography that you can use in your product page and in your Page Builder page.
Step 2: Find Photos for your Dream Destination
Go to Pixabay.com or other royalty-free photo and download 6-10 photos of your dream destination. If you can’t find 6, then choose a different destination.
Download the size that is 1920 in width.
Do not post any photos from Google Images! Since this is a live website, it is critical that you not post any copyrighted images! Even if you are working on your own website rather than on the world wide web, don’t take the risk of putting images into a website that you may publish later.
Step 3: Add a Page (Not a Post)
Instead of adding a post, click new, and this time choose “Page” instead of post.
Page builders generally aren’t used for posts. They are only used for designing key pages on a website, like the Home page. The other posts and less important pages are made with the Block Editor rather than a page builder.
Review: Pages vs Posts in WordPress
Pages are used for the home page, about page, and contact pages.
Posts are part of a set. When we did the Block Editor lab, each of your posts was part of a set of posts for a class.
Page builders are only used on highly designed pages, like the home page. (Simpler pages are edited with the Block Editor.)
Step 4: Add Title and Publish
Add a title to your page. The title should be the name of the destination you chose.
On this page, we don’t want to display the page title automatically. We will add the page title with our design. Click the little eye above the title to turn off the display. This little eye may not appear on all themes, but will appear if you are using the Astra free theme.
Publish your page, and then Visit Page.
Step 5: Edit with Beaver Builder
After you navigate to your live page, click on “Beaver Builder” at the top of the page to edit the page with the Beaver Builder Page Builder. Do not click Edit Page. Click through the built-in Beaver Builder tutorial.
Note that you still will need to choose Edit Page for tasks that aren’t part of the page design, like adding the page to various categories or accessing Yoast SEO.
This video demonstrates how to edit a page with the page builder. There are instructions below, as well.
Step 6: Choose a Beaver Builder Template
Since our page is totally empty, let’s start with a Beaver Builder template.
Click the blue plus sign at the top left, then choose the Template Tab.
Look through the templates and choose one. Don’t worry about your choice right now. You can change the template later if you don’t like your first selection. The goal is to learn how the page builder works, and after that to create your Dream Destination page.
You will change every word of text and every photo in the template. You are choosing a layout.
Step 7: Learn the Controls by Hovering
As you hover your mouse over various page elements, you will see various controls. Like Bootstrap, page builders use rows and columns for page layout.
Step 8: Learn the Module and Row Settings
Each module has different settings based on what styles apply. Shown at left is a Text Editor module. Note that there are three tabs.
General: Used for the text
Style: Used for the CSS
Advanced: There are a variety of options, but this is where you would add a CSS class or change the padding and margin for the module.
The row settings is where you would set the height of the row or add a background-image or color. You can also set colors for the entire row.
Scroll down to find where you change the row background.
Step 9: Play Time!
Working in Beaver Builder is intuitive. Use the controls to edit all of the content in the template. (Click the wrench to change the rows and modules.) Here are some pointers:
- Background images are in the rows, not in the modules.
- You will likely have more rows than you need or want in your template. Simply delete the rows you don’t want.
- If you want to try a different template, simply delete all of the rows and start over.
One More Thing:
While using a template to build a home page may give you a great start on a design, you can also add your own custom rows and modules. In fact, you want to avoid your website looking too much like a template, so it is preferable to add some of your own rows once you get a feel for Beaver Builder.
To add your own rows or modules, click the blue plus button, select the row layout or module you need on the tabs at the top of the page. Drag your row or module where you want it on the page. Remember that you can drag around your existing rows and modules too.
Page Builders
As you can see, it is much easier to create a beautiful page layout with a page builder like Beaver Builder. That is why the home pages of most WordPress websites are made with a page builder. Each page builder has its own learning curve, but drastically reduce development time.
In the next lesson, we are going to learn how to add a product to an e-commerce website.