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

( )

حق کپی ویدئو

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

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

جلسه سی و هشت

آموزگار :

مهدی جبین پور

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

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

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

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

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

اورجینال

کیفیت

پشتیبانی

آپدیت

مهدی جبین پور

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

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

مهدی جبین پور

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

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

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

( )

طراحی واکنش­گرا یا ریسپانسیو(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;

}}

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

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

184 دیدگاه. Leave new

فهرست