آموزش ساخت افکت‌ هاور و بلور برای کارت های محصول در المنتور (ویدیوی آموزشی)

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

چرا از افکت‌ هاور و بلور استفاده کنیم؟

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

مراحل ایجاد افکت هاور و بلور در المنتور

برای ساخت این افکت به افزونه المنتور پرو و مقداری کدنویسی نیاز دارید.

۱. ساخت ساختار کارت‌ها در المنتور

ابتدا یک سکشن ایجاد کنید و داخل آن چند کانتینر قرار دهید. هر کانتینر نمایانگر یک کارت محصول است. برای اعمال افکت‌ها، به هر کارت کلاس CSS سفارشی بدهید؛ در این آموزش از کلاس card-hovers استفاده می‌کنیم.

۲. اضافه کردن کدهای مورد نیاز

کدهای جاوا اسکریپت و CSS به کارت‌هایتان جان می‌بخشند. جاوا اسکریپت حرکت موس را تشخیص می‌دهد و CSS ظاهر افکت‌ها را تعریف می‌کند.

اگر نمی دانید چطور کدهای HTML و جاوا اسکریپت را به المنتور اضافه کنید آموزش افزدن کد HTML و JS به المنتور را ببینید.

۳. عملکرد افکت‌ها چگونه است؟

• وقتی موس روی یک کارت قرار می‌گیرد:
• همان کارت کمی بزرگ‌تر نمایش داده می‌شود.
• سایر کارت‌ها بلور و خاکستری می‌شوند.
• محتوای کارت‌های دیگر کم‌رنگ یا محو می‌شود تا تمرکز روی کارت انتخابی بیشتر شود.
• وقتی موس از روی کارت برداشته می‌شود:
• همه کارت‌ها به حالت اولیه بازمی‌گردند.
• بلور و تغییرات ظاهری حذف می‌شوند.

نکات تکمیلی برای بهبود افکت‌ها

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

جمع‌بندی

با این روش ساده می‌توانید کارت‌های محصولتان را در المنتور جذاب‌تر کنید. این افکت‌ هاور و بلور نه‌تنها ظاهر سایت را حرفه‌ای‌تر می‌کند، بلکه تجربه کاربری را بهبود می‌بخشد و می‌تواند نرخ کلیک و خرید را افزایش دهد. همین حالا امتحان کنید و نتیجه را در سایت خود ببینید!