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

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

ไปที่ builder.jpeg ที่มองเห็น

เมื่อคุณเข้าสู่ Visual Builder คุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ลงในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน

เพิ่มโมดูล video.jpeg

ค้นหาโมดูลตัวเลื่อนวิดีโอในรายการโมดูลและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการม็อดสามารถค้นหาได้ซึ่งหมายความว่าคุณยังสามารถพิมพ์ "แถบเลื่อนวิดีโอ" จากนั้นกด Enter เพื่อค้นหาและเพิ่มตัวดัดแปลงวิดีโอโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง.

เพิ่มโมดูล video.jpeg

เติมเคอร์เซอร์วิดีโอด้วยเนื้อหา

วิธีการกรอกเนื้อหาวิดีโอ Divi module video.jpg

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

เพิ่มองค์ประกอบ video.jpeg ใหม่

คุณสามารถดาวน์โหลดไฟล์. mp4 หรือ Webm ได้ที่นี่ คุณยังสามารถแทรก URL ของวิดีโอบน YouTube เมื่อคุณอัปโหลดไฟล์หรือเพิ่มลิงก์ YouTube เพียงคลิกปุ่มสีเขียวที่มุมขวาล่างคุณจะกลับไปที่แท็บเนื้อหาหลักของโมดูลตัวเลื่อนวิดีโอ ทำขั้นตอนนี้ซ้ำสำหรับแต่ละวิดีโอที่คุณต้องการเพิ่ม

การตั้งค่าเนื้อหา Video Slider Module

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

องค์ประกอบ

ด้านล่างรายการคุณสามารถปรับการตั้งค่าลูกศรและตัวเลื่อนของโมดูลตัวเลื่อนวิดีโอ

ปก

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

ป้ายกำกับผู้ดูแลระบบ

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

พารามิเตอร์การออกแบบโมดูล Video Slider

วิดีโอตัวเลือก design.jpeg

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

การตั้งค่าขั้นสูง Video Slider Module

พารามิเตอร์ขั้นสูง module.jpeg

ในแท็บขั้นสูงของโมดูลตัวเลื่อนวิดีโอของคุณคุณสามารถเพิ่ม ID เฉพาะและคลาส css ได้ คุณยังสามารถเพิ่ม css แบบกำหนดเองให้กับตัวเลือก css ที่กำหนดไว้ล่วงหน้า (และที่เลือกไว้ล่วงหน้า) ต่างๆในโมดูลเลื่อนลงวิดีโอแบบเลื่อนลง css สุดท้ายในรายการแบบเลื่อนลงการเปิดเผยคุณสามารถปรับการมองเห็นโมดูลของคุณบนโทรศัพท์แท็บเล็ตและเดสก์ท็อป

การตั้งค่าเนื้อหาวิดีโอแต่ละรายการ

กำหนดค่า videos.jpeg

หากคุณต้องการสร้างการตั้งค่าเฉพาะสำหรับแต่ละสไลด์คุณต้องกำหนดค่าสิ่งเหล่านี้ในสไลด์วิดีโอเอง เพียงคลิกที่ไอคอนรูปเฟืองบนสไลด์นั้นเพื่อเปิดการตั้งค่าเฉพาะ

configuration.jpeg วิดีโอแต่ละรายการ

วีดีโอ

ดังที่แสดงไว้ข้างต้นนี่คือที่ที่คุณสามารถเพิ่มเนื้อหาวิดีโอของคุณได้

ปก

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

การตั้งค่าการออกแบบวิดีโอส่วนบุคคล

ตั้งค่าวิดีโอ

บนแท็บออกแบบของสไลด์วิดีโอของคุณคุณสามารถเปลี่ยนสีของลูกศรของสไลด์จากสีอ่อนเป็นสีเข้ม

การกำหนดค่าวิดีโอแต่ละรายการ

นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้ฉันหวังว่ามันจะช่วยให้คุณใช้โมดูลการเลื่อนวิดีโอบน 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 อื่น ๆ