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

همینک دانلود و تماشا کنید

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

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

افکت تصاویر وردپرس با 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

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

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

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

یک آموزش جذاب دیگه!  ۳ تا افزونه مهم عکس برای هر نوع سایت وردپرس

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

جمع بندی

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آموزش نصب وردپرس روی لوکال هاست

آموزش افزونه Yoast SEO

درباره ®WPTutorial

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

هنوز دنبال هاست خوب می‌گردید؟!

🥇 هاست حرفه‌ای همراه با؛ بسته های رایگان ویدیوهای آموزش وردپرس و طراحی سایت !
کد تخفیف 10 درصد : off10wt

خرید هاست و دامین ارزان

هاست فوق العاده