To set the mobile browser application colour (the theme colour shown in the browser tab or when viewing the site on mobile devices) using Elementor, follow these steps:
- Add Custom Code to Elementor:
- Navigate to Elementor > Custom Code in your WordPress dashboard.
- Click on Add New to create a new custom code snippet.
- Name the snippet something like “Mobile Browser Colour” for easy reference.
- Insert the Meta Tag:
- Paste the following code snippet into the code editor:
<meta name="theme-color" content="#yourcolorcode">
Replace #yourcolorcode with the hex code of the color you want. For example, #ffffff for white or #000000 for black.
- Paste the following code snippet into the code editor:
- Placement Settings:
- Set the Location to Head so that it applies site-wide.
- Set the Priority to a standard value (e.g., 10) to ensure it loads properly.
- Display Conditions:
- Choose where you want the code to appear. For example, set it to apply to Entire Site if you want it to affect the whole website.
- Save and Publish:
- Click Save & Close, then Publish.
- Test the Change:
- Visit your site on a mobile device and check the browser tab color to ensure the change has taken effect.
Note: Some browsers and devices may cache the old color, so you may need to clear the browser cache or test in an incognito/private browsing window.