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.

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.

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

(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