วิธีเพิ่มแอนิเมชั่น Lottie ใน WordPress (4 ขั้นตอนง่ายๆ)

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

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

บทนำเกี่ยวกับแอนิเมชั่น Lottie

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

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

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

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

วิธีเพิ่มแอนิเมชั่น Lottie ลงใน WordPress (ใน 4 ขั้นตอน)

ตอนนี้คุณรู้เพิ่มเติมเกี่ยวกับ Lottie Animations แล้ว มาดูวิธีเพิ่มลงในเว็บไซต์ WordPress ของคุณ:

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน Otter Blocks

มีหลายวิธีในการเพิ่มแอนิเมชั่น Lottie ใน WordPress ตัวอย่างเช่น คุณสามารถใช้ HTML และ JavaScript อย่างไรก็ตาม วิธีนี้ค่อนข้างซับซ้อน

หรืออีกทางหนึ่ง คุณสามารถใช้ปลั๊กอินแอนิเมชั่น Lottie ได้ แม้ว่านี่อาจเข้ากันไม่ได้กับตัวสร้างเพจทั้งหมด นอกจากนี้ยังไม่มีตัวเลือกโวหารมากมาย

วิธีที่ง่ายที่สุดในการเพิ่ม Lottie Animations ในเว็บไซต์ของคุณคือการใช้ปลั๊กอินเช่น Otter Blocks:

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

หากคุณอัปเกรดเป็น Otter Blocks Pro คุณจะสามารถเข้าถึงคุณสมบัติขั้นสูง เช่น บล็อกพิเศษของ WooCommerce และการตั้งค่าสไตล์เพิ่มเติม อย่างไรก็ตาม คุณไม่จำเป็นต้องใช้เวอร์ชัน Pro เพื่อใช้คุณสมบัติแอนิเมชั่น Lottie

หากคุณต้องการใช้เวอร์ชันฟรี ให้ไปที่ Plugins > Add New ในแดชบอร์ด WordPress ของคุณและค้นหา “Otter Blocks:”

จากนั้นคลิกที่ ติดตั้ง > เปิดใช้งาน ตอนนี้คุณควรเห็นบล็อกใหม่ที่เลือกไว้ในตัวแก้ไขบล็อก

ขั้นตอนที่ 2: เลือกภาพเคลื่อนไหวจากไลบรารี Lottie

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

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

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

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

ตัวอย่างเช่น คุณสามารถปรับความเร็วของภาพเคลื่อนไหวและเปลี่ยนสีพื้นหลังได้ หากคุณคลิกที่ Edit Layer Colours คุณจะเข้าสู่ Lottie Editor:

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

หากคุณทำการเปลี่ยนแปลงที่คุณไม่ชอบ ให้คลิก ลูกศรเลิก ทำที่ด้านบนซ้ายของหน้าจอ

ขั้นตอนที่ 3: วาง URL ภาพเคลื่อนไหว Lottie ลงใน Otter Block หรืออัปโหลดไฟล์ Lottie

เมื่อคุณพอใจกับการออกแบบของคุณแล้ว คุณมีสองตัวเลือกในการเพิ่มลงใน WordPress:

1. คุณสามารถคัดลอก URL ภาพเคลื่อนไหวของ Lottie เพื่อเพิ่มเวอร์ชันจากเซิร์ฟเวอร์ของ LottieFiles ไปยังไซต์ของคุณได้ คุณจะพบสิ่งนี้ในป๊อปอัปแอนิเมชันของคุณ ใต้การออกแบบ
2. คุณสามารถดาวน์โหลดไฟล์ LottieFile ที่เสร็จแล้วลงในคอมพิวเตอร์ของคุณได้โดยคลิกปุ่ม ดาวน์โหลด ที่มุมบนขวาแล้วเลือกรูปแบบ dotLottie สิ่งนี้จะช่วยให้คุณโฮสต์ไฟล์บนเซิร์ฟเวอร์ของคุณ

จากนั้น กลับไปที่ไซต์ WordPress ของคุณและเปิดหน้าหรือโพสต์ที่คุณต้องการแทรกภาพเคลื่อนไหวของคุณ

คลิกเพื่อเพิ่มบล็อกใหม่และค้นหา “Lottie Animations:”

เพิ่มบล็อกลงในหน้าของคุณ จากนั้น เลือกหนึ่งในตัวเลือกเหล่านี้:

• แทรกจาก URL – ใช้สิ่งนี้หากคุณต้องการป้อนลิงก์ไปยังไฟล์ Lottie บนเซิร์ฟเวอร์ของ LottieFiles สิ่งที่คุณต้องทำคือวางลิงก์ Lottie Animation URL ที่คุณคัดลอกมาจากเว็บไซต์ LottieFiles
• อัปโหลด – ใช้สิ่งนี้หากคุณดาวน์โหลดไฟล์ dotLottie จริงจาก LottieFiles จากนั้นคุณสามารถอัปโหลดไฟล์นั้นไปยังไซต์ WordPress ของคุณได้

จากนั้นกด Enter และภาพเคลื่อนไหวจะปรากฏบนหน้า:

ตอนนี้คุณสามารถบันทึกการเปลี่ยนแปลงและไปยังขั้นตอนสุดท้ายได้

ขั้นตอนที่ 4: ปรับแต่งแอนิเมชั่นของคุณด้วย Otter Blocks

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

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

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

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

หากคุณไปที่ เงื่อนไขการมองเห็น คุณจะสามารถกำหนดค่าภาพเคลื่อนไหวของคุณให้ปรากฏเฉพาะในบางสถานการณ์เท่านั้น:

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

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

เริ่มต้นด้วยแอนิเมชั่น Lottie ใน WordPress

สรุป ต่อไปนี้เป็นสี่ขั้นตอนในการเพิ่มแอนิเมชั่น Lottie ใน WordPress:

สำหรับวิธีเพิ่มเติมในการปรับปรุงตัวแก้ไข WordPress ดั้งเดิม คุณสามารถดูคอลเลกชั่นทั้งหมดของปลั๊กอินบล็อก WordPress ที่ดีที่สุดของเรา

คุณมีคำถามใดๆ เกี่ยวกับการเพิ่ม Lottie Animations ใน WordPress หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!