วิธีสร้างส่วนฮีโร่ที่ชนคอลัมน์ที่สวยงามบน Scroll ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนฮีโร่ที่ชนคอลัมน์ได้ฟรี

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

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

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

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

ดาวน์โหลด

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

สร้างเค้าโครงส่วนฮีโร่ใหม่

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

สีพื้นหลัง

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

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของส่วนทั้งหมดด้วย

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

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

ล้น

และซ่อนการล้นของแถว

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 15vw
• แผ่นรองด้านล่าง: 10vw
• ช่องว่างภายในด้านซ้าย: 5vw
• ช่องว่างภายในด้านขวา: 5vw

ดัชนี Z

เพิ่มดัชนี z ของคอลัมน์ด้วย

• ดัชนี Z: 12

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

ภาพพื้นหลัง

ดำเนินการต่อโดยเปิดการตั้งค่าคอลัมน์ 2 และอัปโหลดภาพพื้นหลังที่คุณเลือก

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ปกติ

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

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

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

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

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

• แบบอักษรของหัวข้อ: Shadows Into Light
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• หัวเรื่องข้อความสี: #000000
• ขนาดข้อความของหัวเรื่อง: 6vw (เดสก์ท็อป), 11vw (แท็บเล็ต), 13vw (โทรศัพท์)
• ระยะห่างของตัวอักษรหัวเรื่อง: -2px
• ความสูงของบรรทัดหัวเรื่อง: 1.2em

ระยะห่าง

เพิ่มระยะขอบด้านบนด้วย

• ขอบบน: 10vw

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

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #1e1e1e
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 1.9vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.4em

ระยะห่าง

และเพิ่มค่าระยะขอบแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ขอบบน: 4vw (เดสก์ท็อป), 8vw (แท็บเล็ต), 12vw (โทรศัพท์)
• ขอบล่าง: 4vw (เดสก์ท็อป), 8vw (แท็บเล็ต), 12vw (โทรศัพท์)

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

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px

• แบบอักษรของปุ่ม: เปิด Sans

ระยะห่าง

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

• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• Padding ขวา: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)

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

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

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

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

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

• แบบอักษรของข้อความ: เงาสู่แสง
• สีข้อความ: rgba(0,0,0,0.25)
• ขนาดตัวอักษร: 9vw (เดสก์ท็อป), 14vw (แท็บเล็ตและโทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: -3px
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: กึ่งกลาง (เดสก์ท็อป), ซ้าย (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

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

• Padding ด้านบน: 5vw (เดสก์ท็อป),
• Padding ด้านล่าง: 60vw (แท็บเล็ตและโทรศัพท์)
• Padding ซ้าย: 5vw (แท็บเล็ตและโทรศัพท์)

ใช้แอนิเมชั่นการเลื่อน

ส่วน

ปรับขนาดขึ้นและลง

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

• เปิดใช้งานการเลื่อนขึ้นและลง
• สเกลเริ่มต้น: 100% (ที่ 49%)
• ระดับกลาง:
  • เดสก์ท็อป: 70% (ที่ 100%)
  • แท็บเล็ตและโทรศัพท์: 100% (ที่ 100%)
• สเกลสิ้นสุด:
  • เดสก์ท็อป: 70%
  • แท็บเล็ตและโทรศัพท์: 100%

คอลัมน์ 1

การเคลื่อนไหวในแนวนอน

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

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

ปรับขนาดขึ้นและลง

ใช้เอฟเฟกต์การปรับขนาดขึ้นและลงในคอลัมน์ด้วย

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• มาตราส่วนเริ่มต้น:
  • เดสก์ท็อป: 10%
  • แท็บเล็ตและโทรศัพท์: 100%
• ระดับกลาง:
  • เดสก์ท็อป: 90%
  • แท็บเล็ตและโทรศัพท์: 100%
• สเกลสิ้นสุด: 100%

คอลัมน์ 2

การเคลื่อนไหวในแนวนอน

ถัดไป เปิดการตั้งค่าคอลัมน์ 2 และใช้การตั้งค่าการเคลื่อนไหวในแนวนอนต่อไปนี้:

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 0
• ออฟเซ็ตกลาง:
  • เดสก์ท็อป: 0 (ที่ 53%)
  • แท็บเล็ตและโทรศัพท์: 0 (ที่ 56%)
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: -6 (ที่ 53%)
  • แท็บเล็ตและโทรศัพท์: 0 (ที่ 100%)

จางหายเข้าและออก

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

• เปิดใช้งานการเฟดเข้าและออก: ใช่
• ความทึบเริ่มต้น: 100% (ที่ 47%)
• ความทึบปานกลาง:
  • เดสก์ท็อป: 0% (ที่ 47%)
  • แท็บเล็ตและโทรศัพท์: 100% (ที่ 47%)
• สิ้นสุดความทึบ:
  • เดสก์ท็อป: 0%
  • แท็บเล็ตและโทรศัพท์: 100%

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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