آموزش جامع ریسپانسیو در المنتور: طراحی واکنش‌گرا برای تمام دستگاه‌ها (موبایل، تبلت، دسکتاپ) (ویدیوی آموزشی)

اگر در حال طراحی سایت با المنتور هستید، احتمالاً با مفهوم ریسپانسیو در المنتور (Responsive) یا واکنش‌گرایی آشنا شده‌اید. ریسپانسیو بودن سایت به این معناست که صفحات وب در تمامی دستگاه‌ها، از کامپیوترهای شخصی گرفته تا موبایل و تبلت، به درستی نمایش داده شوند. این ویژگی نه تنها تجربه کاربری بهتری ارائه می‌دهد، بلکه برای بهبود سئو سایت نیز ضروری است.

امروزه، اکثر بازدیدکنندگان وب‌سایت‌ها از طریق گوشی‌های موبایل وارد سایت می‌شوند، بنابراین اگر وب‌سایت شما در موبایل یا تبلت به درستی نمایش داده نشود، ممکن است مشتریان بالقوه خود را از دست بدهید. در این قسمت از دوره جامع آموزش المنتور ، به بررسی جزئیات ریسپانسیو در المنتور می‌پردازیم و به شما آموزش می‌دهیم چگونه با استفاده از امکانات المنتور، سایت خود را برای تمام دستگاه‌ها بهینه کنید. این آموزش شامل تنظیمات پیشرفته، اضافه کردن نقاط شکست سفارشی و ویرایش المان‌ها برای دستگاه‌های مختلف است.

ریسپانسیو چیست و چرا اهمیت دارد؟

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

• کامپیوترهای شخصی (PC): عرض بالای 1024 پیکسل
• تبلت‌ها: عرض بین 1024 تا 767 پیکسل
• موبایل‌ها: عرض کمتر از 767 پیکسل

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

شروع طراحی ریسپانسیو در المنتور

1. مشاهده سایت در دستگاه‌های مختلف:

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

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

2. ویرایش تنظیمات برای هر دستگاه:

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

• اندازه فونت
• فاصله‌ها (Margin و Padding)
• نحوه نمایش منو (افقی یا کشویی)
• اندازه و چیدمان تصاویر
• مخفی کردن عناصر در دستگاه های خاص
• تغییر چیدمان ستون ها

3. تنظیم نقاط شکست (Breakpoints):

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

• به تنظیمات سایت (Site Settings) بروید.
• از بخش Layout، نقاط تغییر را ویرایش کنید یا نقاط جدید اضافه کنید.
• برای مثال، می‌توانید نقطه‌ای برای تبلت‌های افقی تعریف کنید.
  • دسترسی به نقاط شکست:
    • در نوار ابزار، روی نماد تنظیمات سایت کلیک کنید.
    • از منو، در زیر تنظیمات، طرح‌بندی را انتخاب کنید.
    • در پنل، به قسمت Breakpoints بروید و آن را باز کنید.
    • اکنون می توانید نقاط شکست را ویرایش کنید.
  • افزودن یک نقطه شکست:
    • به منوی نقطه شکست همانطور که در بالا توضیح داده شد دسترسی پیدا کنید.
    • در قسمت نقاط شکست فعال، روی نماد مثبت کلیک کنید.
    • از منوی کشویی، یکی از شش گزینه نقطه شکست را انتخاب کنید، به عنوان مثال، تبلت افقی. شما می توانید تنظیمات پیش فرض هر نقطه شکست را ویرایش کنید.
  • سفارشی کردن یک نقطه شکست:
    • به منوی نقطه شکست همانطور که در بالا توضیح داده شد دسترسی پیدا کنید.
    • در پنل، در کادر متن Breakpoint (px)، یک مقدار نقطه شکست جدید را بر حسب پیکسل وارد کنید.
    • عدد جدیدی که وارد کرده اید، عرض صفحه نمایش را برای آن نقطه شکست تعیین می کند.
    • روی ذخیره تغییرات کلیک کنید.
  • حذف یک نقطه شکست:
    • نکته: شما نمی توانید دو نقطه شکست پیش فرض را حذف کنید.
    • به منوی نقطه شکست همانطور که در بالا توضیح داده شد دسترسی پیدا کنید.
    • روی نماد X کنار نام نقطه شکست کلیک کنید.
    • روی ذخیره تغییرات کلیک کنید.

