Beaver Builder with Genesis Themes

GenesisIntroduction

I love the Genesis Framework and have been using it for years. Their child themes are my favourite WordPress themes. You can use the beaver builder theme but I prefer using a child theme because of the beautiful styling already created. Beaver Builder is my favourite page builder plugin. I much prefer using Beaver Builder to the Gutenberg editor in WordPress because it is more intuitive to use and offers better styling options. A page builder allows you to structure and design your pages with ease. It allows you to add any widget on any page and all this without code! More importantly, it great for SEO because it makes it much easier to add headings for style only without need to resort to using heading tags such as H1 and H2.

Why use the Genesis Framework?

Genesis gives you a lot of flexibility and control. Here are the three main reasons why we continue to use the Genesis Framework:

  • Sustainability: The Genesis Framework offer regular updates for security and changes in WordPress. These updates can be done without affecting the site’s design.  This means you can update without having the expense of digging into the code or losing any customisations which are in the “child theme”. The framework is consistently updated to reflect best practices for coding and has always focused on security. Consequently, I can almost always update to the latest version without any problems.
  • Flexibility: Genesis provides an excellent foundation and enables the development of additional functionality.  There is nothing worse than having developed a website only to find out that you have hit a brick wall when you want to take it to the next level. Genesis has a lot of features that you can turn on or off.
  • Functionality: There is a great deal of customisation information, technical information and available dedicated plugins just for the framework.

How to use Beaver Builder with Genesis?

You can add the Beaver Builder plugin, and you will find that the central content will be editable. However, ideally, you want control over the whole width – by the full width, I mean 100% width –  right to the edges of the screen. Many of the Genesis Themes do not offer such a template. If they do, then you can go ahead and use that template. The only other difficulty will be the homepage – we will deal with that later.

Creating your full-width template for Beaver Builder with the Genesis Framework

I suggest that you copy the landing page template, rename it as the Beaver Template and edit it from there. Commenting the elements that have been removed for the landing page, such as the header and footer etc.

 

<?php
/**
* This file adds the Beaver template to the Theme.
*
*/
/*
Template Name: Beaver
*/
//* Add custom body class to the head
add_filter( 'body_class', 'charming_add_body_class' );
function charming_add_body_class( $classes ) {
$classes[] = 'charming-beaver';
return $classes;
}
//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );
// Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array( 'header', 'footer-widgets', 'footer' ) );
//* Remove site header elements
//* remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
//* remove_action( 'genesis_header', 'genesis_do_header' );
//* remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
//* Remove navigation
//* remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );
//* remove_action( 'genesis_footer', 'genesis_do_subnav', 7 );
//* Remove breadcrumbs
//* remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
//* Remove site footer widgets
//* remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
//* Remove site footer elements
//* remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
//* remove_action( 'genesis_footer', 'genesis_do_footer' );
//*remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );


genesis();

You will also need to add some custom CSS to rid of margins, padding, and hiding the entry title. An example is below.

.charming-beaver .entry {
    margin-bottom:0px;
}
.charming-beaver .site-inner,
.charming-home .site-inner{
    background: none;
    margin: 0;
    max-width: 100%;
    padding: 0;
}
.charming-beaver .entry-title{
    display:none;
}
.charming-beaver.site-inner{
   width:100%;
   max-width:100%;
}
.charming-beaver .entry-content,
.charming-landing .entry-content {
    margin:0px;
}
 

Another suggestion by Powerpack is to use the Genesis Dambuster plugin. 

The homepage

If you want to move away from the widgetised homepage in Genesis Themes, create a beaver builder page. Then rename the front-page.php template to front-page-archive.php. Then in the Reading Settings, select a homepage that you have created with Beaver Builder. 

Styling and why I still use Genesis Child Themes

Genesis Child Themes have style! I love the font combinations and the layout of the front page. By using Beaver builder with a Genesis Child Theme, I enjoy all the benefits of both. I also use Beaver Themer to create custom footers and headers and additional templates for archives, single posts etc. You can also use Beaver Themer for customising Woocommerce on a site using a Genesis Theme as well as styling Custom Post Types.

Beaver Builder Support for a Genesis Theme

Need help with using Beaver Builder with your Genesis Theme? I am happy to help. 

Contact me – I offer co-creation website creation options.

Leave a Reply

Your email address will not be published.