วิธีซ้อนแถวบน Scroll ด้วยตัวเลือก Sticky ของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงการเรียงแถวฟรี

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

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

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

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

ดาวน์โหลด

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

1. สร้างแนวคิดแถวแรก

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

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

สีพื้นหลัง

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

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

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: พอดี

ระยะห่าง

ไปที่แท็บการออกแบบของคอลัมน์และใช้ค่าช่องว่างภายในต่อไปนี้กับขนาดหน้าจอต่างๆ ถัดไป:

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

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

สีพื้นหลัง

จากนั้นเปิดคอลัมน์ที่สองและใช้สีพื้นหลังที่นั่นด้วย

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

ระยะห่าง

พร้อมกับค่าการเติมที่กำหนดเองบางอย่าง

• ช่องว่างภายในด้านบน: 13%
• แผ่นรองด้านล่าง: 13%
• ช่องว่างภายในด้านซ้าย: 8%
• ช่องว่างภายในด้านขวา: 8%

กล่องเงา

และกล่องเงา

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

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

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

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

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

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

• หัวเรื่อง 2 แบบอักษร: Alata
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #ffffff
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 200px
  • แท็บเล็ต: 150px
  • โทรศัพท์: 100px
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -1px

ตำแหน่ง

เปลี่ยนตำแหน่งโมดูลในแท็บขั้นสูงด้วย

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย
• ออฟเซ็ตแนวตั้ง: 2%
• ออฟเซ็ตแนวนอน: 2%

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

โมดูลถัดไปและสุดท้ายที่เราต้องการในคอลัมน์ 1 คือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

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

ไปที่แท็บการออกแบบของโมดูลและจัดรูปแบบปุ่มตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #83a5bf
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 1px
• แบบอักษรของปุ่ม: Alata

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

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

ตำแหน่ง

และเปลี่ยนตำแหน่งโมดูลในแท็บขั้นสูง

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างขวา

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

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

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

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

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

• หัวข้อ 3 แบบอักษร: Alata
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ: 40px

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

ทัศนวิสัย

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

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

การตั้งค่าสาย

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

• สีเส้น: #f3f0ee

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 5px
• ความกว้าง: 19%
• ส่วนสูง: 5px

ระยะห่าง

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

• ขอบล่าง: 20%

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

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

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

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

จัดรูปแบบข้อความของโมดูลตามลำดับ:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• สีข้อความ: #ffffff
• ขนาดข้อความ:
  • เดสก์ท็อป: 15px
  • แท็บเล็ตและโทรศัพท์: 14px
• ความสูงของบรรทัดข้อความ: 2em

2. เปลี่ยนแถวเป็นองค์ประกอบการซ้อน

การตั้งค่าแถว

ดัชนี Z

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

• ดัชนี Z: 1

การตั้งค่าติดหนึบ

จากนั้นเราจะไปที่การตั้งค่าเอฟเฟกต์การเลื่อนและใช้การตั้งค่า Sticky ต่อไปนี้:

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

3. นำ Stacking Row กลับมาใช้ใหม่ในส่วนเดียวกัน

โคลนแถว x3

ตอนนี้เราใช้ตัวเลือกติดหนึบของเราแล้ว เราสามารถนำแถวทั้งหมดกลับมาใช้ใหม่ได้มากเท่าที่เราต้องการ

การเปลี่ยนแปลงทั่วไป

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

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนสำเนาในแต่ละสำเนา

เปลี่ยนคอลัมน์ 1 สีพื้นหลังและรูปภาพ

พร้อมกับสีพื้นหลังและรูปภาพของคอลัมน์ที่ 1

• ซ้ำ 1: #edc1b6
• ซ้ำ 2: #efe7e2
• ซ้ำ 3: #f7f6f4

เปลี่ยนสีพื้นหลังของคอลัมน์ 2

เราใช้สีต่างกันสำหรับคอลัมน์ที่สองของแต่ละแถวที่ซ้ำกันเช่นกัน

• ซ้ำ 1: #ffd1c1
• ซ้ำ 2: #fff8f2
• ซ้ำ 3: #fffaf7

เปลี่ยนสีพื้นหลังของปุ่ม

ต่อไป เราจะเปลี่ยนสีพื้นหลังของปุ่มในแต่ละแถวที่ซ้ำกัน

• ซ้ำ 1: #c18a7a
• ซ้ำ 2: #bab5b2
• ซ้ำ 3: #c98f7d

การเปลี่ยนแปลงแถวด้วยสีพื้นหลังสีอ่อน

เปลี่ยนสีข้อความ

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

• สีข้อความ: #2b343b

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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