طراحی واکنشگرا یا ریسپانسیو(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;
}}
پس از اعمال تغییرات، ظاهر هدر سایت در حالت موبایل به این شکل است. منوها با ظاهری مناسب و ب هدرستی نشان داده میشوند.
