ساخت صفحه‌ محصول متفاوت برای موبایل و دسکتاپ

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

چرا نمایش متفاوت مهم است؟

داشتن دو نسخه طراحی‌شده برای موبایل و دسکتاپ، مزایای زیر را دارد:

• بهینه‌سازی تجربه کاربری برای هر دستگاه

• افزایش نرخ تبدیل در موبایل با توجه به محدودیت فضا

• امکان حذف یا اضافه کردن بخش‌های خاص برای نمایش بهتر

• نمایش سریع‌تر محتوا در موبایل با کاهش حجم عناصر غیرضروری

مرحله اول: استفاده از قالب سازگار با موبایل

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

• پشتیبانی از نمایش خودکار در سایزهای مختلف صفحه

• امکان ویرایش جداگانه نمایش در موبایل و دسکتاپ

• سازگاری با صفحه‌سازهایی مانند المنتور یا ویژوال کامپوزر

مرحله دوم: طراحی صفحات با المنتور یا صفحه‌ساز

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

برای مثال:

• یک بنر بزرگ برای دسکتاپ طراحی کنید و آن را فقط در حالت دسکتاپ فعال کنید.

• نسخه ساده‌تر همان بنر را برای موبایل طراحی و فقط در موبایل قابل مشاهده قرار دهید.

در المنتور:

1. وارد ویرایش صفحه محصول شوید.

2. روی هر بخش کلیک کرده و به تنظیمات Responsive بروید.

3. با فعال یا غیرفعال کردن نمایش در دستگاه خاص، کنترل نمایش آن را مدیریت کنید.

مرحله سوم: استفاده از کلاس‌های CSS برای کنترل دقیق‌تر

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

برای نمونه:

• بخش‌هایی که می‌خواهید فقط در دسکتاپ نمایش داده شوند را با کلاس اختصاصی مانند .only-desktop مشخص کنید.

• محتوای مخصوص موبایل را داخل یک بلوک با کلاس .only-mobile قرار دهید.

سپس در فایل CSS قالب یا افزونه تنظیمات CSS سفارشی، دستورهای زیر را بنویسید:

شما میتوانید سوالات خود را از طریق ایمیل پشتیبانی – تماس با ما – یا در قسمت نظرات سوال خود را بپرسید.