Quanto mais exclusivo for um projeto, com estruturação profissional e com a identidade da marca em harmonia, mais serão as chances de conversão e resultados satisfatórios, seja para você ou para seu cliente. Hoje você aprender a mudar cor do navegador em dispositivos Windows, Android e iOS em websites desenvolvidos com html, php, wordpress (elementor).
Pensando nisso resolvemos compartilhar com você um simples detalhe que faz toda a diferença no seu projeto, agregando mais valor, exclusividade e proporcionando ao usuário uma navegação mais atrativa.
Neste post vamos compartilhar apenas uma linha de código HTML que é capaz de personalizar a cor dos navegadores Google Chrome, Safari Apple e Windows Browser em dispositivos móveis.
O código é na linguagem HTML (meta tag) e pode ser utilizado em sites, blogs e lojas desenvolvidos também em WordPress. Se você usa Elementor (ou qualquer outro construtor de páginas) para criar suas páginas, esse código também funciona perfeitamente!
Chrome Browser Mobile
O código para mudar a cor do navegador no app Chrome (dispositivo Android) é simples e contém apenas 1 linha, confira 🙂
Código para mudar cor do navegador Chrome em dispositivos Android
<meta name="theme-color" content="#530068">
iOS Safari Browser Mobile
Quem foi que disse que não é possível personalizar os navegadores em dispositivos iOS (Apple)?
Com apenas mais uma linha de código, é possível e funcional personalizar a cor do navegador Safari.
Código para mudar cor do navegador Safari em dispositivos iOS
<meta name="apple-mobile-web-app-status-bar-style" content="#530068">
Windows Phone Browser Mobile
E para os amantes de smartphone com o sistema Windows, também é possível personalizar a cor do navegador em seu projeto, basta inserir mais uma linha de código e correr pro abraço.
Código para mudar cor do navegador Windows Phone em dispositivos Windows Mobile
<meta name="msapplication-navbutton-color" content="#530068">
1 Código, 3 linhas e 3 navegadores personalizados
Acima, compartilhamos os códigos individuais de cada navegador para que você possa compreender melhor o método da personalização. Você pode inserir os 3 códigos de uma vez que também vai funcionar perfeitamente, veja como ficará:
<meta name="theme-color" content="#530068">
<meta name="apple-mobile-web-app-status-bar-style" content="#530068">
<meta name="msapplication-navbutton-color" content="#530068">
Com esse código, você personaliza os 3 navegadores (chrome, safari e windows browser). Porém, lembre-se de alterar a cor #530068 (disponível no valor do exemplo em content) pela cor da identidade visual do seu projeto!
Inserindo o código no Elementor
Para que não reste dúvidas, vamos compartilhar um passo-a-passo sobre a maneira mais simples e profissional de você inserir o código no Elementor.
Primeiro, clique (ou aponte o mouse) sobre o menu Elementor, e em seguida clique em Custom Code (conforme mostra na imagem).
Em seguida, clique em Add new.
No campo Título, insira o nome personalizado para o seu código (pode ser qualquer nome). Esse campo ajuda a identificar o código com mais facilidade caso você precise fazer alguma alteração.
Em Location, selecione <head> e em Priority selecione 1.
No próximo campo, basta inserir o código e alterar o valor de content para a cor do seu projeto.
Em seguida clique em Publicar.
Resultado Final
Para conferir o resultado final, acesse o site do projeto em seu tablet ou smartphone com um nos navegadores que aplicamos o código (Chrome, Safari ou Windows Phone Browser).
Conclusão
Viu como é simples deixar seu projeto com um visual mais atraente e exclusivo? Que tal por esse aprendizado em prática em ver como fica em seu site?
Comente aqui com a gente qual foi sua experiência em relação a esse conteúdo!
Se você precisa de um site profissional e não sabe como fazer, por onde começar ou simplesmente não tem tempo pra isso devido a suas atividades, fale com nosso time de desenvolvedores, vamos elaborar uma proposta exclusiva e super funcional para o seu projeto. Entre em contato ainda hoje!
