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

Làm thế nào để tạo ra một toàn màn hình trượt 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 mẽ 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 một tính năng toàn màn hình cho mô-đun trượt của Divi cực kỳ dễ thực hiện với một vài dòng CSS và JavaScript. Chỉ trong vài phút 5, bạn có thể chuyển đổi thanh trượt toàn chiều rộng của mình thành một 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ư các 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 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 slide ở chế độ toàn 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ột 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ả tiền đắ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 "CSS tùy chỉnh", thêm một lớp CSS có tên là " et_fullscreen_slider '.

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

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

Trong "Cài đặt chung" thêm một trang chiếu mới.

Trong cài đặt trang chiếu, bên dưới Cài đặt chung 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 bao nhiêu slide mà bạn muốn thêm.

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

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

Từ bảng điều khiển WordPress, đi đến " Divi → Tùy chọn chủ đề Và trong "Cài đặt chung", hãy 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 miễn phí WooCommerce, 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. [Đề xuất]

.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 đầu 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 ở chế độ toàn màn hình cho trang web của bạn. Sử dụng nó để tạo các thanh trượt hiệu quả ở toàn bộ chiều rộng 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ụ, bằng cách 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 toàn bộ 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,

    1. Bonjour,

      Hãy thử tắt tất cả các plugin khác, đồng thời kiểm tra xem các phiên bản WordPress và Divi của bạn đã được cập nhật chưa.

  2. Chào buổi chiều, làm thế nào tôi có thể tùy chỉnh kích thước của trang trình bày theo kích thước của hình ảnh của các biểu ngữ để tôi không thể cắt ảnh?

  3. Bonjour,
    Cảm ơn bạn vì bài báo này. Tôi đọc rằng không cần phải cài đặt một chủ đề con với Divi cho đến khi bạn thay đổi CSS quá nhiều.
    Vẫn còn một chút tuỳ chỉnh ...
    Vậy bạn có đề xuất một chủ đề con trước khi áp dụng hướng dẫn siêu của bạn không?
    Cảm ơn bạn trước cho tất cả lời khuyên tốt của bạn, tôi thường lấy cảm hứng từ nó

  4. Xin chào, bài báo rất hay!
    Tôi theo dõi những gì đã được chỉ ra trong bài báo nhưng thanh trượt của tôi không được hiển thị trên màn hình đầy đủ 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

  5. Bonjour,
    Tôi xây dựng trang chủ của tôi với trình xây dựng ... khi tôi làm một previsualization, tôi thấy trang.
    Vấn đề là khi tôi lưu trang của tôi và mở nó lại, thanh trượt không xuất hiện.
    Ai đó có thể vui lòng giúp tôi?

Để 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 đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

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