ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับโมดูลลอตตี้ของ Divi 5

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

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

ไฟล์ลอตตี้คืออะไร?

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

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

ใน Divi 5 โมดูล Lottie ได้รวมแอนิเมชั่นเหล่านี้เข้ากับ Visual Builder อย่างราบรื่นช่วยให้ผู้ใช้สามารถเพิ่มสัมผัสที่ทันสมัยและทันสมัยในเว็บไซต์ Divi ของพวกเขาในไม่กี่คลิก ไม่ว่าจะเป็นการเน้น CTA หรือเพิ่มไหวพริบในส่วนของฮีโร่โมดูล Lottie ทำให้การรวมภาพเคลื่อนไหวโดยไม่ต้องเข้ารหัสที่ซับซ้อนอย่างง่ายดาย

ด้วยโมดูล Lottie Divi 5 จะเปลี่ยนวิธีที่คุณนำการเคลื่อนไหวไปสู่การออกแบบเว็บของคุณทำให้พวกเขามีเสน่ห์และมีประสิทธิภาพ

คุณสมบัติที่สำคัญ

โมดูล Lottie ใน Divi 5 เป็นเครื่องมืออเนกประสงค์ที่เต็มไปด้วยความสามารถที่ทำให้การสร้างภาพเคลื่อนไหวแบบไดนามิกและปรับให้เหมาะสมได้ง่าย มันมีการควบคุมพฤติกรรมการเคลื่อนไหวช่วยให้คุณสามารถปรับแต่งความเร็วทิศทางทิศทางทริกเกอร์และอื่น ๆ ลองมาดูคุณสมบัติที่สำคัญบางอย่าง

ใช้งานง่าย

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

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

สำหรับผู้ที่กำลังมองหาสัมผัสที่ไม่เหมือนใครคุณสามารถสร้างภาพเคลื่อนไหวที่กำหนดเองโดยใช้เครื่องมือเช่น Adobe After Effects ด้วยปลั๊กอิน bodymovin ปลั๊กอินนี้ส่งออกภาพเคลื่อนไหวเป็นไฟล์ JSON ที่เข้ากันได้กับโมดูล Lottie ไม่ว่าคุณจะเลือกภาพเคลื่อนไหวที่ทำไว้ล่วงหน้าหรือแบบกำหนดเองกระบวนการนั้นตรงไปตรงมา

ตัวเลือกการปรับแต่ง

โมดูล Lottie ใน Divi 5 มีตัวเลือกการปรับแต่งทำให้คุณควบคุมได้หลายแง่มุมของไฟล์ Lottie สำหรับประสบการณ์แบบโต้ตอบให้ใช้ ทริกเกอร์แอนิเมชั่น เพื่อเลือกเวลาที่จะเปิดใช้งานแอนิเมชั่นเช่น On Load เมื่อองค์ประกอบเข้าสู่ Viewport, Hover, Click หรือ Scroll คุณสามารถเปิดใช้งาน Loop Animation เพื่ออนุญาตให้มีการเคลื่อนไหวอย่างต่อเนื่องในไฟล์ Lottie ของคุณปรับ ความเร็วภาพเคลื่อนไหว เลือก ทิศทาง (ไปข้างหน้าหรือย้อนกลับ) และเลือกระหว่าง ปกติ หรือ เด้ง ในฟิลด์ โหมดการเล่น

อัพโหลดแอนิเมชั่น JSON

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

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

วิธีใช้โมดูล Lottie ใน Divi 5

การเพิ่มแอนิเมชั่น Lottie ใน Divi 5 นั้นตรงไปตรงมา สร้างหรือดาวน์โหลดแอนิเมชั่น Lottie จากแหล่งข้อมูลเช่น LotTiefiles หรือ Lordicon ค้นหาและคลิก โมดูล Lottie ใน Visual Builder เพื่อเพิ่มลงในหน้าของคุณ

อัปโหลดไฟล์ JSON หรือค้นหาในแกลเลอรี WordPress Media Media ของคุณ

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

หากคุณต้องการให้แอนิเมชั่นล็อตตี้ของคุณมีองค์ประกอบแบบโต้ตอบให้ใช้ สกรอลล์ของโมดูลกับทริกเกอร์ Animate

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

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

ใน แท็บการออกแบบ คุณสามารถควบคุมการปรับขนาดการจัดตำแหน่งความสูงระยะห่างและอื่น ๆ

แม้ว่าคุณจะไม่สามารถเปลี่ยนสีของไฟล์ลอตตี้ของคุณภายใน Divi 5 แต่เว็บไซต์ Lottie ส่วนใหญ่อนุญาตให้คุณเลือกสีและความกว้างจังหวะเฉพาะก่อนที่คุณจะดาวน์โหลด

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

ตัวอย่างที่ใช้งานได้จริงโดยใช้โมดูลลอตตี้

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

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

หน้าติดต่อ

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

404 หน้า

เปลี่ยนข้อผิดพลาด 404 ที่น่าผิดหวังให้กลายเป็นช่วงเวลาที่น่าจดจำด้วยแอนิเมชั่น Lottie ที่ขี้เล่น เพิ่มไอคอนการค้นหาแบบเข็มทิศหรือภาพเคลื่อนไหวในหน้า 404 ของคุณจับคู่กับข้อความสั้น ๆ

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

ผลิตภัณฑ์เด่น

แสดงผลิตภัณฑ์หรือหมวดหมู่ที่คุณชื่นชอบด้วยแอนิเมชั่นลอตตี้เพื่อเน้นผลิตภัณฑ์ที่ลดราคา ตัวอย่างเช่นวางแอนิเมชั่น Lottie Badge Sale ติดกับผลิตภัณฑ์ที่โดดเด่นเพื่อเน้น

ขั้นแรกให้ตั้งค่าภาพเคลื่อนไหวเพื่อทริกเกอร์เมื่อโหลด จากนั้นจะเปิดใช้งานเมื่อผู้ใช้เรียกดูการวาดตาไปยังผลิตภัณฑ์และเพิ่มความน่าดึงดูดใจ

ส่วนบริการ

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

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

ส่วนฮีโร่

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

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

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

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

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

การดาวน์โหลด

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

บทสรุป

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

พร้อมที่จะลองใช้โมดูล Lottie หรือยัง? แบ่งปันความคิดหรือการสร้างสรรค์ของคุณในความคิดเห็นหรือในโซเชียลมีเดีย