Thanh trượt Soliloquy có chiều rộng đầy đủ bên dưới tiêu đề trong Parallax Pro

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