{"id":48,"date":"2016-06-16T13:42:51","date_gmt":"2016-06-16T13:42:51","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=48"},"modified":"2016-07-25T06:15:32","modified_gmt":"2016-07-25T06:15:32","slug":"beaver-builder-genesis-framework","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/beaver-builder-genesis-framework\/","title":{"rendered":"How to use Beaver Builder with Genesis Framework"},"content":{"rendered":"

Genesis<\/a> is one of the most popular and respected frameworks in the WordPress industry. Beaver Builder<\/a> is becoming the new favorite page builder for a lot of WordPress users and developers.<\/p>\n

After building sites with Genesis and Beaver Builder<\/a>, we realized that it’s a killer combo. Here is the secret recipe of building WordPress sites faster than ever.<\/p>\n

Why use the Genesis Framework?<\/h3>\n

Beaver Builder can be used with\u00a0almost 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.<\/p>\n

Its library of hooks, functions, and filters give\u00a0a lot of flexibility and control without having to worry about creating different page templates from scratch.<\/p>\n

How to use Beaver Builder with Genesis?<\/h3>\n

Now, let’s talk about using Beaver Builder with Genesis framework. The biggest challenge while using any page builder plugin is to have\u00a0control 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.<\/p>\n

In my opinion, the flexibility of using Beaver Builder can be best utilized only when we have\u00a0a 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\u00a0extends from left edge to the right edge without a fixed width, margin or padding.<\/p>\n

Minimum Pro<\/a> Theme by StudioPress is a perfect example of a full-width container layout\"mimimum-pro-full-width\"<\/p>\n

As you can see, the image extends from edge to edge\u00a0and so does the call to action section below it.<\/p>\n

Beaver Builder comes with options to create fixed and full-width containers.<\/strong> So, when we have a blank, full-width canvas to paint on, it’s easier to\u00a0do whatever we want.<\/p>\n

How to make a\u00a0full-width template with Genesis?<\/h3>\n

Genesis doesn’t offer any such templates out of the box. But, there’s a plugin which can help you do that. Genesis Dambuster<\/a>\u00a0<\/strong>allows you to easily\u00a0update the page width to 100% with a click. Again, this is possible only because of the flexibility\u00a0and the functionality that Genesis provide\u00a0as a framework as compared to other WordPress themes.<\/p>\n

Can I make a sales\/landing page with Genesis and Beaver Builder?<\/h3>\n

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\u00a0standard website. There are cases\u00a0when there’s no header \/ footer at all. But, only a container with page copy.<\/p>\n

Here’s an example of the landing page template<\/a> that comes with Metro Pro child theme for Genesis.<\/p>\n

\"landing-page-metro-pro\"<\/p>\n

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<\/a>\u00a0will come to your rescue.<\/p>\n

It provides several page level options to disable various elements like page title, post meta, navigation, header, footer etc.<\/p>\n

Once you have set up your blank landing page template, you can use any of the existing Landing Page Templates\u00a0that Beaver Builder offers.<\/p>\n

Do you have any examples of sites built with Genesis and Beaver Builder?<\/h3>\n

Absolutely, have a look at two of the stunning sites that we have built at our agency – IdeaBox Creations<\/a>.<\/p>\n