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

ترفند جذاب المنتور: تغییر رنگ هدر سایت هنگام اسکرول – وقتی کاربر وارد سایتت میشه، اولین چیزی که به چشمش می‌خوره، هدر سایته. حالا اگه این هدر فقط یه کادر ساده و بی‌روح باشه، چه حسی بهت می‌ده؟ نه جذابیت داره، نه حرفه‌ای به نظر میاد. ولی اگه همون هدر با یه تغییر کوچیک – مثلاً عوض شدن رنگش با اسکرول – زنده بشه، چی؟ 😍

این تغییر کوچیک، حس و حال سایتت رو کلی عوض می‌کنه و باعث میشه کاربر بیشتر باهاش ارتباط بگیره. یه هدر داینامیک نه‌تنها ظاهر سایتت رو حرفه‌ای‌تر نشون میده، بلکه می‌تونه به تجربه کاربری (UX) کمک کنه. حالا جالب اینجاست که برای اجرای این ایده، نیازی نیست یه برنامه‌نویس حرفه‌ای باشی یا با کلی کد عجیب‌غریب کلنجار بری! با المنتور، می‌تونی تو چند قدم ساده این قابلیت رو به سایتت اضافه کنی.

اینجا قراره قدم‌به‌قدم و کاملاً ساده بهت یاد بدم چطور این کار رو انجام بدی. آماده‌ای؟ بزن بریم! 🚀

چرا تغییر رنگ هدر مهمه؟ 🌟

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

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

تغییر رنگ هدر هنگام اسکرول یکی از اون ترفندای کوچیک اما تأثیرگذاره که می‌تونه یه طراحی معمولی رو به یه طراحی خاص و مدرن تبدیل کنه. این کار فقط یه حرکت خوشگل نیست؛ کلی تاثیر مثبت داره:

1. جلب توجه کاربر: وقتی کاربر اسکرول می‌کنه و تغییر رنگ رو می‌بینه، ناخودآگاه حس تعامل با سایت پیدا می‌کنه. این تغییر کوچیک می‌تونه توجه کاربر رو به بخش‌های مختلف سایت هدایت کنه. 👀
2. تقویت تجربه کاربری (UX): تجربه کاربری خوب یعنی حس راحتی و جذابیت برای بازدیدکننده. تغییر رنگ هدر حس داینامیک بودن رو به سایت می‌ده و کاربر رو تو جریان حرکت سایت همراه می‌کنه.
3. برندسازی قوی‌تر: اگه رنگ‌های هدر رو با هویت برندت هماهنگ کنی، کاربر بهتر می‌تونه سایت و برندت رو به یاد بیاره. مثلاً اسکرول کردن تو سایتی که رنگ هدرش با لوگو یا پالت رنگی برند هماهنگه، یه تجربه خاص و به‌یاد‌موندنی میشه. 🎨
4. افزایش حرفه‌ای بودن طراحی: وقتی سایتت این تغییرات جذاب و داینامیک رو داشته باشه، نشون میده که به جزئیات توجه می‌کنی و وقت گذاشتی تا سایتت خاص باشه. این حس به کاربر منتقل میشه که با یه سایت حرفه‌ای سروکار داره.

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

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

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

دانلود آخرین نسخه المنتور پرو از مخزن افزونه رایا وردپرس 👈 دانلود المنتور پرو

مرحله دوم: طراحی هدر داینامیک 🔧

حالا که المنتور روی سایتت نصب و آماده است، وقتشه که اولین قدم برای طراحی یه هدر داینامیک و جذاب برداری. هدف این مرحله اینه که هدر رو به شکلی طراحی کنیم که آماده تغییر رنگ هنگام اسکرول بشه. با این روش، همه‌چیز توی سایتت حساب‌شده و حرفه‌ای به نظر میاد. خب، آماده‌ای؟ بیایید شروع کنیم! 😊

1. ساخت هدر جدید 🚀

برای اینکه بتونی هدر سایتت رو تغییر بدی، باید از قابلیت Theme Builder المنتور استفاده کنی:

1. از پیشخوان وردپرس، وارد منوی المنتور > قالب‌ها > افزودن قالب شو.
2. نوع قالب رو روی “هدر یا سربرگ” تنظیم کن و یه اسم مناسب براش بذار (مثلاً: هدر داینامیک).
3. روی دکمه “ایجاد قالب” کلیک کن تا وارد محیط ویرایشگر المنتور بشی.

