ترفندهای طراحی سایت واکنش‌گرا (Responsive) با المنتور

برای طراحی واکنش‌گرا در المنتور، وارد حالت واکنش‌گرا (Responsive Mode) شوید تا پیش‌نمایش تبلت و موبایل را ببینید. سپس، استایل‌ هایی مانند اندازه فونت و فاصله‌گذاری را برای هر دستگاه به صورت جداگانه تنظیم کنید. برای کنترل بیشتر، از قابلیت‌های پیشرفته مانند معکوس کردن ستون‌ها و مخفی کردن عناصر در دستگاه‌های خاص استفاده نمایید.

ورود به حالت واکنش‌گرا و درک جریان کار

این اولین و مهم‌ترین قدم است.

• چگونه؟ در پایین پنل ویجت‌های المنتور، روی آیکون “حالت واکنش‌gرا” (Responsive Mode) که شبیه به یک صفحه نمایش و یک موبایل است، کلیک کنید.
• یک نوار ابزار در بالای صفحه شما ظاهر می‌شود که به شما اجازه می‌دهد بین پیش‌نمایش دسکتاپ، تبلت و موبایل جابجا شوید.
• نکته طلایی: همیشه طراحی را از دسکتاپ شروع کنید، سپس آن را برای تبلت و در نهایت برای موبایل بهینه کنید. تغییراتی که در دسکتاپ ایجاد می‌کنید به نماهای کوچکتر منتقل می‌شوند، اما تغییرات در نمای موبایل، روی دسکتاپ تأثیری ندارد.

تنظیمات اختصاصی برای هر دستگاه

قدرت المنتور در این است که به شما اجازه می‌دهد تقریباً هر مقداری را برای هر دستگاه به صورت جداگانه تنظیم کنید.

• چگونه؟ در کنار اکثر گزینه‌های استایل (مانند اندازه فونت، فاصله داخلی (Padding)، فاصله خارجی (Margin) و ترازبندی (Alignment))، یک آیکون کوچک دستگاه (دسکتاپ، تبلت یا موبایل) وجود دارد.
• مثال: می‌توانید اندازه یک تیتر را در حالت دسکتاپ روی 60px تنظیم کنید. سپس به نمای موبایل بروید، روی آیکون موبایل کنار تنظیمات فونت کلیک کرده و اندازه آن را به 32px تغییر دهید. این تغییر فقط در حالت موبایل اعمال خواهد شد.

معکوس کردن ستون‌ها در موبایل (Reverse Columns)

یک ترفند بسیار کاربردی برای چیدمان‌های دو ستونه.

• مشکل: فرض کنید در دسکتاپ یک سکشن با تصویر در سمت راست و متن در سمت چپ دارید. در موبایل، این ستون‌ها زیر هم قرار می‌گیرند و تصویر بالای متن می‌افتد. اگر بخواهید در موبایل متن بالای تصویر باشد، چه کار باید کرد؟
• راه‌حل:
  1. سکشن مورد نظر را انتخاب کنید.
  2. به تب “پیشرفته” (Advanced) بروید.
  3. بخش “واکنش‌گرا” (Responsive) را باز کنید.
  4. گزینه “معکوس کردن ستون‌ها (موبایل)” (Reverse Columns (Mobile)) را فعال کنید. تمام شد!

مخفی کردن و نمایش دادن عناصر (Hide/Show Elements)

این قابلیت به شما اجازه می‌دهد تا یک تجربه کاربری کاملاً سفارشی برای هر دستگاه بسازید.

• چگونه؟ هر سکشن، ستون یا ویجتی را که انتخاب کنید، در تب “پیشرفته” > “واکنش‌گرا” گزینه‌های زیر را خواهید دید:
  • مخفی در دسکتاپ (Hide On Desktop)
  • مخفی در تبلت (Hide On Tablet)
  • مخفی در موبایل (Hide On Mobile)
• مثال کاربردی: شما می‌توانید یک اسلایدر پیچیده برای دسکتاپ طراحی کنید، آن سکشن را در موبایل مخفی کرده و به جای آن، یک سکشن دیگر با یک تصویر ساده و یک دکمه بسازید که فقط در موبایل نمایش داده می‌شود.

تغییر عرض ستون‌ها برای چیدمان‌های مختلف

به صورت پیش‌فرض، ستون‌ها در موبایل ۱۰۰٪ عرض را اشغال کرده و زیر هم قرار می‌گیرند. اما شما می‌توانید این رفتار را تغییر دهید.

• چگونه؟
  1. ستون مورد نظر را انتخاب کنید.
  2. به تب “چیدمان” (Layout) بروید.
  3. در فیلد “عرض ستون (%)” (Column Width (%))، می‌توانید برای هر نمای دستگاه (دسکتاپ، تبلت، موبایل) یک عرض متفاوت وارد کنید.

• مثال: برای اینکه دو ستون در حالت تبلت به جای زیر هم قرار گرفتن، کنار هم باشند، عرض هر دو را در نمای تبلت روی 50% تنظیم کنید.

بیشتر بدانید: آموزش وردپرس

بهینه‌ سازی تصاویر پس‌زمینه

یک تصویر پس‌زمینه عریض که در دسکتاپ عالی به نظر می‌رسد، ممکن است در موبایل بد به نظر برسد.

• راه‌حل:
  1. سکشن مورد نظر را انتخاب کرده و به تب “استایل” (Style) بروید.
  2. در تنظیمات “پس‌زمینه” (Background)، در حالی که در نمای موبایل هستید، می‌توانید یک تصویر پس‌زمینه کاملاً متفاوت و بهینه‌شده برای موبایل (مثلاً یک تصویر عمودی) آپلود کنید.
  3. همچنین، تنظیمات “موقعیت” (Position) و “اندازه” (Size) تصویر پس‌زمینه را برای هر دستگاه به صورت جداگانه تنظیم کنید (معمولاً Size: Cover بهترین گزینه است).

نتیجه‌ گیری

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