مرکز آموزش اولین دیتا

آموزش نحوه ایجاد انیمیشن در وردپرس

0

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

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

ساخت انیمیشن در وردپرس و ایجاد حالت های انیمیشنی در وردپرس

افزونه Animate It برای ساخت انیمیشن وردپرس می باشد این افزونه در مخزن وردپرس به ثبت رسیده و تاکنون موفق به کسب بیش از ۴۰٫۰۰۰ نصب فعال و کسب امتیاز کامل ۵ شده است  که با استفاده از این افزونه میتوانید نسبت به ایجاد حالت های انیمیشنی در وردپرس اقدام کنید. برای ایجاد انیمیشن در وردپرس ابتدا لازم می باشد افزونه animate it را با کلیک بر روی دکمه زیر پس از اینکه به مخزن وردپرس هدایت شدید با استفاده از آموزش نحوه نصب و کار کردن با افزونه ها در وردپرس نصب و فعال کنید.

دانلود افزونه Animate It

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

آموزش نحوه ایجاد انیمیشن در وردپرس

Scroll Offset (in percentage): با استفاده از این گزینه میتوانید تا نمایش انیمیشن در وردپرس را بر اساس درصد اسکرول در صفحه تعیین کنید تا وقتی به این میزان از صفحه اسکرول صورت گرفت انیمیشن شروع به نمایش دادن کند. به عنوان نمونه در اینجا میزان را روی ۷۵ تعیین کردیم که اگر ۷۵ درصد از محتوای صفحه اسکرول کنیم انیمیشن شروع به نمایش دادن میکند.

Enable on Smartphones: با فعال کردن این گزینه میتوانید نمایش انیمیشن وردپرس را در اسمارت‌فون‌ها فعال کنید تا در آنها نیز مانند نسخه دسکتاپ نمایش داده شود.

Enable on Tablets: با استفاده از این گزینه هم درست مشابه قبل میتوانید امکان نمایش انیمیشن در وردپرس را برای تب‌لت ها فراهم کنید.

Hide Horizontal Scrollbar: با فعال کردن این گزینه در صورتی که نمایشگر به صورت افقی در موبایل یا تبلت قرار گرفته باشد نمایش انیمیشن مخفی خواهد شد.

Hide Vertical Scrollbar: با فعال کردن این گزینه در صورتی که نمایشگر به صورت عمودی در موبایل و تبلت قرار گرفته باشد نمایش انیمیشن مخفی خواهد شد.

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

پست های مرتبط

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

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

آموزش نحوه ایجاد انیمیشن در وردپرس

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

آموزش نحوه ایجاد انیمیشن در وردپرس

برای شروع کار ابتدا از سربرگ Entry و در بخش Animation نوع انیمیشن خود را انتخاب کنید . سپس از بخش Dely مدت زمانی که میخواهید انیمیشن شروع به نمایش دادن کند را بر حسب ثانیه تعیین کرده و در بخش Duration هم مدت زمانی که انیمیشن به این حالت نمایش داده میشود را تعیین کنید، با این گزینه در واقع میتوانید سرعت اجرای انیمیشن در وردپرس را تعیین کنید. از بخش Timing هم میتوانید نوع زمان‌سنجی خود را برای انیمیشن ساخته شده وارد کنید. پس از تعیین گزینه‌های موجود بر روی دکمه نارنجی رنگ که با عنوان Animate it قرار دارد کلیک کنید تا در حالت دمو آن را ببینید و اگر که به درستی انیمیشن ساخته شده بود میتوانید به بخش بعدی یعنی تب Exit مراجعه کنید. دقت کنید که این تب برای شروع نمایش انیمیشن در وردپرس می باشد که شما میتوانید بخش ابتدایی برای انیمیشن را از بخش انتهایی آن را با یک طراحی کاملا دا از هم ایجاد کنید.

آموزش نحوه ایجاد انیمیشن در وردپرس

در تب Exit نیز مشابه بخش Entry میتوانید نوع انمیشن در پایان اجرای آن، مدت زمان شروع اجرای انیمیشن پایانی، زمان اجرا و زمان سنجی را مشابه نمونه قبل تعیین کنید. با کلیک بر روی دکمه Animate it نیز می‌توانید انیمیشن زمان پایان را در حالت دمو مشاهده کنید. به عبارت کلی این تب برای پایان دادن به انیمیشن شما خواهد بود.

آموزش نحوه ایجاد انیمیشن در وردپرس

در نهایت برروی تب Options کلیک کنید و تنظیمات مربوط به انیمیشن وردپرس را به دلخواه خود شخصی سازی کنید. در بخش Animation Repeat میتوانید تعداد دفعات تکرار انیمیشن را تعیین کرده و سپس از بخش Keep Element Final State هم تعیین کنید که آخرین تغییرات انیمیشن در مرورگر کاربران ذخیره شوند یا خیر. از قسمت Custom CSS class هم میتوانید کلاس استایل سفارشی و دلخواه خودرا که در تنظیمات افزونه انیمیشن وردپرس در مرحله اول وارد کردید انتخاب کنید تا در آن نمایش داده شود. با استفاده از قسمت Animation on هم میتوانید نوع اجرای انیمیشن را در حالت لود صفحه، کلیک روی محتوای انیمیشن، رفتن نشانگر ماوس روی محتوای انیمیشن و یا اسکرول صفحه تعیین کنید.

در نهایت پس از اینکه انیمیشن خود را نهایی کردید میتوانید برروی دکمه Insert کلیک کنید تا انیمیشن شما در نوشته اضافه شود. حالا متنی که میخوهید  این انیمیشن بر روی آن اعمال شود را بین شورت‌کدهای ساخته شده در محتوای نوشته وارد کنید این محتوا به صورت پیشفرض با عنوان Please add your content in this area اضافه می شود که میتوانید آن را ویرایش کنید تا انیمیشن ساخته شده با متن دلخواه خود ایجاد شود.

آموزش نحوه ایجاد انیمیشن در وردپرس

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

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

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد .