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.
Nativo Configurações do Site com Elementor
Dependendo da versão do elementor que você estiver utilizando, essa função já é nativa e te poupará de inserir qualquer código.
Siga os passos:
Primeiro, clique em “Configurações do Site” (a tela do elementor deve estar aberta).
Em seguida, na aba configurações clique em Plano de Fundo (como mostrado na imagem).
Depois, no campo “Fundo do navegador em dispositivos móveis“, selecione a cor desejada.
Por fim, clique em Salvar alterações e pronto, a cor será aplicada sem que você precise inserir nenhum código!
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!
