طراحی کارت با هاور تعاملی در المنتور: نمایش و مخفی شدن جزئیات هنگام قرارگیری ماوس

تا حالا شده تو یه سایت بچرخی و یهو چشم‌ات بیفته به یه کارت خوشگل که وقتی ماوس رو روش می‌بری، یهویی جزئیاتش ظاهر بشن و ذوق زده بشی؟ 😍
اون حس خفنِ “وااای این چی بود؟!” دقیقاً کاریه که این هاور تعاملی می‌کنه!
تو این آموزش قراره خودمون همچین افکتی رو با المنتور بسازیم، اونم نه یه چیزی معمولی، بلکه یه افکت چشم‌گیر که سایتت رو از این‌رو به اون‌رو می‌کنه! ✨

با همین حرکت کوچیک، کلی توجه رو به سمت سایتت جلب میکنی. برای شروع آموزش آماده‌ای؟! پس بزن بریم تو کارششششش👇

ابزارهای لازم برای شروع: المنتور و کمی CSS 🛠️

برای اینکه این جادوی هاور تعاملی رو خلق کنی، فقط به دو تا چیز نیاز داری که همین الانم احتمالاً دم دستت هستن:

1. افزونه المنتور (Elementor): نسخه رایگانش و پرو، جفتشون برای کارمون لازمن. اگه نسخه پرو رو نداری، می‌تونی از طریق مخزن افزونه‌های رایا وردپرس رایگان دانلود و نصب کنیش.
2. کمی کد CSS: اصلاً نگران نباش! می‌دونم اسم “کد” شاید یه کم ترسناک به نظر برسه، ولی قول میدم اینقدر ساده و قدم به قدم بهت میگم چیکار کنی که حتی اگه تا حالا یه خط کد هم نزدی، بدون هیچ مشکلی از پسش برمیای! 😉

طراحی کارت با هاور تعاملی در المنتور 🤩

خب، وقتشه بریم سراغ اصل ماجرا و دست به کار بشیم! آماده‌ای؟ این شکلی قراره پیش بریم:

مرحله اول: چیدمان اصلی کارت با المنتور 🏗️

اولین قدم اینه که ساختار اصلی کارتمون رو تو المنتور بچینیم. خیلی ساده‌ست: وسط برگه‌ ات روی علامت ➕ بزن تا یه کانتینر فلکس‌ باکس به صفحه‌ات اضافه بشه.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

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

مطالعه

با این افکت خفن، عناوین سایت خود را جذاب کنید

مطالعه

جادوی طراحی: ساخت کارت‌ با گوشه درخشان در المنتور

مطالعه

نکته مهم: عرض کانتینرت رو جعبه‌ای (Boxed) و ارتفاعش رو بر حسب vh روی عدد 100 تنظیم کن. بعدش، حواست باشه که کانتینر رو به صورت وسط تراز (Center) کنی تا همه چی مرتب و شیک باشه.

نکته مهم: برای اینکه کارت‌هایی که می‌سازی حسابی به چشم بیاد و بدرخشه، لازمه یه پس‌زمینه تیره و کنتراست بالا داشته باشیم. برای این کار: به تب استایل کانتینر برو و از قسمت پس‌زمینه (Background)، رنگ بکگراند رو به #2C2C2C تغییر بده. (درست مثل تصویر پایین 👇)

مرحله دوم: ساخت کارت ها

حالا، یه کانتینر جدید داخل همون کانتینر اصلیت که ساختی اضافه کن. این کانتینر قراره چهارچوب کلی کارتمون باشه. عرضش رو تمام عرض (Full Width) و روی 30% تنظیم کن.

برای اینکه کارمون مرتب باشه و بعداً گیج نشیم، بهتره اسم کانتینری که اضافه کردیم رو تغییر بدیم. از نوار ابزار بالای صفحه، روی آیکون “ساختار” (Navigator) کلیک کن. این بخش تمام المان‌های صفحه‌ات رو نشون میده. حالا، کانتینری رو که همین الان اضافه کردی، پیدا کن (معمولاً اسمش “Container” هست). روش دوبار کلیک کن و اسمش رو به “card” تغییر بده. (درست مثل تصویر زیر)✨

حالا دو تا کانتینر دیگه به صورت زیر هم و داخل همون کانتینری که اسمشو به card تغییرنام دادی، اضافه کن. (درست عین تصویر زیر)

حالا نوبت تغییرنامه! اسم کانتینر اولی رو تغییر بده به box box1 و دومی رو به box box2 . اینا قراره نقش‌های متفاوتی رو بازی کنن:

box box2: این همون بخش مخفی‌مونه که قراره با هاور ماوس نمایش داده بشه. یعنی وقتی کاربر ماوس رو روی کارتمون نگه داشت، جزئیات بیشتر و اطلاعات تکمیلی اینجا ظاهر میشن. 🤫

box box1: این همون بخش جذابیه که در نگاه اول به کاربر نشون داده میشه. یعنی وقتی ماوس هنوز روی کارتمون نیست، این محتوا تو دید کاربره و اطلاعات کلی رو بهش میده.

حالا از منوی ساختار (Navigator) در نوار بالای صفحه المنتور، روی کانتینر box box1 بزن تا انتخاب بشه. بعدش، یه کانتینر دیگه داخلش اضافه کن و اسمش رو به Content تغییر بده. این همونجاییه که محتوای اولیه کارتمون رو قرار میدیم.

حالا برو به تب استایل (Style) کانتینر Content و رنگ پس‌زمینه‌اش رو سفید ⚪ قرار بده.

