کارت محصول یکی از مهمترین اجزای صفحات فروشگاهی در وردپرس است که نقش کلیدی در جذب مشتری و افزایش نرخ تبدیل دارد. در این مقاله، به صورت گامبهگام نحوه طراحی یک کارت محصول حرفهای با استفاده از افزونه المنتور (Elementor) را آموزش میدهیم.
پیشنیازها
- وردپرس نصبشده و فعال
- قالب سازگار با المنتور (مانند Hello Elementor یا Astra)
- افزونه Elementor (نسخه رایگان یا پرو)
- افزونه WooCommerce برای ایجاد فروشگاه
گام اول: ایجاد قالب کارت محصول
- وارد پیشخوان وردپرس شوید.
- از منوی “المنتور” به بخش “Templates > Theme Builder” بروید.
- روی “Add New” کلیک کرده و نوع قالب را “Single Product” انتخاب کنید.
- یک نام برای قالب انتخاب کرده و روی “Create Template” کلیک کنید.
گام دوم: طراحی ساختار کارت
در ویرایشگر المنتور:
- از ویجتهای زیر استفاده کنید:
- Product Image برای نمایش تصویر محصول
- Product Title برای عنوان محصول
- Product Price برای قیمت
- Add to Cart برای دکمه افزودن به سبد خرید
- Product Rating برای نمایش امتیاز کاربران
- از ویجت Inner Section برای تقسیمبندی کارت استفاده کنید.
- با استفاده از Spacer و Divider فاصلهگذاری و جداسازی بخشها را انجام دهید.
گام سوم: استایلدهی کارت
- از تب “Style” در هر ویجت برای تنظیم رنگ، فونت، سایه و حاشیه استفاده کنید.
- برای کارت، یک Box Shadow ملایم و Border Radius برای گوشههای گرد اعمال کنید.
- از رنگهای برند فروشگاه برای هماهنگی بصری استفاده کنید.
گام چهارم: واکنشگرایی (Responsive Design)
- از منوی پایین المنتور، حالتهای نمایش موبایل و تبلت را بررسی کنید.
- اندازه فونت، فاصلهها و چینش عناصر را برای هر دستگاه تنظیم کنید.
گام پنجم: انتشار و اختصاص قالب
- روی دکمه “Publish” کلیک کنید.
- در پنجره شرایط نمایش (Display Conditions)، گزینه “All Products” را انتخاب کنید تا قالب برای همه محصولات اعمال شود.
نکات تکمیلی
- برای نمایش چند کارت محصول در صفحه فروشگاه، از ویجت Products یا Archive Products استفاده کنید.
- با استفاده از افزونههای مکمل مانند Elementor Custom Skin میتوانید طراحی کارتهای آرشیو را نیز سفارشیسازی کنید.
آموزش های پیشنهاد شده دیگر:
طراحی دکمه سبد خرید شناور در المنتور — از صفر تا حرفهای
نتیجهگیری
با استفاده از المنتور، میتوانید کارتهای محصولی زیبا، واکنشگرا و متناسب با برند خود طراحی کنید که تجربه کاربری را بهبود میبخشد و فروش را افزایش میدهد. این روش بدون نیاز به کدنویسی، انعطافپذیری بالایی در طراحی صفحات فروشگاهی فراهم میکند.
بدون نظر