آموزش طراحی سایت

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

طراحی واکنشگرا با ویژوال کامپوزر در وردپرس

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

طراحی ریسپانسیو در وردپرس با افزونه ویژوال کامپوسر

در صفحه­ ساز ویژوال کامپوزر، تنظیمات تغییرات ریسپانسیو (Responsive) فقط برای ستون ­ها وجود دارد؛ یعنی نمی‌توانید تنظیمات ریسپانسیو سایت را بر روی ردیف ها و المان ها اعمال کنید. حالا برای مشاهده امکانات و قابلیت های تنظیمات ریسپانسیو صفحه ساز ویژوال کامپوسر، بر روی آیکون “مداد” در بخش ستون کلیک کنید.

طراحی واکنشگرا با ویژوال کامپوزر
طراحی واکنشگرا با ویژوال کامپوزر

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

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

مخفی کردن المان ها در طراحی واکنشگرا
مخفی کردن المان ها در طراحی واکنشگرا

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

ستون ­بندی در طراحی واکنشگرا 

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

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

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

نمایش ردیف های متفاوت در طراحی واکنشگرا

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

نوشته های مشابه
بازگشت به صفحه دوره آموزش طراحی سایت

‫2 نظرها

  1. سلام. گزینه تنظیمات ریسپانسیو از ویژوال کامپوزر من حذف شده. چظور میتونم دوباره برش گردونم؟

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

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

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

همچنین ببینید
بستن
دکمه بازگشت به بالا