Building an attractive WordPress website with modern layout have become a surging challenge.  In this tutorial we’ll be building custom page layout using Beaver Builder plugin (Free version).

Beaver Builder is a front-end, drag and drop page builder plugin that allows you to quickly and easily build pages with any of your favourite WordPress theme.

Without writing any code, the plugin will create beautiful page layouts on your website.

Checkout the Premium Version for more features.

Step 1:  Install the plugin

Install and activate Beaver Builder plugin on your site. Now you can start using the plugin on the page editor screen straight away.

 

Also Read: How to install a plugin in WordPress?

 

Step 2: Create a New Page

Go to Pages >> Add New and create a new page. Once you’ve created a new page, you’ll see the Page Builder tab with your Text editor.

When you click on Page Builder tab, your website will then switch to the front end view which includes various components of the plugin.

 

Step 3: Create your Layout

Once your website is switched to the front-end view, you will see clean canvas and a list of options on the right side to choose from. From here you can build a page on your website by hand.

 

Row layouts

 

You’ll find 6 columns and can choose any one from 1 to 6. There is also an option to add sidebar on the left, right or both.

Simply drag and drop the component onto your page builder and create your own layout.

To customize module specific controls, click on the options marked in above screenshot. When you click on this option, you’ll see the window like below screenshot:

 

You can customize background color, text color, border type, margins, padding etc. Change these options according to your requirement.

 

Step 4: Adding Modules

There are three modules available: Basic, Advanced and WordPress widgets.

 

Basic Module

It includes photo, text editor and video. To add any of these option in your layout simply drag and drop it into the required column.

If you want to add photo in the required column, simply drag the Photo component and drop it. Once you drop the Photo component, Photo settings will be opened.

You can edit the photo according to your requirement.

 

To add text in your layout drag and drop Text editor option to the required column. Once you drop it, text editor setting window will open like below screenshot:

 

 

Advanced Modules

It includes HTML and sidebar options. Drag and Drop the HTML component to the required column.

To add HTML tags and some styling to any section, you just need to know bit of HTML and CSS.

Note: If you don’t want to add CSS, simply upgrade your plugin to its premium version. There are lots of advanced options available in premium version like Call to Action, Icon, Contact Form, Content Slider, Button etc.

Once you’ve added the HTML tags to your section, you’ll see the result like below screenshot:

 

 

WordPress Widgets Module

WordPress widgets section includes all the widgets that are active on your site. It includes all the core widgets of WordPress, widgets created by plugin and custom widgets.

You just need to drag and drop the WordPress Widget component into required column, row or sidebar. Once you’ve dropped the component, you can change the settings of it.

This will display the result like below screenshot:

 

 

When you make any changes into the settings, you’ll see live preview of how it looks on your website. Once you’ve created your custom template, click on Done button at the top right corner of your page.

You’ll see four options like this:

 

 

Now, if you want to edit your template later, click on Save Draft option. If you’re sure about your changes click on Publish changes button.

 

You’ll see the final result like below screenshot:

 

 

Conclusion

Beaver Builder is very easy to use plugin to build custom pages on your website. The plugin is good for those people who don’t want to code and save their time.

If you don’t know much about CSS, you can go to premium version of Beaver Builder plugin which provides you lot of options to build a custom template.

If you know any other easy to use Page builder plugin, please share with us.

Pro Version

Beaver Builder comes with a range of premium versions to allow more flexibility and features. You can head over to the official website and check the pricing.

PowerPack - Beaver Builder Add-on

PowerPack is a set of custom & unique modules for Beaver Builder. It extends Beaver Builder with useful modules and will help you build websites faster than ever. You can check out PowerPack website for module details and demos. It has custom modules for

1. Gravity Form styling
2. Ninja Form styling
3. Caldera Forms styling
4. Formidable Forms styling
5. Contact Form 7 styling
6. Timeline content
7. Hover Cards
8. Info Box
9. Info List
10. Announcement Bar
11. Modal / Popup Box / Lightbox
12. Testimonials
13. One page / dot navigation
14. Smart Headings
15. Separators / Dividers
16. Row Separators
17. Column Separators
18. Expandable Rows
19. Logo Grid & Carousel
20. Smart Banners
21. Highlight Box
22. Flipbox
23. Dual Button
24. Advanced Button

They are adding even more custom modules for Beaver Builder that you can use.