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

آموزش طراحی هدر واکنشگرا

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

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

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

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

برای مشاهده صفحات سایت در حالت موبایل، با کلیک راست روی صفحه مرورگر و انتخاب گزینه Inspect، امکاناتی مانند مشاهده کدهای html،css، حالت موبایل و … در اختیار شما قرار داده خواهد شد. برای دیدن سایت در حالت موبایل روی آیکون موبایل  کلیک نمایید. همچنین با تغییر اندازه­ های صفحه نمایش، امکان مشاهده سایت با اندازه­ های مختلف، متناسب با نوع دستگاه تلفن همراه و تبلت نیز وجود دارد.

آموزش طراحی هدر واکنشگرا

آموزش طراحی هدر واکنشگرا

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

آموزش طراحی هدر واکنشگرا

نوشته های مشابه

آنچه می‌خوانید:

طراحی هدر واکنش­گرا

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

طراحی هدر در قالب زفایر در 3 حالت پیش­فرض، تبلت و موبایل امکان­پذیر است. شما می­توانید هدر سایتتان را برای این سه حالت تنظیم کنید.

آموزش طراحی هدر واکنشگرا

مکان قرارگیری المان ­ها با دراگ و دراپ کردن در یک حالت تغییر می­کند و تأثیری روی نمایش المان­ ها در حالت­ های دیگر ندارد. توجه داشته باشید حذف المان در یک حالت، باعث حذف آن المان در حالت­ های دیگر نیز خواهد شد.  این قابلیت هنوز در قالب زفایر وجود ندارد. در صورت نیاز به حذف یک المان مثلاً در حالت موبایل می­بایست از کدهایcss  استفاده کنید.

هدری که در آموزش های قبل برای سایتتان ایجاد کردید را به یاد دارید؟ می­خواهیم این هدر را برای نمایش درست در حالت موبایل تنظیم کنیم. در صورتی­ که از سایتتان Inspect  گرفته و در اندازه موبایل سایت را مشاهده کنید خواهید دید نوار بالا که شامل شماره تلفن، ایمیل و شبکه ­های اجتماعی بود نمایش داده نمی­ شود.

برای فعال کردن نوار بالا ، هدر سایتتان را برای ویرایش باز کرده و بر روی حالت موبایل کلیک و دکمه نمایش ناحیه را روشن کنید.

آموزش طراحی هدر واکنشگرا

گفتیم برای حذف المان­ ها باید از css استفاده کنید.  برای المان مورد نظر یک کلاس تعریف کنید. به طور مثال برای حذف المان ایمیل روی این المان کلیک کرده و ویرایش المان را انتخاب کنید. در تب طراحی یک کلاس برای این المان در نظر بگیرید و تغییرات را ذخیره کنید. ما در این­جا به این المان کلاسی به نام header_none1 اختصاص می­ دهیم.

آموزش طراحی هدر واکنشگرا

کد css

حال باید کد css مورد نظر را بنویسیم. برای این کار مسیر زفایر > تنظیمات پوسته > کد دلخواه را طی کنید.

با استفاده از @media، می­توان به المان ­ها، در هر سایز از صفحه مرورگر استایل­ های مختلف اعمال نمود. در مثال ما برای عدم نمایش المانی با کلاس header_none1  در حالت موبایل با حداکثر اندازه آن 600 پیکسل، از کد زیر استفاده کنید.

@media (max-width:600px){

.header_none1{

display:none !important;

}}

آموزش طراحی هدر واکنشگرا

پس از اعمال تغییرات، ظاهر هدر سایت در حالت موبایل به این شکل است. منوها با ظاهری مناسب و ب ه­درستی نشان داده می­شوند.

آموزش طراحی هدر واکنشگرا

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

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

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

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