Full-width Landing Pages without Header and Footer for Beaver Builder and Elementor in Genesis

In the past, I wrote a tutorial on full-width pages ripe for use with page builders like Beaver Builder and Elementor. While that method works okay as long as you don’t mind the site header and footer, there may be times when you do not want those as well. Ex.: For landing pages that you wish to build totally with a page builder.

This article provides the steps to set up a custom Page template for full-width landing pages without header and footer for use with Beaver Builder, Elementor, and other page builders in Genesis.

Screenshots:

Beaver Builder page:

Elementor page:

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-landing.php in the child theme directory having the following:

<?php
// Template Name: Full Width Landing

add_filter( 'body_class', 'sk_body_class' );
/**
 * Adds a css class to the body element.
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function sk_body_class( $classes ) {

    $classes[] = 'full-width-landing';

    return $classes;

}

// Removes site header.
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_do_nav', 12 );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

// Removes breadcrumbs.
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

// Removes entry header.
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

// Forces full width content.
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Removes footer widgets.
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

// Removes footer.
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_do_subnav', 10 );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

genesis();

Step 2

Edit child theme’s style.css.

a) Above the media queries, add

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

.full-width-landing .content .entry {
    margin-bottom: 0;
}

b) In the 960px min-width media query, add

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

.full-width-landing .content {
    width: 100%;
}

Step 3

Create/edit the Pages that you wish to use as landing pages with Beaver Builder or Elementor and apply the Full Width Landing template in the Page Attributes meta box.