ขอแนะนำ Kadence Lottie Block

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

โอกาสใหม่สำหรับแอนิเมชั่นกับ Lottie Animations

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

นักพัฒนาของ Airbnb ได้สร้างเทคโนโลยีใหม่ที่เรียกว่า Lottie ซึ่งนำเสนอแอนิเมชั่นคุณภาพสูงโดยไม่ต้องใช้แบนด์วิดท์สูง หลังจากการพัฒนา นักพัฒนาเหล่านี้เปิดแหล่งที่มาของการสร้าง ไฟล์ Lottie ไม่เพียงแต่เป็นโอเพ่นซอร์ส มีขนาดเล็กมากและมีคุณภาพสูงเท่านั้น แต่ยังมีการโต้ตอบและสามารถจัดการได้ในขณะใช้งานจริง ตาม LottieFiles "แอพ 500 อันดับแรกใน iOS App Store ใช้ Lottie เพื่อดึงดูดผู้ใช้และปรับปรุงการแปลง"

ด้วย Kadence Lottie Block ใน Kadence Blocks เจ้าของไซต์ WordPress สามารถใช้แอนิเมชั่นเพื่อสร้างประสบการณ์ที่ดีขึ้นและมีส่วนร่วมมากขึ้นสำหรับผู้เยี่ยมชมไซต์

ล็อตตี้คืออะไร?

Lottie ได้รับการตั้งชื่อตามผู้กำกับภาพยนตร์ชาวเยอรมัน Lotte Reiniger Reiniger เป็นผู้บุกเบิกแอนิเมชั่นภาพเงาชั้นแนวหน้า ซึ่งเป็นที่รู้จักจากภาพยนตร์เรื่อง The Adventures of Prince Achmed ที่ออกฉายในปี 1926 นี่เป็นภาพยนตร์แอนิเมชั่นเรื่องยาวที่เก่าแก่ที่สุดที่ยังหลงเหลืออยู่ ก่อนหน้าเรื่อง Snow White and the Seven Dwarfs (1937) ของ Walt Disney .

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

ค้นหาแอนิเมชั่น Lottie

LottieFiles.com เป็นแหล่งข้อมูลที่น่าทึ่งสำหรับทุกสิ่งที่ Lottie ไม่ว่าคุณกำลังมองหาแอนิเมชั่น Lottie ฟรีที่คุณสามารถโหลดเป็น URL ระยะไกลหรือดาวน์โหลดเพื่อใช้ในเว็บไซต์ของคุณในเครื่อง LottieFiles มีไฟล์ฟรีให้เลือกมากมาย คุณยังสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างแอนิเมชั่น Lottie ของคุณเอง เข้าถึงปลั๊กอิน After Effects ปลั๊กอิน Figma หรือค้นหาแอนิเมเตอร์ในตลาดที่สามารถสร้างไฟล์ Lottie แบบกำหนดเองให้กับคุณได้ คุณยังสามารถเพิ่มการโต้ตอบให้กับแอนิเมชั่นของคุณโดยใช้เครื่องมือบน LottieFiles

การใช้ Lottie Block

บล็อก Kadence Lottie ถูกเพิ่มลงในไซต์ของคุณโดยใช้ปลั๊กอิน Kadence Blocks ฟรีที่มีให้ใช้งานฟรีจากที่เก็บ WordPress.org เพียงอัปเดตเป็นเวอร์ชันล่าสุดของปลั๊กอิน Kadence Blocks ฟรี และ Lottie Block จะพร้อมใช้งานในไซต์ของคุณ คุณสามารถใช้ Lottie Block ได้ทุกที่ที่คุณต้องการใช้บล็อกอื่น ๆ รวมถึงภายในโพสต์ บนหน้า หรือแม้แต่เมื่อสร้างเทมเพลต Kadence Elements คุณยังสามารถเพิ่ม Lottie Block ลงในป๊อปอัป/โมดอลของ Kadence Conversion หรือเลื่อนเข้าได้

การใช้ Lottie Block นั้นง่ายมาก

เมื่อเลือก Lottie Block คุณจะเห็นแอนิเมชั่น Lottie Block ของ WordPress จาก LottieFiles.com

ไฟล์ Lottie ระยะไกล

หากคุณต้องการใช้ URL ระยะไกลเพื่อแทนที่ตัวยึดตำแหน่ง เพียงแค่แทนที่รายการในฟิลด์ URL ของ Lottie Animation การดำเนินการนี้จะดึงไฟล์ Lottie จากตำแหน่งระยะไกลบนเซิร์ฟเวอร์อื่น

คุณสามารถค้นหา URL ไฟล์ Lottie ระยะไกลได้ที่ LottieFiles.com ในหน้ารายละเอียดของภาพเคลื่อนไหวแต่ละหน้า

ไฟล์ Lottie ในพื้นที่