بعد از اینکه وارد محیط ویرایشگر شدی، المنت‌های اصلی هدر مثل لوگو، منوهای ناوبری و آیکون‌های شبکه‌های اجتماعی رو اضافه کن. اینجا هر چیزی که فکر می‌کنی برای هدر سایتت لازمه رو می‌تونی اضافه کنی.

2. تنظیمات اولیه طراحی 🎨

حالا که ساختار هدر رو ساختی، وقتشه یه ظاهر شیک براش بسازی.

• روی سکشن اصلی (بخش هدر) کلیک کن تا تنظیماتش باز بشه.
• توی تب طرح‌بندی (Layout)، عرض سکشن رو روی “تمام عرض” (Full Width) بذار.
• ارتفاع هدر رو روی کمترین ارتفاع تنظیم کن (معمولاً 80 تا 120 پیکسل خوبه).
• توی تب استایل (Style)، یه رنگ پس‌زمینه (Background) برای حالت اولیه هدر انتخاب کن. این همون رنگیه که وقتی اسکرول نکردی، دیده میشه.

3. آماده‌سازی هدر برای تغییر رنگ 🌈

برای اینکه هدر بتونه با اسکرول کاربر تغییر رنگ بده، لازمه سکشن اصلی هدر رو به کد CSS و جاوااسکریپت وصل کنیم. اما نگران نباش، همه‌چی رو به ساده‌ترین شکل ممکن توضیح میدم:

• به تب پیشرفته (Advanced) برو و یه کلاس خاص برای هدرت تعریف کن. مثلاً اسمش رو بذار main-header.
• این کلاس کمک می‌کنه که بتونیم تو کدها راحت‌تر هدر رو هدف قرار بدیم.

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

برای اینکه تغییر رنگ هدر به درستی و به‌صورت داینامیک هنگام اسکرول اجرا بشه، حتماً باید یک عدد یا مقدار دلخواه در فیلد افکت افست وارد کنی.

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

4. افزودن کد CSS برای تغییر رنگ هدر در اسکرول 🎨

حالا که هدر سایتت رو طراحی کردی و آماده‌ای که رنگش تغییر کنه، باید کمی کد نویسی کنیم تا این افکت جادویی کار کنه. نگران نباش! این کار اصلاً سخت نیست و من همه‌چیز رو به طور کامل برات توضیح میدم.

ما بالا به هدرمون اگه یادت باشه یه کلاس اختصاصی به نام main-header دادیم حالا باید سکشن هدر رو انتخاب کنی و بری تب پیشرفته قسمت CSS سفارشی و کد زیر رو داخل باکس مربوطه قرار بدی”

/* Code By RayaWp.ir */
.elementor-sticky--effects {
   background: #3E3EF5!important;
}

.elementor-sticky--effects .main-header ul li a {
   color: #fff!important; 
}

.elementor-sticky--effects, .main-header ul li a {
  transition: .5s all ease-in-out; 
}

4. ذخیره و انتشار هدر ✅

وقتی طراحی هدر تموم شد، حتماً تغییراتت رو ذخیره کن.

• روی دکمه بنفش “انتشار” کلیک کن.
• یه پنجره باز میشه که ازت می‌پرسه این هدر تو چه صفحاتی نمایش داده بشه. گزینه “کل سایت” رو انتخاب کن تا هدرت برای همه صفحات سایت فعال بشه.

نکته: اگه فقط می‌خوای این هدر برای یه صفحه خاص نمایش داده بشه، می‌تونی همون صفحه رو تو تنظیمات انتخاب کنی.

حالا وقتشه که از سایتت بازدید کنی و ببینی چطور هدر با اسکرول تغییر رنگ می‌ده! 🌈✨

نتیجه‌ گیری: تغییر رنگ هدر به ساده‌ ترین شکل ممکن 💪

الان سایتت از یه هدر ساده به یه هدر داینامیک و جذاب تبدیل شده که وقتی کاربر اسکرول می‌کنه، رنگش تغییر می‌کنه. این تغییرات رنگ نه‌تنها سایتت رو جذاب‌تر می‌کنه، بلکه باعث میشه تجربه کاربری بهتری ایجاد بشه. این تغییرات ظریف اما تاثیرگذار به کاربر این حس رو می‌ده که سایتت کاملاً حرفه‌ای و به‌روزه.

اگر باز هم سوالی داشتی یا نیاز به کمک داشتی، خوشحال میشم کمکت کنم! 😊