It’s already trivial but it is still true. People are using their phones for virtually everything. From entertainment to information gathering. Thus, probably at least half of your users, are entering your website via phone. And while that certainly creates some sort of discomfort, it is a huge advantage considering the additional traffic that you will get.
There are a lot of ways to make your brand stand out. And probably, you need to take advantage of most of them.
To get there, you will have to take one step at a time.
One of the most important elements of brand building is color. And the color is not easy to master. You need to consider not only the color itself but also its hue and saturation. And once you get that right, you have to put the effort in order not to overdo it.
You can’t paint everything related to your brand with its colors.
But the address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand’s guidelines.
Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.
How to Color The Address Bar of Your WordPress Website on a Mobile Browser
With the new version of WordPress which was released in November 2017, the possibility to directly change the code of the themes was highly limited. Not that it is not possible, you just have to do it via the Admin Panel, and not through the WordPress Dashboard.
If you try to edit the code, most probably you’ll face an error, which will recommend you to use an FTP by which to download the file you want to edit, edit it locally on your computer, and then re-uploading it. This is a lot of unnecessary work.
With the admin panel, you’ll be presented with our web hosting services, you won’t have to do all of this. You can just find the file you want to edit, double-click it and add or remove whatever you want.
Now that we got this out of the way, let’s focus on coloring your mobile browser’s address bar.
It is a fairly easy task. All you need to do is to copy the following code:
<meta name=”theme-color” content=”#327eb9” />
And paste it into your header.php file.
You need to place the code just above the closing </head> tag.
NB! #327eb9 is the HEX value of the AwardSpace’s blue color.
You’ll probably want to use your brand’s color or the color of your menu, as the menu will be right below the address bar.
In any case, if you don’t know the HEX value of your brand color or any element that you want to match with the color of the mobile browser’s address bar, you can use color pick extensions.
Like ColorZilla, for example.