ก่อนที่คุณจะเพิ่มโมดูลวิดีโอลงในเพจได้ คุณต้องใช้ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบน .ของคุณ เว็บไซต์เว็บ, คุณจะสังเกตเห็นปุ่ม ใช้เครื่องมือสร้างภาพ ด้านบนผู้เผยแพร่ทุกครั้งที่คุณสร้างหน้าใหม่
คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้เครื่องมือสร้างภาพ เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม เปิดใช้ Visual Builder เมื่อคุณเรียกดู .ของคุณ เว็บไซต์เว็บ ในเบื้องหน้าหากคุณลงชื่อเข้าใช้แดชบอร์ด WordPress
เมื่อคุณเข้าสู่ Visual Builder คุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ลงในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน
ค้นหาโมดูลตัวเลื่อนวิดีโอในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการม็อดสามารถค้นหาได้ซึ่งหมายความว่าคุณยังสามารถพิมพ์ "แถบเลื่อนวิดีโอ" จากนั้นกด Enter เพื่อค้นหาและเพิ่มตัวดัดแปลงวิดีโอโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง.
เติมเคอร์เซอร์วิดีโอด้วยเนื้อหา
ก่อนที่คุณจะปรับการตั้งค่ามากเกินไปคุณควรดำเนินการต่อและเติมแถบเลื่อนวิดีโอด้วยสไลด์วิดีโอ ด้วยวิธีนี้เมื่อคุณทำการเปลี่ยนแปลงคุณจะสามารถเห็นว่าสิ่งเหล่านี้ส่งผลต่อผลลัพธ์สุดท้ายอย่างไร ในการเพิ่มสไลด์วิดีโอใหม่คุณต้องคลิกที่ลิงค์ + เพิ่มรายการใหม่ .
คุณสามารถดาวน์โหลดไฟล์. mp4 หรือ Webm ได้ที่นี่ คุณยังสามารถแทรก URL ของวิดีโอบน YouTube เมื่อคุณอัปโหลดไฟล์หรือเพิ่มลิงก์ YouTube เพียงคลิกปุ่มสีเขียวที่มุมขวาล่างคุณจะกลับไปที่แท็บเนื้อหาหลักของโมดูลตัวเลื่อนวิดีโอ ทำขั้นตอนนี้ซ้ำสำหรับแต่ละวิดีโอที่คุณต้องการเพิ่ม
การตั้งค่าเนื้อหา Video Slider Module
ตอนนี้เนื้อหาของคุณได้ถูกเพิ่มเข้าไปแล้วยังมีอีกสองสามประเด็นให้สำรวจ เมนูแบบเลื่อนลงสามรายการบนแท็บเนื้อหาที่มีการจัดกลุ่มการตั้งค่าที่จะส่งผลต่อโมดูลทั้งหมด
องค์ประกอบ
ด้านล่างรายการคุณสามารถปรับการตั้งค่าลูกศรและตัวเลื่อนของโมดูลตัวเลื่อนวิดีโอ
ปก
คุณสามารถเลือกที่จะแสดงหรือซ่อนภาพซ้อนทับบนวิดีโอหลักได้ที่นี่ ซึ่งสามารถทำได้โดยการเพิ่มการวางซ้อนในแต่ละสไลด์วิดีโอหรือสร้างขึ้นโดยอัตโนมัติโดย Divi
ป้ายกำกับผู้ดูแลระบบ
ในรายการแบบเลื่อนลงนี้คุณสามารถเพิ่มแท็กผู้ดูแลระบบที่จะปรากฏในตัวสร้างส่วนหลังตลอดจนมุมมองโครงกระดูกของตัวสร้างภาพ
พารามิเตอร์การออกแบบโมดูล Video Slider
ในแท็บนี้มีเพียงกลุ่มพารามิเตอร์เดียวที่เรียกว่า การควบคุมสี . ที่นี่คุณสามารถเปลี่ยนสีของตัวควบคุมแถบเลื่อนจากสีอ่อนเป็นสีเข้มเปลี่ยนสีของไอคอนเล่นและปรับสีการวางซ้อนภาพขนาดย่อ
การตั้งค่าขั้นสูง Video Slider Module
ในแท็บขั้นสูงของโมดูลตัวเลื่อนวิดีโอของคุณคุณสามารถเพิ่ม ID เฉพาะและคลาส css ได้ คุณยังสามารถเพิ่ม css แบบกำหนดเองให้กับตัวเลือก css ที่กำหนดไว้ล่วงหน้า (และที่เลือกไว้ล่วงหน้า) ต่างๆในโมดูลเลื่อนลงวิดีโอแบบเลื่อนลง css สุดท้ายในรายการแบบเลื่อนลงการเปิดเผยคุณสามารถปรับการมองเห็นโมดูลของคุณบนโทรศัพท์แท็บเล็ตและเดสก์ท็อป
การตั้งค่าเนื้อหาวิดีโอแต่ละรายการ
หากคุณต้องการสร้างการตั้งค่าเฉพาะสำหรับแต่ละสไลด์คุณต้องกำหนดค่าสิ่งเหล่านี้ในสไลด์วิดีโอเอง เพียงคลิกที่ไอคอนรูปเฟืองบนสไลด์นั้นเพื่อเปิดการตั้งค่าเฉพาะ
วีดีโอ
ดังที่แสดงไว้ข้างต้นนี่คือที่ที่คุณสามารถเพิ่มเนื้อหาวิดีโอของคุณได้
ปก
จากรายการแบบเลื่อนลงของการวางซ้อนคุณสามารถอัปโหลดภาพเพื่อวางซ้อนสไลด์วิดีโอของคุณหรือเลือกที่จะสร้างขึ้นโดยอัตโนมัติ
การตั้งค่าการออกแบบวิดีโอส่วนบุคคล
บนแท็บออกแบบของสไลด์วิดีโอของคุณคุณสามารถเปลี่ยนสีของลูกศรของสไลด์จากสีอ่อนเป็นสีเข้ม
นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้ฉันหวังว่ามันจะช่วยให้คุณใช้โมดูลการเลื่อนวิดีโอบน Divi ได้
[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