Beaver Builder in Altitude Pro

Want to use Beaver Builder in Altitude Pro for full width sections with content starting at the top of the page (per this question)?

Step 1

Create a file named say, page_beaver.php in Altitude Pro’s directory having the following:

// 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();

Step 2

Add the following in Altitude Pro’s style.css:

/* Full Width Pages
-------------------------------------------- */

.fl-builder-full .site-header {
	background-color: transparent;
}

.fl-builder-full .site-header.dark {
	background-color: #000;
}

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

@media only screen and (max-width: 1023px) {

	.fl-builder-full .site-header {
		background-color: #000;
	}

}

Step 3

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.