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

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

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

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

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

آموزش متنی

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

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

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

نویسنده

نویسنده

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

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

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