วิธีสร้างรายการโต้ตอบบน Scroll ด้วยตัวเลือก Sticky ของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

สีพื้นหลัง

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

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

เพิ่มแถว

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

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

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

คอลัมน์ 1 สีพื้นหลัง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และเพิ่มสีพื้นหลัง

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

ระยะห่างคอลัมน์ 1

แก้ไขการตั้งค่าระยะห่างของคอลัมน์ถัดไป

• แผ่นรองด้านบน:
  • แท็บเล็ต: 20px
  • โทรศัพท์: 20px
• แผ่นรองด้านล่าง:
  • แท็บเล็ต: 20px
  • โทรศัพท์: 20px
• ช่องว่างภายในด้านซ้าย: 3%
• ช่องว่างภายในด้านขวา: 3%

คอลัมน์ 1 ดัชนี Z

และเพิ่มดัชนี z ของคอลัมน์ในแท็บขั้นสูง

• ดัชนี Z: 12

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

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

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกในคอลัมน์ 1 เพิ่มเนื้อหาที่คุณเลือก

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

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

• แบบอักษรข้อความ: Playfair Display
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: ตัวเอียง
• สีข้อความ: #bfbfbf
• ขนาดข้อความ:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 5vw
  • โทรศัพท์: 8vw
• ความสูงของบรรทัดข้อความ: 1em

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

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

เพิ่มโมดูลข้อความอื่นลงในคอลัมน์ด้วยเนื้อหา H3 ที่คุณเลือก

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

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

• แบบอักษรของหัวเรื่อง 3: Playfair Display
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 สีข้อความ: #000000
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป: 3vw
  • แท็บเล็ต: 10vw
  • โทรศัพท์: 12vw

ระยะห่าง

เพิ่มระยะขอบด้านบนและด้านล่างที่กำหนดเองต่อไป

• อัตรากำไรขั้นต้น: 2vh
• ขอบล่าง: 2vh

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

จากนั้น ใช้การตั้งค่ามาตราส่วนการแปลงแบบกำหนดเอง

• ทั้งคู่: 300%

แปลงแปล

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

• ด้านล่าง: 30%

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ทัศนวิสัย

โมดูลสุดท้ายที่เราต้องการในคอลัมน์ 1 คือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าเปิดใช้งานตัวเลือก "แสดงตัวแบ่ง"

• แสดงตัวแบ่ง: ใช่

เส้น

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

• สีของเส้น: #000000
• สไตล์เส้น: Solid
• ตำแหน่งสาย: Top

ขนาด

แก้ไขการตั้งค่าขนาดของโมดูลด้วย

• น้ำหนักตัวแบ่ง: 4px
• ความสูงของตัวแบ่ง: 4px

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

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

ในคอลัมน์ 2 โมดูลแรกที่เราจะเพิ่มคือโมดูลรูปภาพ ปล่อยให้กล่องรูปภาพว่างเปล่า

ภาพพื้นหลัง

ใช้ภาพพื้นหลังแทน

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

ระยะห่าง

และเพื่อให้แสดงภาพพื้นหลังได้ เราจะแก้ไขการตั้งค่าการเว้นวรรคดังนี้:

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: 15vh
  • แท็บเล็ตและโทรศัพท์: 0vh
• ช่องว่างภายในด้านบน: 33vh
• แผ่นรองด้านล่าง: 33vh

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

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

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

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

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

• แบบอักษรของข้อความ: ห้องโดยสาร
• สีข้อความ: #000000
• ขนาดข้อความ:
  • เดสก์ท็อป: 1.2vw
  • แท็บเล็ต: 2.3vw
  • โทรศัพท์: 3.4vw
• ความสูงของบรรทัดข้อความ: 1.6em

ระยะห่าง

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

• ช่องว่างภายในด้านซ้าย:
  • แท็บเล็ตและโทรศัพท์: 5%
• ช่องว่างภายในด้านขวา: 5%

ใช้เอฟเฟกต์ติดหนึบ

เปิดคอลัมน์ #1 Sticky

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

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

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

ส่วนสูง

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

• ส่วนสูง: 0px
• ความสูงติดหนึบ: อัตโนมัติ

ความทึบ

เรากำลังแก้ไขความทึบด้วย

• ความทึบ: 0%
• ความทึบเหนียว: 100%

โมดูลข้อความ #2 ในคอลัมน์ #1: Sticky Settings

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

ต่อไป เราจะเปิดโมดูลข้อความที่สองในคอลัมน์ 1 นำค่ามาตราส่วนการแปลงกลับเป็น "100%" ในสถานะติดหนึบ

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

แปลงแปล

เปลี่ยนการตั้งค่าการแปลการแปลงแบบติดหนึบด้วย

• เหนียวด้านล่าง: 0%

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

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

• การเปลี่ยนแปลง: 1000ms

โมดูลตัวแบ่ง: การตั้งค่าติดหนึบ

ความกว้างสูงสุด

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

• ความกว้างสูงสุด: 0px
• ความกว้างสูงสุดของ Sticky: 120px

โคลนแถวสองครั้ง

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

เปลี่ยนเนื้อหาและรูปภาพทั้งหมด

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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