วิธีสร้างวิดีโอโปรโมตที่ติดหนึบด้วยการแสดง/ซ่อนการสลับใน Divi

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

นี่เป็นวิดีโอที่ติดหนึบโดยไม่ต้องสลับ

นี่คือวิดีโอที่ติดหนึบเดียวกันกับปุ่มสลับ

มาดูฟังก์ชันสลับกันอย่างละเอียดยิ่งขึ้น

และนี่คือสิ่งที่ดูเหมือนบนมือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

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

วิธีสร้างวิดีโอโปรโมตที่ติดหนึบด้วยการแสดง/ซ่อนการสลับสำหรับหน้าการขายของคุณ

การเพิ่มแถวสำหรับวิดีโอติดหนึบ

ในการเริ่มต้น เราจะลบโมดูลข้อความที่สองในแถวของส่วนแรก/บนสุดของเค้าโครง

ใต้แถวที่มีอยู่ของส่วนบนสุด ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่

เปิดการตั้งค่าแถวสำหรับแถวใหม่และภายใต้แท็บขั้นสูง ให้อัปเดตดัชนี Z ดังนี้:

• ดัชนี Z: 14

เพื่อให้แน่ใจว่าวิดีโอที่เราเพิ่มในแถวจะอยู่เหนือเนื้อหาอื่นๆ บนหน้าเมื่อค้างระหว่างการเลื่อนหน้า

การเพิ่มวิดีโอ

ภายในคอลัมน์ของแถว เพิ่มโมดูลวิดีโอใหม่

เปิดการตั้งค่าวิดีโอและอัปโหลดรูปแบบ mp4 และ webm สำหรับวิดีโอที่คุณเลือก

หากต้องการ ให้เพิ่มภาพซ้อนทับลงในวิดีโอ

ภายใต้แท็บ ออกแบบ ให้อัปเดตตัวเลือกการปรับขนาดต่อไปนี้:

• ความกว้างสูงสุด: 900px
• การจัดตำแหน่งโมดูล: ศูนย์

• มุมโค้งมน: 8px
• กล่องเงา: ดูภาพหน้าจอ

ทำให้คอลัมน์เหนียว

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

• CSS Class: et-sticky-video

จากนั้นอัปเดตตำแหน่งสติ๊กดังนี้:

• ตำแหน่งติดหนึบ: Stick to Top
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: NO

เมื่อตำแหน่ง Sticky มีผลแล้ว ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ไปยังองค์ประกอบหลักสำหรับสถานะ Sticky:

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

อัปเดตขนาดไอคอนการเล่นวิดีโอในสถานะติดหนึบ

ถัดไป เปิดการตั้งค่าวิดีโออีกครั้ง และอัปเดตขนาดแบบอักษรของไอคอนเล่นในสถานะติดหนึบดังนี้:

• ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
• ขนาดตัวอักษรของไอคอนเล่น (เหนียว): 50px

ผลลัพธ์จนถึงตอนนี้

การสร้างปุ่มสลับวิดีโอติดหนึบ

ในการสร้างปุ่มสลับวิดีโอแบบติดหนึบ ให้สร้างโมดูลปุ่มใหม่ภายใต้โมดูลวิดีโอ

จากนั้นย้ายปุ่มด้านบนโมดูลวิดีโอ

เปิดการตั้งค่าปุ่มและอัปเดตข้อความของปุ่มดังนี้:

• ข้อความปุ่ม: ซ่อน

(หมายเหตุ: ข้อความนี้จะถูกแทนที่/สลับด้วยคำว่า "แสดง" เมื่อคลิกปุ่มเมื่อเราเพิ่มโค้ดของเราในภายหลัง)

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• รูปแบบข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #fa50a9
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• ไอคอนปุ่ม: ลูกศรขวา
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO

