3 เอฟเฟกต์ Scroll Motion ที่ง่ายดายที่คุณสามารถเพิ่มลงในพาดหัวข่าวของคุณด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ตัวอย่าง #3

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนเอฟเฟกต์การเคลื่อนไหวเลื่อนได้ฟรี

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

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

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

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

ดาวน์โหลด

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

1. สร้างการออกแบบส่วนฮีโร่ของคุณในหน้าใหม่หรือหน้าที่มีอยู่

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

สีพื้นหลัง

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

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

ระยะห่าง

ไปที่แท็บออกแบบและแก้ไขค่าระยะห่างด้วย

• ด้านบน: 15vw (เดสก์ท็อป), 20vw (แท็บเล็ต), 25vw (โทรศัพท์)
• ช่องว่างภายใน: 0vw

ล้น

และเพื่อให้แน่ใจว่าเอฟเฟกต์การเลื่อนจะไม่ทำให้แถบเลื่อนแนวนอนปรากฏขึ้น เราจะซ่อนส่วนที่ล้นออกมาด้วย

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

เพิ่มแถว #1

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

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

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

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

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

• แบบอักษรของหัวข้อ: Playfair Display
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องข้อความสี: #000000
• ขนาดข้อความหัวเรื่อง: 6vw

เพิ่มแถว #2

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #444444
• สี 2: #000000
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 237deg

ขนาด

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

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0vw
• ช่วงล่าง: 10vw (เดสก์ท็อป), 15vw (แท็บเล็ต), 20vw (โทรศัพท์)

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

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

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

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

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

• แบบอักษรข้อความ: Playfair Display
• สีข้อความ: #dddddd
• ขนาดตัวอักษร: 6vw
• ความสูงของบรรทัดข้อความ: 1em
• ความแรงของเงาข้อความ: 0.29em
• สีเงาข้อความ: #ffffff
• การจัดตำแหน่งข้อความ: กึ่งกลาง

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

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #e8e8e8
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

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

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

ระยะห่าง

และรวมระยะขอบด้านบนและด้านล่างในขนาดหน้าจอต่างๆ

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

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

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

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

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

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

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

จากนั้น จัดรูปแบบปุ่มดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.8vw (เดสก์ท็อป), 1.5vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีเส้นขอบของปุ่ม: #ffffff
• รัศมีเส้นขอบของปุ่ม: 1px
• แบบอักษรของปุ่ม: เปิด Sans
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

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

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

2. ใช้เอฟเฟกต์การเลื่อน

ตัวอย่าง #1

โมดูลข้อความ #1

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

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

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

เฟดเข้าและออก

เราจะเพิ่มเอฟเฟกต์เฟดเข้าและออกด้วย

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

โมดูลข้อความ #2

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

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

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

เฟดเข้าและออก

พร้อมกับเอฟเฟกต์เฟดเข้าและออกที่เข้าชุดกัน:

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

ตัวอย่าง #2

โมดูลข้อความ #1

การเคลื่อนไหวในแนวตั้ง

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

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

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

เพิ่มเอฟเฟกต์การปรับขนาดขึ้นและลงด้วย

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

โมดูลข้อความ #2

การเคลื่อนไหวในแนวตั้ง

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

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

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

เพิ่มเอฟเฟกต์การปรับขนาดขึ้นและลงต่อไป

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

เบลอ

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

• เปิดใช้งานการเบลอ: ใช่
• เริ่มเบลอ: 10px
• กลางเบลอ: 0px
  • 40% – 73% (เดสก์ท็อป)
  • 40% – 95% (แท็บเล็ตและโทรศัพท์)
• สิ้นสุดการเบลอ: 100px

ตัวอย่าง #3

โมดูลข้อความ #1

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

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 0
• ออฟเซ็ตกลาง: 0
  • 0% – 90%
• ออฟเซ็ตสิ้นสุด: 10

เฟดเข้าและออก

ใช้เอฟเฟกต์เฟดเข้าและออกสำหรับโมดูลนี้ด้วย

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

หมุน

และเราจะใส่เอฟเฟกต์การหมุนด้วย

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0 °
• การหมุนกลาง: 0 °
  • 0% – 90% (เดสก์ท็อป)
  • 0% – 95% (แท็บเล็ตและโทรศัพท์)
• สิ้นสุดการหมุน: 90°

โมดูลข้อความ #2

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

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 0
• ออฟเซ็ตกลาง: 0
  • 0% – 90%
• ออฟเซ็ตสิ้นสุด: -10

เฟดเข้าและออก

ดำเนินการต่อโดยใช้เอฟเฟกต์การเคลื่อนไหวเลื่อนเข้าและออก

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

หมุน

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

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0 °
• การหมุนกลาง: 0 °
  • 0% – 80% (เดสก์ท็อป)
  • 0% – 90% (แท็บเล็ตและโทรศัพท์)
• สิ้นสุดการหมุน: -90 °

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ตัวอย่าง #3

เดสก์ทอป

มือถือ

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

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

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