แถบเลื่อนแบบเต็มความกว้างมาพร้อมกับคุณสมบัติที่ยอดเยี่ยมรวมถึงความสามารถในการเพิ่มแถบเลื่อนที่มีพื้นหลังวิดีโอ แต่คุณลักษณะหนึ่งที่ทำให้มีประสิทธิภาพมากยิ่งขึ้นคือความสามารถในการขยายแถบเลื่อนเพื่อแสดงในโหมดเต็มหน้าจอ ดังนั้นเราจะแสดงวิธีเพิ่มฟังก์ชันเต็มหน้าจอให้กับแถบเลื่อน

การเพิ่มคุณสมบัติเต็มหน้าจอให้กับโมดูลตัวเลื่อนของ Divi ใช้งานง่ายมากด้วย CSS และ JavaScript เพียงไม่กี่บรรทัด ในเวลาเพียง 5 นาทีคุณสามารถแปลงแถบเลื่อนแบบเต็มความกว้างเป็นแถบเลื่อนแบบเต็มหน้าจอที่ขยายให้เต็มหน้าจอเหมือนกับส่วนหัวแบบเต็มหน้าจอ

การใช้งานฟังก์ชั่นตัวเลื่อนแบบเต็มหน้าจอใน Divi

หากคุณยังไม่ได้อ่านไฟล์ การสอนเกี่ยวกับการนำเสนออินเทอร์เฟซ Diviฉันขอเชิญคุณทำ

ขั้นตอนที่ 1: เพิ่มตัวเลื่อนพร้อมสไลด์ในโหมดเต็มความกว้าง

ใช้ " Divi Builder »เพิ่มส่วน« เต็มความกว้าง »และคลิกที่«  ใส่โมดูล '

เพิ่มโมดูลเต็มความกว้าง

เพิ่มโมดูลเลื่อน Divi #

ในการตั้งค่าตัวเลื่อนแบบเต็มหน้าจอใต้แท็บ "CSS ที่กำหนดเอง" ให้เพิ่มคลาส CSS ชื่อ " et_fullscreen_slider '

ใน "การตั้งค่าทั่วไป" ให้เพิ่มสไลด์ใหม่

ในการตั้งค่าสไลด์ภายใต้การตั้งค่าทั่วไปอัพเดทรายการต่อไปนี้:

• หมวด: [ป้อนหัวเรื่อง]
• ปุ่มข้อความ: [ป้อนปุ่มข้อความของคุณ]
• ปุ่ม URL: [ป้อนปุ่ม URL]
• ภาพพื้นหลัง: [เพิ่มภาพพื้นหลัง] (ฉันใช้รูปภาพจาก unsplash.com)

ทำซ้ำขั้นตอนนี้สำหรับภาพนิ่งจำนวนมากตามที่คุณต้องการเพิ่ม

เมื่อเสร็จแล้วคลิกที่ " บันทึกและออก '

วิธีเพิ่ม CSS และ JavaScript ที่กำหนดเอง

จากแดชบอร์ด WordPress ไปที่ " Divi →ตัวเลือกชุดรูปแบบ และในส่วน "การตั้งค่าทั่วไป" ให้ป้อน CSS ต่อไปนี้ในกล่องข้อความ CSS ที่กำหนดเอง:

.et_pb_slides .et_fullscreen_slider, .et_pb_slide .et_fullscreen_slider, .et_pb_container .et_fullscreen_slider {นาที-height: 100% อย่างมีนัยสำคัญ ความสูง: 100% ที่สำคัญ! }

คลิกที่แท็บถัดไปและเพิ่มจาวาสคริปต์ต่อไปนี้ในกล่องข้อความที่ชื่อว่า " เพิ่มโค้ดที่ส่วนหัว บล็อกของคุณ ":

(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);

ในที่สุด

ตอนนี้คุณมีแถบเลื่อนโหมดเต็มหน้าจอสำหรับคุณ เว็บไซต์. ใช้เพื่อสร้างแถบเลื่อนแบบเต็มความกว้างที่มีประสิทธิภาพสำหรับเบราว์เซอร์ส่วนใหญ่

หากคุณมีคำถามใด ๆ อย่าลังเลที่จะถามพวกเขา

[vc_row center_row=”ใช่”][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”]ดาวน์โหลดธีม 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”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

บทแนะนำ Divi อื่น ๆ

• เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
• วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
• วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
• วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
• วิธีการใช้ Divi Builder ใน WordPress
• วิธีใช้โมดูลเลื่อนภาพ Divi
• วิธีการใช้โมดูล Divi Builder Flip
• วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
• วิธีใช้โมดูลข้อความ Divi
• วิธีสร้างแถบเลื่อนบน Divi
• วิธีแก้ไขบทบาทผู้ใช้ Divi
• วิธีใช้โมดูล Divi Social Media
• วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
• วิธีใช้โมดูลด้านข้าง Divi
• วิธีการใช้โมดูลตารางราคา Divi
• วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
• วิธีเพิ่มโมดูลวิดีโอของ Divi
• วิธีใช้โมดูลการนำทางบทความ
• วิธีการใช้โมดูลค้นหา Divi
• วิธีใช้โมดูลกระเป๋าสตางค์ Divi
• วิธีการใช้โมดูลคนบน Divi Builder
• วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
• วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
• วิธีใช้โมดูล Divi Builder Image
• วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
• วิธีการใช้โมดูลคลังภาพ
• วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
• วิธีใช้โมดูล Divi Full Width Portfolio
• วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
• วิธีใช้โมดูล Divi Counter
• วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
• วิธีใช้โมดูล Divi Email Optin