افزونه Amazing Hover Effects- آموزش کار با Amazing Hover Effects

افزونه Amazing Hover Effects

افزونه Amazing Hover Effects در مخزن وردپرس در دسته بندی افزونه کاربردی وردپرس به ثبت رسیده است و تا کنون بیش از 4000 بار دانلود و نصب و فعال سازی داشته است و به کمک آن می توان امکان نمایش تصاویر در وردپرس را به صورت شناور فراهم کرد. این افزونه کاربردی وردپرس توسط Noor-E-Alam طراحی و برنامه نویسی شده است. در این سری از آموزش های رایگان طراحی سایت به آموزش افزونه Amazing Hover Effects می پردازیم.

این افزونه کاربردی وردپرس امکاناتی از جمله:

20 افکت در نسخه رایگان
پشتیبانی از مرورگر های مدرن
تولید و استفاده از کدکوتاه (ShortCode)
تنظیمات آسان و… دارد.

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

آموزش کار با افزونه Amazing Hover Effects

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

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

در قدم اول از تنظیمات می بایستی عنوانی برای نمایش تصاویر در وردپرس انتخاب کنید .

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

در بخش Select Style ما میتوانیم ظاهر تصویر را مشخص کنیم که به صورت دایره باشد یا شکل های هندسی دیگر که به صورت پیش فرض شکل دایره برگزیده شده است.

بخش دوم یعنی Add New Hover Item ما می بایستی تصویر مورد نظر را انتخاب کنیم. پس بی درنگ برای امکان نمایش تصاویر در وردپرس روی دکمه Add New Hover Item کلیک میکنیم.

Hover Image: در این بخش ما میبایستی تصویر مربوطه را آپلود کنیم. با کلیک بر روی این گزینه، به صورت اتوماتیک به بخش رسانه ها منتقل خواهیم شد و بعد از آپلود تصویر یا انتخاب آن روی گزینه گزینش کلیک خواهیم کرد.

Title: در این بخش از افزونه Amazing Hover Effects ما باید عنوانی برای تصویر انتخاب نماییم.

Description: در این بخش میتوانیم متنی به عنوان توضیحاتی درباره تصویر بنویسیم.

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

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

Select Effect: در این بخش میتوانیم از 20 افکت موجود در نسخه رایگان، یکی را به عنوان خروجی برگزینیم.
Animation Direction: در این بخش میتوانیم موقعیت شروع انیمیشن (Hover) را برای نمایش تصاویر در وردپرس مشخص کنیم.
Background Color: در این بخش از تنظیمات افزونه Amazing Hover Effects میتوانیم رنگ پس زمینه ای انتخاب کنیم.
Image Size: در این قسمت میتوانیم اندازه تصویر بارگذاری شده را محدود کنیم.
Column Space: در این قسمت از تنظیمات میتوانیم فاصله ما بین سلول ها را مشخص کنیم.
Row Space: این قسمت از تنظیمات ما میتوانیم فاصله ما بین ردیف ها را مشخص نماییم.

نکته: واحد اندازه گیری بخش های Column Space و Row Space، واحد PX (پیکسل)می باشد.

افزودن نوشته

Remove Border: در این بخش میتوانیم حاشیه دور تصویر را حذف کنیم.
Remove Heading Underline: در این بخش میتوانیم زیر خط عنوان تصویر را غیر فعال نماییم.
Open Link new tab: این بخش از تنظیمات ما میتوانیم انتخاب کنیم که با کلیک بر روی تصویر، لینک مربوطه در زبانه دیگر از مرورگر اجرا شود.
Position: در این بخش میتوانیم موقعیت مکانی تصویر را مشخص کنیم.
Custom Font: از امکانات دیگر افزونه Amazing Hover Effects ، گزینش فونت می باشد .
Heading Font Size: در این بخش میتوانیم نسبت به تغییر اندازه فونت عنوان تصویر در نمایش تصاویر در وردپرس اقدام نماییم.
Heading Color: در این بخش میتوانیم رنگ عنوان تصویر را مشخص کنیم.

سایر تنظیمات

Description Font Size: در این بخش از تنظیمات افزونه Amazing Hover Effects ما میتوانیم اندازه فونت توضیحات تصویر را مشخص کنیم.
Description Color: این بخش از تنظیمات ما را قادر خواهد ساخت که رنگ متن توضیحات را تغییر دهیم.
Move Top: در این بخش میتوانیم انتخاب کنیم که توضیحات و عنوان تصویر جا به جا شوند.
Responsive Options: با انتخاب این گزینه تنظیمات واکنش گرایی فعال خواهد شد.