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

Trước đây, tôi đã chia sẻ một mẫu trang cho Beaver Builder dựa trên các trang đích có chiều rộng đầy đủ của Bill Erickson tại đây.

Ở đây tôi đề cập đến một cách tiếp cận tương tự nhưng tốt hơn một chút / chung chung có thể được sử dụng cho Beaver Builder, Elementor và về mặt lý thuyết, bất kỳ trình tạo trang nào khác (tôi chỉ mới thử nghiệm hai phương pháp đó) 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, trong thư mục chủ đề con có như sau:template-full.php

// Template Name: Full Width

add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
/**
 * Adds the attributes from 'entry', since this replaces the main entry.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
 *
 * @param array $attributes Existing attributes.
 * @return array Amended attributes.
 */
function be_site_inner_attr( $attributes ) {

    // Adds a class of 'full' for styling this .site-inner differently
    $attributes['class'] .= ' full';

    // Adds an id of 'genesis-content' for accessible skip links
    $attributes['id'] = 'genesis-content';

    // Adds the attributes from .entry, since this replaces the main entry
    $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );

    return $attributes;
}

// Displays Header.
get_header();

genesis_do_breadcrumbs();

// Displays Content.
the_post(); // sets the 'in the loop' property to true. Needed for Beaver Builder but not Elementor.
the_content();

// Displays Comments (if any are already present and if comments are enabled in Genesis settings - disabled by default for Pages).
genesis_get_comments_template();

// Displays Footer.
get_footer();

Bước 2

Trên các Trang bên trong nơi bạn muốn sử dụng trình tạo trang, hãy áp dụng mẫu.Full Width

và xây dựng (các) Trang của bạn.

Bước 3

Để sử dụng trình tạo trang trên trang chủ của trang web của bạn,

a) Tạo một Trang có tiêu đề say Home , chọn mẫu và Xuất bản.Full Width

b) Tại Cài đặt> Đọc, đặt Home làm trang chủ tĩnh.

c) [tùy chọn] Bạn có thể muốn tạo một Trang có tiêu đề say Blog hoặc News và đặt nó làm trang Bài đăng.

d) Tạo một tệp có tên trong thư mục chủ đề con có:front-page.php

get_template_part( 'template', 'full' );

Bước 4

Thêm phần sau vào style.css của chủ đề con :

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

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

Lưu ý: Nếu bạn muốn sử dụng trình tạo trang trên tất cả các Trang của trang web của mình, hãy tạo một tệp có tên có mã từ bước 3d.page.php