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:
<?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(); |
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.