วิธีเปลี่ยนสไตล์บน Scroll โดยไม่ต้องเคลื่อนไหวโดยใช้ตัวเลือก Sticky ของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. สร้างโครงสร้างองค์ประกอบ

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

ทัศนวิสัย

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

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

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 2580px

ระยะห่าง

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

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

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

ระยะห่าง

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

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

ดัชนี Z

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

• ดัชนี Z: 11

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

สีพื้นหลัง

ต่อไป เราจะเพิ่มสีพื้นหลังให้กับคอลัมน์ 2

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

ระยะห่าง

เราจะใช้ค่าการเติมที่กำหนดเองในขนาดหน้าจอต่างๆ ด้วย

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

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

ระยะห่าง

สุดท้ายแต่ไม่ท้ายสุด เราจะเพิ่มค่าการเติมที่กำหนดเองลงในคอลัมน์ 3 ด้วย

• แผ่นรองด้านบน:
  • เดสก์ท็อป: 200px
  • แท็บเล็ต: 100px
  • โทรศัพท์: 50px
• แผ่นรองด้านล่าง:
  • เดสก์ท็อป: 200px
  • แท็บเล็ต: 100px
  • โทรศัพท์: 50px
• ช่องว่างภายในด้านซ้าย: 8%
• ช่องว่างภายในด้านขวา: 8%

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

เพิ่มสำเนา

ถึงเวลาเพิ่มโมดูล เริ่มต้นด้วยโมดูลข้อความในคอลัมน์ 1 เพิ่มตัวเลขลงในกล่องเนื้อหา

สีพื้นหลัง

เปลี่ยนสีพื้นหลังต่อไป

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

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 100px
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

แก้ไขความกว้างต่อไป

• ความกว้าง: 150px

ระยะห่าง

จากนั้นเพิ่มช่องว่างภายในด้านบนและด้านล่างที่กำหนดเอง

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

ตำแหน่ง

เปลี่ยนตำแหน่งโมดูลเช่นกัน

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างขวา
• ออฟเซ็ตแนวนอน: -5%

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

เพิ่มสำเนา H3 & H4

ไปที่คอลัมน์ที่สอง ที่นั่น เราจะเพิ่มโมดูลข้อความพร้อมสำเนา H3 และ H4

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

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

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

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

จากนั้น แก้ไขการตั้งค่าข้อความ H3

• แบบอักษรของหัวเรื่อง 3: Playfair Display
• การจัดแนวข้อความหัวเรื่อง 3: Center
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป: 90px
  • แท็บเล็ต: 70px
  • โทรศัพท์: 60px

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

จัดรูปแบบข้อความ H4 ด้วย

• หัวข้อ 4 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 4 น้ำหนักแบบอักษร: เบา

ขนาด

จากนั้นไปที่การตั้งค่าการปรับขนาดและใช้ความกว้าง "100%" ซึ่งจะช่วยในขั้นตอนต่อไป ซึ่งก็คือการปรับตำแหน่งโมดูล

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

ตำแหน่ง

ตั้งค่าโมดูลให้สมบูรณ์โดยไปที่แท็บขั้นสูงและแก้ไขการตั้งค่าตำแหน่งดังนี้:

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างซ้าย
• ออฟเซ็ตแนวตั้ง: 20px

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

เพิ่มเนื้อหา H5 และย่อหน้า

ไปที่คอลัมน์ที่สาม เพิ่มโมดูลข้อความที่มีเนื้อหา H5 และย่อหน้าที่คุณเลือก

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต

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

จัดรูปแบบข้อความ H5 ด้วย

• หัวข้อ 5 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อที่ 5 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 5 ขนาดข้อความ:
  • เดสก์ท็อปและแท็บเล็ต: 23px
  • โทรศัพท์: 18px

2. การเปลี่ยนแปลงที่สำคัญในการสร้างเอฟเฟกต์

ส่วน

ลบส่วนเสริม

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

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

แถว

Turn Row Sticky

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

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

สีพื้นหลัง Sticky Row

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

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

การเปลี่ยนแถว

เพื่อให้แน่ใจว่าการเปลี่ยนแปลงจะราบรื่น เราจะเพิ่มระยะเวลาการเปลี่ยนในแท็บขั้นสูงของแถว

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

คอลัมน์ปักหมุด 2 สีพื้นหลัง

จากนั้น เราจะเปลี่ยนสีพื้นหลังของคอลัมน์เหนียว 2

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

โมดูลข้อความในคอลัมน์ 1

สีพื้นหลังเหนียว

เราจะเปลี่ยนสีพื้นหลังของโมดูลข้อความในคอลัมน์ 1 ด้วย

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

สีข้อความเหนียว

พร้อมกับสีข้อความเหนียว

• สีข้อความ: #0a0a0a

ขนาดเหนียว

และเราจะเพิ่มความกว้างของโมดูลในการตั้งค่าการปรับขนาด

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

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

เรากำลังดำเนินการเปลี่ยนแปลงอย่างราบรื่นโดยการแก้ไขระยะเวลาการเปลี่ยนผ่านของโมดูลในแท็บขั้นสูง

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

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

สีข้อความเหนียว

ต่อไป เรามี Text Module ในคอลัมน์ 2 เราจะเปลี่ยนสีข้อความให้สว่างในสถานะติดหนึบ

• สีข้อความ: เบา

โมดูลข้อความในคอลัมน์ 3

สีข้อความเหนียว

เช่นเดียวกับโมดูลข้อความในคอลัมน์ 3

• สีข้อความ: เบา

3. ส่วนโคลนสำหรับใช้ซ้ำ

ตอนนี้เราได้ทำส่วนแรกเสร็จสิ้นแล้ว รวมถึงเอฟเฟกต์การเปลี่ยนสไตล์ที่ติดหนึบ เราสามารถนำส่วนนี้กลับมาใช้ใหม่ได้มากเท่าที่เราต้องการโดยการโคลน

เปลี่ยนสำเนาทั้งหมด

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

เพิ่มขอบบนบางส่วนในส่วนแรก & ขอบล่างที่ส่วนสุดท้าย

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

• ขอบบน: 200px

• ขอบล่าง: 200px

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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