فهرست مطالب
ریسپانسیو کردن قالب فروشگاهی یکی از مهمترین بخش ها برای تعامل بیشتر کاربران و همچنین سئو است. اگر قالب شما در موبایل یا تبلت به درستی نمایش داده نشود، احتمال از دست دادن کاربر و کاهش فروش بسیار زیاد خواهد بود.
در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور با موضوع ریسپانسیو کردن قالب فروشگاهی در المنتور آشنا میشوید.
ریسپانسیو چیست و چرا برای قالب فروشگاهی مهم است؟
طراحی ریسپانسیو (Responsive Design) یعنی صفحات سایت بهصورت خودکار با اندازه صفحه نمایش دستگاه کاربر هماهنگ شوند.
در سایتهای فروشگاهی اهمیت این موضوع بیشتر است، زیرا:
- بیش از ۷۰٪ کاربران با موبایل خرید میکنند.
- گوگل به سایتهای موبایلفرندلی رتبه بالاتری میدهد.
- ظاهر درست در موبایل باعث افزایش اعتماد و فروش میشود.
مراحل ریسپانسیو کردن قالب فروشگاهی با المنتور
۱. ورود به حالت ریسپانسیو در المنتور
در بالای صفحه ویرایش المنتور روی آیکون موبایل کلیک کنید تا وارد Responsive Mode شوید.
در این حالت میتوانید نمای سایت را در سه دستگاه مختلف بررسی کنید:
- Desktop (دسکتاپ)
- Tablet (تبلت)
- Mobile (موبایل)
هر تغییری که در یک حالت اعمال کنید، فقط روی همان دستگاه اعمال میشود.
پیشنهاد میکنیم برای درک کامل بخش ریسپانسیو المنتور ، حتما قسمت 57 دوره رایگان آموزش المنتور را با عنوان آموزش جامع ریسپانسیو در المنتور را مشاهده کنید.
۲. تنظیم اندازه فونت ها و فاصله ها در موبایل
برای اینکه سایت در موبایل مرتب و خوانا باشد:
- اندازه فونتها را در محدوده ۱۳ تا ۱۶ پیکسل تنظیم کنید.
- فاصله بین المان ها را کم کنید تا طول صفحه زیاد نشود.
- از تصاویر کمحجمتر برای موبایل استفاده کنید.
در تنظیمات هر ویجت المنتور بخشی با نام (واکنشگرا – Responsive) وجود دارد که امکان تعیین نمایش یا عدم نمایش در دستگاههای خاص را میدهد.
۳. مخفی کردن بخشهای غیرضروری در موبایل
در طراحی های مشابه دیجی کالا معمولاً بخش هایی مانند بنرهای تبلیغاتی یا مگامنو در موبایل باید ساده تر نمایش داده شوند.
برای این کار وارد تنظیمات هر کانتینر یا ویجت شوید و از مسیر
پیشرفته ← واکنشگرا
گزینه مخفی در موبایل / تبلت / دسکتاپ را فعال کنید.
۴. استفاده از فلکس باکس برای کنترل چیدمان واکنش گرا
المنتور جدید از ساختار Flexbox Containers پشتیبانی میکند که برای ریسپانسیو بسیار کاربردی است. با فلکسباکس میتوانید:
- ترتیب نمایش المانها را در موبایل تغییر دهید.
- فاصلهها را با واحدهای نسبی مثل
%یاvwتنظیم کنید. - چیدمان المانها را افقی یا عمودی تنظیم کنید.
این روش باعث میشود ظاهر سایت در همه دستگاهها دقیق و منظم بماند.
۵. نکات حرفه ای برای ریسپانسیو کردن قالب فروشگاهی با المنتور
- بهجای پیکسل از واحدهای نسبی مثل
%وemاستفاده کنید. - برای منوی موبایل از منوی همبرگری (Hamburger Menu) استفاده کنید.
- دکمههای خرید را بزرگتر طراحی کنید تا بهراحتی لمس شوند.
- بنرها و اسلایدرها را با عرض 100% و ارتفاع خودکار تنظیم کنید.
- در صفحه محصول، گالری تصاویر را بهصورت اسلایدر لمسی (Touch Slider) تنظیم کنید.
مزایای ریسپانسیو کردن قالب فروشگاهی با المنتور
- افزایش فروش موبایلی و بهبود تجربه خرید کاربران
- رتبه بهتر در نتایج گوگل (Mobile Friendly)
- کاهش نرخ خروج کاربران (Bounce Rate)
- طراحی سریعتر و سادهتر با المنتور بدون نیاز به کدنویسی
- افزایش سرعت سایت با حذف المانهای غیرضروری در موبایل
ترفندهای ریسپانسیو المنتور مخصوص طراحی مشابه دیجیکالا
برای اینکه طراحی شما مثل دیجی کالا حرفهای تر دیده شود:
- از دو هدر مجزا برای دسکتاپ و موبایل استفاده کنید.
- در موبایل، نوار جست و جو را در بالا و منوی اصلی را در پایین قرار دهید.
- در صفحه اصلی، بخش محصولات و اسلایدرها را بهصورت اسکرول افقی لمسی تنظیم کنید.
- در صفحه محصول، توضیحات را با تب یا آکاردئون (Accordion) نمایش دهید.
سوالات متداول درباره ریسپانسیو کردن قالب فروشگاهی با المنتور
۱. چرا ریسپانسیو بودن قالب فروشگاهی در المنتور مهم است؟
زیرا بیشترین کاربران از موبایل وارد سایت میشوند و اگر سایت در موبایل درست نمایش داده نشود، تجربه کاربری و نرخ فروش کاهش مییابد. همچنین گوگل به سایتهای موبایلفرندلی رتبه بهتری میدهد.
۲. چطور میتوانم قالب فروشگاه را در المنتور برای موبایل بهینه کنم؟
در بخش Responsive Mode المنتور وارد حالت موبایل شوید و اندازه فونت، فاصلهها و نمایش المانها را مخصوص موبایل تنظیم کنید.
۳. آیا المنتور پرو ابزار خاصی برای ریسپانسیو کردن دارد؟
بله، المنتور پرو امکاناتی مثل فلکس باکس کانتینرها، واحدهای نسبی، کنترل ترتیب المانها و نمایش اختصاصی برای دستگاه ها را ارائه میدهد که برای ریسپانسیو کردن قالب فروشگاهی عالی است.
۴. چطور میتوانم بعضی بخشها را فقط در دسکتاپ نمایش دهم؟
در تنظیمات هر المان از مسیر Advanced → Responsive گزینه Hide on Mobile یا Hide on Tablet را فعال کنید تا فقط در دسکتاپ نمایش داده شود.
۵. بهترین اندازه فونت برای طراحی موبایل در المنتور چیست؟
بهصورت میانگین بین ۱۳ تا ۱۶ پیکسل بهترین اندازه است تا متنها خوانا و زیبا باشند، بدون نیاز به زوم کردن یا اسکرول افقی.
جمعبندی
در این بخش از دوره، یاد گرفتید که چگونه با چند تنظیم ساده در المنتور، قالب فروشگاهی خود را به صورت حرفه ای ریسپانسیو کنید.
اگر می خواهید طراحی فروشگاه اینترنتی شما در موبایل هم مثل دسکتاپ زیبا و کاربردی باشد، اجرای این نکات و ترفندها ضروری است.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
