fbpx
Logo agência ISSO marketing branco

Mudar cor do navegador: Chrome, Safari e Windows Phone em dispositivos Android e iOS

Mudar cor do navegador: Chrome, Safari e Windows Phone em dispositivos Android e iOS

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.

menu wordpress elementor custom code agencia isso - ISSO Marketing Digital

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.

menu elementor custom code add new agencia isso - ISSO Marketing Digital

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.

Exemplo de código para mudar cor do navegador em dispositivos móveis Android e iOS. Imagem Custom Code WordPress Elementor.
Tela Add New Custom Code no Elementor

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!

Compartilhe

Share on linkedin
Share on facebook
Share on twitter
Share on whatsapp
Share on telegram
Share on email

Curtiu esse conteúdo? Compartilhe!

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email

Curtiu esse conteúdo? Compartilhe!

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email

Deixe um comentário

O seu endereço de e-mail não será publicado.

Deixe um comentário

O seu endereço de e-mail não será publicado.