وقتشه محتوای اولیه کارتمون رو بچینیم! من برای این قسمت (همون بخشی که اولش به کاربر نشون داده میشه) دو المان تصویر و تیتر رو در نظر گرفتم. میتونی عنوان کارتت رو با ابزارک تیتر و عکست رو با ابزارک تصویر داخل کانتینر Content اضافه کنی.

متن و تصویری که اضافه کردی رو متناسب با سایتت تغییر بده. هر عکس و متنی که دوست داری و با کارتت همخونی داره، بذار.

یه نکته باحال: اگه دوست داری تصویرت داینامیک دریافت بشه، می‌تونی از قسمت “برچسب‌های پویا” (Dynamic Tags) ویجت تصویر و سربرگ، نوع برچسب پویا رو “تصویر شاخص پست یا محصول” در نظر بگیری، یا حتی عنوان محصول یا نوشته رو برای تیترت انتخاب کنی. اینطوری، کارتات خودشون با محتوای سایتت آپدیت میشن و نیازی نیست دونه‌دونه تغییرشون بدی! 🪄

• حالا برو به تب پیشرفته (Advanced) ویجت تصویرت. یه پدینگ یا فاصله داخلی ۱۵ پیکسلی 📏 رو براش در نظر بگیر. این کار باعث میشه تصویرت قشنگ‌تر دیده بشه و فاصله مناسبی از گوشه های کارت بگیره😊

خب، حالا نوبت می‌رسه به کانتینر box box2 درست مثل کاری که با box box1 کردیم، داخل این کانتینر هم یه کانتینر دیگه اضافه کن و اسمش رو به Content تغییر بده. این Content قراره خونه‌ی محتوای مخفی ما باشه. 🤫

من برای این بخش، یعنی همون قسمتی که قراره بعد از هاور ظاهر بشه، دو تا المان ویرایشگر متن و دکمه رو در نظر گرفتم. این دو تا ویجت رو داخل کانتینر Content که الان ساختی، اضافه کن. اینجا می‌تونی توضیحات بیشتری بدی یا یه دکمه برای “بیشتر بخوانید” یا “خرید” بذاری.

حالا که این دو تا ویجت رو اضافه کردی، وقتشه متن‌هاشون رو تغییر بدی و استایلشون رو عوض کنی. این قسمت دیگه کاملاً سلیقه‌ایه و به خودت بستگی داره! 🎨 این گوی و این میدان، برو یه طرحی بزن که چشم همه رو بگیره! 😉

مرحله سوم: اختصاص کلاس به المان ها

حالا وقتشه به هر کدوم از این المان‌ها، کلاس‌های مخصوص خودشون رو بدیم تا کدهای CSS بتونن تشخیص بدن که هر قسمت باید چطوری رفتار کنه. این کلاس‌ها رو دقیقاً با همین اسمی که بهت میگم، به المان مربوطه‌اش اختصاص بده:

• container: به سکشن اصلی که همه چیز رو توش ساختی، این کلاس رو بده.
• card: به سکشن داخلی که داخل container قرار دادی و نقش کارت اصلی رو داره، این کلاس رو اختصاص بده.
• box box1: به کانتینر اولی که داخل card هست و قراره محتوای قابل مشاهده رو نشون بده، این کلاس رو بده.
• box box2: به کانتینر دومی که داخل card هست و محتوای مخفی رو نگه می‌داره، این کلاس رو بده.
• به کانتینر داخلی که در box box1 ساختی (یعنی همون content)، کلاس‌های content, hop رو اختصاص بده. دقیقاً همین‌طوری که من نوشتم، با کاما بینشون فاصله بده.
• و برای کانتینر داخلی که در box box2 ساختی (یعنی همون Content)، کلاس vop رو اختصاص بده.

برای اینکه این کلاس‌ها رو به المان‌های مدنظرت اختصاص بدی، کافیه روی هر المان کلیک کنی، به تب پیشرفته (Advanced) بری، و در بخش کلاس‌های CSS (CSS Classes)، کلاس مورد نظرت رو دقیقاً همونطور که گفتم داخل فیلد مربوطه بنویسی. به همین راحتی! 😉

ساختار کلی چیزی که تا الان ساختیم به صورت عکس زیر هست!

مرحله چهارم: افزودن کد CSS برای نمایش و پنهان شدن توضیحات در حالت هاور

خب، بالاخره رسیدیم به بخش هیجان‌انگیز ماجرا! 🎉 حالا باید با کدهای CSS بگیم که هر کدوم از این کارت ها چطوری رفتار کنن و چطوری حرکت کنن.

برای اینکه کدها رو اضافه کنی، روی کانتینر اصلی یعنی همون container کلیک کن. بعد برو به تب پیشرفته (Advanced)، تا پایین این بخش اسکرول کن و در بخش CSS سفارشی (Custom CSS)، کدهای زیر رو قرار بده: 👇

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

اولین کارتت تکمیل شد، کافیه روش کلیک راست کنی و گزینه “تکثیر” (Duplicate) رو بزنی. این کارو دو بار انجام بده تا یه سکشن با ۳ تا کارت داشته باشی. بعدش، محتوا و تصویر کارت‌ها رو به دلخواه تغییر بده. اینطوری سرعت عمل طراحیت خیلی بالاتر می‌ره، به جای اینکه بخوای یه کارت دیگه رو از نو بسازی!

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

اگه سوالی داری، یا حتی یه ایده باحال برای کارت‌های تعاملی داری، حتماً تو کامنت‌ها بهم بگو. خیلی خوشحال میشم نظراتت رو بخونم! 👇

فایل نهایی درون‌ریز المنتور رو هم برات پایین می‌ذارم تا اگه جایی گیر کردی، بتونی ازش استفاده کنی. دانلودش کن و حالشو ببر! 📥✨

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