واکنشگرایی یا Responsive Design یکی از مهم‌ترین بخش‌های طراحی یک سایت فروشگاهی است. از آنجا که بخش زیادی از کاربران از طریق موبایل و تبلت وارد سایت می‌شوند، نمایش صحیح صفحات در اندازه‌های مختلف صفحه‌نمایش تأثیر زیادی بر تجربه کاربری و عملکرد سایت دارد.
قالب وودمارت (WoodMart) امکانات کاملی برای طراحی واکنشگرا در اختیار شما قرار می‌دهد و به کمک تنظیمات Responsive می‌توانید ظاهر سایت را برای دسکتاپ، تبلت و موبایل به‌صورت جداگانه کنترل کنید.
در این آموزش از بخش مقالات آموزشی شهر وودمارت، به سراغ تنظیمات واکنشگرایی قالب وودمارت می‌رویم و نحوه طراحی و بهینه‌سازی نسخه موبایل سایت را به‌صورت عملی بررسی می‌کنیم.
تنظیمات واکنشگرایی قالب وودمارت
یکی از مزیت‌های قالب وودمارت، امکان کنترل بسیاری از تنظیمات طراحی در اندازه‌های مختلف صفحه‌نمایش است. به این ترتیب لازم نیست یک طراحی ثابت را برای تمام دستگاه‌ها استفاده کنید و می‌توانید برای هر دستگاه، چیدمان مناسب خود را ایجاد کنید.
در بخش‌های مختلف وودمارت و صفحه‌ساز مورد استفاده، می‌توان تنظیماتی مانند اندازه فونت، فاصله‌ها، عرض و ارتفاع عناصر، نحوه نمایش ستون‌ها و ترتیب المان‌ها را برای نمایشگرهای مختلف تغییر داد.
در این آموزش یاد می‌گیرید چگونه از قابلیت‌های واکنشگرایی وودمارت استفاده کنید تا صفحات سایت در دسکتاپ، تبلت و موبایل ظاهر مناسبی داشته باشند.
همچنین بررسی می‌کنیم که چگونه بدون تغییر دادن طراحی نسخه دسکتاپ، ظاهر یک بخش را فقط برای موبایل یا تبلت تغییر دهیم و در صورت نیاز برخی عناصر را در نسخه موبایل مخفی کنیم.
ریسپانسیو کردن و طراحی نسخه موبایل وودمارت
صرفاً واکنشگرا بودن سایت به این معنی نیست که طراحی موبایل آن به بهترین شکل انجام شده است. در یک سایت فروشگاهی، باید چیدمان صفحات، اندازه عناصر، فاصله بین بخش‌ها، تصاویر، منوها و محتوای قابل مشاهده در موبایل نیز به‌درستی بهینه شوند.
با استفاده از امکانات Responsive قالب وودمارت می‌توانید نسخه موبایل صفحات مختلف سایت را متناسب با فضای محدود نمایشگرهای کوچک‌تر طراحی کنید. برای مثال می‌توان تعداد ستون‌های محصولات را تغییر داد، اندازه نوشته‌ها را کاهش داد، فاصله عناصر را تنظیم کرد یا بخش‌هایی را که در موبایل کاربردی ندارند مخفی کرد.
این تنظیمات به شما کمک می‌کنند تا در کنار داشتن یک نسخه دسکتاپ حرفه‌ای، نسخه موبایل قالب وودمارت نیز ظاهر منظم و مناسبی داشته باشد.
ویدئوی آموزش تنظیمات واکنشگرایی وودمارت
در ویدئوی آموزشی زیر، تنظیمات واکنشگرایی قالب وودمارت و نحوه طراحی نسخه موبایل را به‌صورت عملی و مرحله‌به‌مرحله بررسی می‌کنیم.
اگر می‌خواهید یاد بگیرید چگونه صفحات سایت وودمارت را برای موبایل و تبلت بهینه کنید و کنترل بیشتری روی نمایش عناصر در دستگاه‌های مختلف داشته باشید، این آموزش را تا انتها مشاهده کنید.