You have a WordPress website.
And you are planning to create beautiful professional pages for your site.
But the built-in page layouts of your theme does not fit your needs.
You want to create a custom page layout template.
But you have no knowledge about HTML, CSS, and PHP for that to work.
So how do you make that happen?
Well, here’s the good news.
In this tutorial, you will learn how to use Beaver Builders (a page builder).
You will learn to design beautiful page layouts in WordPress by using Beaver Builder, and yes, you don’t need to write a single word of coding.
Let’s dig in.
When getting started, first, let’s understand…
What is Beaver Builder?
It is a drag and drop easy to use page builder plugin for WordPress. It has incredible features that you can use to create beautiful pages without writing a single word of code.
By using Beaver Builder, you can also create your website’s landing page in just a few minutes.
It is user friendly, and you simply need to select and drag the element and place it wherever you need.
If you are wondering how this page builder works and whether this plugin is compatible with your current theme in WordPress, check out the next sections to detail that.
WordPress Themes That Work Great With Beaver Builder
The Beaver Builder is compatible with most of the themes. Check out this article on 21 best WordPress themes that work with Beaver Builder.
The best way to test whether Beaver Builder will work with your theme, try using the free version on the WordPress.org.
If you can use the free version that works with your theme, you can easily upgrade to the paid version.
Please Note: The plugin has many premium features that you can use only with their paid version (will be discussed in detail in the later section of the post).
An Easy Guide on How Does a Beaver Builder Work
After you have installed the plugin in your WordPress, start by designing a new page by clicking on pages » add new button available on your dashboard.
If you are using a Beaver Builder for the first time, you will get an option to launch it (see the below image).
After you have launched the Beaver Builder, you will get a pop up for a tour of this plugin.
You can confidently skip that as we will take you through various features of this plugin.
To start with, click the templates button, as shown in the below image.
Beaver Builder plugin comes with many beautifully designed templates. You can always use the templates and customize as per your need.
As shown in the below image, choose a layout. Beavers builders will then display it in the preview section.
You have to move your mouse to an item, and the plugin will spotlight it (see the below image).
Beaver Builder will display you a pop up with various settings for you to edit. With the text editor, you can add text, change font, color, background, margin, etc.
It is very similar to the WordPress text editor.
The only difference is that you have more control in positioning the text on the page.
The layouts of Beaver Builder are based on rows. You can rearrange them by the drag and drop option.
You can also add or remove a new row.
As shown below, you just need to click on the row layouts menu and choose the number of columns you wish to include in your row.
You have the option of adding items to your row by using the basic or standard modules.
You will need these modules to add some of the commonly used features like images, buttons, headings, video, audio, etc.
You need to choose an item and drag it to the row you added.
You can click on any item if you wish to make any change in its properties.
Once you are done with editing a row or module, save it.
Once you complete editing your page, click on the Done button (see below image).
Now you have the option to publish, save as a draft, or discard the page.
If you want to create a similar page that you just created, it needs to duplicate it.
Effortlessly Duplicate a Page in Beaver Builder
In Beaver Builder, you can use any layouts to duplicate it to a new page with a similar layout. Follow the below steps to twin a page in Beaver Builder:
Step 1: Open the page you wish to duplicate in Beaver Builder.
Step 2: Click the arrow in the upper left side of your screen, and the Tools menu expands.
Step 3: Click the option Duplicate layout on the tools menu.
Now a new page will open in the WordPress editor.
Step 4: On the new page, rename the page title and the slug and click on the Publish button. If you don’t want to Publish, you can leave the page as it is. It will be saved as a draft.
Step 5: When you edit the content on the page, click on the Launch Beaver Builder to begin editing.
Please Note: The Beaver Builder layouts that you want to twin should either be published or saved before you duplicate it.
Before buying Beaver Builder, you can play with all its features in their hosted demo.
Cost of Beaver Builder (With Money Back Guarantee)
Well, this is a free plugin to use. But they also have a paid version, pricing starting from $99.
You can upgrade to their paid version for time — saving features and access to their expert support team.
When you upgrade, the Beaver Builder theme gets added only to the Pro license.
Some of the Premium Features of the Plugin that comes with the paid version:
- It has extra modules like Subscribe Form, Contact Form, Social Icons, Pricing Table, Tabs, Map, Slider, Blog, Posts, and many more.
- You will have access to an expert’s support.
- You will have access to attractive professional pre-made layout templates.
- You can save and reuse page layouts, rows, and modules.
The Beaver Builder plugin comes with a refund policy. If you are not happy with its features for any reason, they will refund your purchase if it’s requested within 30 days.
Frequently Asked Questions
Before I wrap up things, let’s go over a few common, related questions that I often hear:
-
How to Install Beaver Builder?
To use Beaver Builder, go to the WordPress admin area and Select Plugins > Add New.
Search for the “Beaver Builder Plugin” Install and activate this free plugin, as shown in the below image.
Once you install the free plugin, you will get the upgrade option. You can upgrade just with a click.
-
How to Upload New Templates into Beaver Builder?
Follow the below simple steps to upload new templates:
Step 1: In the left panel area of the WordPress dashboard, go to tools > import option.
Step 2: Click the “Install Now” button as shown in the above image.
Step 3: Then click the “Run Importer” button.
Step 4: Click on the Choose File button to select the template file.
Step 5: Now, click the Upload file and import button.
On the following screen, you have to assign a username to the template and click the “Submit” button for completing the upload process.
Now you can see your uploaded templates by clicking the template option on the WordPress dashboard’s left panel.
If you do not see the template button, then enable the below option.
In the WordPress dashboard, go to settings > Beaver Builder. On the following page, you will see the button template.
Just check the box next to the ‘Enable Templates Admin’ option and save the template settings button.
-
How to Make Beaver Builder Elements Full Width?
After you have installed the Beaver Builder theme, click on General > Layout.
The Layout tab will have two options Full width and Boxed (see the below image).
Select the Full-Width layout to make the Beaver Builder elements full-width. Your layout will span the full-width of your browser.
-
How to Create a New Custom Field in Beaver Builder?
To create custom fields, follow the steps:
Step 1: Open a Post that you want to edit.
Step 2: To display the custom fields button on the editing page, click the three dots on the right side of your screen (as shown in the below image).
Step 3: As you click the three dots, it expands. Click on the last button termed as options.
Step 4: Now, a pop up appears under Options (see the below image). Under the Advanced panels, select the Custom fields checkbox.
The Custom fields panel will now open beneath the content area layouts.
Step 5: Name your custom field and click on Add Custom Field.
Now on the editing screen of every post, this name will appear. But the value must be entered separately for every post.
In the value box, you should type a note that you want to appear above the post title.
-
How to Change Hover Color Over Linked Items in Beaver Builder?
By default, a color is always assigned to links or buttons.
The default color comes from the preset of the Beaver Builder theme. You can set it at Customize > Presets.
You can also fix a standard default color at Customize > General > Accent Color.
-
How to Modify Global Settings with Beaver Builder?
There are many options in Global Settings for your whole website.
When you make any change in the Global Settings, it will reflect on all the pages rather than just a single page.
You can easily access the global settings. Here’s how you can do it:
Step 1: While you are in the page editor, click on the Tools button in the top left corner of the window.
Step 2: Then select “Global settings,” which is just above the Change UI Brightness button, and you are in the Global Settings section.
You will find many options like the maximum width of the web page, responsiveness, padding, margin, etc.
If you want, you can also add JavaScript and custom CSS.
-
How to Edit Header in Beaver Builder Theme?
After you activate the theme, click on the header button.
Next, you will get many options from where you can edit and customize the header (see the below image).
Please Note: Beaver Builder is a page builder plugin with a framework theme (optional). The plugin controls your page’s content, and the theme handles the styling of your site, header and footer.
Go Ahead and Design Your Website
Image Credit: Photo by Stephen Phillips — Hostreviews.co.uk on Unsplash
And this post has just shown you how Beaver builder is a smart solution.
The ability to customize minute details makes it the perfect solution for WordPress users.
So what are you waiting for? Install the plugin and start building beautiful web pages and landing page.