آموزش ساخت انیمیشن Lottie در المنتور

آموزش ساخت انیمیشن Lottie در المنتور :انیمیشن به بخشی ضروری از طراحی وب مدرن تبدیل شده است. آنها نه تنها برای جلب توجه بازدیدکنندگان، بلکه برای ارائه پیام‌های فعال به روش‌های جذاب استفاده می‌شوند. فایل‌های GIF، JPEG، PNG و کلیپ‌های ویدیویی کوتاه مدت‌هاست که خواسته‌های گرافیکی وب‌سایت‌ها را برآورده کرده‌اند.

آموزش ساخت انیمیشن Lottie در المنتور (3 روش آسان)

اما محدودیت‌های محسوسی نیز دارند. با این حال، تصاویر همیشه نمی توانند پیام های مهم را در فواصل کوتاه توضیح دهند. گیف‌ها و کلیپ‌های ویدیویی معمولاً وزن زیادی دارند که بر سرعت وب تأثیر می‌گذارد. بهینه سازی آنها اغلب منجر به خرابی پیکسل و تصاویری چشم نواز می شود.

انیمیشن Lottie در المنتور :

انیمیشن Lottie یک راه عالی برای غلبه بر این استرس ها بوده است. زیرا آن‌ها در ارسال پیام‌ها در سریع‌ترین زمان، سریع و عالی هستند. چیزی که یک انیمیشن سه ثانیه ای Lottie می تواند ارائه دهد، برای انجام همین کار به 5-10 عکس نیاز دارد.

المنتور چیست ؟

Elementor یک ابزار صفحه ساز قدرتمند است که به وسیله آن می توانید انیمیشن Lottie را به روش های ساده به وب سایت خود اضافه کنید. در این مقاله سه روش برای اضافه کردن انیمیشن Lottie در وب سایت های Elementor توضیح خواهیم داد. قبل از آن به چند سوال اساسی می پردازیم. تا آخر به خواندن ادامه دهید!

انیمیشن Lottie چیست و چرا باید از آنها استفاده کرد؟

انیمیشن Lottie یک فایل مبتنی بر JSON (JavaScript Object Notion) است که می تواند در برنامه ها و صفحات وب از هر نوع پخش شود. انیمیشن های Lottie ذاتاً سبک، سریع و روان هستند زیرا در قالب فایل جاوا اسکریپت ساخته شده اند. می‌توانید بدون اینکه با مشکل پیکسل‌سازی مواجه شوید، آن‌ها را بزرگ یا کوچک کنید.

در زیر نمونه ای از انیمیشن Lottie را مشاهده می کنید.

توجه: ما فایل انیمیشن را با فرمت ویدیویی mp4 فقط برای ارائه یک مثال آپلود کرده ایم. اما نحوه افزودن این انیمیشن به وب سایت خود با فرمت واقعی Lottie در قسمت آموزشی این مقاله توضیح داده خواهد شد.

مزایای استفاده از انیمیشن های Lottie چیست؟

استفاده از انیمیشن های Lottie در وب سایت مزایای زیادی دارد. آنها می توانند به شما در بهبود عملکرد وب و تجربه کاربری خود به روش های هیجان انگیز متعدد کمک کنند. بیایید بررسی کنیم که چرا باید از انیمیشن های Lottie در وب سایت خود استفاده کنید.

آ. اندازه فایل کوچک

فایل های انیمیشن Lottie به طور قابل توجهی کوچکتر از فرمت های ویدئویی، GIF و سایر فرمت های فایل هستند. شما به راحتی می توانید یک فایل انیمیشن Lottie با گرافیک بالا سه ثانیه ای در 200 کیلوبایت ایجاد کنید. اما انجام همین کار در فرمت های ویدئویی و GIF دشوار است.

ب هرگز کیفیت را از دست نمی دهد

انیمیشن های Lottie هرگز کیفیت گرافیکی را به خطر نمی اندازند. چه بزرگنمایی یا کوچک نمایی کنید، پیکسل های آن هرگز از بین نمی روند. آنها برای هر نوع صفحه نمایش دستگاه، صرف نظر از تلفن، تبلت یا دسکتاپ عالی هستند.

ج هرگز سرعت یک وب سایت را کند نمی کند

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

د به راه اندازی تبدیل کمک می کند

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

ه. کتابخانه منبع باز موجود است

