fbpx
Logo agência ISSO marketing branco

/ blog ISSO Marketing®

Bruno Oliveira - CEO ISSO Marketing®

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

Curtiu esse conteúdo? Compartilhe!

Vamos falar sobre o seu projeto, preencha o formulário disponível.
Ou, se preferir contate-nos através de um dos canais de comunicação disponíveis:

Curtiu esse conteúdo? Compartilhe!