ترفند المنتور: تغییر رنگ پس زمینه به صورت خودکار با هر بار رفرش صفحه – سلام رفیق 👋
دوست داری به جای یه سایت تکراری و قابل پیش‌بینی، یه تجربه شگفت‌انگیز برای کاربرات بسازی؟ 🎨 امروز یه ترفند خلاقانه تو المنتور بهت یاد می‌دم که باهاش پس‌زمینه سایتت با هر بار رفرش مثل یه بوم نقاشی، رنگ عوض می‌کنه!
این تغییر ساده، یه حس پویایی و زندگی به صفحاتت می‌ده و باعث می‌شه کاربرات با هر بار ورود، یه حس تازه بگیرن 😍اگه دنبال یه افکت خاص و خلاقانه برای طراحی سایتت هستی، به هیچ وجه این آموزش رو از دست نده!
بی تعارف بگم، ۹۰٪ سایت‌ها حوصله‌سربرن! امروز یه شکلی‌ان، فردا هم همون شکل، هفته بعدم باز همون! 😴
تو دنیایی که توجه کاربر هر لحظه کمتر می‌شه، تکراری بودن بزرگ‌ترین دشمنته.
🔍 پس راه‌حل چیه؟ یه شوک کوچیک! یه غافلگیری خوشگل که کاربر رو شگفت زده کنه!🎯 دقیقاً همین چیزی که امروز قراره یاد بگیری 🙂
تغییر رنگ پس زمینه به صورت خودکار با هر بار رفرش صفحه
اولین قدم اینه که بری سراغ المنتور و یه ویجت آیکون باکس بسازی. این ویجت یه بخش کوچیک و کاربردیه که می‌تونی توش آیکون و متن بذاری.
ایجاد انیمیشن چیدمان کارت ها روی هم هنگام اسکرول
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
نکته! هیچ اجباری وجود نداره که حتماً این ترفند رو روی ویجت “آیکون باکس” پیاده‌سازی کنی یا فقط از همین ویجت استفاده کنی. می‌تونی هر المان یا ویجتی که دوست داری رو انتخاب کنی.
من فقط برای اینکه آموزش یه‌دست و قابل فهم‌تر باشه، از آیکون باکس استفاده کردم. 😉
قدم اول: آماده کردن المنتور و ویجت آیکون باکس 🛠️
- وارد المنتور شو: برو به صفحه‌ای که می‌خوای ویرایش کنی و گزینه “ویرایش با المنتور” رو بزن.
- ویجت آیکون باکس رو بکش: از پنل سمت راست ابزارک ها، ویجت “آیکون باکس” رو انتخاب کن و بکش تو صفحه‌ت.
- تنظیمات اولیه: تو تنظیماتش، آیکون و متنی که دوست داری رو اضافه کن. رنگ پس‌زمینه رو فعلاً دست نزن، چون قراره با کد عوضش کنیم!
قدم 2: اضافه کردن کلاس CSS به ویجت 🎨
برای اینکه بتونیم با کد به این ویجت دسترسی پیدا کنیم، باید یه اسم خاص بهش بدیم. اینجا از کلاس CSS استفاده می‌کنیم.
- برو به تنظیمات پیشرفته: تو المنتور، روی تب “پیشرفته” ویجت آیکون باکس کلیک کن.
- کلاس CSS رو وارد کن: تو قسمت “کلاس‌های CSS“، بنویس Raya-change. این اسم رو بعداً تو کد استفاده می‌کنیم. اگه دلت خواست، می‌تونی یه اسم دیگه بذاری، فقط یادت باشه تو کد هم همونو بنویسی.
- کمی به پایین همین بخش تب پیشرفته اسکرول کن و در قسمت کد CSS سفارشی کد زیرو قرار بده:
قدم 3: کد جاوا اسکریپت برای تغییر رنگ پس زمینه 🖥️
حالا وقتشه که کد جادوییمون رو بنویسیم! این کد باعث می‌شه هر بار که صفحه رفرش می‌شه، رنگ پس‌زمینه عوض بشه😎
یک ویجت html درست زیر ویجت آیکون باکس خودت اضافه کن و کدهای زیر رو داخلش قرار بده:
حالا برو صفحه ات رو رفرش کن و ببین چطوری رنگ پس‌زمینه‌ی ویجتت هر بار عوض می‌شه! اگه همه‌چیز درست پیش رفته باشه، هر بار یه رنگ جدید می‌بینی. 😎
_____ __ __
| __ \ \ \ / /
| |__) |__ _ _ _ __ \ \ /\ / / __
| _ // _` | | | |/ _` \ \/ \/ / '_ \
| | \ \ (_| | |_| | (_| |\ /\ /| |_) |
|_| \_\__,_|\__, |\__,_| \/ \/ | .__/
__/ | | |
|___/ |_| سخن پایانی
امیدوارم این آموزش برات مفید بوده باشه و بتونی سایتت رو با این ترفند خفن‌تر کنی. اگه سوالی داری، تو کامنت‌ها بگو تا کمکت کنم. موفق باشی دوست من! 🌟
ارسال نظر ( 0 نظر تایید شده )