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 701.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 chiều rộng đầy đủ đi kèm với một số tính năng tuyệt vời bao gồm khả năng thêm thanh trượt với nền video. Tuy nhiên, một tính năng khiến nó trở nên mạnh mẽ hơn cả 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 chức năng toàn màn hình vào thanh trượt.

Việc bổ sung tính năng toàn màn hình vào 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 5 phút, bạn có thể chuyển đổi thanh trượt toàn màn hình 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 cách trình bày giao diện 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 '.

Cách thêm mô-đun trên trình tạo divi

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", hãy thêm lớp CSS có tên " et_fullscreen_slider '.

Sửa đổi css nâng cao của thanh trượt divi

Trong "Cài đặt chung", hãy thêm một slide mới.

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]

Thêm một dấu ấn phân biệt trên divi

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 đang sử dụng một hình ảnh từ unsplash.com)

Cài đặt trình chiếu Divi

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 " Cứu thoát '.

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", nhập CSS sau vào hộp văn bản CSS tùy chỉnh:

.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 »:

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]

(function($) {
 
 $(window).on('load resize', function() {
 $('.et_fullscreen_slider').each(function() {
 et_fullscreen_slider($(this));
 });
 });
 
 function et_fullscreen_slider(et_slider) {
 var et_viewport_width = $(window).width(),
 et_viewport_height = $(window).height(),
 et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
 $admin_bar = $('#wpadminbar'),
 $main_header = $('#main-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);

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 mình. Sử dụng nó để tạo thanh trượt băng thông đầy đủ hiệu quả 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.
    Mặt khác, nó không được hiển thị toàn màn hình trên iphone chẳng hạn, bằng cách nghiêng iphone, thanh trượt được hiển thị theo thời gian ở chế độ toàn màn hình nhưng không phải lúc nào cũng hiển thị…. như thể nó không phản hồi, bạn có ý kiến ​​gì để khắc phục sự cố nhỏ này không?

    Cảm ơ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 cách nào để tôi có thể tùy chỉnh kích thước của slide phù hợp với kích thước của hình banner để không bị cắt ảnh?

  3. Bonjour,
    Cảm ơn cho bài viết này. Tôi đã đọc rằng không nhất thiết phải cài đặt chủ đề con với Divi miễn là chúng tôi không sửa đổi CSS quá nhiều.
    Vẫn còn một chút tùy chỉnh ...
    Vì vậy, bạn có đề xuất một chủ đề con trước khi áp dụng siêu hướng dẫn của mình không?
    Cảm ơn bạn trước vì 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ó 🙂

  4. Xin chào, bài báo rất hay!
    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 được hiển thị 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ó trên trang chủ của tôi.

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

  5. Bonjour,
    Tôi đang xây dựng trang chủ của mình bằng trình tạo ... khi tôi xem trước, tôi sẽ thấy trang.
    Vấn đề là khi tôi lưu trang của mình và mở lại, thanh trượt không xuất hiện.
    Có thể ai đó hãy 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
12 cổ phiếu
cổ phiếu5
tweet1
Enregistrer6