Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 901.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62

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

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

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

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

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

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

วิธีเพิ่มโมดูลบนตัวสร้าง Divi

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ให้คุณสร้าง อย่างง่ายดายและฟรี การออกแบบเว็บไซต์หรือบล็อกใดๆ ก็ตามที่ดูเป็นมืออาชีพ หยุดจ่ายมากสำหรับเว็บไซต์ที่คุณทำเองได้

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

การปรับเปลี่ยน css ขั้นสูงของแถบเลื่อน Divi

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

ดาวน์โหลด WooCommerce ฟรี ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress และสร้างร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย เหมาะสำหรับผู้เริ่มต้น

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

เพิ่ม diaspositive บน divi

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

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

การตั้งค่าสไลด์ Divi

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

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

วิธีเพิ่ม 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 =" 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"] ดาวน์โหลดธีม DIVI [/ 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 = "ขยาย" align = "กลาง" 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 "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

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

13 หุ้น
หุ้น5
ทวีต1
Enregistrer7