วิธีทริกเกอร์การเปลี่ยนภาพด้วยตัวเลือก Sticky ของ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. ขั้นตอนทั่วไป

เพิ่มมาตรา #1

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

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

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

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

ขนาด

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

• ความกว้างสูงสุด: 1480px
• การจัดแนวแถว: กึ่งกลาง

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ดัชนี Z

และตั้งค่าดัชนี az ในการตั้งค่าตำแหน่ง วิธีนี้จะช่วยให้เรามั่นใจว่าแถวจะอยู่ใต้แถวถัดไปที่เราเพิ่มในภายหลังในบทช่วยสอน

• ดัชนี Z: 1

คอลัมน์ล้น

ถัดไป เปิดการตั้งค่าคอลัมน์และตั้งค่าโอเวอร์โฟลว์เป็นซ่อน

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มโมดูลรูปภาพลงในคอลัมน์

ปล่อยให้กล่องรูปภาพว่าง

โมดูลเดียวที่เราต้องการในแถวนี้คือโมดูลรูปภาพ ปล่อยให้กล่องรูปภาพว่างเปล่า

ภาพพื้นหลัง

และใช้ภาพพื้นหลังที่คุณเลือกแทน

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center

ระยะห่าง

เพื่อให้รูปภาพปรากฏขึ้น เราจะใช้ค่าช่องว่างภายในที่กำหนดเองในขนาดหน้าจอต่างๆ

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 300px
  • แท็บเล็ตและโทรศัพท์: 150px
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 300px
  • แท็บเล็ตและโทรศัพท์: 150px

เพิ่มส่วน #2

ระยะห่าง

เพิ่มส่วนอื่นด้านล่างส่วนก่อนหน้า เปิดการตั้งค่าส่วนและลบช่องว่างด้านบนเริ่มต้นในการตั้งค่าระยะห่าง

• ช่องว่างภายในด้านบน: 0px

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

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

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

ดัชนี Z

เพิ่มดัชนี az สำหรับแถวนี้ด้วย

• ดัชนี Z: 2

เพิ่มโมดูลการเรียกร้องให้ดำเนินการในคอลัมน์

เพิ่มเนื้อหา

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

เพิ่มปุ่มลิงค์

พร้อมกับปุ่มลิงค์

สีพื้นหลัง

จากนั้นเพิ่มสีพื้นหลังสีขาว

• สีพื้นหลัง: #ffffff

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

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

• การจัดตำแหน่งข้อความ: ซ้าย
• สีข้อความ: Dark

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

จัดรูปแบบข้อความชื่อเรื่องด้วย

• แบบอักษรของชื่อเรื่อง: Playfair Display
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวเอียง
• ขนาดข้อความชื่อเรื่อง
  • เดสก์ท็อป: 45px
  • แท็บเล็ต: 40px
  • โทรศัพท์: 35px
• ระยะห่างของตัวอักษรชื่อเรื่อง: 1px

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

เช่นเดียวกับข้อความเนื้อหา

• แบบอักษรของร่างกาย: Karla
• ความสูงของเส้นร่างกาย: 2em

การตั้งค่าปุ่ม

จากนั้นจัดรูปแบบปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 18px
• สีข้อความของปุ่ม: #000000
• ไล่ระดับสี 1: #ffffff
• ไล่ระดับสี 2: #ffdc91
• ประเภทการไล่ระดับสี: เชิงเส้น
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: Karla
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่
• แสดงปุ่ม: ใช่

• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่
• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• ช่องว่างภายในด้านซ้าย: 15%
• ช่องว่างภายในด้านขวา: 15%

ขนาด

เรากำลังแก้ไขการตั้งค่าการปรับขนาดตามขนาดหน้าจอต่างๆ ด้วย

• ความกว้าง:
  • เดสก์ท็อป: 65%
  • แท็บเล็ต: 80%
  • โทรศัพท์: 100%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

ต่อไป เราจะเพิ่มค่าระยะขอบและช่องว่างภายในแบบกำหนดเองลงในการตั้งค่าการเว้นวรรค

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: -150px
  • แท็บเล็ต: -50px
  • โทรศัพท์: 0px
• ขอบล่าง: 50px
• ช่องว่างภายในด้านบน: 150px
• ช่องว่างภายในด้านล่าง: 150px

กล่องเงา

และเราจะทำการตั้งค่าโมดูลให้สมบูรณ์โดยการเพิ่มเงาของกล่อง

• ความแรงของกล่อง Shadwo Blur: 30px
• เงาสี: rgba(0,0,0,0.11)

2. ใช้ Sticky Effect กับ Row

เปิดแถวในส่วน #1

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

ใช้ Sticky Effect

สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าได้ตั้งค่าขีด จำกัด ปักหมุดด้านล่างเป็นส่วน จุดเริ่มต้นและจุดสิ้นสุดของแถวของเรานั้นเหมือนกับของส่วนนั้น ซึ่งทำให้แน่ใจว่าแถวนั้นไม่กลายเป็นการติดหนึบจริง ๆ แต่มีการนำสไตล์ที่ติดหนึบมาใช้ Sticky top offset เป็นตัวกำหนดว่าการเปลี่ยนแปลงจะเริ่มขึ้นที่จุดใด ตัวอย่างเช่น หากค่านี้เป็นศูนย์ แสดงว่าด้านบนของเบราว์เซอร์จะต้องแตะด้านบนของแถวเพื่อเริ่มการเปลี่ยนแปลง ด้วยการตั้งค่าออฟเซ็ตบนสุดเหนียวเป็น “300px” เราสร้างการเปลี่ยนแปลงนั้นก่อนหน้านี้

• ตำแหน่งติดหนึบ: Stick to Top
• ออฟเซ็ตติดหนึบ: 300px
• ขีด จำกัด ติดหนึบด้านล่าง: Section
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

ตรวจสอบให้แน่ใจว่ามีออฟเซ็ตด้านบนเท่ากันเหนือส่วนแรก

เนื่องจากเราได้ตั้งค่าออฟเซ็ตบนสุดเหนียวเป็น “300px” เราจึงต้องการพื้นที่ที่ด้านบนของหน้าเพื่อให้สิ่งนั้นเกิดขึ้น หากคุณกำลังใช้การออกแบบนี้อยู่ตรงกลางหน้า คุณไม่จำเป็นต้องกังวลเกี่ยวกับขั้นตอนนี้ อย่างไรก็ตาม หากคุณใช้วิธีนี้ที่ด้านบนสุดของหน้า คุณจะต้องแก้ไข Sticky Top Offset หรือเพิ่มพื้นที่ว่างด้านบนให้เพียงพอ เราจะเพิ่มระยะขอบบนบางส่วนในส่วนแรกของเราเพื่อสร้างพื้นที่นั้น

• ขอบบน: 400px

3. ใช้ Ken Burn Effect กับ Image Module

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

ตัวอย่าง #1

การตั้งค่า Sticky Row

กล่องเงา

ในการสร้างตัวอย่าง # 1 ขึ้นใหม่ ซึ่งคุณสามารถดูได้ในตัวอย่างของโพสต์นี้ ให้เปิดการตั้งค่าแถวและใช้การตั้งค่าเงาของกล่องต่อไปนี้:

• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของการกระจายเงาของกล่อง: 0px
• เงาสี: rgba(0,0,0,0)

• ตำแหน่งแนวตั้งเหนียว: 100px
• สีเงาเหนียว: #ffdc91

การเปลี่ยนแปลง

รวมการเปลี่ยนแปลงที่ราบรื่นในแท็บขั้นสูงด้วย

• ระยะเวลาการเปลี่ยนภาพ: 500ms
• เส้นโค้งความเร็วในการเปลี่ยน: Ease

การตั้งค่าโมดูลภาพติดหนึบ

แปลงมาตราส่วน

ถัดไป เปิด Image Module และใช้เอฟเฟกต์มาตราส่วนการแปลงในสถานะติดหนึบ

• ทั้งสอง: 100%

• เหนียวทั้งคู่: 130%

การเปลี่ยนแปลง

ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงราบรื่นโดยการปรับเปลี่ยนการตั้งค่าการเปลี่ยนของโมดูลตามลำดับ:

• ระยะเวลาการเปลี่ยนภาพ: 1200ms
• เส้นโค้งความเร็วในการเปลี่ยน: Ease

ตัวอย่าง #2

การตั้งค่า Sticky Row

แปลงแปล

สู่ตัวอย่างที่สอง! เปิดการตั้งค่าแถวและใช้การตั้งค่าการแปลการแปลงต่อไปนี้:

• ขวา: 20%

• ปักหมุดขวา: 0%

การเปลี่ยนแปลง

แก้ไขการตั้งค่าการเปลี่ยนของแถวด้วย

• ระยะเวลาการเปลี่ยนภาพ: 500ms
• เส้นโค้งความเร็วในการเปลี่ยน: Ease

การตั้งค่าโมดูลภาพติดหนึบ

ตัวกรอง

จากนั้นเปิด Image Module และลองเล่นกับฟิลเตอร์ในสถานะเริ่มต้นและติดหนึบ

• ความอิ่มตัว: 0%
• ความสว่าง: 50%

• ความอิ่มตัวของเหนียว: 100%
• ความสว่างเหนียว: 100%

การเปลี่ยนแปลง

ตั้งค่าโมดูลและบทช่วยสอนนี้ให้สมบูรณ์โดยเปลี่ยนการตั้งค่าการเปลี่ยนดังนี้:

• ระยะเวลาการเปลี่ยนภาพ: 500ms
• เส้นโค้งความเร็วในการเปลี่ยน: Ease

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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