Como consertar seu logotipo pixelado<\/h2>\n
Esta solu\u00e7\u00e3o \u00e9 um pouco t\u00e9cnica, mas delineei as etapas o mais claramente poss\u00edvel.<\/p>\n
O que voc\u00ea vai fazer \u00e9 carregar uma vers\u00e3o do seu logotipo que seja 2x o tamanho normal e ent\u00e3o usar CSS para reduzi-lo ao tamanho normal (eu j\u00e1 escrevi o c\u00f3digo para voc\u00ea).<\/p>\n
Por exemplo, se a imagem do logotipo que voc\u00ea est\u00e1 exibindo atualmente tem 300 px de largura, voc\u00ea carregar\u00e1 uma vers\u00e3o de 600 px de largura. Quando seu arquivo de imagem \u00e9 exatamente duas vezes maior do que aparece em seu site, ele \u00e9 exibido com uma nitidez perfeita em telas de alta resolu\u00e7\u00e3o. Se voc\u00ea olhar o logotipo neste site agora, \u00e9 essencialmente o que estou fazendo.<\/p>\n
Agora vamos para as etapas.<\/p>\n
Descubra qual \u00e9 o seu tamanho ideal<\/h3>\n
O primeiro passo \u00e9 fazer o login no seu site e abrir o Live Customizer.<\/p>\n
Veja como acessar o Live Customizer<\/p>\n Uma vez dentro do Customizador, clique na se\u00e7\u00e3o CSS Adicional na parte inferior.<\/p>\n Em seguida, copie e cole este c\u00f3digo na se\u00e7\u00e3o:<\/p>\n Voc\u00ea ver\u00e1 que seu logotipo ser\u00e1 atualizado instantaneamente para 300px de largura. Ignore se est\u00e1 borrado ou n\u00e3o agora – vamos corrigir isso na pr\u00f3xima etapa.<\/p>\n No CSS, altere o valor “300px" at\u00e9 que seu logotipo seja exibido no tamanho desejado. Novamente, n\u00e3o se preocupe com manchas, apenas edite-o at\u00e9 que ocupe a quantidade certa de espa\u00e7o no site.<\/p>\n Sei que esta pode ser sua primeira edi\u00e7\u00e3o de c\u00f3digo, ent\u00e3o aqui est\u00e1 um exemplo r\u00e1pido de como o c\u00f3digo ficaria se voc\u00ea decidisse que seu logotipo ficaria melhor com 450 pixels de largura:<\/p>\n Faz sentido?<\/p>\n Assim que o logotipo ocupar a quantidade certa de espa\u00e7o no cabe\u00e7alho, voc\u00ea pode publicar suas altera\u00e7\u00f5es ou salv\u00e1-lo como um rascunho por enquanto.<\/p>\n A pr\u00f3xima etapa \u00e9 redimensionar o pr\u00f3prio arquivo de imagem.<\/p>\n Para que seu logotipo seja exibido de forma n\u00edtida em seu site, voc\u00ea precisar\u00e1 de uma vers\u00e3o que seja exatamente duas vezes maior do que o tamanho inserido no CSS.<\/p>\n Por exemplo, se o c\u00f3digo CSS deixar o logotipo com 450 px de largura, voc\u00ea desejar\u00e1 uma c\u00f3pia da imagem do logotipo com 900 px de largura.<\/p>\n Se voc\u00ea n\u00e3o tiver uma vers\u00e3o grande o suficiente de seu arquivo de imagem, ser\u00e1 necess\u00e1rio entrar em contato com seu designer de logotipo ou obter acesso ao documento de design original para exportar um tamanho grande o suficiente.<\/p>\n Caso contr\u00e1rio, se voc\u00ea tiver apenas uma c\u00f3pia original de 600px de largura, quando voc\u00ea estic\u00e1-la para 900px, a imagem ficar\u00e1 borrada, mesmo quando voc\u00ea visualiz\u00e1-la em seu computador.<\/p>\n Depois de obter uma vers\u00e3o de tamanho 2x da imagem, voc\u00ea est\u00e1 pronto para a etapa final.<\/p>\n Dentro do personalizador, localize a op\u00e7\u00e3o de upload do logotipo. Para a maioria dos temas, ele estar\u00e1 dentro da se\u00e7\u00e3o Identidade do site.<\/p>\n Fa\u00e7a o upload da sua nova vers\u00e3o 2x do logotipo e ele aparecer\u00e1 de forma precisa e n\u00edtida no site.<\/p>\n Para resumir, voc\u00ea altera o tamanho do logotipo com CSS at\u00e9 que ele preencha a quantidade certa de espa\u00e7o no cabe\u00e7alho. Em seguida, voc\u00ea carrega uma imagem com o dobro do tamanho e ela ficar\u00e1 n\u00edtida em telas de alta resolu\u00e7\u00e3o.<\/p>\n Isso \u00e9 essencialmente o que o suporte retina para imagens na web faz nos bastidores e esta \u00e9 uma maneira simples de implementar voc\u00ea mesmo.<\/p>\n Isso \u00e9 tudo que h\u00e1 para fazer!<\/p>\n \u00c9 uma pena que o WordPress n\u00e3o tenha uma boa maneira de exibir logotipos em alta resolu\u00e7\u00e3o, mas a solu\u00e7\u00e3o alternativa \u00e9 bastante f\u00e1cil.<\/p>\n Como alternativa, voc\u00ea pode carregar uma vers\u00e3o SVG do seu logotipo, mas isso tamb\u00e9m requer a adi\u00e7\u00e3o de suporte a SVG<\/a>.<\/p>\n Embora voc\u00ea possa n\u00e3o saber nada sobre CSS, as etapas aqui requerem principalmente copiar e colar, e espero que tenha gostado de aprender algumas novas habilidades t\u00e9cnicas seguindo este tutorial.<\/p>\n Se voc\u00ea quiser saber mais sobre como usar CSS para personalizar seu site, confira este tutorial:<\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4861240.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4a99036.png\")
<\/a><\/p>\n.custom-logo,\n.site-header .logo {\n max-width: 100% !important;\n width: 300px !important;\n height: auto !important;\n}<\/code><\/pre>\n.custom-logo,\n.site-header .logo {\n max-width: 100% !important;\n width: 450px !important;\n height: auto !important;\n}<\/code><\/pre>\nRedimensione sua imagem<\/h3>\n
Carregue a sua nova imagem<\/h3>\n
Conclus\u00e3o<\/h2>\n