امروز طبق روال همیشگی وب سایت وردپرسی شو، قصد معرفی و بررسی افزونه ای جدید با عنوان اضافه کردن افکت عکس در وردپرس با افزونه Amazing Hover Effect داریم که شما به واسطه این افزونه از مخزن وردپرس، بتوانید وردپرس سایت خود را از مرز وردپرس عبور دهید.
یکی از جلوه های اساسی و بصری هر وب سایتی، تصاویر موجود در آن وب سایت میباشد. پس بدون شک میتوان گفت که تصاویر نقش مهم و اساسی در ظاهر و امری مفید در زمینه جذب کاربران هر وب سایت میباشد. همچنین شما میتوانید با بهینه سازی تصاویر برای موتور های جستجو ، از این تصاویر بهتر استفاده کنید. بگذارید به توضیح همین افزونه بپردازیم. اگر شما با زبان CSS آشنایی داشته باشید، میدانید که در CSS خاصیتی با عنوان Hover وجود دارد که مسئولیت آن این است زمانی که عملگر ماوس روی متن یا نوشته یا لینک یا لیست یا جدول و یا حتی تصویر رفت، یک سری اقدامات نمایشی را انجام دهد. به عنوان مثال شما یک سند HTML دارید و درون آن یک دکمه ایجاد کردید که یک عرض و ارتفاع مشخصی نیز دارد. حال در CSS میگویید در صورتی که عملگر ماوس کاربر و بازدید کننده روی این دکمه رفت، عرض و ارتفاع آن دچار تغییر و تحول شود.
این یک بستر خوب و مفید برای شماست تا بتوانید با استفاده از افزونه اضافه کردن افکت عکس، تصاویر سایت خود را حرفه ای نشان دهید تا کاربران به قدرت سایت شما ایمان آورند.
افکت عکس در وردپرس با افزونه Amazing Hover Effects
قبل از کار با افزونه اضافه کردن افکت عکس در وردپرس، اطلاعاتی از تاریخچه این افزونه در مخزن وردپرس را ارائه کنم. افزونه اضافه کردن افکت عکس در ر وردپرس توسط کاربری با عنوان کاربری Noor-E-Alam طراحی و برنامه نویسی شده است. اگر شما از انتهای همین مقاله آموزشی روی گزینه صفحه افزونه کلیک کنید و وارد صفحه مربوط به همین افزونه در مخزن بزرگ وردپرس شوید، در میابید که آخرین نسخه در دسترس افزونه اضافه کردن افکت عکس در وردپرس ، نسخه ۶.۶.۷ میباشد و از تاریخ آخرین بروزرسانی افزونه بیش از ۱ هفته میگذرد. همچنین بهتر است بدانید که تا کنون که در حال تحریر این مقاله آموزشی هستیم، این افزونه بیش از ۴۰۰۰ بار دانلود و نصب و فعال سازی شده است و در وردپرس بالاتر از نسخه ۳.۰.۱ قابل اجرا است و با وردپرس نسخه ۴.۹.۱ نیز تست شده است و بدون مشکل کار میکند.
این افزونه دارای امکاناتی شامل موارد زیر میباشد که همانطور که در ابتدای مقاله گفتم، وردپرس شما را از مرز پیش فرض وردپرس عبور می دهد:
- نصب فوق العاده آٰسان
- بهره بری کامل از CSS3
- بیش از ۲۰ افکت زیبا و مختلف
- رابط کاربری فوق العاده حرفه ای و آسان
- سفارشی سازی فعال پست ها
- سفارشی سازی فقط با کشیدن و رها کردن
- کد های کوتاه که شما میتوانید از این افکت ها در همه جای سایت خود استفاده کنید
- پنل تنظیمات شگفت انگیز
- پشتیبانی تصاویر و افکت ها توسط تمامی مرورگر های موجود
- و…
آموزش کار با افزونه اضافه کردن افکت عکس در وردپرس
ابتدا آخرین نسخه از افزونه اضافه کردن افکت عکس در وردپرس را از انتهای همین مقاله آموزشی به صورت کاملا رایگان دانلود و سپس در وردپرس سایت خود نصب و فعال سازی نمایید تا بتوانید به صورت کاملا رایگان با این افزونه کار کنید. دوستان دقت لازم را داشته باشید که افزونه ای که دانلود میکنید، نسخه رایگان میباشد و شما برای دریافت نسخه حرفه ای این افزونه، میبایستی آن را از طراح و برنامه نویس آن خریداری نمایید. همچنین اگر از نحوه نصب و فعال سازی افزونه ها در وردپرس آشنایی ندارید، میتوانید از بخش مقالات آموزشی وردپرس اقدام نمایید.
بعد از نصب و فعال سازی افزونه، گزینه جدیدی در منوی پیشخوان وردپرس با عنوان Hover Effects ایجاد میشود. با شناور کردن ماوس روی این گزینه، زیر منو های آن قابل مشاهده است. با اضافه شدن زیر منو ها، شما کافیست روی گزینه افزودن نوشته کلیک کنید تا وارد بخش افزودن تصاویر افکت دار شوید.
در بخش تنظیمات افزودن تصاویر، گزینه ها و مواردی قابل مشاهده است که در این بخش به توضیح تمامی بخش ها خواهیم پرداخت :
Select Style : در این بخش شما میتوانید نوع نمایش تصاویر را مشخص نمایید. شما میتوانید مشخص کنید تصاویر موجود در وردپرس سایت شما به صورت دایره، مثلث، مستطیل، مربع و… باشد.
Select Effect : در این بخش، شما میتوانید یکی از ۲۰ افکت موجود برای عملیات شناور شدن ماوس روی تصاویر را مشخص نمایید.
Animation Direction : در این بخش، شما میتوانید جهت انیمیشن را مشخص کنید. برای افزودن انیمیشن به تصاویر، میبایستی یکی از افکت های بالا را برگزینید.
Background Color : در این بخش، شما میبایستی رنگ پس زمینه برای تصاویر انتخاب نمایید. این گزینه، در نسخه رایگان فعال نیست و برای فعال سازی آن، میبایستی نسخه پولی آن را خریداری کنید.
Image Size : در این بخش، شما میتوانید یک اندازه ثابت برای تصاویر خود انتخاب نمایید. این گزینه، در نسخه رایگان فعال نیست و برای فعال سازی آن، میبایستی نسخه پولی آن را خریداری کنید.
Column Space : در این بخش، شما میبایستی فاصله هر تصویر از هم را مشخص کنید. تمامی تصاویری که شما انتخاب میکنید، به عنوان یک سلول واقع میشوند و شما با انتخاب این گزینه، فاصله ای میان این سلول ها بر میگزینید.
Row Space : در این بخش، شما میبایستی فاصله بین ردیف هر تصویر را مشخص کنید. همانطور که در بخش بالا گفته شده است، تمامی تصاویری که انتخاب میکنید به صورت سلولی در یک ستون قرار میگیرند. شما با انتخاب این گزینه، فاصله ردیف هر تصویر را از دیگر ردیف ها جدا میکنید و اندازه یکتا میدهید.
Remove Border : با انتخاب این گزینه، border و حاشیه پیش فرض هر تصویری را حذف و مخفی میکنید. این گزینه، در نسخه رایگان فعال نیست و برای فعال سازی آن، میبایستی نسخه پولی آن را خریداری کنید.
Description Font Size : در این بخش، شما میبایستی اندازه فونت توضیحات تصویر را مشخص کنید. برای افزودن توضیحات تصویر و کسب اطلاعات بیشتر میتوانید ویدیو را نیز مشاهده نمایید. این گزینه، در نسخه رایگان فعال نیست و برای فعال سازی آن، میبایستی نسخه پولی آن را خریداری کنید.
Description Color : در این بخش، شما میتوانید رنگ نوشته توضیحات تصویر را مشخص کنید. این گزینه، در نسخه رایگان فعال نیست و برای فعال سازی آن، میبایستی نسخه پولی آن را خریداری کنید.
Move Top : در این بخش، شما میتوانید عنوان تصویر و متن توضیحات تصویر را با هم جایگزین نمایید. این گزینه، در نسخه رایگان فعال نیست و برای فعال سازی آن، میبایستی نسخه پولی آن را خریداری کنید.
Responsive Option : در این بخش، شما میتوانید تنظیمات مربوط به واکنش گرا بودن تصاویر را نیز مشخص نمایید. این گزینه، در نسخه رایگان فعال نیست و برای فعال سازی آن، میبایستی نسخه پولی آن را خریداری کنید.
بعد از انجام همه تنظیمات، روی کد کوتاهی به شما داده میشود و شما میتوانید با قراردادن کد کوتاه در نوشته یا برگه، عملکرد این افزونه را به رخ کاربران خود بکشید.
عالی بود
ممنونم
سلام خوشحالیم که برای شما مفید بوده 🙂