ساده ترین راه برای متحرک سازی وب سایت های وردپرس: BeBuilder + Lottie

این مقاله حمایت شده توسط شرکای محتوای ما، BAW Media ایجاد شده است. از شما برای حمایت از شرکای که SitePoint را ممکن می کنند، سپاسگزاریم.

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

طراحان وب در حال حاضر راه‌های زیادی برای متحرک کردن وب‌سایت‌های وردپرس دارند، مانند انیمیشن‌های CSS و GIFهای تعبیه‌شده. پس چرا BeTheme یک ویژگی جدید انیمیشن Lottie را در BeBuilder خود اضافه کرده است؟

ایجاد انیمیشن با Lottie نسبت به روش های دیگر مزایای زیادی دارد. در این پست، می‌خواهیم بررسی کنیم که چرا Lottie بهترین راه برای ایجاد انیمیشن‌های جذاب و جذاب امروزه و نحوه ادغام آن با BeBuilder و BeBuilder آن را حتی بیشتر در دسترس کاربران وردپرس قرار داده است. 10 بهترین روش برای طراحی وب سایت واکنش گرا

چرا انیمیشن Lottie بهترین راه برای متحرک سازی وب سایت های وردپرس است

Lottie یکی از جدیدترین و موثرترین روش ها برای ایجاد انیمیشن برای سایت های وردپرسی شما است. دقیقا چه چیزی آن را بهتر از سایر روش های انیمیشن سازی می کند؟ بیایید نگاهی به مزایای اصلی انیمیشن Lottie بیندازیم.

1. برای کار با Lottie

به کد نیاز نیست

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

برای شروع، لازم نیست بدانید که چگونه از Adobe After Effects برای ایجاد یا ویرایش فایل‌های انیمیشن Lottie استفاده کنید. می‌توانید انیمیشن‌های Lottie را از منابعی مانند LottieFiles و IconScout.

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

 

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

برای ایجاد انیمیشن های پیشرفته برای وردپرس نیازی به یادگیری HTML، CSS یا After Effects نیست. سازنده صفحه بدون کد BeBuilder و ویژگی انیمیشن Lottie ایجاد انیمیشن با استفاده از ابزارهای بصری برای طراحان و غیر طراحان به طور یکسان آسان می شود.

2. سفارشی سازی انیمیشن های Lottie آسان است

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

اگر Lottie خود را از LottieFiles دریافت می‌کنید، با ویرایشگری همراه است که به شما امکان می‌دهد:

• سرعت انیمیشن
• رنگ پس زمینه
• رنگ های لایه
• تعامل

 

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

علاوه بر این، می‌توانید از تنظیمات BeBuilder برای سفارشی کردن نحوه عملکرد انیمیشن Lottie استفاده کنید. به عنوان مثال، می توانید تنظیمات مربوط به:

را تنظیم کنید

• محرک انیمیشن
• نقطه شروع و پایان
• جهت جلو یا عقب
• تراز
• پس زمینه
• مشاهده پاسخگو

ویرایش Lottie به اندازه سایر عناصر UI در BeTheme آسان شده است.

3. Lottie برای عملکرد بهتر است

گاهی اوقات وقتی وب‌سایت‌ها را متحرک می‌کنیم، مجبوریم این کار را به قیمت چیز دیگری انجام دهیم.

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

Lottie یک فایل انیمیشن مبتنی بر JSON است. این بسیار شبیه SVG است زیرا هر دو فرمت فایل برداری هستند – از نظر اندازه و وزن کوچک و در عین حال کاملاً مقیاس پذیر هستند. این باعث می شود Lottie فرمت فایل انیمیشن ایده آل برای عملکرد باشد.

بیایید به یک مثال سریع نگاه کنیم. این یک دکمه “دانلود” JPG است که در یک وب سایت منابع رایگان موجود است.

 

یک دکمه طراحی مشابه را می‌توانید در LottieFiles پیدا کنید، فقط متحرک است.

 

تفاوت بین این دو فایل فراتر از زیبایی شناسی است. JPG از Vecteezy 57 کیلوبایت است. JSON از LottieFiles 15 کیلوبایت است.

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

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

4. Lottie کاملاً پاسخگو است

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

فایل‌های Lottie مبتنی بر برداری هستند، به این معنی که به هر اندازه صفحه نمایش مقیاس می‌شوند. برای مثال، فرض کنید یک walking taco Lottie را در صفحه اصلی BeFoodTruck 2.

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

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

5. ترکیب Lottie/BeTheme تجربه کاربر را ارتقا می دهد

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

بیایید از بلوک دعوت به اقدام در BeCarRental3 وب سایت به عنوان مثال.

 

یک نماد ماشین/صورت لبخند سبز در کنار عبارت «شرکت دوستدار مشتری»، درست بالای دکمه تماس برای اقدام وجود دارد. در حالی که این علامت اعتماد چشم نواز است، برخی از بازدیدکنندگان ممکن است خیلی سریع از کل بخش ثابت عبور کنند تا متوجه آن شوند.

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

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

در اینجا می بینیم که وقتی بیمه خودرو انیمیشن صفحه بارگیری را ارائه می دهد چه اتفاقی می افتد. > برای بلوک دعوت به اقدام ما تغییر کاربری داده شده است.

به‌جای اینکه Lottie روی یک حلقه بازی کند، انیمیشن کند می‌شود و همگام با حرکات بازدیدکنندگان حرکت می‌کند. ما توانستیم این کار را با تغییر یک تنظیم در BeBuilder انجام دهیم و Trigger را از پیش‌فرض به on scroll به‌روزرسانی کنیم.

در حالی که دکمه بدون تغییر باقی می ماند، افزودن حرکت به این بخش – و مستقیماً بالای دکمه – به افزایش تعامل کمک می کند.

انیمیشن های Lottie تنها یک دلیل دیگر برای تبدیل BeTheme به تم وردپرس شما هستند

Lottie یک تغییر جدی بازی در مورد انیمیشن وب سایت است. و این به تنهایی است.

وقتی Lottie را با BeTheme و BeBuilder، شما تمام ابزارهایی را که برای گرفتن طرح های خود نیاز دارید — و تجربیات کاربر خواهید داشت. – به سطح بعدی. علاوه بر این، نیازی به افزایش هزینه، زمان راه اندازی یا تلاش لازم برای متحرک سازی وب سایت های BeTheme خود نخواهید داشت. همه چیز تا حد امکان بصری و بدون درز برای شما ساخته شده است.

منبع: https://iltayco.ir/10-بهترین-روش-برای-طراحی-وب-سایت-واکنش-گر/