www.LottieFiles.com یک کتابخانه منبع باز عالی است که در آن هزاران فایل Lottie آماده موجود است. طراحان متعددی این کتابخانه را با مشارکت بیشتر انیمیشن‌های Lottie تقریباً روزانه پرمحتوا می‌سازند.

چگونه انیمیشن های رایگان Lottie را پیدا کنیم؟

ابزارهای زیادی به صورت آنلاین و آفلاین در دسترس هستند که به وسیله آنها می توانید فایل های انیمیشن Lottie ایجاد کنید. Figma، After Effect، Adobe XD و غیره برخی از ابزارهای اثبات شده ای هستند که می توانید از آنها استفاده کنید. اما برای استفاده از آنها به حداقل دانش در مورد اصول طراحی و مهارت های فنی نیاز دارید.

اگر به‌جای سرمایه‌گذاری بر روی این ابزارها به دنبال یک راه‌حل آماده هستید، LottieFiles.com می‌تواند راه‌حلی عالی باشد. همین چند وقت پیش کمی در مورد این ابزار صحبت کردیم. در اینجا، ما به شما نشان خواهیم داد که چگونه فایل های انیمیشن Lottie رایگان را از این منبع باز پیدا کنید.

به www.LottieFiles.com بروید.

مکان نما را در قسمت Discover بگیرید.

از منوی کشویی، روی انیمیشن‌های آماده برای استفاده رایگان کلیک کنید.

توجه: می‌توانید انیمیشن‌های لوتی ممتاز را از بازار بخرید.

چگونه فایل های Lottie را به صورت رایگان پیدا کنیم

اگر انیمیشن خاصی می خواهید، نام/کلمه کلیدی آن را در کادر جستجو تایپ کنید.

اگر در آنجا در دسترس باشد، آن را روی صفحه خواهید دید.

همچنین می توانید انواع خاصی از انیمیشن ها را از گزینه دسته پیدا کنید.

بخش کاوش را خودتان انجام دهید.

فرض کنید انیمیشن زیر را انتخاب کرده ایم. در قسمت بعدی، ما به شما نشان خواهیم داد که چگونه آن را با استفاده از Elementor در وب سایت وردپرس خود جاسازی کنید.

برای افزودن انیمیشن Lottie در سایت Elementor: راهنمای گام به گام

Elementor یک افزونه صفحه ساز قدرتمند هم برای کدنویس ها و هم برای کاربران بدون کد است. این دارای بیش از 100 ویجت هیجان انگیز و ده ها ویژگی است که توسط آنها می توانید وب سایت های هیجان انگیز را از ابتدا ایجاد کنید. همچنین دارای هزاران الگوی آماده در بخش «کتابخانه کیت‌ها» است که می‌توانید تنها با یک کلیک آن‌ها را وارد کنید.

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

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

Shortcode یک ویجت رایگان از پلاگین صفحه ساز Elementor است. برای استفاده از ویجت فقط به نسخه Lite این افزونه نیاز دارید. از لینک زیر دانلود و نصب کنید

پس از نصب و فعال سازی، مراحل زیر را دنبال کنید.

• Elementor

  

مرحله 01: ویجت کد کوتاه را روی Elementor Canvas بکشید و رها کنید

پست یا صفحه‌ای را که می‌خواهید انیمیشن‌های Lottie را با Elementor نشان دهید باز کنید. کارهای زیر را بعد از آن انجام دهید.

مرحله 02: کد iFrame را کپی کنید

به فایل انیمیشنی که از LottieFiles.com انتخاب کرده اید بازگردید.

صفحه را کمی به پایین اسکرول کنید.

کد iFrame را از قسمت علامت گذاری شده ای که در عکس زیر نشان داده ایم کپی کنید.

مرحله 03: کد iFrame را در کادر Shortcode قرار دهید

به صفحه Elementor خود بروید.

کد iFrame را در کادر Shortcode پنل Elementor قرار دهید.

شما انیمیشن را در حال اجرا بر روی Elementor Canvas خواهید دید. اما مشکل استفاده از ویجت Shortcode برای افزودن انیمیشن های Lottie این است که هیچ گزینه سفارشی سازی دریافت نخواهید کرد. شما نمی توانید آن را به اندازه دلخواهتان کم یا زیاد کنید.

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

مرتبط : 

مشکل لود نشدن المنتور:9 روش

آموزش افزودن CSS سفارشی به المنتور : 5 روش

