تغییر رنگ هدر سایت با اسکرول

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

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

 

رنگ اولیه هدر در تغییر رنگ هدر سایت با اسکرول

 

رنگ تغییر یافته هدر بعد از اسکرول

قدم اول در  تغییر رنگ هدر سایت با اسکرول: تغییر جایگاه بخش زیر هدر

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

 

تصویر اول تغییر رنگ هدر سایت با اسکرول | کنترل وب

 

قدم دوم در  تغییر رنگ هدر سایت با اسکرول: ثابت کردن هدر

هدری هایی که در سایت ها هست می تونن به صورت ثابت(fixed) طراحی بشن. با این کار محتوای داخل هدر سایتمون همیشه جلوی چشم کاربر حضور داره و کاربر به راحتی می تونه به قسمت های مختلف سایتمون دسترسی داشته باشه.

برای اینکه هدر سایتمون رو به صورت ثابت در بیاریم، کافیه که بعد از اینه بخش موردنظر (که هدر درون این بخش طراحی شده) رو انتخاب کردیم، از “قسمت پیشرفته”، قسمت “موشن افکت” رو انتخاب کنیم. در این بخش می تونیم تنظیمات مختلف مربوط به حرکت بخشمون رو تنظیم کنیم.

برای ثابت نگه داشتن هدر گزینه sticky رو  روی Top تنظیم می کنیم تا هدرمون در بالای صفحه ثابت بمونه و همراه اسکرول مثل بقیه المان های صفحه اسکرول نشه و به پایین بیاد.

 

تصویر دوم تغییر رنگ هدر سایت با اسکرول | کنترل وب

تصویر سوم تغییر رنگ هدر سایت با اسکرول | کنترل وب

 

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

 

تصویر چهارم تغییر رنگ هدر سایت با اسکرول | کنترل وب

 

قدم سوم در تغییر رنگ هدر سایت با اسکرول: تغییر رنگ با اسکرول

حالا که هدر سایتمون به صورت ثابت طراحی شد، نوبت به نکته نهایی کار یعنی تغییر رنگ هدر هنگام اسکرول کردن می رسه. برای اینکار در قسمت “استایل” گزینه “scrolling effects” رو فعال می کنیم.

 

تصویر پنجم تغییر رنگ هدر سایت با اسکرول | کنترل وب

 

بعد از اینکه این گزینه رو فعال کردیم، از طریق قسمت “Transparency”  با تغییر میزان شفافیت هدر کاری می کنیم که تغییر رنگ موردنظر اتفاق بیفته. بنابراین روی این قسمت کلیک می کنیم.

تصویر ششم تغییر رنگ هدر سایت با اسکرول | کنترل وب

 

بعد از کلیک، پنجره ای مانند تصویر زیر باز میشه که توی این قسمت می تونیم مشخص کنیم که در کجای صفحه افکت اسکرولی که اعمال کردیم عمل بکنه. اینکار رو با استفاده از تنظیم “viewport” می تونیم تنظیم کنیم.

در این تنظیم دو مقدار وجود داره. با تنطیم مقدار Top می تونیم مشخص کنیم که چه میزان از صفحه از قسمت بالا اسکرول بشه افکت اعمال عمل بکنه. همچنین با تنظیم مقدار Bottom میتونیم مشخص کنیم که مدت زمان رسیدن به این افکت چه مقداری باشه.

بنابراین میتونیم با قرار دادن مقدار Bottom روی مقدار Top مدت زمان اعمال این افکت رو بلافاصه لعد از اسکرول کنیم.

 

تصویر هفتم تغییر رنگ هدر سایت با اسکرول | کنترل وب

 

تصویر هشتم تغییر رنگ هدر سایت با اسکرول | کنترل وب

 

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

امیدواریم که با این آموزش تونسته باشین سایتتون رو جذاب تر بکنین و یکی دیگر از نیاز های طراحی سایتتون رو برطرف کرده باشین.

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 4 میانگین: 5]

6 پاسخ

  1. سلام وقت بخیر من تمام تغییرات رو انجام میدم برای تغییر رنگ هدر سایت با اسکرول اما روی صفحه اصلیم این عمل انجام نمیشه چیکار کنم ؟ 🙁

    1. سلام دوست عزیز اگر افزونه کش دارید یک بار کش سایت و مرورگر خودتون رو کامل پاک کنید احتمالا مشکل حل میشه

    1. خوشحالیم که مورد استفاده قرار گرفت دوست عزیز

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

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

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

مقالات مرتبط