วิธีแสดง/ซ่อนตัวเลื่อนวิดีโอตามสถานะการเข้าสู่ระบบด้วย Divi

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

มาดำน้ำกันเถอะ!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้ สังเกตว่าตัวเลื่อนวิดีโอถูกซ่อนจากผู้ใช้อย่างไร จนกว่าพวกเขาจะเข้าสู่ระบบโดยใช้แบบฟอร์มการเข้าสู่ระบบ

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปที่บทช่วยสอนกันเถอะ

การแสดง/ซ่อนตัวเลื่อนวิดีโอตามสถานะการเข้าสู่ระบบด้วย Divi

สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า

เริ่มต้นบทช่วยสอนของเราโดยสร้างหน้าใหม่และเรียกใช้ด้วยเลย์เอาต์ที่สร้างไว้ล่วงหน้าอันใดอันหนึ่งของเรา

นี่คือวิธีการ:

1. สร้างหน้าใหม่และตั้งชื่อ
2. คลิกเพื่อใช้ Divi Builder (ที่ส่วนหน้า)
3. เลือกใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้า
4. ค้นหาและเลือกเค้าโครงหน้าสูตรอาหารนักโภชนาการ
5. ในการโหลดเลย์เอาต์ไปที่เพจ เพียงแค่คลิกปุ่ม “ใช้เลย์เอาต์นี้”

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

การเพิ่มตัวเลื่อนวิดีโอไปที่เพจ

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

จากนั้นเพิ่มโมดูลตัวเลื่อนวิดีโอใหม่แทน

การเพิ่มวิดีโอลงใน Slider

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

ถัดไป ให้ลบวิดีโอเริ่มต้นแล้วคลิกไอคอน เพิ่มวิดีโอ เพื่อเพิ่มวิดีโอใหม่ลงในแถบเลื่อน

สำหรับตัวอย่างนี้ ฉันกำลังเพิ่มวิดีโอที่โฮสต์เอง เป็นความคิดที่ดีเสมอที่จะอัปโหลดไฟล์วิดีโอเวอร์ชัน MP4 และ Webm

ต่อไป เราสามารถเพิ่มภาพซ้อนทับลงในวิดีโอได้

เมื่อเสร็จแล้ว บันทึกการเปลี่ยนแปลง

หากต้องการสร้างวิดีโอเพิ่มเติม ให้กลับไปที่การตั้งค่าตัวเลื่อนวิดีโอและทำซ้ำวิดีโอที่มีอยู่ 3 ครั้งเพื่อรับวิดีโอทั้งหมด 4 รายการ จากนั้น ภายใต้ตัวเลือกโอเวอร์เลย์ ให้สลับ YES เพื่อแสดงภาพซ้อนทับบนวิดีโอหลัก

การเพิ่มตัวเลือกการแสดงผลแบบมีเงื่อนไข

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

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

เคล็ดลับโบนัส: สร้าง CTA หรือแบบฟอร์มการเข้าสู่ระบบสำหรับผู้ใช้ที่ไม่ได้เข้าสู่ระบบ

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

จากนั้นเปิดการตั้งค่าแถวและเพิ่มเงื่อนไขการแสดงผลตามสถานะการเข้าสู่ระบบ เฉพาะครั้งนี้ เลือกให้แสดงเฉพาะเมื่อ ผู้ใช้ออกจากระบบ ซึ่งจะแสดงเนื้อหาให้ผู้ใช้เห็นก็ต่อเมื่อออกจากระบบแล้ว

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

หากต้องการเรียนรู้วิธีสร้างส่วน CTA สำหรับผู้ใช้ที่ออกจากระบบตั้งแต่เริ่มต้น โปรดดูโพสต์ของเราเกี่ยวกับวิธีสร้างโพสต์บล็อกเฉพาะสำหรับสมาชิกด้วยตัวเลือกเงื่อนไขของ Divi

ผลลัพธ์สุดท้าย

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

ปัญหาเกี่ยวกับวิดีโอ YouTube/การฝังโดยใช้ภาพซ้อนทับบนวิดีโอหลัก

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

นี่ไม่ใช่กรณีสำหรับวิดีโอที่โฮสต์เองในรูปแบบไฟล์ mp4 หรือ webm คุณสามารถแสดงภาพซ้อนทับบนวิดีโอหลักสำหรับวิดีโอที่โฮสต์เองได้ ดังนั้น หากคุณต้องการใช้ภาพซ้อนทับและไอคอนเล่นของ Divi กับ Divi Video Module คุณควรเพิ่มไฟล์/URL ของวิดีโอ MP4 และ Webm แทน

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

ความคิดสุดท้าย

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

สำหรับข้อมูลเพิ่มเติม โปรดดูโพสต์ที่คล้ายกันเกี่ยวกับวิธีสร้างบล็อกโพสต์สำหรับสมาชิกโดยเฉพาะด้วยตัวเลือกเงื่อนไขของ Divi

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!