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

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

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

پس هر تنظیماتی که آیکون موبایل یا دسکتاپ یا تبلت در کنار آن وجود داشت به این معنی است که شما می تونید اون تنظیمات رو برای دستگاه های مختلف به شکل متفاوت انجام دهید اما تنظیمات دیگر مثل فونت رو نمی تونید در دستگاه های مختلف متفاوت تنظیم کنید هر چند که نیاز هم نیست.
تنظیم عرض ها برای ریسپانسیو کردن
یکی از نکات بسیار مهمی که در بحث رسپانسیو وجود دارد این است که ما بیشتر با اعداد عرض بازی می کنیم تا بتونیم سایز دلخواه رو پیدا کنیم مثلا اگر شما در یک ردیف 4 تصویر دارید در دسکتاپ 4 تصویر 25 درصد دارید در تبلت 2 تصویر یعنی 2 تصویر 50 درصد و در موبایل 1 تصویر یعنی 1 تصویر 100 درصد این موضوع در بحث طراحی سایت بسیار مهم است و ما در دوره آموزش طراحی سایت این موضوع رو به صورت کامل آموزش دادیم.
البته نکات دیگری نیز برای رسپانسیو کردن وجود دارد مثلا عدم نمایش المان های غیرضروری در موبایل اولویت نمایش المان ها در موبایل و یکسری جزئیات دیگر که معمولاً در صفحه سازها رعایت شده است و برای ریسپانسیو کردن در المنتور نیازی نیست.
خلاصه آموزش ریسپانسیو کردن در المنتور
خب دوستان عزیز در جلسه آموزش ریسپانسیو کردن در المنتور یاد گرفتیم چطور یک صفحه رو از صفر تا صد رسپانسیو کنیم البته بیشتر بخش هایی که با المنتور طراحی می کنیم به صورت خودکار ریسپانسیو است اما برای سفارش سازی بیشتر یاد گرفتیم وارد بخش ریسپانسیو المنتور شویم و بخش هایی که قابلیت تغییر اندازه و سایز دارد رو سفارش سازی کنیم.
درباره اسحاق شفایی
اسحاق شفایی هستم کارشناس مهندسی کامپیوتر و مدیر وبسایت کیت وردپرس. چندین سال است که در حوزه وب فعالیت می کنم و تخصص های اصلیم طراحی سایت و سئو است بعد از یادگیری علاقه زیادی به آموزش دادن دارم.
سایر نوشته های اسحاق شفاییمطالب زیر را حتما مطالعه کنید
افزودن انواع فیلتر در فروشگاه قالب وودمارت
ساخت منو و مگامنو موبایل در قالب وودمارت
کسب درآمد از ترجمه قالب وردپرس
استخدام پشتیبان سایت وردپرس حرفه ای
استخدام وردپرس کار بصورت دورکاری
چرا باید سایت طراحی کنیم؟
10 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
دیدگاهتان را بنویسید لغو پاسخ
ببخشید، برای نوشتن دیدگاه باید وارد بشوید
سلام وقت بخیر
ببخشید یک صفحه اشتباها انتشار داده شده بود. من این صفحه را پاک کردم. ولی بعد دیدم که این صفحه در گوگل اومده و خطای ۴۰۳ میده. برای رفع این مشکل باید چه کرد؟
سلام باید صفحه رو ریدایرکت ۳۰۱ کنید آموزشش داخل سایت هست
سلام وقت بخیر
۱-آیا ابعاد صفحه در حالت موبایل باید برای همه صفحات یکسان باشه؟ ابعاد صفحه برای صفحات مختلف وبسایتم فرق میکنه. مثلا در یک صفحه ۴۸۶ در ۳۶۰ است و در یک صفحه ۵۴۵ در ۳۶۰ هست!
۲- چه ابعادی برای حالت موبایل استاندارد هست؟ ۵۲۸ در ۳۶۰؟
سلام و درود اندازه تمام صفحات باید در موبایل یکسان باشد مثلا حداقل باید عرض ۳۹۰ باشد و ارتفاع نیازی به تنظیم نیست طبق المان هایی که داخل صفحه استفاده کردید خودش تنظیم می شود
سلام وقت بخیر. ممنون میشم به سوال زیر پاسخ دهید
۱- عرض ستون های یک جدول را با کدام گزینه در المنتور تنطیم کنیم؟با گزینه column with در تب advanced از قسمت table header؟
۲- چه کنیم که وقتی عرض ستون های جدول را برای حالت موبایل بهینه میکنیم برای حالت دسکتاپ تغییر نکنه و بالعکس؟ من وقتی عرض ستون های یک جدول ۲ ستونه را برای حالت دسکتاپ تغییر میدهم برای حالت موبایل تغییر میکنه و بهم میریزه و بالعکس.
سلام
۱- در بخش تب طرح بندی و عرض ستون
۲- باید تنظیمات اندازه موبایل رو در حالت موبایل انجام بدید و کامپیوتر رو در کامپیوتر طبق چیزی که توضیح داده شده
با عرض سلام و تشکر
من دقیقا همین کار را انجام میدادم. ولی وقتی عرض ستون جدول را در حالت مویابل تغییر می دادم در حالت دسکتاپ هم تغییر می کرد.
دقت داشته باشید که شما فقط اندازه هایی رو در دستگاه های مختلف می تونید تغییر دهید که در کنار آنها آیکون کامپیوتر یا یکی از دستگاه های تبلت و موبایل نمایش داده شود
با عرض سلام و تشکر
آقای شفایی منظور من هم همین بود. یعنی دقت داشتم که در کنار گزینه مورد نظر در بخش تنظیمات آیا آیکون مبایل یا تبلت یا دسکتاپ وجود دارد یا خیر. شاید این مشکل بخاطر سرعت نت بوده است.
اقای شفایی با تغییر عرض ستون ، عرض ستون های جدول تغییر نکرد بلکه عرض خود ستون موجود در سکشن تغییر کرد. من یک سکشن ۲ ستونه در صفحه ساخته ام که داخل یکی از ستون ها جدول بود .
خب ببینید شما داخل یک سکشن چندین ستون دارید هر کدوم رو انتخاب کردید همون تنظیم میشه احتمالاً ستون رو اشتباه انتخاب کردید