جستجو برای:
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
 
کنترل وب
دسترسی سریع
  • طراحی سایت
  • المنتور
  • وردپرس
  • ووکامرس
0

ورود و ثبت نام

  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

بلاگ

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

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

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

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

 

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

 

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

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

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

 

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

 

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

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

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

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

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

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

 

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

 

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

 

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

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

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 4 میانگین: 5]
اشتراک گذاری:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • لیست قیمت در المنتور - کنترل وب
    لیست قیمت در المنتور

    13 بازدید

  • z ایندکس در المنتور | کنترل وب
    z ایندکس در المنتور

    15 بازدید

  • تغییر عرض سکشن در المنتور-کنترل وب
    تغییر عرض سکشن در المنتور

    23 بازدید

  • ساخت خط عمودی در المنتور-کنترل وب
    ساخت خط عمودی در المنتور

    33 بازدید

  • ماسک در المنتور-کنترل وب
    ماسک (Mask) در المنتور

    35 بازدید

  • نصب وردپرس روی لوکال هاست (زمپ) - کنترل وب
    نصب وردپرس روی لوکال هاست (زمپ)

    48 بازدید

6 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • احمد فکوری گفت:
    1401/10/08 در 4:23 ب.ظ

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

    پاسخ
    • مدیریت گفت:
      1401/10/08 در 4:28 ب.ظ

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

      پاسخ
  • حامد گفت:
    1401/10/20 در 6:27 ب.ظ

    خیلی عالی بود .خداقوت

    پاسخ
    • مدیریت گفت:
      1401/10/21 در 8:38 ق.ظ

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

      پاسخ
  • فاطمه طاهری گفت:
    1401/11/08 در 8:23 ق.ظ

    من تغییرات را انجام دادم کش سایت هم پاک کردم ولی روی صفحه اصلیم تغییرات رو نشون نمیده

    پاسخ
    • مدیریت گفت:
      1401/11/08 در 12:30 ب.ظ

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

      پاسخ

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

جستجو برای:
دسته‌ها
  • آموزش المنتور
  • آموزش وردپرس
  • مقالات
  • ویدئو
نوشته‌های تازه
  • لیست قیمت در المنتور
  • z ایندکس در المنتور
  • تغییر عرض سکشن در المنتور
  • ساخت خط عمودی در المنتور
  • ماسک (Mask) در المنتور
لوگو کنترل وب

کنترل وب

مرجع آموزش هنر طراحی سایت

کنترل وب

مرجع آموزش هنر طراحی سایت

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

Telegram Instagram

دسترسی سریع

  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css
  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css

لینک های پر بازدید

  • ترفند المنتور
  • آموزش رایگان المنتور
  • دوره جامع وردپرس
  • آموزش html-css
  • مینی دوره آموزش وردپرس

جدید ترین آموزشها

لیست قیمت در المنتور

z ایندکس در المنتور

تغییر عرض سکشن در المنتور

ساخت خط عمودی در المنتور

ماسک (Mask) در المنتور

Telegram Instagram

کنترل وب روی سرورهای قدرتمند ایران سرور پشتیبانی میشود.

لوگو کنترل وب
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت