آموزشگاه فطرس

واکنشگرا کردن هدر پویای سایت 2

دسته بندی : آموزش المنتور

واکنشگرا کردن هدر پویای سایت 2

آموزش ویدئویی

آموزش متنی

در این جلسه از آموزش المنتور میریم سراغ ادامه ی طراحی واکنشگرای هدر پویای سایت.
برای آموزش بهتر حتما ویدئوی آموزشی رو دنبال کنید.
در زیر هم توضیحات روند کار رو میتونید مطالعه کنید :
در جلسه ی گذشته ما بخش اول رو طراحی کردیم ، اما یادمون رفت که ما یک فرم جستجو هم داشتیم.
در این جلسه در ابتدا فرم جستجویی که در بخش اول وجود داشت رو تکلیفش رو مشخص می کنیم.
اگر ما این عنصر رو انتخاب کنیم و فاصله هاشو صفر کنیم ، این عنصر نمایش داده میشه.
اینکه ما در ستون سمت چپ دو عنصر پشت سرهم داشته باشم و هر کدومشون در یک سطر قرار بگیرن در حالت موبایل اصلا جالب نیست.
پس میایم ابزارک فرم جستجوی خودمون رو که در حالت دسکتاپ درستش کردیم رو از طریق بخش پیشرفته و بعد واکنشگرا در حالت موبایل مخفی می کنیم ، مطابق با تصویر زیر :

 

آموزش المنتور-واکنشگرا کردن هدر پویای سایت

 

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

نویسنده

نویسنده

میلاد پورزارعی دانش آموخته ی ممتاز رشته ی مهندسی نرم افزار ، طراح سایت ، متخصص سئو ، استراتژیست بازاریابی و فروش

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

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