آموزش طراحی ریسپانسیو صفحه ساز

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

طراحی ریسپانسیو صفحه ­ساز

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

در ادامه تعدادی از تغییرات که در دستگاه­ های مختلف نمایش در طراحی واکنش­گرای سایت کاربرد دارند، توضیح می ­دهیم.

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

برای عدم نمایش بعضی المان ­ها در دستگاه­ های مختلف (مثلاً پنهان کردن المان تصویر در حالت موبایل ) ، ستون مربوط به المان را در حالت ویرایش باز کنید . در صفحه “ستون تنظیمات”، سربرگ “تنظیمات ریسپانسیو”، گزینه پنهان کردن در دستگاه های همراه را برای دستگاه موردنظرتان انتخاب کنید.

پس از ذخیره تغییرات، درصورتی­که سایت را در دستگاه موردنظر(برای مثال موبایل) مشاهده کنید، المانی که در طراحی ریسپانسیو پنهان کرده­ اید نمایش داده نخواهد شد.

ستون ­بندی در طراحی ریسپانسیو

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

برای مثال، اگر بخواهید المان­ ها در دستگاه موبایل در دو ستون کنار هم نمایش داده شوند، برای هر یک از ستون­ ها در صفحه ستون تنظیمات، عرض ستون را برای نمایش در دستگاه موبایل روی ½ قرار دهید.

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

یکی دیگر از طراحی­ های کاربردی ریسپانسیو، متفاوت بودن نمایش ردیف­ در دستگاه­ های مختلف می­باشد. برای تنظیم این مورد، در صفحه ­ساز ویژوال کامپوزر دو ردیف طراحی کرده و ستون­ های ردیف را در دستگاه­ های متفاوت پنهان کنید. ( ستون­ های یک ردیف را برای یکی دستگاه و ستون­ های ردیف دیگر را در دستگاه دیگر پنهان نمایید). با این کار هر دستگاه ردیف مخصوص خود را نمایش می ­دهد.