Friday, August 21, 2020

How to Match WordPress theme color with Address Bar Color in Mobile Browser

How to Match WordPress theme color with Address Bar Color in Mobile Browser If you present your WordPress theme beautifully with match color combination in mobile browser then it will help to create a brand color on smart device. I am not sure that have you noticed about BBC, The Gurdian, Facebook all of them are displaying with brand color on mobile browser. Every website has its own brand color and visitors can recognize known website easily by exploring color combination. There are many branded color using for website such as Green, Blue, Red, Orange, purple and the colors helps to recognize the site easily. And it creates a color brand on visitors mind. Why should we match the address bar color on Mobile browser? Recently over 60% readers using Smartphone for visiting websites. Even in case of BloggerSpice I am receiving 70% readers from mobile devices. But when readers visit blog or website from Smartphone then they feel this is not a part of Smartphone. For example when we open an App in Android device then you will see same color on whole screen. And if you match color for your WordPress theme then visitors will fell like native app. As a result, it will improve user experience, and for e-commerce site it will help to increase conversion rates. I know you are feeling excited and want to add this on your WordPress theme. Dont worry in this tutorial I will show you how to do it? But note that it will only work on Google chrome web browser on Androind devices. I have checked on Android Kitkat but it works better on Android Lollipop and on updated version. Applying the Trick on WordPress Them? To make it works we will use a simple HTML META tag and this is very easy to add. This META tag use to change address bar color in Google Chrome mobile browser on Android OS. However you can use any hex color for matching the browser color. For matching the color just use our color picker and select hex color code and proceed to the below steps- Step 1Log into yourWordPressaccountand go toDashboard Step 2From Dashboard click on-Appearance-Editor Step 3Now locateheader.phpor ChildThemes header.phpfile from the right column and instantlyheader.phpfile will open inEditor Step 4Now add the following line just above the closing/head Customization Please alter #0090FF with your themes color code. Step 5Finally click Update File button from the bottom or Editor. Everything is done. And to see it live please open your WordPress site on Android device and see the result. I hope it is working perfectly. And if you like this tutorial please subscribe to our VIP Mail list to get the latest content notification. Thank you.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.