آموزش طراحی سایت ریسپانسیو (واکنش گرا) با المنتور

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

شاید عده ای ندانند منظور از کلمه «واکنش گرا» و یا “Responsive” چیست! خوب به زبان ساده به سایتی ریسپانسیو گفته میشود که در تمام دستگاه ها و متناسب با اندازه نمایشگر شان، بصورت کامل نمایان شود؛ یعنی به گونه ای نباشد که در یک دستگاهی کامل نمایش داده شود و در دستگاهی دیگر قسمتی از صفحه نا متناسب نمایش داده شود.

ریسپانسیو بودن سایت از نظر گوگل نیز بسیار با اهمیت بوده و توجه به آن برای هر طراح سایت، الزامی است. 

در ادامه توضیح میدهیم که چگونه میتوان یک سایت ریسپانسیو با المنتور طراحی کرد. 

ویدیو آموزش طراحی سایت ریسپانسیو با المنتور

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

اشتراک گذاری این جلسه از طریق : 

Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on telegram
Telegram
Share on whatsapp
WhatsApp

منظور از سایت ریسپانسیو چیست ؟

خوب همانطور که در ابتدا به طور مختصر بیان شد به سایتی ریسپانسیو گفته می شود که با توجه به سایز مانیتور و یا اندازه صفحه گوشی، واکنش نشان داده و چیدمان ظاهری اش را حفظ کند. معنی لغوی کلمه “Responsive” نیز واکنش گرا می باشد.

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

برای نمایش کامل روی عکس ضربه بزنید

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

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

در این بخش با صفحه ساز المنتور یاد میدهیم چگونه میتوانیم یک صفحه استاندارد طراحی کنیم؛ به صورتی که در تمام دستگاه ها نمایش عالی داشته باشد. سه مبحث مهم در یک ریسپانسیو سازی که به آن ها می پردازیم:

  • ریسپانسیو سازی سایز فونت ها
  • ریسپانسیو سازی عکس ها
  • طراحی جداگانه نسخه موبایل سایت با المنتور

    اما چگونه این کار انجام میگیرد ؟
    همانطور که در آموزش های رسمی المنتور با عنوان “Mobile Responsive Editing” آمده است؛ برای طراحی سایت واکنشگرا باید برای سه حالت موبایل، تبلت و رایانه شخصی به صورت جداگانه سایت را استایل دهی کنیم. در هر بخش که امکان ریسپانسیو سازی و واکنشگرا بودن وجود دارد؛ آیکن دسکتاپ را کنار آن مشاهده خواهید کرد که در ادامه با آن آشنا خواهید شد.

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

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

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

به این منظور ابتدا وارد «تنظیمات سایت» در المنتور میشویم. سپس وارد بخش «فونت های عمومی» شده و روی یکی از فونت ها کلیک میکنیم تا همانند عکس مقابل وارد بخش استایل دهی فونت ها شویم.

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

بخش تنظیم فونت ها المنتور برای ریسپانسیو سازی متن

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

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

معمولا عمده مشکلاتی که در ریسپانسیو سازی عکس بوجود می آید این است که عکس های عمودی نمای بهتری در موبایل ها دارند و این متضاد رایانه های شخصی می باشد. اما برخی ابعاد تصویر میتواند با توجه به قالب سایت شما هم در موبایل و هم در رایانه شخصی، نمای خوبی ارائه دهد.

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

نحوه طراحی سایت نسخه موبایل در المنتور

طراحی جداگانه نسخه موبایل سایت با المنتور

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

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

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

به این ترتیب میتوان برای موبایل و تبلت و انواع سایز نمایشگر ها، یک طراحی ریسپانسیو و واکنش گرا ارائه کرد.

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

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