روش 02: نحوه اضافه کردن انیمیشن Lottie در سایت Elementor از طریق پیوند خارجی

این روش به ویجت Lottie موجود در Elementor Pro نیاز دارد. یعنی باید Elementor و Elementor Pro را روی سایت وردپرس خود نصب کنید. آنها را از لینک های زیر دانلود کنید.

• Elementor
• Elementor Pro

پس از اتمام قسمت نصب، مراحل زیر را دنبال کنید.

مرحله 01: ویجت Lottie را بکشید و رها کنید

 

Lottie را در نوار جستجوی Elementor تایپ کنید. ویجت را در زیر خواهید دید.

ویجت را در قسمت انتخابی Elementor Canvas بکشید و رها کنید.

مرحله 02: URL انیمیشن Lottie را کپی کنید

به فایل انیمیشنی که از LottieFiles.com انتخاب کرده اید بازگردید.

URL انیمیشن Lottie را از ناحیه علامت گذاری شده نشان داده شده در عکس زیر کپی کنید.

مرحله 03: URL انیمیشن Lottie را در Elementor جای‌گذاری کنید

به صفحه Elementor خود بروید.

روی منوی کشویی کنار منبع کلیک کنید.

URL خارجی را انتخاب کنید.

URL را در کادر URL خارجی قرار دهید.

URL انیمیشن Lottie را به عنوان URL خارجی در Elementor قرار دهید

انیمیشن را در حال اجرا بر روی Elementor Canvas خود خواهید دید.

مرحله 04: تنظیمات را تنظیم کنید

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

گزینه های زیادی را در آنجا خواهید دید.

هنگامی که انیمیشن ظاهر می شود، گزینه Trigger تنظیم می شود، چه در حالت کلیک، شناور، اسکرول یا دیدگاه. حلقه باعث می شود انیمیشن به طور مکرر ظاهر شود. بقیه گزینه ها را خودتان بررسی کنید.

مرحله 05: انیمیشن Lottie را سبک کنید

در پنل Elementor خود به Style > Lottie بروید.

می‌توانید از گزینه‌های موجود برای تغییر فیلترهای Width، Max Width، Hover، Opacity و CSS استفاده کنید.

چگونه انیمیشن Lottie را با المنتور سبک کنیم

روش 03: نحوه اضافه کردن انیمیشن Lottie در سایت Elementor از طریق فایل رسانه ای

این یکی تقریباً مشابه روش دوم است. در اینجا دوباره به هر دو پلاگین Elementor و Elementor Pro نیاز دارید. ما لینک ها را در قسمت ابتدایی روش دو به شما دادیم. امیدوارم آنها را در سایت خود نصب کرده باشید. بنابراین، وارد بخش آموزشی شوید.

مرحله 01: ابزارک Lottie را بکشید و رها کنید

به صفحه Elementor خود برگردید.

همانطور که قبلا نشان دادیم، ویجت Lottie را در ناحیه انتخابی خود بکشید و رها کنید.

ویجت Lottie را روی Elementor Canvas خود بکشید و رها کنید

مرحله 02: فایل انیمیشن Lottie JSON را دانلود کنید

 

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

بر روی دکمه دانلود کلیک کنید.

روی Lottie JSON کلیک کنید.

فایل انیمیشن در درایو شما دانلود می شود.

مرحله 03: فایل انیمیشن Lottie را از طریق Media File آپلود کنید

Media File را از لیست کشویی کنار Source انتخاب کنید.

روی نماد آپلود کلیک کنید.

فایل انیمیشن را از درایوی که آن را دانلود کرده اید انتخاب کنید.

فایل Lottie Animation را در وب سایت Elementor خود پخش کنید

بنابراین می توانید انیمیشن Lottie را به سایت وردپرس خود اضافه کنید

با استفاده از پلاگین صفحه ساز Elementor. اکنون به شما بستگی دارد که از کدام روش می خواهید استفاده کنید.

نکات پاداش: مواردی که باید هنگام افزودن انیمیشن Lottie در یک وب سایت در نظر بگیرید

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

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

آ. از انیمیشن های زیاد استفاده نکنید

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

ب از جاهایی که می تواند باعث ایجاد تبدیل شود استفاده کنید

از آنجایی که انیمیشن‌ها فوراً توجه بازدیدکنندگان را به خود جلب می‌کنند، باید از آن‌ها در تمام نقاط محرک تبدیل استفاده کنید. در زیر برخی از با ارزش ترین مکان های یک وب سایت وجود دارد که می توانید از انیمیشن های Lottie استفاده کنید.

