نحوه اضافه کردن انیمیشن های متحرک به سایت با استفاده از Lottie و المنتور

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
اضافه کردن انیمیشن Lottie به المنتور
پخش ویدیو

گاهی اوقات نیاز هست برای بخش های مختلف سایت طراحی های کوچکی اضافه کنیم تا کمی از حالت ساده خارج شده و جذابیت بیشتری برای کاربر داشته باشد.

در این آموزش قصد داریم تا در مورد اضافه کردن انیمیشن های Lottie صحبت کنیم.

اگر یک سایت فروشگاهی دارید و برگه تشکر بعد از خرید رو توسط المنتور طراحی کردید، با استفاده از این ترفند ساده برگه تشکر رو جذاب تر کنید.

انیمیشن های متحرک با استفاده از Lottie

قبل از اینکه آموزش رو انجام بدیم کمی در مورد تکنولوژی لاتی (Lottie) صحبت کنیم.

این تکنولوژی توسط شرکت Airbnb و به صورت متن باز ساخته شده که شما بدون پرداخت هیچ هزینه ای می تونید از این انیمیشن ها استفاده کنید.

حالا شاید فکر کنید اضافه کردن این انیمیشن ها باعث کاهش سرعت سایت بشه که در مقایسه با دیگر فرمت های انیمیشن، Lottie پایین ترین حجم و مصرف منابع هاست را استفاده می کند.

سایت منبع فایل های Lottie با نام https://lottiefiles.com قرار دارد که از بخش جستجو می توانید فایل های با فرمت JSON را دانلود کنید.

ایجاد حساب در این سایت رایگان می باشد.

استفاده از Lottie در المنتور

برای استفاده از این انیمیشن ها ابتدا باید افزونه زیر را از مخزن وردپرس نصب کنید:

  • Animentor رایگان در مخزن وردپرس)

بعد از فعال سازی این افزونه، وارد صفحه المنتور خود شده و از بین ویجت های المنتور، ویجت Lottie را جستجو کرده و داخل صفحه قرار دهید.

اضافه کردن انیمیشن Lottie به المنتور

بعد از قرار دادن ویجت داخل صفحه، نیاز هست که فایل های انیمیشن را با فرمت JSON آپلود کنید.

اضافه کردن انیمیشن Lottie به المنتور

حالا وارد سایت https://lottiefiles.com شده و یک انیمیشن با فرمت JSON دانلود کنید.

اضافه کردن انیمیشن Lottie به المنتور

سپس فایل را در ویجت آپلود کنید.

می توانید تنظمات سرعت و تعداد نمایش انیمیشن را کنترل کنید.

همچنین می توانید کنترل پخش انیمیشن با قرار گرفتن ماوس روی ویجت و دیگر تنظیمات را ویرایش کنید.

اضافه کردن انیمیشن Lottie به المنتور

در انتها هم بعد از ذخیره کردن برگه، انیمیشن به شکل زیر نمایش داده خواهد شد.

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
مبتدی

035-essay

زمان آموزش :
4 دقیقه

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات دیجیتال

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=46996

فهرست مطالب

پارسایی
پارسایی در 11:34

سلام . ممنون از شما. تست کردم در نسخه موبایل نمایش داده نمیشه. تنظیمات خاصی داره؟

پاسخ
المنتور فارسی
المنتور فارسی در 12:29

با سلام
نه تنظیماتی برای نسخه موبایل نداره و باید به خوبی کار کنه. می تونید آدرس صفحه ای که اجرا کردید رو ارسال کنید تا بررسی کنیم.

پاسخ
Avatar
jasem در 07:35

مثل همیشه عالی ..

پاسخ
Avatar
sepehr shokati در 12:18

شما فوق العاده اید

پاسخ
المنتور فارسی
المنتور فارسی در 12:44

ممنون از همراهی شما

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید