Tiêu đề nổi trên thanh trượt Soliloquy trong Parallax Pro

Thủ thuật WordPress
#1

Trong phần nhận xét của tiêu đề thanh trượt Soliloquy chiều rộng đầy đủ bên dưới trong Parallax Pro, một người dùng đã hỏi:

Sridhar, có thể mở rộng đầu của thanh trượt để điều hướng trên cùng trong suốt trên đầu của nó không?

Hướng dẫn này cung cấp các bước để thêm thanh trượt bằng plugin Soliloquy miễn phí, hiển thị nó bên dưới tiêu đề trang web trên trang chủ và làm cho tiêu đề cố định trong suốt để có thể nhìn thấy hình ảnh thanh trượt bên dưới 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, 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.Homepage Slider

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.homepage-slider

Bước 3

Chỉnh sửa style.css .

một sự thay đổi

.parallax-home .site-inner {
    margin-top: 66px;
    max-width: 100%;
}

đến

.parallax-home .site-inner {
    margin-top: 0;
    max-width: 100%;
}

b) Dưới đó, thêm

.parallax-home .soliloquy-container {
    max-width: 100% !important;
    max-height: none !important;
}

.parallax-home .soliloquy-container .soliloquy-image {
    width: 100%;
}

c) Thay đổi

.site-header {
    background-color: #000;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

đến

.site-header {
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

d) Trong thay đổi truy vấn phương tiện 1020px

.site-header {
    padding-bottom: 10px;
    position: static;
}

đến

.site-header {
    padding-bottom: 10px;
    position: static;
    background-color: #000;
}