مثال عملی: تغییر محل قرارگیری آیکن برای موبایل

فرض کنید می‌خواهید محل قرارگیری آیکن را در ویجت آیکن جعبه را فقط برای موبایل عمودی تغییر دهید:

در ویرایشگر المنتور، آیکون موبایل را از نوار ابزار انتخاب کنید.

ویجت عنوان مورد نظر را انتخاب کنید.

به تب “استایل” بروید

محل قرارگیری آیکن و ترازبندی عمودی و چیدمان را تغییر دهید.

تغییرات را ذخیره کنید.

مخفی کردن عناصر برای طراحی واکنشگرا در المنتور

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

چطور عناصر را در المنتور مخفی کنیم؟

1. انتخاب ویجت یا سکشن مورد نظر: در صفحه طراحی، روی عنصری که می‌خواهید مخفی کنید کلیک کنید.
2. رفتن به تنظیمات واکنش‌گرا: به تب Advanced (پیشرفته) بروید و گزینه Responsive (واکنش‌گرا) را انتخاب کنید.
3. مخفی کردن در دستگاه‌های خاص: در بخش تنظیمات واکنش‌گرا، سه گزینه برای Hide On Desktop (مخفی در دسکتاپ)، Hide On Tablet (مخفی در تبلت) و Hide On Mobile (مخفی در موبایل) وجود دارد. تیک گزینه مناسب را بزنید.
4. ذخیره تغییرات: بعد از اعمال تنظیمات، تغییرات را ذخیره کنید و صفحه را در دستگاه‌های مختلف بررسی کنید.

چه زمانی از مخفی کردن عناصر در المنتور استفاده کنیم؟

• حذف شلوغی: اگر محتوای زیادی دارید، می‌توانید بخش‌هایی مثل تصاویر بزرگ یا متن‌های توضیحی را در دستگاه‌های کوچکتر مخفی کنید.
• افزایش سرعت بارگذاری: مخفی کردن عناصر سنگین (مانند ویدئوها یا تصاویر بزرگ) می‌تواند سرعت بارگذاری صفحه در دستگاه‌های موبایل را افزایش دهد.
• تمرکز روی محتوا: با حذف بخش‌های کم‌اهمیت، کاربران در دستگاه‌های کوچک‌تر راحت‌تر می‌توانند روی محتوای اصلی تمرکز کنند.
• طراحی جداگانه برای هر دستگاه: گاهی اوقات ممکن است بخواهید طرحی متفاوت برای دسکتاپ و موبایل ایجاد کنید. با مخفی کردن یک طرح و نمایش دیگری، این کار ممکن می‌شود.

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

نکات کلیدی برای طراحی ریسپانسیو در المنتور

• اولویت با موبایل: طراحی موبایل را در اولویت قرار دهید. گوگل نیز سایت‌هایی که برای موبایل بهینه شده‌اند را در نتایج جستجو بهتر رتبه‌بندی می‌کند (Mobile First).
• تست مداوم: پس از هر تغییر، سایت خود را در دستگاه‌های مختلف بررسی کنید.
• استفاده از واحدهای نسبی: از واحدهایی مانند درصد (%) و em برای اندازه فونت و عرض المان‌ها استفاده کنید تا به طور خودکار با اندازه‌های مختلف صفحه نمایش سازگار شوند.
• بهینه سازی تصاویر: از تصاویر با حجم کم و بهینه شده برای موبایل استفاده کنید.
• مخفی کردن عناصر: در صورت لزوم، برخی از عناصر را در دستگاه‌های کوچکتر مخفی کنید تا سایت شما مرتب تر به نظر برسد.
• تغییر چیدمان: چیدمان المان‌ها را در دستگاه‌های مختلف تغییر دهید. برای مثال، می‌توانید ستون‌ها را در موبایل به صورت عمودی نمایش دهید.
• منوهای ریسپانسیو: مطمئن شوید منوها در موبایل و تبلت به درستی کار می‌کنند.
• بررسی نهایی: پس از اعمال تغییرات، سایت را در دستگاه‌های واقعی تست کنید.
• ویرایش ریسپانسیو از بالا به پایین: تغییرات ایجاد شده در دستگاه‌های بزرگتر بر دستگاه‌های کوچکتر نیز اعمال می‌شود.

نتیجه‌گیری:

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