آموزش تنظیمات ریسپانسیو در المنتور

آموزش تنظیمات ریسپانسیو در المنتور
Share on twitter
Share on facebook
Share on telegram
Share on whatsapp

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

نحوه نمایش و تنظیمات ریسپانسیو در المنتور

بسیاری از ویژگی های قابل ویرایش در المنتور دارای تنظیماتی برای موبایل،تبلت و دسکتاپ هستند. بیشترین تنظیمات مورد استفاده عناصر اندازه متن – Text size، حاشیه – Margin ، پدینگ – Padding هستند.

  1. برای دیدن نحوه نمایش صفحه در دستگاه های دیگر و تنظیم آن روی آیکون حالت دکستاپ المنتور کلیک کنید.
  2.  روی آیکون حالت های نمایش المنتور دستگاهی که شما می خواهید تنظیماتش را ویرایش کنید کلیک کنید. حتی می توان تصاویر پس زمینه را به صورت جداگانه بر اساس هر دستگاهی تنظیم کرد.
نحوه نمایش و تنظیمات ریسپانسیو در المنتور

تصاویر پس زمینه ریسپانسیو در المنتور

تصاویر پس زمینه در المنتور به صورت خودکار نسبت به دستگاه مورد نظر واکنش می دهند. اما شما برای تنظیم بیشتر می توانید آن را برای هر دستگاهی تغییر بدهید.

تصاویر پس زمینه ریسپانسیو در المنتور

کنترل کردن تصاویر پس زمینه ریسپانسیو در المنتور


  1. تصویر پس زمینه – Background Image: شما می توانید اگر نیاز شد یک تصویر پس زمینه متفاوت برای هر دستگاهی انتخاب کنید بنابراین شما دو انتخاب، قرار دادن یک تصویر با اندازه متغییر و یا تصویر کاملاً متفاوت را خواهید داشت.
  2. تنظیمات نمایش تصاویر پس زمینه – Background Image Display Options : شما می توانید موقعیت – Position تصویر،پیوست – Attachment، تکرار- Repeat را برای هر دستگاهی انتخاب کنید.بنابراین شما کنترل بیشتری خواهید داشت که کدام ناحیه از تصویر در دستگاه های مختلف نمایش داده شود.

قابلیت دیده شدن


شما می توانید هر بخش را بر اساس دستگاه کاربر، نمایش یا مخفی کنید.

  1. برید به بخش تنظیمات – Section Setting  > پیشرفته – Advanced
  2. در قسمت پایین واکنش گرا – Responsive > دید – Visibility 3- سه گزینه برای مخفی کردن در دسکتاپ، مخفی کردن در تبلت، مخفی کردن در موبایل را مشاهده کنید که هر کدام را که نیاز داشتید را انتخاب کنید.

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

قابلیت دیده شدن طراحی صفحات ریسپانسیو در المنتور

تغییر دادن نقطه شکست حالت ریسپانسیو در المنتور


می توانید مقادیر نقشه شکست – Breakpoints صفحات  ریسپانسیو در المنتور را با توجه به موبایل و تلفن همراه تنظیم کنید.

  1.  در پیشخوان وردپرس بروید به المنتور> تنظیمات – Settings >تب استایل – Style > و در این قسمت نقطه شکست –Breakpoints را برای موبایل یا تبلت تنظیم کنید.
  2.  تغییرات را ذخیره کنید
  3.  بروید به قسمت المنتور > ابزارها – Tools > تب کلی – General >تولید مجدد فایل CSS یا Regenerate CSS کلیک کنید روی دکمه تولید مجدد – Regenerate Files کلیک نمایید.

پیش نمایش دستگاه


با کلیک کردن بر روی هر کدام از آیکون های موبایل، تبلت و دسکتاپ در پایین صفحه پانل بین پیش نمایش صفحه ها جابه جا شوید.

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

 


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

پس از کلیک کردن روی هر بخشی و رفتن به قسمت پیشرفته – Advanced > حاشیه – Border در پنل کناری می توان تنظیمات حاشیه های ریسپانسیو در المنتور را برای هر دستگاهی انجام داد. این بخش شامل گزینه هایی به شرح زیر است:

تنظیمات حاشیه های ریسپانسیو در المنتور

نوع کادر دور – Border Type: در این قسمت می توانید مشخص کنید که حاشیه بخش مورد نظر به چه شکلی باشد.

عرض حاشیه – Border Width : عرض حاشیه هر بخش را با توجه به دستگاه نمایش دهنده می توان تغییر داد.

گوشه های مدور – Border Radius : برای گرد کردن گوشه های حاشیه با توجه به دستگاه نمایش دهنده از این قسمت می توانید استفاده کنید.

سایه کادر – Box shadow: با استفاده از این قسمت می توان رنگ، موقعیت، محوشدگی و … سایه کادر را تغییر داد.

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
Share on facebook

دریافت مقالات ناب

مقالات شبیه مقالات بالا رو هر هفته میفرستیم به ایمیلتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سوالی داری؟ چت با واتساپ