วิธีสร้างโมดูลคาบเกี่ยวกันบน Scroll ด้วยเอฟเฟกต์การเลื่อนของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลด The Module Overlaps on Scroll Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

ระยะห่าง

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

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

เพิ่มแถว #1

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

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

ระยะห่าง

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

• ขอบล่าง: 100px

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

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

ถึงเวลาเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความแรกที่มีเนื้อหา H2 ที่คุณเลือก

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

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

• แบบอักษรของหัวเรื่อง 2: Abril Fatface
• ขนาดข้อความของหัวเรื่อง 2: 100px (เดสก์ท็อป), 70px (แท็บเล็ต), 60px (โทรศัพท์)

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

ทัศนวิสัย

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

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

เส้น

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

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

ขนาด

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

• น้ำหนักตัวแบ่ง: 6px
• ความกว้าง: 10% (เดสก์ท็อป), 20% (แท็บเล็ต), 30% (โทรศัพท์)

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

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

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

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

แก้ไขการตั้งค่าข้อความของโมดูลตามลำดับ:

• แบบอักษรของข้อความ: Karla
• ขนาดตัวอักษร: 18px
• ความสูงของบรรทัดข้อความ: 2.2em

เพิ่มแถว #2

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

ไปยังแถวถัดไป ซึ่งใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

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

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

อัปโหลดโอเวอร์เลย์

ในคอลัมน์ 1 โมดูลแรกที่เราต้องการคือ Image Module อัปโหลดไฟล์ภาพซ้อนทับที่คุณพบได้ในโฟลเดอร์ดาวน์โหลดที่คุณสามารถดาวน์โหลดได้ที่ตอนต้นของโพสต์นี้

ภาพพื้นหลัง

จากนั้นอัปโหลดภาพพื้นหลังที่คุณเลือก

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

ขนาด

บังคับเต็มความกว้างบนโมดูลรูปภาพถัดไป

• บังคับเต็มความกว้าง: ใช่

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

เพิ่มเนื้อหา H3 และคำอธิบาย

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

สีพื้นหลัง

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

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

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

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

• แบบอักษรของข้อความ: Karla
• ขนาดตัวอักษร: 18px
• ความสูงของบรรทัดข้อความ: 2.2em
• สีข้อความ: เบา

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

ทำการเปลี่ยนแปลงการตั้งค่าข้อความ H3 ด้วย

• แบบอักษรของหัวเรื่อง 3: Abril Fatface
• ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 3 ขนาดข้อความ: 50px

ขนาด

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

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

ระยะห่าง

เรากำลังใช้ค่าระยะขอบและช่องว่างภายในที่กำหนดเองเช่นกัน

• มาร์จิ้นสูงสุด: -26%
• ช่องว่างภายในด้านบน: 15%
• แผ่นรองด้านล่าง: 15%
• ช่องว่างภายในด้านซ้าย: 10%
• ช่องว่างภายในด้านขวา: 10%

เอฟเฟกต์การเลื่อนแนวนอน

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

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: 4
• ออฟเซ็ตกลาง: 4 (ที่ 5%)
• ออฟเซ็ตสิ้นสุด: 0 (ที่ 10%)
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

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

เพิ่มสำเนา

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

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบแล้วเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

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

ต่อไป เราจะจัดรูปแบบปุ่มตามลำดับ:

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

• แบบอักษรของปุ่ม: Karla
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

ระยะห่าง

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

• มาร์จิ้นสูงสุด: -4%
• ช่องว่างภายในด้านบน: 2%
• แผ่นรองด้านล่าง: 2%
• ช่องว่างภายในด้านซ้าย: 7%
• ช่องว่างภายในด้านขวา: 7%

โมดูลโคลนในคอลัมน์ 1 & วางซ้ำในคอลัมน์ 2

เมื่อคุณทำโมดูลในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนโมดูลทั้งหมดและวางโมดูลที่ซ้ำกันในคอลัมน์ที่สองของแถว

เปลี่ยนภาพพื้นหลังและเนื้อหา

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

โคลนทั้งแถว

จากนั้นโคลนทั้งแถวได้มากเท่าที่คุณต้องการ

เปลี่ยนภาพพื้นหลังและเนื้อหา

เปลี่ยนภาพพื้นหลังและเนื้อหาที่นี่ด้วย เสร็จแล้ว!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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