การเพิ่มวิดีโอลงในเพจของคุณใน Divi ทำได้ง่ายเมื่อคุณใช้โมดูลวิดีโอ โมดูลนี้ช่วยให้คุณสามารถฝังวิดีโอจากแหล่งใดก็ได้ แต่ยังปรับแต่งภาพขนาดย่อและปุ่มเล่นได้ด้วย
วิธีเพิ่มโมดูลวิดีโอลงในหน้าของคุณ
ก่อนที่คุณจะเพิ่มโมดูลวิดีโอลงในเพจได้ คุณต้องข้ามไปที่ Divi Builder ก่อน เมื่อ ธีม Divi ติดตั้งบนเว็บไซต์ของคุณ คุณจะสังเกตเห็นปุ่ม ใช้ Divi Builder เหนือโปรแกรมแก้ไขโพสต์เมื่อใดก็ตามที่คุณสร้างเพจใหม่ คลิกที่ปุ่มนี้เพื่อเปิดใช้งาน Divi Builder และเข้าถึงโมดูล Divi Builder ทั้งหมด จากนั้นคลิกที่ปุ่ม ใช้ Visual Builder เพื่อเริ่มเครื่องกำเนิดไฟฟ้าในโหมดภาพ คุณยังสามารถคลิกปุ่ม ใช้ Visual Builder เมื่อคุณเรียกดูเว็บไซต์ของคุณในเบื้องหน้าหากคุณเชื่อมต่อกับแผงควบคุม WordPress ของคุณ
เมื่อคุณเข้าสู่ Visual Builder คุณสามารถคลิกปุ่มบวกสีเทาเพื่อเพิ่มโมดูลใหม่ลงในเพจของคุณ โมดูลใหม่สามารถเพิ่มได้ภายในแถวเท่านั้น หากคุณกำลังเริ่มหน้าใหม่อย่าลืมเพิ่มแถวในเพจของคุณก่อน
ค้นหาตัวดัดแปลงวิดีโอในรายการม็อดและคลิกเพื่อเพิ่มลงในเพจของคุณ รายการม็อดสามารถค้นหาได้ซึ่งหมายความว่าคุณสามารถพิมพ์คำว่า "วิดีโอ" จากนั้นคลิก Enter เพื่อค้นหาและเพิ่มตัวดัดแปลงวิดีโอโดยอัตโนมัติ! เมื่อเพิ่มโมดูลแล้วคุณจะได้รับการต้อนรับจากรายการตัวเลือกโมดูล ตัวเลือกเหล่านี้แบ่งออกเป็นสามกลุ่มหลัก: เนื้อหา , ความคิด et สูง .
ตัวอย่างกรณีการใช้งาน: การเพิ่มวิดีโอลงในหน้า Landing Page ของคุณ
การเพิ่มวิดีโอลงในหน้า Landing Page ของคุณเป็นวิธีที่ดีเยี่ยม ส่งเสริม ผลิตภัณฑ์ของคุณและเพิ่มการแปลง ในตัวอย่างนี้ ฉันจะแสดงให้คุณเห็นว่าคุณสามารถใช้โมดูลวิดีโอเพื่อเพิ่มวิดีโอลงในหน้า Landing Page ของคุณได้อย่างไร ฉันใส่วงกลมสีแดงในตำแหน่งที่วิดีโอควรไป
การใช้ Visual Builder ฉันเพิ่มส่วนใหม่ด้วยแถวเต็มความกว้าง (1 คอลัมน์) ในการตั้งค่าแถวใต้แท็บออกแบบฉันเลือกตัวเลือก "ใช้ความกว้างที่กำหนดเอง" สำหรับตัวเลือกความกว้างแบบกำหนดเองที่ปรากฏขึ้นฉันป้อนความกว้างแบบกำหนดเองที่ 767px วิธีนี้ทำให้แน่ใจว่าโมดูลวิดีโอที่ฉันจะเพิ่มในแถวนี้ไม่เกินความกว้างนี้และใหญ่เกินไปสำหรับขนาดหน้าจอที่ใหญ่ขึ้น
จากนั้นฉันเพิ่มโมดูลวิดีโอลงในแถว ภายใต้แท็บเนื้อหาของการตั้งค่าโมดูลวิดีโอฉันป้อน URL วิดีโอของวิดีโอที่ฉันต้องการฝังในหน้า Landing Page ฉันใช้ URL ของวิดีโอ YouTube สำหรับตัวอย่างนี้
จากนั้นฉันเพิ่ม URL การวางซ้อนภาพสำหรับวิดีโอของฉันโดยคลิกที่ปุ่ม "สร้างวิดีโอ" การดำเนินการนี้จะดึงเฟรมจากวิดีโอโดยอัตโนมัติเพื่อใช้เป็นภาพซ้อนทับพร้อมกับไอคอนวิดีโอที่กำหนดเองใหม่
ภายใต้แท็บออกแบบฉันเปลี่ยนสีของไอคอนเล่นเพื่อให้เข้ากับหน้า Landing Page ของฉัน
ตอนนี้ฉันมีวิดีโอสำหรับหน้า Landing Page ที่ดูสะอาดตาและตรงกับการออกแบบของฉัน
ตอนนี้คุณได้เห็นตัวดัดแปลงวิดีโอแล้วให้ดำน้ำในการตั้งค่าทั้งหมดในส่วนด้านล่าง เราได้ให้รายละเอียดเกี่ยวกับสิ่งที่คุณจะพบในแต่ละแท็บของการตั้งค่าของโมดูลและคำอธิบายว่าแต่ละส่วนทำอะไรบ้าง
ตัวเลือกเนื้อหา
URL ของวิดีโอ
โมดูล Divi Video ช่วยให้คุณสามารถเพิ่มวิดีโอโดยใช้สองวิธีที่แตกต่างกัน คุณสามารถดาวน์โหลดไฟล์วิดีโอของคุณเองจากคอมพิวเตอร์ของคุณโดยคลิกที่ปุ่ม "ดาวน์โหลดวิดีโอ" และเลือกไฟล์ที่ต้องการหรือคุณสามารถป้อน URL ของวิดีโอจากแหล่งวิดีโอของบุคคลที่สามเช่น Youtube หรือ Vimeo เพียงคัดลอกและวาง URL จากเบราว์เซอร์ของคุณแล้ววางลงในช่อง URL ของวิดีโอแล้ว Divi จะจัดการส่วนที่เหลือให้เอง!
URL ภาพซ้อนทับ
หากคุณต้องการตั้งค่าภาพขนาดย่อของวิดีโอที่กำหนดเองซึ่งจะวางไว้บนอินเทอร์เฟซวิดีโอมาตรฐานพร้อมปุ่มเล่นแบบกำหนดเองเพื่อสร้างรูปลักษณ์ที่คมชัดและมีสไตล์มากขึ้นคุณสามารถเลือกทำได้โดยใช้ฟิลด์การแสดงภาพซ้อนทับ การควบคุมนี้ช่วยให้คุณสามารถอัปโหลดภาพในแบบของคุณเองหรือให้ Divi สร้างขึ้นโดยอัตโนมัติจาก URL ของวิดีโอของคุณ ผู้ให้บริการวิดีโอส่วนใหญ่รองรับตัวเลือกนี้เช่น Youtube และ Vimeo เพียงคลิกที่ปุ่ม "สร้างวิดีโอ" แล้วปล่อยให้ Divi ดูแลส่วนที่เหลือ!
ป้ายกำกับผู้ดูแลระบบ
ตามค่าเริ่มต้นโมดูลวิดีโอของคุณจะปรากฏพร้อมกับป้ายกำกับ "วิดีโอ" ในตัวสร้าง แท็กผู้ดูแลระบบช่วยให้คุณสามารถเปลี่ยนแท็กนี้เพื่อให้ระบุตัวตนได้ง่าย
ตัวเลือกการออกแบบ
เปลี่ยนสีไอคอน
หากคุณกำหนดภาพซ้อนทับสำหรับพ็อดวิดีโอของคุณวิดีโอที่แสดงจะมีไอคอนเล่นอยู่เหนือวิดีโอ คุณสามารถกำหนดสีของไอคอนนี้ได้ที่นี่เพื่อให้เข้ากับสีบนเพจของคุณ
ตัวเลือกขั้นสูง
ตัวระบุ CSS และคลาส
สามารถใช้เพื่อเพิ่ม CSS ID หรือคลาสในโมดูลของคุณ จากนั้นสามารถใช้สิ่งเหล่านี้ในสไตล์ชีทของคุณหรือในกล่อง CSS ของตัวเลือกธีมที่กำหนดเองเพื่อใช้สไตล์ที่กำหนดเองกับโมดูล CSS ID สามารถกำหนดเป้าหมายด้วยลิงก์จุดยึดเพื่อเชื่อมโยงไปยังพื้นที่บางส่วนของเพจของคุณ
CSS ที่กำหนดเอง
ที่นี่คุณสามารถเพิ่ม CSS ที่กำหนดเองในโมดูลวิดีโอของคุณ
ความชัดเจน
หากคุณต้องการซ่อนโมดูลวิดีโอของคุณในบางอุปกรณ์คุณสามารถเลือกอุปกรณ์ที่คุณต้องการปิดการใช้งานโมดูลวิดีโอ
[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