نحوه استفاده از انیمیشن های Lottie در وردپرس

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

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

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

انیمیشن های Lottie چیست؟

Lottie کتابخانه‌ای برای Android، iOS، وب و ویندوز است که انیمیشن‌های After Effects را ارائه می‌کند و اجازه می‌دهد داده‌های انیمیشن صادر شود. به عنوان فایل‌های JSON برخلاف نوع فایل تصویری معمولی. به طور خلاصه، آنها به راحتی می توانند یک دارایی ثابت را با چیزی سرگرم کننده و جذاب جایگزین کنند.

این راه حل منبع باز اولین بار توسط تیم AirBnB معرفی شد، اما به سرعت در بین طراحان و انیماتورها در بازارهای مختلف محبوبیت پیدا می کند. یکی از مزیت های بزرگ استفاده از انیمیشن های lottie در وب سایت وردپرسی شما این است که حجم فایل در مقایسه با انیمیشن های GIF یا فایل های mp4 بسیار کوچک است. علاوه بر این، قالب انیمیشن انعطاف پذیر به مرورگر اجازه می دهد تا رندر را مدیریت کند.

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

ایجاد انیمیشن های Lottie

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

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

انیمیشن های سفارشی لوتی

اگر به دنبال یک انیمیشن لوتی سفارشی برای وب سایت خود هستید، باید با یک انیماتور یا طراح متخصص در Adobe After Effects و با این نوع انیمیشن آشناست.

بسیاری از انیمیشن‌های لاتی از سبک تصویرسازی استفاده می‌کنند، بنابراین قبل از حرکت به سمت جلو، باید تصمیم بگیرید که آیا این با برند و سبک وب‌سایت مطابقت دارد یا خیر. هنگامی که در مورد عناصر گرافیکی و جلوه های انیمیشن تصمیم گرفتید، انیماتور باید انیمیشن های سفارشی را در Adobe After Effects ایجاد کند و با استفاده از پسوند After Effects آنها را به عنوان انیمیشن lottie صادر کند. این یک انیمیشن با کیفیت بالا ارائه می کند که می تواند به راحتی در سایت شما پیاده سازی شود.

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

انیمیشن های استوک لوتی

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

Lottie Files یک وب‌سایت سهام است که در آن می‌توانید تعداد زیادی انیمیشن لاتی رایگان و پولی پیدا کنید. این سایت همچنین یک ابزار ویرایش ارائه می دهد که در آن می توانید رنگ های انیمیشن را قبل از دانلود ویرایش کنید. اگر نیاز به تغییر تعداد زیادی رنگ در یک انیمیشن دارید، یک انیماتور یا طراح ماهر نیز می‌تواند از Adobe After Effects استفاده کند تا این تغییرات را کارآمدتر انجام دهد و انیمیشن را صادر کند.

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

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

افزودن انیمیشن های Lottie در وردپرس

این یک فرآیند بسیار روان برای افزودن انیمیشن های لوتی به یک وب سایت وردپرس است. می‌توانید از ویجت HTML سفارشی برای اضافه کردن کد انیمیشن به سایت استفاده کنید یا از افزونه وردپرس برای افزودن انیمیشن استفاده کنید.

ویجت HTML سفارشی

یک توسعه‌دهنده ماهر وردپرس می‌تواند از یک کتابخانه کوچک جاوا اسکریپت و یک ویجت سفارشی HTML برای اضافه کردن انیمیشن‌های لاتی به سایت استفاده کند. با آپلود اسکریپت lottie.min.js به همراه فایل انیمیشن .json و هر گونه دارایی تصویر در پوشه تم شروع خواهید کرد. سپس یک قطعه کوچک از JS برای اضافه کردن به ویجت برای شروع اسکریپت Lottie وجود دارد که فایل انیمیشن .json را در قسمت کانتینر مورد نظر بارگیری می کند.

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

بیشتر افزونه‌ها برای افزودن انیمیشن‌های لوتی بدون کمک توسعه‌دهنده به صفحه‌ساز Elementor نیاز دارند، بنابراین اگر از افزونه تم یا صفحه‌ساز غیر از Elementor استفاده می‌کنید، رویکرد HTML سفارشی بهتر عمل می‌کند.

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

گزینه های افزونه وردپرس

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

Elementor Pro – Lottie Widget

Elementor یک صفحه‌ساز برای وردپرس با ویژگی‌های کشیدن و رها کردن است و مجوز Elementor Pro شامل ویجت Lottie. با استفاده از این ویجت می توانید انیمیشن های لاتی را بدون کد اضافه کنید و ابعاد و رفتار انیمیشن را شخصی سازی کنید. این افزونه به راحتی با وب سایت سهام Lottie Files متصل می شود، بنابراین می توانید به راحتی گزینه های انیمیشن سهام را مستقیماً از سایت انتخاب کنید یا آثار خود را آپلود کنید.

بلوک های گوتنبرگ – افزونه های نهایی

اگر از ویرایشگر گوتنبرگ در سایت خود استفاده می کنید، افزونه نهایی برای گوتنبرگ می تواند انتخاب خوبی برای اضافه کردن انیمیشن های لاتی با کمک یک افزونه باشد. ویرایشگر گوتنبرگ از زمان انتشار وردپرس 5.0 بخشی از هسته وردپرس بوده است، اما محبوب ترین نیست. بسیاری از سایت‌ها هنوز از ویرایشگر کلاسیک یا سایر سازندگان صفحه مانند Site Origin، Elementor یا Beaver Builder استفاده می‌کنند.

با این وجود، این یک گزینه قابل اجرا است. Ultimate Addons for Gutenberg افزونه ای است که به خوبی مورد بررسی قرار گرفته است و ویژگی های بسیار خوبی را ارائه می دهد، از جمله گزینه اضافه کردن انیمیشن های لاتی و کنترل گزینه های پیشرفته، مانند سرعت انیمیشن و ماشه.

افزونه های وردپرس اضافی

افزونه‌های اضافی در فهرست راهنمای وردپرس برای افزودن و سفارشی کردن انیمیشن‌های لاتی موجود است. به خاطر داشته باشید که برخی از افزونه ها نیاز دارند که سایت شما ساخته شده و از Elementor استفاده کند، مانند Premium Addons for Elementor و Elementskit Addon for Elementor.  افزونه‌هایی نیز وجود دارند که برای سایر مضامین و سازندگان وردپرس، مانند تم Divi یا بلوک‌های گوتنبرگ، در نظر گرفته شده‌اند.

زمان انیمیشن سازی

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

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