หากคุณต้องการใช้ไฟล์ในเครื่อง ให้เลือก ไฟล์ ในเครื่องภายใต้เมนูดร็อปดาวน์แหล่งที่มาของไฟล์

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

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

การเข้าถึงล็อตตี้

สำหรับโปรแกรมอ่านหน้าจอและเบราว์เซอร์สำรองอื่นๆ ให้เพิ่มคำอธิบายของภาพเคลื่อนไหวในช่อง Aria Label เพื่อการช่วยสำหรับการเข้าถึง (ป้ายกำกับ Aria คล้ายกับแท็ก alt ของรูปภาพ)

การตั้งค่าที่มีอยู่ใน Lottie Block

มีการตั้งค่าต่างๆ มากมายผ่าน Kadence Lottie Block เพื่อควบคุมวิธีที่แอนิเมชั่น Lottie ของคุณปรากฏบนไซต์ของคุณ

แสดงการควบคุม

หากคุณต้องการให้ผู้ใช้ของคุณควบคุมแอนิเมชั่นเพื่อเริ่ม/หยุดแอนิเมชั่น คุณสามารถสลับสิ่งนี้ได้

เล่นอัตโนมัติ

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

เล่นบนโฮเวอร์เท่านั้น

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

เล่นเฉพาะในการเลื่อนหน้า

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

ความเร็วในการเล่น

คุณสามารถกำหนดได้ว่าแอนิเมชั่นของคุณเล่นเร็วหรือช้าแค่ไหน

การควบคุมลูป

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

การควบคุมขนาด

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

ใช้บล็อก Kadence Lottie ได้ทุกที่ที่คุณสามารถใช้ได้

ใช้ Kadence Lottie Block ทุกที่ที่คุณใช้บล็อก มีอยู่ใน Kadence Blocks เวอร์ชันฟรี

และหากคุณใช้ปลั๊กอิน Kadence Blocks Pro, Kadence Conversions หรือ Kadence Theme Pro อยู่แล้ว คุณสามารถเริ่มเพิ่ม Lottie Block ไปยังพื้นที่ใดก็ได้ที่คุณใช้บล็อกอยู่แล้ว

หากคุณกำลังใช้เทมเพลต Kadence Elements เป็นส่วนหนึ่งของ Kadence Theme Pro และต้องการเพิ่ม Lottie Block ที่ส่วนท้ายของคุณ คุณสามารถทำได้ง่ายๆ เพียงไปที่ Kadence > Elements > Template เพื่อค้นหาเทมเพลตส่วนท้ายของคุณ และเพิ่ม Lottie Block ที่นั่น ตัวอย่างเช่น ดูโพสต์ล่าสุดที่อธิบายวิธีเพิ่มแอนิเมชั่น Lottie ที่ส่วนท้ายโดยใช้เทมเพลต Kadence Elements

หากคุณกำลังใช้ Kadence Conversions สำหรับป๊อปอัป/โมดอลหรือสไลด์อิน และคุณต้องการเพิ่ม Lottie Block ให้กับรายการคอนเวอร์ชั่นที่ใช้ในไซต์ของคุณ คุณสามารถเพิ่มได้ในลักษณะเดียวกัน เพียงใช้บล็อกแบบเดียวกับที่คุณทำตามปกติ และปรับแต่ง Lottie Block ของคุณสำหรับรายการ Kadence Conversions ของคุณ

แหล่งข้อมูลสำหรับการใช้งานแอนิเมชั่น

แอนิเมชั่นบนเว็บไซต์ WordPress เป็นเครื่องมือที่ทรงพลังอย่างเหลือเชื่อที่ช่วยให้คุณดึงดูดความสนใจและดึงดูดผู้ชมได้ แน่นอนว่าพลังอันยิ่งใหญ่มาพร้อมความรับผิดชอบที่ยิ่งใหญ่ มีแหล่งข้อมูลบางส่วนที่พร้อมใช้งานเพื่อทำความเข้าใจแนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับแอนิเมชั่น และเราแนะนำให้ตรวจสอบแนวทางปฏิบัติที่ดีที่สุดในการใช้งานสำหรับแอนิเมชั่นบนเว็บ Nielsen Norman Group นำเสนอคำแนะนำที่ดีสองสามข้อ ได้แก่ แอนิเมชั่นเพื่อการเอาใจใส่และความเข้าใจ ตลอดจนบทบาทของแอนิเมชั่นและการเคลื่อนไหวใน UX

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

Kadence ยังคงสร้างสรรค์นวัตกรรมต่อไป

Kadence Lottie Block เป็นเพียงนวัตกรรมล่าสุดที่มาจากทีม Kadence มีให้ในปลั๊กอิน Kadence Blocks ฟรี คุณจะเห็น Kadence Lottie Block เมื่อคุณอัปเดตเป็นเวอร์ชัน 2.2.4 หรือใหม่กว่า

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