วิธีเพิ่มวิดีโอลอยตัวบนหน้าเลื่อนใน WordPress

ต้องการเรียนรู้ วิธีเพิ่มวิดีโอลอยตัวในการเลื่อนหน้าในไซต์ WordPress ของคุณหรือไม่?

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

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

ดังนั้นให้อ่าน ...

วิดีโอติดหนึบคืออะไร?

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

ทำไมต้องเพิ่ม Sticky Video ในเว็บไซต์ Elementor WordPress

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

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

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

วิธีเพิ่มวิดีโอเหนียวในเว็บไซต์ Elementor ใน 6 ขั้นตอน

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

ขั้นตอนที่ 1: ติดตั้ง Elementor และ ElementsKit

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

• องค์ประกอบ และ
• ElementsKit (ทั้งรุ่นฟรีและรุ่นโปร)

Elementor เป็นเครื่องมือสร้างเพจแบบลากและวาง และ ElementsKit เป็นส่วนเสริมสำหรับ Elementor ดังนั้น คุณต้องติดตั้ง Elementor ก่อน จากนั้นดาวน์โหลด ElementsKit จากนั้นอัปเกรดปลั๊กอินเป็นเวอร์ชัน Pro

คุณสามารถตรวจสอบเอกสารได้หากต้องการความช่วยเหลือเกี่ยวกับการติดตั้ง ElementsKit pro และขั้นตอนการเปิดใช้งานใบอนุญาต

ขั้นตอนที่ 2: เปิดใช้งาน Sticky Content Module ของ ElementsKit

ในการทำให้วิดีโอติดหนึบ ฉันจะใช้คุณสมบัติ Sticky Content ของ ElementsKit ดังนั้น คุณต้องเปิดใช้งานโมดูลเนื้อหาที่ติดหนึบ

ตอนนี้ไปที่ ElementsKit ⇒ Modules ⇒ Sticky Content เปิด ตัวเลือกแล้ว คลิกบันทึกการเปลี่ยนแปลง เพื่ออัปเดตการเปลี่ยนแปลงที่คุณเพิ่งทำ

ขั้นตอนที่ 3: ลากและวางวิดเจ็ต Elementor Video

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

เลือกเค้าโครงที่คุณต้องการโดยคลิก ที่ไอคอน + หลังจากนั้น ค้นหาวิดเจ็ตวิดีโอ ลากวิดเจ็ตแล้ว วางลง ในตำแหน่งที่คุณต้องการเพิ่ม

หมายเหตุ : สำหรับบทช่วยสอนนี้ ฉันได้ นำเข้าเพจที่สร้างไว้ล่วงหน้าที่ ฉันกำลังแก้ไขเพื่อแสดงกระบวนการทั้งหมด คุณสามารถสร้างเว็บไซต์ WordPress ได้อย่างง่ายดายด้วยส่วน ElementsKit ที่สร้างไว้ล่วงหน้า

ขั้นตอนที่ 4: เลือกแหล่งที่มาของวิดีโอและเพิ่ม URL

ด้วยวิดเจ็ตวิดีโอ Elementor คุณสามารถแสดงวิดีโอจากแหล่งที่มาต่างๆ เช่น Youtube, Vimeo, DailyMotion และ Self Hosted

ขั้นแรก เลือกประเภทแหล่งที่มาที่คุณต้องการ จากนั้นระบุ URL ของวิดีโอ ฉันจะใช้ youtube สำหรับบทความนี้

หมายเหตุ : ในกรณีของโฮสต์เอง คุณสามารถอัปโหลดวิดีโอไปยังเซิร์ฟเวอร์ของคุณ หรือระบุ URL ภายนอก

คุณยังสามารถปรับแต่งสไตล์ของวิดีโอได้อีกด้วย โดยไปที่แท็บรูปแบบ ที่นี่คุณสามารถ เลือกอัตราส่วนกว้างยาวและตัวกรอง CSS คุณสามารถเลือกอัตราส่วนได้ 6 ประเภท เช่น 1:1, 3:2, 4:3, 16:9 เป็นต้น คลิกที่ไอคอนแก้ไขตัวกรอง CSS เพื่อปรับแต่งการเบลอ ความสว่าง คอนทราสต์ ความอิ่มตัว และเฉดสี

ขั้นตอนที่ 5: การตั้งค่าเพื่อทำให้วิดีโอ Elementor ติดหนึบ

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

เมื่อคุณเลือกประเภท Sticky เป็นอย่างอื่น คุณจะได้รับตัวเลือกต่อไปนี้:

• ปักหมุดจนถึง: ที่นี่คุณต้องตั้งค่า CSS ID ของส่วนที่คุณต้องการให้วิดีโอของคุณติดหนึบ คุณสามารถตั้งค่า CSS ID ที่กำหนดเองให้กับคอลัมน์ จากนั้นคัดลอกและวางในตัวเลือก Sticky until

• Sticky Offset: ในตัวเลือกนี้ ให้ตั้งค่าออฟเซ็ต ค่าออฟเซ็ตระบุระยะห่างระหว่างวิดีโอและตำแหน่งบนสุดของหน้าของคุณ

หมายเหตุ : ปักหมุดจนกว่าตัวเลือกจะไม่สามารถใช้ได้กับคอลัมน์ตัวเลือกแบบติดหนึบ เนื่องจากจะมองเห็นได้จนกว่าคอลัมน์หลักจะปรากฏบนหน้าจอเท่านั้น

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

ขั้นตอนที่ 6: อัปเดตเพื่อเพิ่มวิดีโอเหนียวใน Elementor และดูตัวอย่าง

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

หมายเหตุ: หากคุณต้องการ ปุ่มวิดีโอแบบติดหนึบที่ป๊อปอัปแสดงวิดีโอเมื่อคลิก คุณสามารถ ใช้วิดเจ็ต ElementsKit Video แทน วิดเจ็ต Elementor Video คุณสามารถทำตาม ขั้นตอนเดียวกับ ที่อธิบายไว้ข้างต้นเพื่อเพิ่มวิดีโอติดหนึบใน Elementor โดยใช้วิดเจ็ตวิดีโอ ElementsKit

นี่คือ ตัวอย่างวิดีโอ Sticky โดยใช้วิดเจ็ตวิดีโอ ElementsKit

คำพูดสุดท้าย

ยินดีด้วย! ตอนนี้คุณรู้วิธีเพิ่มวิดีโอที่ติดหนึบในไซต์ Elementor แล้ว มันง่ายกว่ามากที่จะทำมากกว่าตอนแรกใช่ไหม

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

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