(หมายเหตุ: ไอคอนปุ่มที่คุณเลือกจะหมุนได้ 180 องศาเมื่อคลิกปุ่ม เมื่อเราเพิ่มเลย์เอาต์โค้ดเพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น

อัปเดตระยะห่างสำหรับปุ่มด้วย:

• ช่องว่างภายใน: 0.5em บน, 0.5em ล่าง, 1em ซ้าย, 1.7em right

ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้ให้กับปุ่ม:

• CSS คลาส: et-sticky-video-toggle

ใต้แท็บขั้นสูง ให้อัปเดตตัวเลือกตำแหน่ง:

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างซ้าย

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

• แปลงแกน X แปล (เหนียว): -100%

หากต้องการปิดการออกแบบปุ่มสลับ เราต้องซ่อนปุ่มจนกว่าจะถึงสถานะติดหนึบ ในการดำเนินการนี้ ให้อัปเดต CSS ที่กำหนดเองเป็นองค์ประกอบหลักสำหรับเดสก์ท็อปและสถานะติดหนึบดังนี้:

สำหรับองค์ประกอบหลักบนเดสก์ท็อป...

display:none !important;

สำหรับองค์ประกอบหลักบน Sticky...

display:block !important;

การเพิ่มรหัสที่กำหนดเองสำหรับฟังก์ชันการสลับ

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

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

ในแท็บเนื้อหา ให้วาง CSS ที่กำหนดเองต่อไปนี้เพื่อให้แน่ใจว่าได้รวมไว้ในแท็ก ลักษณะ

.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}

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

จากนั้นภายใต้ CSS ที่มีแท็กสไตล์ ให้เพิ่ม JQuery ต่อไปนี้ในแท็ก สคริปต์

(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');

$stickyVideoToggle.on('click',function(e) {
e.preventDefault();

$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');

$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);

แค่นั้นแหละ!

ผลสุดท้าย

ตอนนี้ดูหน้าเวอร์ชันสดเพื่อดูผลลัพธ์ด้วยตัวคุณเอง

นี่เป็นวิดีโอที่ติดหนึบโดยไม่ต้องสลับ

นี่คือวิดีโอเหนียวเดียวกันกับปุ่มสลับ

มาดูฟังก์ชันสลับกันอย่างละเอียดยิ่งขึ้น

และนี่คือสิ่งที่ดูเหมือนบนมือถือ

เพิ่มโมดูลเพิ่มเติมในคอลัมน์ Sticky ได้อย่างง่ายดายเพื่อชมเชยวิดีโอ

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

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

จากนั้นจะอยู่ใต้วิดีโอในสถานะติดหนึบของคอลัมน์

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

การใช้ตำแหน่งที่ติดหนึบกับคอลัมน์ (ไม่ใช่วิดีโอ) ยังมีประโยชน์สำหรับการเพิ่มการฝังวิดีโอที่กำหนดเองหรือ HTML (โดยใช้โมดูลข้อความหรือโค้ด) ภายในคอลัมน์ ฟังก์ชันวิดีโอแบบติดหนึบจะยังคงใช้งานได้

ตัวอย่างเช่น คุณสามารถเพิ่มวิดีโอ HTML5 ลงในโมดูลโค้ดภายในคอลัมน์เดียวกันได้

เปลี่ยนโครงสร้างคอลัมน์ได้อย่างง่ายดายด้วย!

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

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

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

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

หากคุณกำลังใช้ URL ของ YouTube เพื่อฝังวิดีโอด้วยโมดูลวิดีโอเช่นเดียวกับการออกแบบนี้ ทางที่ดีที่สุดคืออย่าใช้ตัวเลือกภาพซ้อนทับในตัวของ Divi (พร้อมไอคอนเล่น) ซึ่งจะทำให้เสียงวิดีโอเล่นอัตโนมัติตั้งแต่เริ่มต้นในสถานะติดหนึบ ทำให้เกิดเสียงที่ซ้ำกันที่เล่นในช่วงเวลาต่างๆ ดังนั้น หากคุณต้องการใช้ภาพซ้อนทับและไอคอนเล่นของ Divi กับ Divi Video Module คุณควรเพิ่มไฟล์/URL ของวิดีโอ mp4 และ WebM แทน

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

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

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

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

ไชโย!