วิธีสร้าง ET's Click Video Walkthrough ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลด Click Video Walkthrough Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

มาเริ่มสร้างใหม่กันเถอะ!

เพิ่มมาตราปกติใหม่

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

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและใช้การตั้งค่าการปรับขนาดต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ความกว้าง: 85vw (เดสก์ท็อป), 90% (แท็บเล็ตและโทรศัพท์)
• ความกว้างสูงสุด: 100%

คอลัมน์ 1 การตั้งค่า

เปิดการตั้งค่าคอลัมน์ 1 ถัดไป

ระยะห่าง

ไปที่การตั้งค่าระยะห่างและเพิ่มช่องว่างด้านบนบนเดสก์ท็อป

• ด้านบน: 5vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

CSS Class

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

• คลาส CSS: item-responsive-grid

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เพิ่มหัวข้อ

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

เลือกไอคอน

เลือกไอคอนถัดไป

การตั้งค่าไอคอนเริ่มต้น

ไปที่การออกแบบและเปลี่ยนการตั้งค่าไอคอนตามลำดับ:

• ไอคอนสี: #e8e9ea
• ตำแหน่งไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 2vw (เดสก์ท็อป), 4.5vw (แท็บเล็ต), 7vw (โทรศัพท์)

การตั้งค่าไอคอนโฮเวอร์

แก้ไขสีไอคอนเมื่อวางเมาส์ไว้

• ไอคอนสี: #b0c8ff

การตั้งค่าข้อความชื่อเรื่อง

ไปที่การตั้งค่าข้อความชื่อและทำการเปลี่ยนแปลงที่นั่นเช่นกัน

• แบบอักษรของชื่อเรื่อง: Lato
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• ขนาดข้อความชื่อเรื่อง: 0.8vw (เดสก์ท็อป), 1.7vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 2vw (เดสก์ท็อป), 4.5vw (แท็บเล็ต), 7vw (โทรศัพท์)

ระยะห่างเริ่มต้น

เรากำลังจะสร้างโมดูล Blurb โดยใช้ค่าการเติมที่กำหนดเองในขนาดหน้าจอต่างๆ

• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 0.5vw (เดสก์ท็อป), 1.5vw (แท็บเล็ตและโทรศัพท์)
• Padding ด้านซ้าย: 1.2vw (เดสก์ท็อปและแท็บเล็ต), 5vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 1.2vw (เดสก์ท็อปและแท็บเล็ต), 5vw (โทรศัพท์)

โฮเวอร์ระยะห่าง

สร้างเอฟเฟกต์โฮเวอร์ไฮไลท์โดยแก้ไขค่าระยะขอบของโฮเวอร์

• ระยะขอบซ้าย: -0.5vw
• ระยะขอบขวา: -0.5vw

ชายแดน

เพิ่มมุมโค้งมนเช่นกัน

ค่าเริ่มต้นกล่องเงา

พร้อมด้วยกล่องเงาที่ละเอียดอ่อน

• ตำแหน่งแนวตั้งเงาของกล่อง: 10px
• ความชัดเจนของเงากล่อง: 70px
• เงาสี: rgba(0,0,0,0.11)

เงากล่องเลื่อน

เปลี่ยนสีเงาของกล่องเมื่อโฮเวอร์

• เงาสี: rgba(103,151,255,0.22)

CSS ID & คลาส

สุดท้ายแต่ไม่ท้ายสุด ไปที่แท็บขั้นสูงของโมดูล Blurb และเพิ่ม CSS ID และคลาส

• CSS ID: วิดีโอแนะนำรายการ-1
• CSS Class: วิดีโอรายการเคอร์เซอร์

โคลนโมดูล Blurb สามครั้ง

เมื่อคุณสร้าง Blurb Module แรกเสร็จแล้ว คุณสามารถโคลนได้สามครั้ง

เปลี่ยนเนื้อหา

เปลี่ยนเนื้อหาของแต่ละโมดูล Blurb ที่ซ้ำกัน

เปลี่ยนรหัส CSS ของโมดูล Blurb ที่ซ้ำกันทั้งหมด

พร้อมกับรหัส CSS

• 1) สร้างภาพ: วิดีโอแนะนำรายการ-1
• 2) เอฟเฟกต์: วิดีโอแนะนำรายการ-2
• 3) ตัวแบ่งรูปร่าง: วิดีโอแนะนำรายการ-3
• 4) การแก้ไขเป็นกลุ่ม: วิดีโอแนะนำรายการ-4

ใช้คอลัมน์ 1

ลบคอลัมน์ 3

เมื่อคุณทำคอลัมน์แรกเสร็จแล้ว คุณสามารถเปิดการตั้งค่าแถวและลบคอลัมน์ที่สามได้

โคลนคอลัมน์ 1 & วางที่ด้านล่าง

