Full Width Page Template in Genesis for Beaver Builder and Elementor

In the past, I shared a page template for Beaver Builder based on Bill Erickson’s full width landing pages here.

Here I cover a similar but slightly better/generic approach that can be used for Beaver Builder, Elementor and theoretically, any other page builder (I have only tested those two) in Genesis.

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1

Create a file named say, template-full.php in the child theme directory having the following:

// Template Name: Full Width

add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
/**
 * Adds the attributes from 'entry', since this replaces the main entry.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
 *
 * @param array $attributes Existing attributes.
 * @return array Amended attributes.
 */
function be_site_inner_attr( $attributes ) {

    // Adds a class of 'full' for styling this .site-inner differently
    $attributes['class'] .= ' full';

    // Adds an id of 'genesis-content' for accessible skip links
    $attributes['id'] = 'genesis-content';

    // Adds the attributes from .entry, since this replaces the main entry
    $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );

    return $attributes;
}

// Displays Header.
get_header();

genesis_do_breadcrumbs();

// Displays Content.
the_post(); // sets the 'in the loop' property to true. Needed for Beaver Builder but not Elementor.
the_content();

// Displays Comments (if any are already present and if comments are enabled in Genesis settings - disabled by default for Pages).
genesis_get_comments_template();

// Displays Footer.
get_footer();

Step 2

On inner Pages where you want to use the page builder, apply Full Width template.

and build your Page(s).

Step 3

To use a page builder on your site’s homepage,

a) Create a Page titled say, Home, select Full Width template and Publish.

b) At Settings > Reading, set Home as the static homepage.

c) [optional] You may want to create a Page titled say, Blog or News and set it as the Posts page.

d) Create a file named front-page.php in the child theme directory having:

get_template_part( 'template', 'full' );

Step 4

Add the following in child theme’s style.css:

/* Full Width Page
-------------------------------------------- */

.site-inner.full {
    max-width: none;
    padding: 0;
}

Note: If you want to use the page builder on all the Pages of your site, create a file named page.php having the code from step 3d.