Sridhar Katakam

Genesis and WordPress Tutorials

Full Width Page Template in Genesis for Beaver Builder

by 45 Comments

Update on October 13, 2017: Click here to go to the updated version of this tutorial.

Beaver Builder is a pretty good plugin for easily creating content rows for Pages via drag and drop. In this article I share a modification of code from Front Page Template for Full Width Sections in Genesis tutorial for displaying Pages built with Beaver Builder to appear full width.

Screenshot of my test site’s homepage built with a couple of clicks by selecting one of the templates that Beaver Builder comes shipped with:

full-width-genesis-beaver-builder

Create a file named page_beaver.php in your child theme directory having the following:

<?php
// Template Name: Full Width Page
add_filter( 'body_class', 'beaver_body_class' );
/**
* Adds a css class to the body element
*
* @param array $classes the current body classes
* @return array $classes modified classes
*/
function beaver_body_class( $classes ) {
$classes[] = 'fl-builder-full';
return $classes;
}
/**
* Add attributes for site-inner element, since we're removing 'content'.
*
* @param array $attributes Existing attributes.
* @return array Amended attributes.
*/
function be_site_inner_attr( $attributes ) {
// Add the attributes from .entry, since this replaces the main entry
$attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );
return $attributes;
}
add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
// Display Header
get_header();
// Display Content
the_post(); // sets the 'in the loop' property to true.
the_content();
// Display Comments
genesis_get_comments_template();
// Display Footer
get_footer();
view raw page_beaver.php hosted with ❤ by GitHub

Then add this in style.css:

/* Full Width Page
-------------------------------------------- */
.fl-builder-full .site-inner {
max-width: none;
padding-top: 0;
}
@media only screen and (max-width: 800px) {
.fl-builder-full .site-inner {
padding-left: 0;
padding-right: 0;
}
}
view raw style.css hosted with ❤ by GitHub

To make a static Page in which you are using Beaver Builder go full width, edit that Page and apply Full Width Page Template to it.

2015-05-14_11-28-42

If you would like to have a full width front page with Beaver, create a static Page named say, Home and set it as Front page at Settings > Reading.

Screen Shot 2015-05-14 at 11.30.00 am

To use Beaver Builder on all the Pages and make them full width, just rename page_beaver.php to page.php OR alternately add the following in functions.php:

/**
* Template Redirect
* Use page_beaver.php for all static Pages.
*/
add_filter( 'template_include', 'custom_page_template', 99 );
function custom_page_template( $template ) {
if ( is_singular( 'page' ) ) {
$new_template = locate_template( array( 'page_beaver.php' ) );
if ( '' != $new_template ) {
return $new_template ;
}
}
return $template;
}
view raw functions.php hosted with ❤ by GitHub

References:

http://www.billerickson.net/full-width-landing-pages-in-genesis/

