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

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

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

วิธีเพิ่มโมดูลวิดีโอลงในหน้าของคุณ

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

divi builder

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

โมดูลวิดีโอ divi.png

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

ตัวอย่างกรณีการใช้งาน: การเพิ่มวิดีโอลงในหน้า Landing Page ของคุณ

การเพิ่มวิดีโอลงในหน้า Landing Page เป็นวิธีที่ดีในการโปรโมตผลิตภัณฑ์ของคุณและเพิ่ม Conversion ในตัวอย่างนี้ฉันจะแสดงวิธีใช้โมดูลวิดีโอเพื่อเพิ่มวิดีโอลงในหน้า Landing Page ของคุณ ฉันใส่วงกลมสีแดงในตำแหน่งที่วิดีโอควรจะไป

การสร้างวิดีโอบน divi exemple.jpg

การใช้ Visual Builder ฉันเพิ่มส่วนใหม่ด้วยแถวเต็มความกว้าง (1 คอลัมน์) ในการตั้งค่าแถวใต้แท็บออกแบบฉันเลือกตัวเลือก "ใช้ความกว้างที่กำหนดเอง" สำหรับตัวเลือกความกว้างแบบกำหนดเองที่ปรากฏขึ้นฉันป้อนความกว้างแบบกำหนดเองที่ 767px วิธีนี้ทำให้แน่ใจว่าโมดูลวิดีโอที่ฉันจะเพิ่มในแถวนี้ไม่เกินความกว้างนี้และใหญ่เกินไปสำหรับขนาดหน้าจอที่ใหญ่ขึ้น

ใช้ divi.png ความกว้างที่กำหนดเอง

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

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

จากนั้นฉันเพิ่มโมดูลวิดีโอลงในแถว ภายใต้แท็บเนื้อหาของการตั้งค่าโมดูลวิดีโอฉันป้อน URL วิดีโอของวิดีโอที่ฉันต้องการฝังในหน้า Landing Page ฉันใช้ URL ของวิดีโอ YouTube สำหรับตัวอย่างนี้

เพิ่มวิดีโอเกี่ยวกับ divi.png

จากนั้นฉันเพิ่ม URL การวางซ้อนภาพสำหรับวิดีโอของฉันโดยคลิกที่ปุ่ม "สร้างวิดีโอ" การดำเนินการนี้จะดึงเฟรมจากวิดีโอโดยอัตโนมัติเพื่อใช้เป็นภาพซ้อนทับพร้อมกับไอคอนวิดีโอที่กำหนดเองใหม่

เพิ่มการซ้อนทับ divi video.jpg

ภายใต้แท็บออกแบบฉันเปลี่ยนสีของไอคอนเล่นเพื่อให้เข้ากับหน้า Landing Page ของฉัน

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

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

แก้ไขไอคอนเครื่องเล่น divi video.jpg

ตอนนี้ฉันมีวิดีโอสำหรับหน้า Landing Page ที่ดูสะอาดตาและตรงกับการออกแบบของฉัน

การออกแบบขั้นสุดท้ายพร้อมเนื้อหา video.jpg

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

ตัวเลือกเนื้อหา

พารามิเตอร์โมดูล divi.png

URL ของวิดีโอ

โมดูล Divi Video ช่วยให้คุณสามารถเพิ่มวิดีโอโดยใช้สองวิธีที่แตกต่างกัน คุณสามารถดาวน์โหลดไฟล์วิดีโอของคุณเองจากคอมพิวเตอร์ของคุณโดยคลิกที่ปุ่ม "ดาวน์โหลดวิดีโอ" และเลือกไฟล์ที่ต้องการหรือคุณสามารถป้อน URL ของวิดีโอจากแหล่งวิดีโอของบุคคลที่สามเช่น Youtube หรือ Vimeo เพียงคัดลอกและวาง URL จากเบราว์เซอร์ของคุณแล้ววางลงในช่อง URL ของวิดีโอแล้ว Divi จะจัดการส่วนที่เหลือให้เอง!

URL ภาพซ้อนทับ

หากคุณต้องการตั้งค่าภาพขนาดย่อของวิดีโอที่กำหนดเองซึ่งจะวางไว้บนอินเทอร์เฟซวิดีโอมาตรฐานพร้อมปุ่มเล่นแบบกำหนดเองเพื่อสร้างรูปลักษณ์ที่คมชัดและมีสไตล์มากขึ้นคุณสามารถเลือกทำได้โดยใช้ฟิลด์การแสดงภาพซ้อนทับ การควบคุมนี้ช่วยให้คุณสามารถอัปโหลดภาพในแบบของคุณเองหรือให้ Divi สร้างขึ้นโดยอัตโนมัติจาก URL ของวิดีโอของคุณ ผู้ให้บริการวิดีโอส่วนใหญ่รองรับตัวเลือกนี้เช่น Youtube และ Vimeo เพียงคลิกที่ปุ่ม "สร้างวิดีโอ" แล้วปล่อยให้ Divi ดูแลส่วนที่เหลือ!

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

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

ตัวเลือกการออกแบบ

เปลี่ยนสีไอคอน

การออกแบบส่วนออกแบบ divi.png

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

ตัวเลือกขั้นสูง

video module advanced section.png

ตัวระบุ CSS และคลาส

สามารถใช้เพื่อเพิ่ม CSS ID หรือคลาสในโมดูลของคุณ จากนั้นสามารถใช้สิ่งเหล่านี้ในสไตล์ชีทของคุณหรือในกล่อง CSS ของตัวเลือกธีมที่กำหนดเองเพื่อใช้สไตล์ที่กำหนดเองกับโมดูล CSS ID สามารถกำหนดเป้าหมายด้วยลิงก์จุดยึดเพื่อเชื่อมโยงไปยังพื้นที่บางส่วนของเพจของคุณ

CSS ที่กำหนดเอง

ที่นี่คุณสามารถเพิ่ม CSS ที่กำหนดเองในโมดูลวิดีโอของคุณ

ความชัดเจน

หากคุณต้องการซ่อนโมดูลวิดีโอของคุณในบางอุปกรณ์คุณสามารถเลือกอุปกรณ์ที่คุณต้องการปิดการใช้งานโมดูลวิดีโอ

[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 อื่น ๆ

16 หุ้น
หุ้น8
ทวีต3
Enregistrer5