Beaver Builder trong Altitude Pro

Thủ thuật WordPress
#1

Bạn muốn sử dụng Beaver Builder trong Altitude Pro cho các phần có chiều rộng đầy đủ với nội dung bắt đầu ở đầu trang (cho mỗi câu hỏi này)?

Bước 1

Tạo một tệp có tên say, page_beaver.php trong thư mục của Altitude Pro có như sau:

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

Bước 2

Thêm phần sau vào style.css của Altitude Pro :

/* 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;
	}

}

Bước 3

Để làm cho một Trang tĩnh mà bạn đang sử dụng Beaver Builder có chiều rộng đầy đủ, hãy chỉnh sửa Trang đó và áp dụng Mẫu cho nó.Full Width Page