โคลนคอลัมน์แรก (ที่มีโมดูล Blurb) และวางคอลัมน์ที่ซ้ำกันที่ด้านล่าง

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

เปลี่ยนโครงสร้างคอลัมน์กลับเป็นโครงสร้างที่เลือกไว้ตอนต้นของบทช่วยสอนนี้

เปลี่ยนเนื้อหาคอลัมน์ 3 Blurb ทั้งหมด

เปลี่ยนชื่อโมดูล Blurb ของแต่ละรายการที่ซ้ำกันในคอลัมน์ 3

เปลี่ยนรหัส CSS ของโมดูลประกาศ 3 คอลัมน์ทั้งหมด

พร้อมกับรหัส CSS

• 5) ไลบรารีเลย์เอาต์: วิดีโอแนะนำรายการ-5
• 6) การแปลง: วิดีโอแนะนำรายการ-6
• 7) Hover States: วิดีโอแนะนำรายการ-7
• 8) ค้นหาและแทนที่: วิดีโอแนะนำรายการ-8

เพิ่มโมดูลข้อความในคอลัมน์ 2

เว้นช่องเนื้อหาว่างไว้

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

พื้นหลังวิดีโอ

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

• หยุดวิดีโอชั่วคราวในขณะที่ไม่อยู่ในมุมมอง: ใช่

ขนาด

ไปที่แท็บการออกแบบและเพิ่ม '100%' ให้กับความกว้าง

• ความกว้าง: 100%

ระยะห่าง

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

• ด้านบน: 15vw (เดสก์ท็อป), 24vw (แท็บเล็ต), 26vw (โทรศัพท์)
• ช่วงล่าง: 15vw (เดสก์ท็อป), 24vw (แท็บเล็ต), 26vw (โทรศัพท์)

ชายแดน

ดำเนินการต่อโดยเพิ่ม '10px' ในแต่ละมุม

กล่องเงา

พร้อมด้วยกล่องเงาที่ละเอียดอ่อน

• ความแรงของกล่องเงาเบลอ: 30px
• ความแรงของการกระจายเงาของกล่อง: -5px
• เงาสี: rgba(0,0,0,0.11)

CSS ID

สุดท้ายแต่ไม่ท้ายสุด เพิ่ม CSS ID

• CSS ID: วิดีโอแนะนำ-1

โมดูลข้อความโคลน 7 ครั้ง

เมื่อคุณสร้าง Text Module เสร็จแล้ว คุณสามารถโคลนได้เจ็ดครั้ง (หนึ่งครั้งสำหรับแต่ละโมดูล Blurb)

เปลี่ยนพื้นหลังวิดีโอโมดูลข้อความที่ซ้ำกันทั้งหมด

อัปโหลดพื้นหลังวิดีโอที่แตกต่างกันสำหรับแต่ละรายการที่ซ้ำกัน

เปลี่ยนรหัส CSS ของโมดูลข้อความที่ซ้ำทั้งหมด & เพิ่มคลาส CSS เป็นโมดูลข้อความที่ซ้ำกันทั้งหมด

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

• โมดูลข้อความ 1: วิดีโอแนะนำ-1
• โมดูลข้อความ 2: วิดีโอแนะนำ-2
• โมดูลข้อความ 3: วิดีโอแนะนำ-3
• โมดูลข้อความ 4: วิดีโอแนะนำ-4
• โมดูลข้อความ 5: วิดีโอแนะนำ -5
• โมดูลข้อความ 6: วิดีโอแนะนำ-6
• โมดูลข้อความ 7: คำแนะนำวิดีโอ-7
• โมดูลข้อความ 8: คำแนะนำแบบวิดีโอ-8
• CSS Class: วิดีโอไม่ใช่อันดับแรก

เพิ่มโค้ดโมดูล #1 ให้กับคอลัมน์ 1

เมื่อคุณทำแถวที่สองเสร็จแล้ว ก็ถึงเวลาเริ่มเพิ่มรหัส เพื่อให้ฟังก์ชันการคลิกทำงาน เราจะใช้โค้ด CSS และ JQuery เราจะวางโค้ดในโมดูลโค้ดแยกกันสองโมดูล เริ่มต้นด้วยการเพิ่ม Code Module แรกในคอลัมน์ 1

ใส่โค้ด CSS ของหน้า

เพิ่มบรรทัดต่อไปนี้ของโค้ด CSS:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

เพิ่มโค้ดโมดูล #2 ไปยังคอลัมน์ 3

ดำเนินการต่อโดยเพิ่ม Code Module อื่นในคอลัมน์ที่สาม

แทรกฟังก์ชันคลิก JQuery Code

ป้อนบรรทัดต่อไปนี้ของรหัส JQuery:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

เมื่อคุณผ่านขั้นตอนนี้แล้ว คุณสามารถบันทึกเพจของคุณและออกจาก Visual Builder ได้!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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