به دلیل اینکه در هدر معمولا اطاعات اصلی برند (مثل لوگو و …) سایتمون قرار می گیره پس طراحی هدر اصولی در صفحات سایت، می تونه در تجربه رابط کاربری تاثیر گذاری چشمگیری رو داشته باشه.
با تغییر رنگ هدر سایت با اسکرول می تونیم کاری بکنیم که رنگ هدر در لحظه ای مشخص تغییر رنگی که لازم هست رو بده و باعث بشه کاربر با توجه به قسمت موردنظر و اطلاعاتی که ما قصد داریم توجه کاربر به اون قسمت ها جذب بشه، در سایت ما بشه با سایت بیشتر تعامل داشته باشه و خوانایی قسمت های مختلف هم بیشتر میشه.
توی آموزش تغییر رنگ هدر سایت با اسکرول از سایت کنترل وب، با استفاده از امکانات فوق العاده صفحه ساز المنتور، کاری می کنیم که با اسکرول صفحه به سمت پایین تغییر رنگ هدر سایت با اسکرول اتفاق بیفته.
قدم اول در تغییر رنگ هدر سایت با اسکرول: تغییر جایگاه بخش زیر هدر
معمولا ما زمانی به تغییر رنگ هدر سایت با اسکرول نیاز داریم که هدری که قصد طراحی اون رو داریم، به صورت شفاف طراحی بشه و رنگ هدر با پس زمینه بخشی که در ابتدا هدر روی اون قرار می گیره هماهنگ باشه. بنابراین در قدم اول باید بعد از اینکه هدر سایتمون رو در بخش موردنظر طراحی کردیم، باید اولین بخش صفحه که قراره همرنگ با رنگ هدر باشه، زیر هدر ما قرار بگیره و به دلیل شفاف بودن هدر، هدر با رنگ این بخش دیده بشه.
بنابراین باید بخش موردنظر رو به اندازه ارتفاع هدر از جایگته اولیه خودش بالاتر بیاریم تا زیر هدر قرار بگیره و چیزی که ما می خواهیم رو بررامون به وجود بیاره.
برای اینکار به قسمت “ویرایش بخش”، بخش موردنظر میریم و از “قسمت پیشرفته”، با تغییر میزان margin بخشمون اون رو بالا میاریم.
قدم دوم در تغییر رنگ هدر سایت با اسکرول: ثابت کردن هدر
هدری هایی که در سایت ها هست می تونن به صورت ثابت(fixed) طراحی بشن. با این کار محتوای داخل هدر سایتمون همیشه جلوی چشم کاربر حضور داره و کاربر به راحتی می تونه به قسمت های مختلف سایتمون دسترسی داشته باشه.
برای اینکه هدر سایتمون رو به صورت ثابت در بیاریم، کافیه که بعد از اینه بخش موردنظر (که هدر درون این بخش طراحی شده) رو انتخاب کردیم، از “قسمت پیشرفته”، قسمت “موشن افکت” رو انتخاب کنیم. در این بخش می تونیم تنظیمات مختلف مربوط به حرکت بخشمون رو تنظیم کنیم.
برای ثابت نگه داشتن هدر گزینه sticky رو روی Top تنظیم می کنیم تا هدرمون در بالای صفحه ثابت بمونه و همراه اسکرول مثل بقیه المان های صفحه اسکرول نشه و به پایین بیاد.
حالا هدرمون به صورت ثابت در جایگاه خودش باقی میمونه. برای اینکه رنگ پس زمینه هدر رو هنگامی که اسکرول میشه تعیین کنیم، از طریق قسمت “استایل” می تونیم رنگ دلخواهی که می حواهیم رو برای هدرمون تنظیم کنیم.
قدم سوم در تغییر رنگ هدر سایت با اسکرول: تغییر رنگ با اسکرول
حالا که هدر سایتمون به صورت ثابت طراحی شد، نوبت به نکته نهایی کار یعنی تغییر رنگ هدر هنگام اسکرول کردن می رسه. برای اینکار در قسمت “استایل” گزینه “scrolling effects” رو فعال می کنیم.
بعد از اینکه این گزینه رو فعال کردیم، از طریق قسمت “Transparency” با تغییر میزان شفافیت هدر کاری می کنیم که تغییر رنگ موردنظر اتفاق بیفته. بنابراین روی این قسمت کلیک می کنیم.
بعد از کلیک، پنجره ای مانند تصویر زیر باز میشه که توی این قسمت می تونیم مشخص کنیم که در کجای صفحه افکت اسکرولی که اعمال کردیم عمل بکنه. اینکار رو با استفاده از تنظیم “viewport” می تونیم تنظیم کنیم.
در این تنظیم دو مقدار وجود داره. با تنطیم مقدار Top می تونیم مشخص کنیم که چه میزان از صفحه از قسمت بالا اسکرول بشه افکت اعمال عمل بکنه. همچنین با تنظیم مقدار Bottom میتونیم مشخص کنیم که مدت زمان رسیدن به این افکت چه مقداری باشه.
بنابراین میتونیم با قرار دادن مقدار Bottom روی مقدار Top مدت زمان اعمال این افکت رو بلافاصه لعد از اسکرول کنیم.
به همین سادگی در چندین مرحله تونستیم بدون استفاده از هیچ افزونه ی جانبی و فقط به کمک امکانات خود صفحه ساز المنتور، این امکان جذاب و کاربردی رو برای سایت خودمون ایجاد کنیم و لذت ببریم!
امیدواریم که با این آموزش تونسته باشین سایتتون رو جذاب تر بکنین و یکی دیگر از نیاز های طراحی سایتتون رو برطرف کرده باشین.
13 پاسخ
سلام وقت بخیر من تمام تغییرات رو انجام میدم برای تغییر رنگ هدر سایت با اسکرول اما روی صفحه اصلیم این عمل انجام نمیشه چیکار کنم ؟ 🙁
سلام دوست عزیز اگر افزونه کش دارید یک بار کش سایت و مرورگر خودتون رو کامل پاک کنید احتمالا مشکل حل میشه
خیلی عالی بود .خداقوت
خوشحالیم که مورد استفاده قرار گرفت دوست عزیز
من تغییرات را انجام دادم کش سایت هم پاک کردم ولی روی صفحه اصلیم تغییرات رو نشون نمیده
با سلام
اول کش سایت و کش مرورگر سیستمتون رو بطور کامل پاک کنید. اگر مشکل حل نشد افزونه کش رو غیرفعال کنید و مطمعن شید که المنتور شما آپدیت باشه. با مرورگرهای دیگه سیستم خودتون هم اون صفحه رو چک کنید.
دمتون گرم مرسی واقعا
سلام ممنون از نظر و نگاه شما
I’m often to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your web site and maintain checking for brand spanking new information.
Thanks my friend
I just like the helpful information you provide in your articles
من تمام این کارارو همون طور که هست انجام دادم فقط تغییرات مرتبط با رو گذاشتم روی تمام صفحه تا اعمال شد اما خود منو هم شفاف شده و با اسکرول ظاهر میشه
سلام دوست عزیز. به خاطر تفاوت توی نسخه های فارسی و انگلیسی المنتور، تنظیمات مرتبط با رنگ رو برعکس انجام بدین