Bỏ qua đến nội dung chính

Cách tạo thanh trượt toàn màn hình trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Thanh trượt toàn chiều rộng đi kèm với các tính năng tuyệt vời, bao gồm khả năng thêm thanh trượt với nền video. Nhưng, một tính năng làm cho nó mạnh hơn nữa là khả năng mở rộng thanh trượt để hiển thị ở chế độ toàn màn hình. Vì vậy, chúng tôi sẽ chỉ cho bạn cách thêm tính năng toàn màn hình trên thanh trượt.

Thêm tính năng toàn màn hình vào mô-đun trượt của Divi là cực kỳ dễ thực hiện với một vài dòng CSS và JavaScript. Chỉ trong vòng 5 phút, bạn có thể chuyển đổi thanh trượt toàn chiều rộng thành thanh trượt toàn màn hình mở rộng để lấp đầy toàn bộ màn hình, giống như tiêu đề toàn màn hình.

Việc thực hiện chức năng trượt toàn màn hình trên Divi

Nếu bạn chưa đọc hướng dẫn về cách trình bày giao diện của Divi, Tôi mời bạn làm điều đó.

Bước 1: Thêm một thanh trượt với các trang trình bày ở chế độ toàn bộ chiều rộng

Sử dụng " Divi Builder »Thêm một phần« toàn bộ chiều rộng »Và nhấp vào« Chèn mô-đun ".

Thêm một module đầy đủ chiều rộng.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

thêm một module trượt Divi #

Trong Cài đặt thanh trượt, toàn màn hình, trong tab "Custom CSS", thêm một lớp CSS được gọi là " et_fullscreen_slider ".

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

Trong "Cài đặt chung", hãy thêm trang trình bày mới.

Trong cài đặt trang trình bày, trong Cài đặt chung, hãy cập nhật các mục sau:

  • Mục: [nhập chủ đề của bạn]
  • Nút Text: [nhập văn bản nút của bạn]
  • URL Button: [nhập nút URL của bạn]
  • hình nền: [thêm một hình nền] (Tôi sử dụng hình ảnh unsplash.com)

Lặp lại bước này cho nhiều trang trình bày bạn muốn thêm.

Sau khi hoàn tất, nhấp vào " Lưu & Exit ".

Cách thêm CSS và JavaScript tùy chỉnh

Từ trang tổng quan WordPress, hãy truy cập " Divi → Tùy chọn chủ đề Và trong "Cài đặt chung", nhập CSS sau vào hộp văn bản CSS tùy chỉnh:

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Khuyến nghị]

.et_pb_slides .et_fullscreen_slider, .et_pb_slide .et_fullscreen_slider, .et_pb_container .et_fullscreen_slider {min-height: 100% đáng kể; height: 100% quan trọng;! }

nhấp vào tab tiếp theo và thêm javascript sau vào hộp văn bản có nhãn " Thêm mã vào phần đầu của blog của bạn »:

<Script> (function ($) {$ (window) .Trên ( 'load thay đổi kích thước', function () {$ () mỗi (function () {et_fullscreen_slider ($ (this)) 'et_fullscreen_slider ..';}); }); chức năng et_fullscreen_slider (et_slider) {var et_viewport_width = $ (window) .width () et_viewport_height = $ (window) .height () = $ et_slider_height (et_slider) .find () innerHeight () 'et_pb_slider_container_inner.'. , admin_bar $ = $ ( '# wpadminbar), main_header $ = $ (' # tay-header ') top_header $ = $ (' # top-header '); $ (et_slider) .height (' auto '); if ($ admin_bar.length) {var = et_viewport_height et_viewport_height - $ admin_bar.height ();} if ($ top_header.length) {var = et_viewport_height et_viewport_height - $ top_header.height ();} if ($ ( 'et_transparent_nav !. ') .length) {var = et_viewport_height et_viewport_height - $ main_header.height ();} if (et_viewport_height> et_slider_height) {$ (et_slider) .height (et_viewport_height);}}}) (jQuery); </ Script>

cuối cùng

Bây giờ bạn có một thanh trượt toàn màn hình cho trang web của bạn. Sử dụng nó để tạo thanh trượt hiệu quả ở độ rộng đầy đủ cho hầu hết các trình duyệt.

Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hỏi họ.

Hướng dẫn Divi khác

Bài viết này chứa comments 12
  1. Xin chào, hướng dẫn tuyệt vời.
    Ví dụ, nó không hiển thị toàn màn hình trên iphone, bằng cách nghiêng iphone, thanh trượt được hiển thị theo thời gian trên toàn màn hình nhưng không phải là tất cả thời gian. như thể anh ta không phản ứng, bạn có ý tưởng nào để giải quyết vấn đề nhỏ này không?

    Cảm ơn bạn trước
    Kính trọng,

  2. Bonjour,
    Cảm ơn bạn cho bài viết này. Tôi đọc được rằng không nhất thiết phải cài đặt một chủ đề con với Divi miễn là bạn không sửa đổi CSS quá nhiều.
    Vẫn còn một chút cá nhân hóa
    Vì vậy, bạn có đề xuất một chủ đề con trước khi áp dụng hướng dẫn của bạn?
    Cảm ơn bạn trước tất cả những lời khuyên tốt của bạn, tôi thường lấy cảm hứng từ nó

  3. Xin chào, bài viết rất tốt!
    Tôi đã làm theo những gì được chỉ ra trong bài viết nhưng thanh trượt của tôi không xuất hiện trên toàn màn hình trên DIVI.
    Bạn có thể giúp tôi được không? Tôi muốn đặt nó lên trang chủ của tôi.

    Cảm ơn bạn đã giúp đỡ của bạn

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
11 cổ phiếu
cổ phiếu5
tweet1
Enregistrer5