بخش قهرمان

فرم تماس

اشتراک گذاری اجتماعی

گالری تصاویر و نمایش اسلاید

بخش تشکر

ج ثبات رنگ را بین وب سایت و انیمیشن های خود حفظ کنید

اگر انیمیشن Lottie را انتخاب می کنید که از نظر مفهومی خوب است اما قوام رنگ وب سایت شما را می شکند، بهتر است از آن اجتناب کنید. زیرا ثبات رنگ برای هر طراحی وب چشمگیر ضروری است.

د انیمیشن های حاضر در چیدمان های عالی (ارتفاع و عرض)

پس از آپلود فایل‌های انیمیشن Lottie، باید اندازه پیکسل‌های آن‌ها را سفارشی کنید تا با بخش‌های خاص سازگار شوند. در غیر این صورت، ممکن است از نظر بصری برای بازدیدکنندگان ناخوشایند به نظر برسد.

اکنون، پاسخ برخی از سوالات متداول در مورد نحوه افزودن انیمیشن های Lottie در وب سایت های Elementor را پوشش خواهیم داد.

آیا می توانیم از انیمیشن های Lottie به صورت رایگان استفاده کنیم؟

بستگی دارد که بتوانید انیمیشن های Lottie را به صورت رایگان مدیریت کنید. قبلاً در بالا گفتیم www.LottieFiles.com یک پلت فرم منبع باز عالی است که در آن هزاران فایل انیمیشن آماده Lottie را به صورت رایگان دریافت خواهید کرد.

اما اگر می خواهید فایل های Lottie خود را طراحی کنید، به ابزار(های) طراحی نیاز دارید. After Effect و Figma دو ابزار آسانی هستند که می توانید از آنها استفاده کنید. اما شما دسترسی بسیار محدودی به رایگان آنها خواهید داشت. اگر مبتدی هستید، امیدواریم LottieFiles.com بتواند در ابتدا نیازهای شما را برآورده کند.

چگونه می توانم فایل های Lottie خود را ایجاد کنم؟

After Effect و Figma دو ابزار برجسته هستند که می توانید از آنها برای ایجاد فایل های Lottie خود استفاده کنید. اما برای ایجاد و تبدیل فایل های Lottie به پلاگین های Bodymovin و LottieFiles به ترتیب روی این دو ابزار نیاز دارید.

آیا Lottie بهتر از GIF است؟

از نظر وضوح گرافیکی، اندازه فایل ها و سرعت بارگذاری صفحه، فایل های انیمیشن Lottie بسیار جلوتر از فایل های GIF هستند. ایجاد 4/5 ثانیه از یک فایل GIF با کیفیت بالا معمولاً حدود 500 کیلوبایت تا 1 مگابایت طول می کشد. اما در مورد فایل‌های Lottie می‌توانید این کار را بین 70-250 کیلوبایت انجام دهید.

آیا فایل های انیمیشن در www.LottieFiles.com فاقد حق چاپ هستند؟

همه فایل های انیمیشن Lottie رایگان در وب سایت تحت مجوز مشترک حق چاپ هستند. بنابراین، می توانید بدون هیچ تردیدی از آنها استفاده کنید.

آیا می توانم از انیمیشن های Lottie در ایمیل استفاده کنم؟

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

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

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

ایده انیمیشن Lottie این مشکل دیرینه را حل کرد و به عنوان یک کمک بزرگ ظاهر شد. ما سعی کرده‌ایم تمام راه‌های ممکن را به شما ارائه دهیم تا بتوانید با استفاده از Elementor انیمیشن‌های Lottie را به وب‌سایت خود اضافه کنید.

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

امیدواریم از این مقاله لذت برده باشید. اگر دوست دارید مقالات جالب دیگری مانند این مقاله دریافت کنید، مشترک ما شوید و کانال های فیس بوک و توییتر ما را برای به روز رسانی منظم دنبال کنید.

جهت انجام خدمات طراحی سایت :سایت شرکتی,سایت فروشگاهی,سایت گردشگری  و سایت وردپرس و … و همچنین خدمات سئو سایت :سئو سایت فروشگاهی,سئو سایت گردشگری,سئو سایت وردپرس و … تولید محتوا با کارشناسان سئو فراز تماس بگیرید