تغییر رنگ مرورگر موبایل یکی از مهم‌ترین راهکارهای بهبود تجربه کاربری در نسخه موبایلی سایت است. اگر کاربری با گوشی وارد سایت شما شود و رنگ نوار مرورگر مطابق با رنگ برند یا طراحی سایت تنظیم شده باشد، حس انسجام و جذابیت بیشتری دریافت می‌کند.
این کار نه تنها باعث ارتقای ظاهر سایت شما می‌شود، بلکه نقش مهمی در افزایش اعتماد و درگیری ذهنی کاربران دارد. در واقع، تغییر رنگ مرورگر موبایل یک ترفند ساده اما کاربردی برای متمایز کردن برند شما در ذهن بازدیدکنندگان است.
در این مقاله، به صورت کامل روش‌های تغییر رنگ نوار بالایی مرورگر موبایل را آموزش می‌دهیم. چه بخواهید با کد HTML این کار را انجام دهید، چه بخواهید از طریق المنتور این قابلیت را فعال کنید، این مقاله دقیقاً برای شما نوشته شده است.
مقاله پیشنهادی: اضافه کردن اسکرول نرم در المنتور
چرا تغییر رنگ مرورگر موبایل اهمیت دارد؟
- افزایش انسجام برند: رنگ مرورگر با رنگ برند یکپارچه شده و برندینگ قوی‌تری به نمایش گذاشته می‌شود.
- جلب توجه کاربر: کاربر در نگاه اول متوجه طراحی خاص شما شده و حس حرفه‌ای بودن سایت را درک می‌کند.
- جلوگیری از یکنواختی: رنگ پیش‌فرض نوار مرورگر معمولاً خاکستری یا مشکی است که ممکن است با طراحی سایت شما همخوانی نداشته باشد.
تغییر رنگ مرورگر موبایل با استفاده از کد HTML
برای تغییر رنگ مرورگر موبایل، تنها کافیست از متا تگ‌های خاصی در بخش <head> قالب HTML سایت استفاده کنید. بسته به نوع مرورگر و سیستم‌عامل، تگ‌های متفاوتی وجود دارند:
تغییر رنگ مرورگر موبایل در مرورگر Chrome در اندروید
<meta name=”theme color” content=”ff6600″>
مقدار “ff6600” را با رنگ دلخواه خود جایگزین کنید.
این متا تگ در مرورگر Google Chrome و برخی مرورگرهای اندرویدی دیگر پشتیبانی می‌شود.
تغییر رنگ در مرورگر Safari در iOS
<meta name=”apple mobile web app status bar style” content=”black translucent”>
این متا تگ برای ایجاد وب‌اپلیکیشن‌های موبایلی کاربرد دارد.
اگر سایت شما در قالب وب‌اپلیکیشن روی دستگاه‌های اپل نمایش داده شود، رنگ نوار وضعیت (status bar) را تغییر می‌دهد.
تغییر رنگ در Windows Phone
<meta name=”msapplication navbutton color” content=”00bcd4″>
در مرورگرهای ویندوزی مانند Edge در ویندوزفون کاربرد دارد.
مکان صحیح قرارگیری کدها
تمام کدهای بالا باید درون تگ <head> قالب وردپرس یا فایل HTML شما قرار بگیرند. در وردپرس، می‌توانید این کدها را از طریق فایل header.php قالب یا از طریق افزونه‌هایی مثل Insert Headers and Footers اضافه کنید.
تغییر رنگ مرورگر موبایل با المنتور (Elementor)
المنتور به‌صورت مستقیم و بدون کدنویسی هم امکان تغییر رنگ مرورگر موبایل را فراهم کرده است. این قابلیت در بخش تنظیمات سایت در ویرایشگر المنتور قرار دارد.
روش اول: از طریق تنظیمات المنتور
وارد ویرایشگر المنتور شوید.
در نوار بالایی روی آیکون سه‌خط (همبرگری) کلیک کنید.
گزینه «Site Settings» یا «تنظیمات سایت» را انتخاب کنید.
در لیست سمت چپ وارد بخش “Background” یا «پس‌زمینه» شوید.
گزینه‌ای با عنوان “Theme Color” یا «رنگ مرورگر در موبایل» را خواهید دید.
رنگ دلخواه خود را وارد کنید (مثلاً رنگ برندتان).
روی «Update» کلیک کرده و تغییرات را ذخیره کنید.
این ویژگی مخصوص نسخه‌های جدید المنتور و در برخی قالب‌های سازگار در دسترس است. اگر این گزینه را نمی‌بینید، باید از روش‌های دیگر (مثل افزونه یا کدنویسی) استفاده کنید.
استفاده از افزونه Code Snippets برای تغییر رنگ مرورگر موبایل
- افزونه Code Snippets را نصب و فعال کنید.
- به بخش “Snippets > Add New” بروید.
- یک قطعه کد جدید با نام دلخواه (مثلاً “تغییر رنگ مرورگر موبایل”) بسازید.
- کد زیر را در آن قرار دهید:
add_action(‘wp_head’, function() {
echo ‘<meta name=”theme-color” content=”#f06292″>’;
});
- رنگ را به رنگ برند خود تغییر دهید (در این مثال صورتی).
- اسنیپت را فعال کرده و ذخیره کنید.
استفاده از افزونه Insert Headers and Footers
- افزونه Insert Headers and Footers را نصب و فعال کنید.
- به بخش “تنظیمات > Insert Headers and Footers” بروید.
- کد HTML زیر را در بخش “Scripts in Header” قرار دهید:
<meta name=”theme color” content=”009688″>
- تغییرات را ذخیره کنید.
تغییر رنگ داینامیک بر اساس حالت تیره (Dark Mode)
اگر سایت شما از تم تیره (Dark Mode) پشتیبانی می‌کند، می‌توانید رنگ مرورگر را بر اساس حالت کاربر تغییر دهید:
<meta name=”theme-color” content=”#ffffff” media=”(prefers-color-scheme: light)”>
<meta name=”theme-color” content=”#000000″ media=”(prefers-color-scheme: dark)”>
این متا تگ‌ها باعث می‌شوند رنگ نوار مرورگر بسته به حالت دارک یا لایت سیستم کاربر، تغییر کند.
نکات مهم در تغییر رنگ مرورگر موبایل
- از رنگ‌های کنتراست‌دار استفاده کنید تا آیکون‌های مرورگر قابل مشاهده باشند.
- رنگ انتخابی باید با طراحی و هویت بصری برند هماهنگ باشد.
- بهتر است قبل از اعمال نهایی، در مرورگرهای مختلف تست انجام دهید.
<strong> نتیجه‌گیری
تغییر رنگ مرورگر موبایل یک راهکار ساده اما بسیار مؤثر برای افزایش زیبایی و تجربه کاربری سایت شما در موبایل است. چه از المنتور استفاده می‌کنید چه از قالب‌های سفارشی، می‌توانید با افزودن یک خط کد ساده در بخش `<head>` سایت، نوار بالای مرورگر موبایل را به رنگ دلخواه تغییر دهید. اگر در حال طراحی سایت با وردپرس و المنتور هستید، این امکان را حتماً در نظر بگیرید و از آن برای تقویت هویت برند خود بهره ببرید.
