วิธีสร้างแอนิเมชั่นซองจดหมายด้วยเอฟเฟกต์การเลื่อนของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

สมัครสมาชิกช่อง Youtube ของเรา

ดาวน์โหลดเค้าโครงแอนิเมชั่นซองจดหมายฟรี

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

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

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

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

ดาวน์โหลด

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

สร้างโครงสร้างองค์ประกอบใหม่

เพิ่มส่วนใหม่ตรงกลางหรือด้านล่างของหน้า

สีพื้นหลัง

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

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

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างถัดไป

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

ล้น

และซ่อนส่วนที่ล้น

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

เพิ่มแถว #1

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

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

สีพื้นหลัง

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

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

ขนาด

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

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

ระยะห่าง

จากนั้น เพิ่มค่าการเติมที่กำหนดเองในขนาดหน้าจอต่างๆ

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

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• ทุกมุม: 20px

กล่องเงา

เรายังใช้เงาของกล่องที่ละเอียดอ่อนอีกด้วย

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

ดัชนี Z

ตั้งค่าแถวให้สมบูรณ์โดยเพิ่มดัชนี z ในแท็บขั้นสูง

• ดัชนี Z: 11

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

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

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

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

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

• หัวข้อที่ 2 แบบอักษร: Poppins
• หัวเรื่อง 2 ขนาดข้อความ: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)

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

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

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

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

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

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

ระยะห่าง

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

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

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

เพิ่มสำเนา

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

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

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

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

• รัศมีเส้นขอบของปุ่ม: 100px
• แบบอักษรของปุ่ม: Poppins

ระยะห่าง

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

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

เพิ่มแถว #2

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

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

ขนาด

อนุญาตให้แถวใช้ความกว้างของส่วนทั้งหมดโดยเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:

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

ระยะห่าง

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

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

แสดง

และเพื่อให้แน่ใจว่าคอลัมน์ต่างๆ จะปรากฏติดกันบนหน้าจอขนาดเล็ก เราจะเพิ่มโค้ด CSS หนึ่งบรรทัดในองค์ประกอบหลักของแถว

display: flex;

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

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

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

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

เราใช้พื้นหลังแบบไล่ระดับสีแทน

• สี 1: rgba(255,255,255,0)
• สี 2: #e8e8e8
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 150deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

ระยะห่าง

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

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

Clone Image Module ในคอลัมน์ 1 & วางซ้ำในคอลัมน์ 2

เมื่อคุณสร้าง Image Module ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนทั้งโมดูลและวางสำเนาในคอลัมน์ 2

เปลี่ยนพื้นหลังไล่ระดับ

เปลี่ยนพื้นหลังการไล่ระดับสีดังนี้:

• สี 1: rgba(255,255,255,0)
• สี 2: #efefef
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 210deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

เพิ่มแถว #3

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

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

ขนาด

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

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

ระยะห่าง

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

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

แสดง

และอนุญาตให้ทั้งสองคอลัมน์ปรากฏติดกันโดยเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว

display: flex;

ดัชนี Z

ตั้งค่าแถวให้สมบูรณ์โดยเพิ่มดัชนี z ในแท็บขั้นสูง

• ดัชนี Z: 12

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

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

เพิ่ม Image Module ลงในคอลัมน์ 1 และปล่อยกล่องรูปภาพว่างไว้อีกครั้ง

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

ใช้พื้นหลังไล่ระดับสีแทน

• สี 1: rgba(255,255,255,0)
• สี 2: #efefef
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 213deg
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

ระยะห่าง

และเพิ่มขนาดของโมดูลด้วยการเพิ่มช่องว่างภายในด้านบนและด้านล่าง

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

Clone Image Module ในคอลัมน์ 1 & วางซ้ำในคอลัมน์ 2

เมื่อคุณสร้าง Image Module ในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนและวางสำเนาในคอลัมน์ 2

เปลี่ยนพื้นหลังไล่ระดับ

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

• สี 1: rgba(255,255,255,0)
• สี 2: #e8e8e8
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 147deg
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

เพิ่มการเคลื่อนที่ในแนวตั้งให้แถว #1

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

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น:
  • เดสก์ท็อป: 0 (ที่ 68%)
  • แท็บเล็ต: 0.5 (ที่ 61%)
  • โทรศัพท์: 0.5 (ที่ 43%)
• ออฟเซ็ตกลาง:
  • เดสก์ท็อป: 6.5 (ที่ 81%)
  • แท็บเล็ตและโทรศัพท์: 21.5 (ที่ 82%)
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: 16 (ที่ 95%)
  • แท็บเล็ตและโทรศัพท์: 21.5 (ที่ 82%)

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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