Beaver Builder in Altitude Pro

Posted on

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.