Hướng dẫn này cung cấp các bước để hiển thị thanh trượt toàn chiều rộng bằng cách sử dụng phiên bản miễn phí của plugin Soliloquy, Soliloquy Lite bên dưới tiêu đề trong Parallax Pro.
Bước 1
Cài đặt và kích hoạt Soliloquy Lite.
Tạo một thanh trượt có tên say, Thanh trượt Trang trước và tải lên / chọn các hình ảnh trang chiếu mong muốn của bạn. Trong ví dụ này, tôi đã sử dụng hình ảnh có kích thước 1600 x 700.
Trong tab Cấu hình, hãy nhập chiều rộng và chiều cao của hình ảnh trang trình bày của bạn trong Kích thước thanh trượt.
Bước 2
Chỉnh sửa front-page.php .
a) Dưới đây
//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
cộng
//* Add Soliloquy slider below header
add_action( 'genesis_after_header', 'sk_full_width_slider' );
b) Trước
genesis();
cộng
function sk_full_width_slider() {
if ( function_exists( 'soliloquy' ) ) {
soliloquy( 'front-page-slider', 'slug' );
}
}
Thay thế bằng slug của thanh trượt của bạn.front-page-slider
Bước 3
Chỉnh sửa style.css .
a) Trong , thay thế.parallax-home .site-inner
margin-top: 70px;
với
margin-top: 0;
b) Dưới đó, thêm
.parallax-home .soliloquy-container {
margin-top: 70px;
max-width: 100% !important;
max-height: none !important;
}
.parallax-home .soliloquy-container .soliloquy-image {
width: 100%;
}
c) Trong truy vấn phương tiện 960px
thay thế
.parallax-home .site-inner {
margin-top: 0;
}
với
.parallax-home .soliloquy-container {
margin-top: 0;
}