آموزش کامل کار با ویجت Lottie در المنتور | افزودن انیمیشن های ویژه + ویدئوی آموزشی

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

آموزش کار با ویجت Lottie در المنتور پرو

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

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

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

چرا طراحان سایت ویجت Lottie را انتخاب می کنند؟

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

1 – اضافه کردن انیمیشنهای Lottie بدون کدنویسی

یعنی شما می توانید بدون هیچ کدنویسی و فقط باید ابزارک ساده انیمیشن های بسیار حرفه‌ای و زیبایی را به سایتخودتون اضافه کنید.

2 – می‌توانید استراتژی محتوای خودتون رو بهبود بخشید

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

3 – هر نوع انیمیشن را میتوانید طراحی و یا اضافه کنید

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

نکته مهم :  برای انیمیشن ها روی سطح وب نمونه های متنوعی موجود هستش و شما به راحتی می توانید این نمونه ها را انتخاب کنید و به سلیقه خودتون سفارش سازی رو انجام بدید و میتونید به راحتی رنگ ها و یا المان هاشو هم تغییر بدید پس محدودیتی اصلاً ندارید.

4 – انیمیشن خود را بر اساس تعامل کاربر فعال کنید

انواع زیادی از انیمیشن های ساخته شده Lottie را که در Lottiefiles.com موجود است ، انتخاب کنید.

5 – به سرعت هر انیمیشن Lottie را بارگذاری کنید

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

شروع کار با ویجت Lottie در المنتور

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

در اولین مرحله شما باید یک صفحه رو با افزونه المنتور ویرایش بکنید، برای این کار از منوی برگ ها » افزودن برگه اقدام بکنید و صفحه را با ویرایشگر المنتور ادیت بکنید.

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

بعد از اینکه ابزارک را به صفحه کشیدید رها کردید باید تصویری همانند تصویر زیر داشته باشید.

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

 تنظیمات بخش محتوا

در این بخش می توانید تنظیمات محتوای این ابزارک را انجام بدید که در زیر می توانید به تمامی این ابزارک ها و یا تنظیمات دسترسی داشته باشید و کار هر کدوم رو بدونید.

• منبع :  در این بخش باید منبع انیمیشن خودتون رو انتخاب کنید. این منبع شامل دو گزینه هستش،  فایل مدیا و لینک خارجی.
  • فایل مدیا : اگر این گزینه را انتخاب کنید باید فایل JSON خودتون رو از داخل هاست خودتون آپلود بکنید.
  • لینک خارجی : اگر این گزینه را انتخاب کنید میتونید فایل JSON خودتون را از لینک های خارجی اضافه بکنید.
• آپلود فایل JSON : در این بخش باید فایل JSON خودتون رو آپلود بکنید.
•  تراز بندی :  در این بخش هم میتوانید ترازبندی انیمیشن خودتون رو انتخاب کنید که هم می‌توانید راست چین چپ چین و وسط چین انتخاب کنید.
• پیوند :  در این بخش میتوانید انیمیشن خودتون رو به یک لینک داخلی خارجی پیوند بدید. فقط کافیه که لینک خودتون رو در این بخش اضافه کنید.

 تنظیمات بخش پیکربندی

در این قسمت می توانید به پیکربندی حرفه‌ای ویجت Lottie دسترسی داشته باشید که در زیر تمام این تنظیمات رو توضیح دادیم.

• دستگیره : در این بخش می توانید نحوه به نمایش در آمدن انیمیشن را انتخاب کنید. این بخش شامل ۵ گزینه هستش که در زیر به تمامی گزینه ها اشاره می کنیم :
  • Viewport :  اگر این گزینه را انتخاب کنید انیمیشن Lottie ما به راحتی بدون هیچ عملی به نمایش در می آید.
  • در کلیک : اگر این گزینه را انتخاب کنید وقتی کار بر روی انیمیشن کلیک کرد انیمیشن اجرا میش.
  • روی هاور :  وقتی کاربر رو برد روی انیمیشن، انیمیشن شروع به اجرا شدن می کنه.
  • نوار پیمایش : انیمیشن حالتی اجرا میشه که کاربر اسکرول صفحه رو پایین میاره.
  • غیرفعال :  اگه این گزینه را انتخاب کنید انیمیشن غیر فعال میشه و دیگه اجرا نمیشه.

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

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

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

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

حالا در این وب سایت شما بر روی یکی از انیمیشن ها کلیک بکنید همانند تصویر زیر :

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

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

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

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

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

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

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

حالا همانند تصویر زیر  روی گزینه Edit Layer Colors کلیک کنید تا صفحه ویرایشگر فایل انیمیشن براتون باز بشه.

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

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

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

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

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

فیلم آموزشی

نتیجه گیری

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

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

تا آموزش های بعدی خدانگهدار