C\u00f3mo arreglar tu logo pixelado<\/h2>\n
Esta soluci\u00f3n es un poco t\u00e9cnica, pero he descrito los pasos con la mayor claridad posible.<\/p>\n
Lo que va a hacer es cargar una versi\u00f3n de su logotipo que sea el doble del tama\u00f1o normal y luego usar CSS para reducirlo a tama\u00f1o normal (ya escrib\u00ed el c\u00f3digo para usted).<\/p>\n
Por ejemplo, si la imagen del logotipo que muestra actualmente tiene un ancho de 300 p\u00edxeles, cargar\u00e1 una versi\u00f3n de 600 p\u00edxeles de ancho. Cuando su archivo de imagen es exactamente dos veces m\u00e1s grande de lo que aparece en su sitio, se muestra perfectamente n\u00edtido en pantallas de alta resoluci\u00f3n. Si miras el logo en este sitio web ahora mismo, eso es esencialmente lo que estoy haciendo.<\/p>\n
Ahora vayamos a los pasos.<\/p>\n
Descubra cu\u00e1l es su talla ideal<\/h3>\n
El primer paso es iniciar sesi\u00f3n en su sitio y abrir Live Customizer.<\/p>\n
Aqu\u00ed se explica c\u00f3mo acceder al personalizador en vivo<\/p>\n Una vez dentro del Personalizador, haga clic en la secci\u00f3n CSS adicional en la parte inferior.<\/p>\n A continuaci\u00f3n, copie y pegue este c\u00f3digo en la secci\u00f3n:<\/p>\n Ver\u00e1 que su logotipo se actualiza instant\u00e1neamente para tener 300 p\u00edxeles de ancho. Ignore si est\u00e1 borroso o no en este momento; lo arreglaremos en el siguiente paso.<\/p>\n En el CSS, cambie el valor "300px" hasta que su logotipo se muestre en el tama\u00f1o que desee. Una vez m\u00e1s, no se preocupe por el desenfoque, simplemente ed\u00edtelo hasta que ocupe la cantidad correcta de espacio en el sitio.<\/p>\n S\u00e9 que esta podr\u00eda ser la primera vez que edita el c\u00f3digo, as\u00ed que aqu\u00ed hay un ejemplo r\u00e1pido de c\u00f3mo se ver\u00eda el c\u00f3digo si decidiera que su logotipo se ve mejor con 450 p\u00edxeles de ancho:<\/p>\n \u00bfTener sentido?<\/p>\n Una vez que el logotipo ocupe la cantidad correcta de espacio en el encabezado, puede publicar sus cambios o guardarlo como borrador por ahora.<\/p>\n El siguiente paso es cambiar el tama\u00f1o del archivo de imagen.<\/p>\n Para que su logotipo se muestre n\u00edtido en su sitio, necesitar\u00e1 una versi\u00f3n que sea exactamente el doble del tama\u00f1o que ingres\u00f3 en el CSS.<\/p>\n Por ejemplo, si el c\u00f3digo CSS hace que el logotipo tenga un ancho de 450 px, querr\u00e1 una copia de la imagen de su logotipo de 900 px de ancho.<\/p>\n Si no tiene una versi\u00f3n lo suficientemente grande de su archivo de imagen, deber\u00e1 ponerse en contacto con su dise\u00f1ador de logotipo u obtener acceso al documento de dise\u00f1o original para exportar un tama\u00f1o lo suficientemente grande.<\/p>\n De lo contrario, si solo tiene una copia original de 600 px de ancho, cuando la extienda a 900 px, la imagen se ver\u00e1 borrosa incluso cuando la vea en su computadora.<\/p>\n Una vez que tenga una versi\u00f3n de tama\u00f1o 2x de la imagen, estar\u00e1 listo para el paso final.<\/p>\n Dentro del Personalizador, ubique la opci\u00f3n de carga del logotipo. Para la mayor\u00eda de los temas, estar\u00e1 dentro de la secci\u00f3n Identidad del sitio.<\/p>\n Sube tu nueva versi\u00f3n 2x \u200b\u200bdel logo y se ver\u00e1 agradable y n\u00edtido en el sitio.<\/p>\n Para resumir, cambia el tama\u00f1o del logotipo con CSS hasta que ocupe la cantidad correcta de espacio en el encabezado. Luego, carga una imagen que tiene el doble de ese tama\u00f1o y se ver\u00e1 n\u00edtida en pantallas de alta resoluci\u00f3n.<\/p>\n Esto es esencialmente lo que hace el soporte de retina para im\u00e1genes en la web entre bastidores y esta es una forma sencilla de implementarlo usted mismo.<\/p>\n \u00a1Eso es todo al respecto!<\/p>\n Es una pena que WordPress no tenga una buena forma de mostrar logotipos de alta resoluci\u00f3n, pero la soluci\u00f3n es bastante f\u00e1cil.<\/p>\n Alternativamente, puede cargar una versi\u00f3n SVG de su logotipo, pero esto tambi\u00e9n requiere agregar soporte SVG<\/a>.<\/p>\n Si bien es posible que no sepa nada sobre CSS, los pasos aqu\u00ed requieren principalmente copiar y pegar, y espero que haya disfrutado adquiriendo algunas habilidades t\u00e9cnicas nuevas siguiendo este tutorial.<\/p>\n Si desea obtener m\u00e1s informaci\u00f3n sobre el uso de CSS para personalizar su sitio, consulte este tutorial:<\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4861240.png\")
<\/a><\/p>\n![\"C\u00f3mo](\"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>\nCambiar el tama\u00f1o de su imagen<\/h3>\n
Sube tu nueva imagen<\/h3>\n
Conclusi\u00f3n<\/h2>\n