How to use Beaver Builder with Genesis Framework
Last updated July 25, 2016 · Puneet
After building sites with Genesis and Beaver Builder, we realized that it’s a killer combo. Here is the secret recipe of building WordPress sites faster than ever.
Why use the Genesis Framework?
Beaver Builder can be used with almost any theme. But, Genesis being a framework provides an extra edge. Whether you want to build a home page, an about page or a sales page. You can do all of this with Genesis and Beaver Builder without having to write a single line of code.
Its library of hooks, functions, and filters give a lot of flexibility and control without having to worry about creating different page templates from scratch.
How to use Beaver Builder with Genesis?
Now, let’s talk about using Beaver Builder with Genesis framework. The biggest challenge while using any page builder plugin is to have control over page’s content width and elements like header and footer. While some of the themes provide with some full width and blank page templates, there are still many which do not have so much of flexibility.
In my opinion, the flexibility of using Beaver Builder can be best utilized only when we have a full-width page. When I say a “full-width page”, I am referring to the page container covering 100% of the screen width. In other words, the container extends from left edge to the right edge without a fixed width, margin or padding.
Minimum Pro Theme by StudioPress is a perfect example of a full-width container layout
As you can see, the image extends from edge to edge and so does the call to action section below it.
Beaver Builder comes with options to create fixed and full-width containers. So, when we have a blank, full-width canvas to paint on, it’s easier to do whatever we want.
How to make a full-width template with Genesis?
Genesis doesn’t offer any such templates out of the box. But, there’s a plugin which can help you do that. Genesis Dambuster allows you to easily update the page width to 100% with a click. Again, this is possible only because of the flexibility and the functionality that Genesis provide as a framework as compared to other WordPress themes.
Can I make a sales/landing page with Genesis and Beaver Builder?
Sometimes, we need to create a sales page or an offer page for some product promotion or other marketing stuff. Landing pages usually do not contain a navigation menu to avoid distraction for page visitors and the header / footer on these pages is much lean and mean as compared to a standard website. There are cases when there’s no header / footer at all. But, only a container with page copy.
Here’s an example of the landing page template that comes with Metro Pro child theme for Genesis.
With the variety of hooks and filters that come bundled with Genesis, it’s easy to create such page templates. Again, if you are not a developer and don’t want to mess with code then Genesis Dambuster will come to your rescue.
It provides several page level options to disable various elements like page title, post meta, navigation, header, footer etc.
Once you have set up your blank landing page template, you can use any of the existing Landing Page Templates that Beaver Builder offers.
Do you have any examples of sites built with Genesis and Beaver Builder?
Absolutely, have a look at two of the stunning sites that we have built at our agency – IdeaBox Creations.
- Hi-Chew – Custom Genesis Child Theme + Beaver Builder
- Humana Landing Page – One page Genesis Child Theme + Beaver Builder
All I can say is that Genesis Framework, Genesis Dambuster Plugin, and Beaver Builder makes a killer combo!
Not using any of these yet? Grab them now!
Also, meet PowerPack – a Beaver Builder Add-on with creative, easy to use and unique modules. Head over to the homepage and see what we have got to offer. PowerPack Beaver Builder Add-on will speed up your development process.
A few more interesting posts →
PowerPack Beaver Addons
Start creating beautiful websites with 65+ modules and 350+ templates for Beaver Builder.