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 '.
Thêm một module đầy đủ chiều rộng.
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 '.
Trong "Cài đặt chung", hãy thêm một slide 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 đang sử dụng một hình ảnh từ 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 " 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 »:
(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 chế độ toàn màn hình cho website. Sử dụng nó để tạo các thanh trượt toàn chiều rộng 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ọ.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Hướng dẫn Divi khác
- trang web 5 để sử dụng hàng Divi chủ đề
- Cách thêm văn bản vào sản phẩm Divi WooCommerce
- Cách thay đổi màu menu giữa các trang Divi
- Cách cá nhân hóa lưới của blog với Divi
- Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
- Cách tạo thanh trượt Divi toàn màn hình
- Cách thay đổi màu của menu giữa các trang Divi
- Các tính năng có thể bạn chưa biết về Divi
- Cách sử dụng Divi Builder trên WordPress
- Cách sử dụng mô-đun cuộn video Divi
- Cách sử dụng mô-đun Divi Builder Flip
- Cách thêm mô-đun chứng thực trên Divi Builder
- Cách sử dụng mô-đun văn bản Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng Divi
- Cách sử dụng mô-đun Truyền thông xã hội Divi
- Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
- Cách sử dụng mô-đun bên Divi
- Cách sử dụng mô-đun bảng giá Divi
- Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
- Cách thêm mô-đun video của Divi
- Cách sử dụng mô-đun điều hướng bài viết
- Cách sử dụng mô-đun tìm kiếm Divi
- Cách sử dụng mô-đun ví Divi
- Cách sử dụng mô-đun người trên Divi Builder
- Cách sử dụng mô-đun ví với bộ lọc Divi
- Cách sử dụng mô-đun trượt toàn bộ chiều rộng
- Cách sử dụng Mô-đun hình ảnh Divi Builder
- Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
- Cách sử dụng mô-đun thư viện hình ảnh
- Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
- Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
- Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
- Cách sử dụng Module Divi Counter
- Cách sử dụng thanh trượt bài viết trên Divi Builder
- Cách sử dụng mô-đun Optin Email Optin
xin chào và cảm ơn bạn về hướng dẫn này! Tôi không thể tìm thấy mã js và css để chèn vào thanh trượt ở đây
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,
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.
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?
Bonjour,
Tôi không hiểu câu hỏi.
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ó 🙂
Bonjour,
Không cần thiết. Bạn có thể giữ divi nếu bạn không có quá nhiều kiến thức kỹ thuật.
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
Bonjour,
Bạn đã liên hệ với nhóm DIVI chưa?
Xin chào Aliénor,
Tôi có cùng một vấn đề ... Bạn đã tìm thấy một giải pháp?
Merci d'avance
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?
Bonjour,
Điều này có thể do lỗi, bạn đã cố gắng liên hệ với bộ phận hỗ trợ của Eleganthemes chưa?
Bonjour,
Cảm ơn bạn về bài viết của bạn!
Bạn có biết tôi có thể thay đổi tốc độ cuộn trượt?