Blog

Beaver Builder

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

 

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:

 

Customize-module

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.

Basic-ModuleIf 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:

 

Text-editor

 

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:

 

HTML-settings

 

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:

 

WordPress-Widgets-module

 

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:

 

Save-template

 

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:

 

Beaver-Builder-results

 

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.

About author

Kriti Jain

Kriti is a passionate blogger and WordPress wanderer. She explores WordPress everyday and shares her findings with the web world.

  1. Hello, Kriti! Thanks so much for the nice article on Beaver Builder! We really appreciate it. =)

    We’re exploring some ideas on some new features for theme developers. We encourage bundling the free version of Beaver Builder, but we’re looking to add some goodies to make this easier and more powerful. We’d love to discuss with you guys if you’re interested…? 🙂

    Feel free to ping us anytime: hello [at] wpbeaverbuilder [dot] com

    Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>