Trước đây, tôi đã viết một hướng dẫn về các trang có chiều rộng đầy đủ để sử dụng với các trình tạo trang như Beaver Builder và Elementor. Mặc dù phương pháp đó hoạt động ổn miễn là bạn không bận tâm đến đầu trang và chân trang của trang web, nhưng có thể đôi khi bạn cũng không muốn những điều đó. Ví dụ: Đối với các trang đích mà bạn muốn xây dựng hoàn toàn bằng trình tạo trang.
Bài viết này cung cấp các bước để thiết lập mẫu Trang tùy chỉnh cho các trang đích có chiều rộng đầy đủ không có đầu trang và chân trang để sử dụng với Beaver Builder, Elementor và các trình tạo trang khác trong Genesis.
Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.6.0, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.
Bước 1
Tạo một tệp có tên say, template-full-landing.php trong thư mục chủ đề con có như sau:
// Template Name: Full Width Landing
add_filter( 'body_class', 'sk_body_class' );
/**
* Adds a css class to the body element.
*
* @param array $classes the current body classes
* @return array $classes modified classes
*/
function sk_body_class( $classes ) {
$classes[] = 'full-width-landing';
return $classes;
}
// Removes site header.
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_do_nav', 12 );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
// Removes breadcrumbs.
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
// Removes entry header.
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
// Forces full width content.
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
// Removes footer widgets.
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
// Removes footer.
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_do_subnav', 10 );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
genesis();
Bước 2
Chỉnh sửa style.css của chủ đề con .
a) Bên trên các truy vấn phương tiện, hãy thêm
.full-width-landing .site-inner {
padding: 0;
}
.full-width-landing .content .entry {
margin-bottom: 0;
}
b) Trong truy vấn phương tiện chiều rộng tối thiểu 960px, hãy thêm
.full-width-landing .site-inner {
max-width: none;
}
.full-width-landing .content {
width: 100%;
}
Bước 3
Tạo / chỉnh sửa các Trang mà bạn muốn sử dụng làm trang đích với Beaver Builder hoặc Elementor và áp dụng mẫu trong hộp meta Thuộc tính trang.Full Width Landing