Mẫu trang có chiều rộng đầy đủ trong Genesis for Beaver Builder

Beaver Builder là một plugin khá tốt để dễ dàng tạo các hàng nội dung cho Trang thông qua thao tác kéo và thả. Trong bài viết này, tôi chia sẻ một sửa đổi mã từ Mẫu Trang Trước cho Các Phần Có Chiều rộng Đầy đủ trong hướng dẫn của Genesis để hiển thị các Trang được xây dựng bằng Beaver Builder để có chiều rộng đầy đủ.

Ảnh chụp màn hình trang chủ trang web thử nghiệm của tôi được tạo bằng một vài cú nhấp chuột bằng cách chọn một trong các mẫu mà Beaver Builder đi kèm:

Tạo một tệp có tên page_beaver.php trong thư mục chủ đề con của bạn 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();

Sau đó, thêm cái này vào style.css :

/* Full Width Page
-------------------------------------------- */

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

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

	.fl-builder-full .site-inner {
		padding-left: 0;
		padding-right: 0;
	}

}

Để 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

Nếu bạn muốn có một trang đầu với chiều rộng đầy đủ với Beaver, hãy tạo một Trang tĩnh có tên say Home và đặt nó làm Trang chính tại Cài đặt> Đọc.

Để sử dụng Beaver Builder trên tất cả các Trang và làm cho chúng có chiều rộng đầy đủ, chỉ cần đổi tên page_beaver.php thành page.php HOẶC xen kẽ thêm các phần sau vào functions.php :

/**
 * Template Redirect
 * Use page_beaver.php for all static Pages.
 */
add_filter( 'template_include', 'custom_page_template', 99 );
function custom_page_template( $template ) {

	if ( is_singular( 'page' ) ) {
		$new_template = locate_template( array( 'page_beaver.php' ) );
		if ( '' != $new_template ) {
			return $new_template ;
		}
	}

	return $template;
}