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

( چهارشنبه ، 13 مهر سال 1401 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه پنجاه و پنج

آموزگار :

مهدی جبین پور

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

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

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

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

مهدی جبین پور

مـهـدی جـبین پـور

دانشجوی دکتری تجارت الکترونیک ، امیدوارم بتوانم خدمتگزار خوبی برای مردم کشورم باشم.

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

( چهارشنبه ، 13 مهر سال 1401 )

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

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

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

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

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

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

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

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

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

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

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

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

برای نوشتن دیدگاه باید وارد بشوید.

47 دیدگاه. Leave new

فهرست