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

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

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

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

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

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

در واقع، 61 درصد از بازاریابان در سال گذشته از محتوای تعاملی به عنوان یک تاکتیک تعامل دیجیتال استفاده کردند. استراتژی های دیگر شامل GIF است که می تواند برای نمایش انیمیشن ها نیز استفاده شود.

انیمیشن های Lottie یک انتخاب عالی هستند، تا حد زیادی به دلیل حجم فایل کوچک آنها:

در واقع این فایل ها هستند 600% کوچکتر از فایل های GIF – می توانید آنها را به سایت خود اضافه کنید بدون اینکه چیزی را سنگین کنید. این به شما امکان می دهد یک UX مثبت را حفظ کنید.

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

چگونه انیمیشن های Lottie را به سایت خود اضافه کنید (3 روش)

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

روش 1: انیمیشن خود را با oEmbed اضافه کنید

افزودن انیمیشن های Lottie خود از طریق oEmbed ساده ترین روش در این راهنما است. تنها نقطه ضعف این است که نمی توانید تنظیمات انیمیشن را ویرایش کنید یا آنها را طوری تنظیم کنید که به تعاملات کاربر واکنش نشان دهند.

برای شروع با این روش، کتابخانه انیمیشن LottieFiles را مرور کنید تا انیمیشن مناسب برای سایت خود را بیابید. هنگامی که طرحی را که دوست دارید پیدا کردید، روی انیمیشن کلیک کنید و به سادگی URL oEmbed را کپی کنید (برای انجام این کار باید به یک حساب کاربری رایگان وارد شوید):

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

اکنون URL oEmbed را که از وب سایت Lottie کپی کرده اید، قرار دهید:

بازدید جاسازی دکمه برای تایید عمل.

در این مرحله، باید ببینید که انیمیشن در صفحه شما ظاهر می شود:

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

روش 2: انیمیشن خود را با استفاده از بلوک لوتی برای گوتنبرگ یک افزونه

اگرچه روش oEmbed ساده ترین است، استفاده از بلوک Lottie for Gutenberg نیز بسیار آسان است. همچنین به شما این امکان را می دهد که هر تغییری را که در پروژه های خود ایجاد می کنید، فوراً پیش نمایش کنید.

ابتدا برو به پلاگین ها > یک مورد جدید اضافه کنید برای نصب و فعال سازی پلاگین Lottie block for Gutenberg در وردپرس:

سپس می توانید به حساب LottieFiles خود وارد شوید یا یک حساب کاربری رایگان ایجاد کنید.

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

در اینجا سه ​​راه برای درج انیمیشن Lottie در وردپرس خواهید یافت:

• را کلیک کنید انیمیشن را کشف کنید برای مرور کتابخانه LottieFiles (برای انجام این کار به یک حساب کاربری نیاز دارید).
• انتخاب کنید کتابخانه ی رسانه برای پیدا کردن انیمیشنی که قبلا آپلود کرده اید.
• ضربه درج از آدرس اینترنتی برای وارد کردن اتصال JSON.

اگر روش دوم را انتخاب کنید، می توانید پیوند JSON را در وب سایت Lottie بیابید:

هنگامی که انیمیشن را به صفحه خود اضافه کردید، می توانید پیش نمایش طرح را در گوتنبرگ مشاهده کنید:

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

روش 3: انیمیشن خود را با HTML و جاوا اسکریپت اضافه کنید

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

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

برای شروع با این روش، روی انیمیشن در کتابخانه LottieFiles کلیک کنید و پیوند را در فایل Lottie JSON کپی کنید:

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

این شما را به پخش کننده وب LottieFiles می برد:

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

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

خط کدی را که با “ شروع می شود کپی کنید” و با ” ختم می شود“. سپس در وردپرس، یک مورد جدید اضافه کنید HTML سفارشی مسدود کردن:

کد HTML را که از LottieFiles کپی کرده اید، قرار دهید و کلیک کنید پیش نویس در گوشه سمت راست بالا:

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

برای انجام این کار، به LottieFiles Web Player برگردید و تگ اسکریپت را که با ” شروع می شود کپی کنید.” و با ” ختم می شود”:

اکنون به وردپرس بروید و افزونه Simple Custom CSS و JS را نصب کنید:

پس از فعال شدن، به داشبورد افزونه بروید و انتخاب کنید کد HTML را اضافه کنید:

می توانید به کد خود عنوانی مانند “Adds Lottie Player” بدهید. سپس تگ اسکریپت را در ویرایشگر قرار داده و کلیک کنید انتشار:

اکنون به صفحه ای که کد HTML خود را در آن جایگذاری کرده اید بازگردید. وقتی به پیش‌نمایش می‌روید، باید انیمیشن Lottie خود را ببینید:

اگر انیمیشن خیلی بزرگ یا خیلی کوچک است، می توانید پارامترهای پیش فرض را در کد HTML که در آن نوشته شده است، تغییر دهید. style= “width: X; ارتفاع: X;”.

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

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

به طور خلاصه، در اینجا سه ​​راه برای اضافه کردن انیمیشن های Lottie به سایت شما وجود دارد:

1. انیمیشن های Lottie را با oEmbed اضافه کنید.
2. با استفاده از پلاگین Lottie for Gutenberg انیمیشن ها را به Lottie اضافه کنید.
3. انیمیشن های Lottie را با HTML و جاوا اسکریپت اضافه کنید.

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