https://www.facebook.com/groups/genesiswp/permalink/1279781598739701/?comment_id=1280006908717170&reply_comment_id=1280038005380727

  • So far I have tested this on the
    ambiance pro theme
    beautiful theme
    Altitude pro theme
    modern portfolio theme
    cafe pro theme
    whitespace pro theme

    Out of all these the only ones this works on is the ambiance pro theme and beautiful theme. I’m new to Genesis so can you explain which themes this will work with?

    Reply

    • Unless otherwise specified, all the tutorials on my site are tested only in Genesis Sample child theme.

      Any specific child theme that you would like to use and make this work in?

      Reply

      • Hi Sridhar,
        I wanted to test this out on any of the themes with full-width headers, such as Centric or Minimum Pro, but it didn’t work. I’m guessing its a css issue, which is hard for me because I’m not great at it. The plan was to use this template as a universal solution for the these types of themes.

        I found that the Ambiance theme doesn’t need the css, only the template, and it automatically makes everything full width.

        The Beautiful Pro theme works perfectly with the css and the template. So not sure what makes the Beautiful Pro theme different than the Centric or Minimum Pro.

        All in all, thank you though, this template gives me a good place to start.

        Reply

  • Hello Sridhar,

    I really like your tutorials.

    I would like to be have Full Width Page Template in Minimum Pro for Beaver Builder.
    Can I use the code from this post?

    Thank You

    Reply

  • Hello Sridhar,

    I am enjoying your tutorials and have used a few already.

    We are trying to use Beaver Builder in combination with Altitude Pro to create some nice inner pages and would like to use a Full Width Page Template for this.

    We have tried the code you provide above but there is a gap between the header and the beginning of the first row.

    Actually, we would like the first row to be under the header, right at the top of the screen. We hope that by setting the header’s background to ‘transparent’, that we can re-create the header effect of the home page in Altitude Pro.

    What changes do we need to make to your code to achieve this ?

    Thank You for your help.

    Pairfum

    Reply

  • Sridhar,

    Do you know of a way to make a Beaver Builder row fill the entire viewport?

    For instance, I am using Dynamik and BB here: http://outdoorwebsites.co/

    There is only one row and I had to set the bottom padding in the row to 250 in order for it to fill most of the screen. However, on larger screens, the background image does not fill the screen.

    Any ideas?

    Reply

      • Yes. I figured it out, thanks to someone in the Beaver Builder Facebook Group. I added the id “coming-soon” in the Advanced tab of the Beaver Builder row, then added this CSS to the Dynamik custom CSS:

        .coming-soon .fl-row-content-wrap {
        height: 100vh;
        }

        Thanks for the reply though!

        Reply

  • Hello there thanks for sharing this post! I am not having any luck at all with full width using this method with Genesis Executive Pro.
    I can remove my margins in the css and adjust the margins in beaverbuilder to make it work, but it removes the margins in all of the pages on the site, I want to be able to use beaverbuilder on certain pages and the reg editor on others.
    I can not seem to find a solution that seems to work for me.

    The reason I want full width is on my home page, I have a slider that is full and my width is 1440. I have sections I built with beaverbuilder that has a full width background that i want 1140 wide. IF I apply any margin in css it will not allow beaver ti be 1140 wide, but I need the margins for my reg content in editor on some pages.
    Here is the text site http://www.alabamamountainbike.com

    Reply

  • Very helpful and appreciated!

    One question on the header — I’m trying to remove the header and use Beaver Builder to create the logo/navigation for a landing page.

    So I added this code below to your template but the Genesis header and navigation still appear. I’m using Digital Pro.

    Any idea why?

    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_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
    remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );

    Reply

    • I’ve sorted another solution to the menu issue.

      However do you know why on Digital Pro that it doesn’t assign the Body Class fl-builder-full when the page is set as the home page? Maybe something in the theme overrides this page template?

      The page template works until going to Reading and setting the page as the front page. At least in Digital Pro, it stopped assigning the fl-builder-class and so it lost the max-width and padding CSS updates.

      Reply

      • Hey Mike –

        I’m having the same issue with Digital Pro and Wellness Pro not showing the new page class on the home page.

        I found a hack by adding the “.home” class in the CSS with the “.fl-builder-full” – not sure if it’s the best fix, but seems to be working.

        Here’s what I have on my site now ::

        .home .site-inner,
        .fl-builder-full .site-inner {
        max-width: none;
        padding-top: 0;
        }

        .home .entry-title,
        .fl-builder-full .entry-title {
        display: none;
        }

        .home .entry,
        .fl-builder-full .entry {
        border-bottom: 0px solid #eee;
        margin-bottom: 5px;
        padding: 0px;
        }

        Reply

  • Very helpful Sridhar. I got this to work in Altitiude. The only thing is that there is still some white space between the header and the beginning of the first row. Do you know how that can be removed? thanks!

    Reply

  • Hello Sridhar,

    How can I do the same thing for posts and have them full width too?
    It worked perfectly for pages with Altitude pro theme and BB on genesis so thank you, but really need to be able to controls posts layout in the same way if possible?

    Reply

  • What to add to the PHP to make comments section show on the new full width page template for altitude pro?

    Got it working but ne3ed to have comment show on SOME pages not all, can’t figure how to get them to show up at all, let alone conditionally…

    Any help would be much appreciated!

    Thanks Sridhar!

    Reply

      • I agree with Sridhar. If it can be achieved with code then that is better.

        Genesis Dambuster is handy for some use scenarios and people though. There are some great videos on YouTube as to how Genesis Dambuster plays into the Beaver Builder + Genesis set up and allowing page by page or post by post checkboxes to hide all or just certain Genesis elements like the entry title and so on.

        Reply

  • In case anyone finds this useful. I use stock code like this with beaver builder. I basically add the below PHP with the conditional checks to see if beaver builder is active on a page, if so it then removes the title, and makes it full width etc so you can easily press on with beaver builder. This removes the need for genesis dambuster and other functions set globally. You can set them only on pages if the plugin is being used. You simply add more remove_actions for your genesis child theme to remove more elements if you don’t them and ensure you have no sidebar set in the genesis layouts before going to page builder.

    PHP for functions or in Genesis Extender PHP page

    /* BB Builder Genesis Template Loader. */

    add_action('init','loadbbtempgenesis',12);

    function loadbbtempgenesis() {
    if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {
    // Load stuff!

    }
    }

    add_action( 'loop_start', 'remove_titlesetc_bb_posts' );
    function remove_titlesetc_bb_posts() {
    if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {
    remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
    remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
    add_filter ( 'genesis_edit_post_link' , '__return_false' );
    }
    }

    // Remove div.site-inner's div.wrap

    add_action( 'genesis_meta', 'bb_full_width_no_wrap' );
    function bb_full_width_no_wrap() {
    if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {

    add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' ); // remove .container
    add_filter( 'genesis_attr_site-inner', 'custom_genesis_page_builder_attributes_site_inner' );

    // add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ,11 ); // force full width layout
    // add_filter( 'genesis_structural_wrap-menu-primary', 'bsg_wrap_container_fluid', 16, 2); // .container-fluid primary menu
    // add_filter( 'genesis_structural_wrap-menu-secondary', 'bsg_wrap_container_fluid', 16, 2); // .container-fluid secondary menu
    // remove_filter( 'genesis_attr-content-sidebar-wrap', 'bsg_add_markup_class' ); // remove .row
    // remove_filter( 'genesis_attr-content', 'bsg_add_markup_class' ); // remove .col-* classes from .content
    }
    }

    /**
    * Add attributes for site-inner element.
    *
    * @since 2.0.0
    *
    * @param array $attributes Existing attributes.
    *
    * @return array Amended attributes.
    */
    function custom_genesis_page_builder_attributes_site_inner( $attributes ) {
    if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {
    $attributes['role'] = 'main';
    $attributes['itemprop'] = 'mainContentOfPage';

    return $attributes;
    }
    }

    /**
    * Echo the necessary "Full Page Width" styles into the head of the page.
    * Credit for the following CSS goes to the developer of the "Genesis Dambuster"
    * Plugin as this CSS is an edited version of that Plugin's full-width.css file.
    */

    function custom_genesis_page_builder_styles() {
    if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {
    echo '

    .extender-page-builder,
    .extender-page-builder .site-container,
    .extender-page-builder .site-container .site-inner {
    max-width: 100%;
    width: 100%;
    background: none;
    border: 0;
    float: none;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-box-shadow: none;
    }

    .extender-page-builder .center-block { margin: 0 auto; }
    .extender-page-builder .center-text { text-align: center; }
    .extender-page-builder .clearfix:before, .clearfix:after { content: "\0020"; display: table; }
    .extender-page-builder .clearfix:after { clear: both; }
    .extender-page-builder .clearfix { *zoom: 1; }

    @media screen and (max-width: 500px) {
    .extender-page-builder .fl-row-bg-video video {
    left:0 !important;
    }
    .extender-page-builder .fl-row-bg-video {
    min-width: 360px;
    }
    }

    ';
    }
    }

    add_action( 'wp_head', 'custom_genesis_page_builder_styles' );

    /**
    * Adds a css class to the body element
    *
    * @param array $classes the current body classes
    * @return array $classes modified classes
    */
    function custom_genesis_page_builder_body_class( $classes ) {
    if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) {
    $classes[] = 'extender-page-builder';
    }
    return $classes;

    }
    add_filter( 'body_class', 'custom_genesis_page_builder_body_class' );

    CSS for custom.css or in Genesis Extender CSS page

    /* Beaver Builder Code
    ---------------------------------------------------------------------------------------------------- */

    .extender-page-builder.override.page .entry-content, .extender-page-builder.override.single .entry-content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    }

    .extender-page-builder.override .entry-header {
    margin: 0 auto;
    padding: 0;
    }

    .extender-page-builder.override .nav-wide-footer {
    margin-top: 0;
    }

    .extender-page-builder .search-widget {
    border-bottom: 0 solid #eee;
    margin-bottom: 0px;
    padding-bottom: 0px;
    }

    .extender-page-builder .woocommerce-pagination {
    display:none;
    }

    .extender-page-builder.override.page .entry-content, .extender-page-builder.override.single .entry-content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    }

    .extender-page-builder.override .entry {
    background-color: #fff;
    margin-bottom: 0;
    padding: 0;
    }

    The above approach if using Genesis Extender plugin means you don’t have to create a custom template OR set it every time you create a new page and want to use Beaver Builder.

    Reply

    • This code is exactly what I was looking for, thanks. I just completed a class on PHP so should probably try to use those skills. Plus, less plugins is a good thing right?

      So….this code goes in the functions.php? If so, at top?

      Reply

  • Hello,
    Thanks for the tutorial.
    I used your codes as you mentioned and was able to obtain full-width page, but when i select it as front-page in customizer, it again becomes boxed.
    I am using Magazine Pro theme for Genesis.

    Reply
    • >