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

hơn Tải xuống 901.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í.

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 " Xây dựng Divi »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 #

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

Elementor cho phép bạn tạo Dễ dàng và Miễn phí bất kỳ trang web hoặc thiết kế blog với một cái nhìn chuyên nghiệp. Ngừng trả nhiều tiền cho một trang web mà bạn có thể tự làm.

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

Bạn có muốn bán sản phẩm của mình trên internet?

Tải xuống WooCommerce 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 và dễ dàng tạo cửa hàng trực tuyến của bạn. Hoàn hảo cho người mới bắt đầu.

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 =" expand "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 TRANG CHỦ [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "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 DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Hướng dẫn Divi khác

%d các blogger thích trang này: