Site icon Kitchen Table Web Design

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:

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.

Exit mobile version