افکت تصاویر وردپرس با Image Hover Effects

امروز با شما هستیم با معرفی و آموزش نحوهٔ استفاده از یکی از بهترین افزونه های افکت گذاری عکس برای وردپرس. این افزونه نام Image Hover Effects است و بدین صورت کار می کند که افکت Hover را بروی عکس‌های سایت شما، که در هر کجا هستند، فعال می‌کند. در ادامه بیشتر راجع به افزونه Image Hover Effects اطلاعات کسب خواهید کرد.

افکت Hover چیست؟

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

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

کار افزونه Image Hover Effects

افزونه Image Hover Effects وردپرس کاری که انجام می‌دهد، روی عکس‌های سایت وردپرس ما، افکت هاور را قرار می‌دهد. این کار از طریق بخش پیشخوان وردپرس انجام شده و بسیار راحت هم هست. بیش از ۴۰ نوع افکت دارد که به دلخواه قادریم هر کدام را که باب میل‌مان است را روی قسمتی از عکس‌های سایت اعمال کنیم.

عکس‌های بخش محصولات، نمونه‌کارها (Portfolios)، Testimonials و گالری‌های تصاویر و اعضای تیم (Team Members) تماماً توسط افزونه Image Hover Effects پشتیبانی می‌شوند.

همچنین امکان گذاشتن لایت باکس یا Lightbox روی عکس‌ها هم توسط همین افزونه فراهم است. پس اگر قصد گذاشتن لایت باکس هم دارید، راه کار کامل همینک پیش روی شماست. برای دیدن نمونه افکت هایی که این افزونه می تواند روی عکس‌های وردپرس شما اعمال کند، به این نشانی بروید. قطعاً شگفت زده خواهید شد. فقط کافی است اشاره گرتان را روی هر عکس نگه دارید.

قابلیت پشتیبانی از توضیحات عکس که با بردن اشاره‌گر روی هر عکس ظاهر می‌گردد هم از دیگر مزایای آن است. به صورت AJAX هم کار می‌کند و حتی افکت‌های پویانمایی هم دارد که کاملاً واکنشگرا هم عمل می‌کند.

آموزش کار با Image Hover Effects

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

شما ابتدا باید یک دسته یا Category ایجاد کنید. سپس داخل این دسته عکس‌های مدنظرتان را وارد کنید. هر عکسی که وارد می‌کنید، شامل تنظیماتی است که در تصویر بالا کاملاً مشخص است. هر عکس باید یک افکت داشته باشد که از فهرست کشویی Select Hover Effect قابلیت انتخاب شدن دارد.

در نهایت تنظیمات را ذخیره می‌کنید و افزونه به شما یک کد کوتاه خواهد داد که باید آن کد کوتاه را در جایی از سایت خود، مثل برگه‌ها، نوشته‌ها، نوار کناری سایت و … قرار دهید.

جمع بندی

این بود از معرفی و آموزش افزونه Image Hover Effects برای گذاشتن افکت روی عکس‌های سایت به صورت گروهی، که برای نمایش محصولات، نمایش کاربران و اعتبارنامه‌های سایت می‌توانستید از آن استفاده کنید. البته ما افزونه‌های دیگری هم برای گذاشتن افکت روی عکس‌های وردپرس داریم که در ویدیوها و آموزش های دیگر سایت خودآموز وردپرس به آنها هم پرداختیم.