Come riparare il tuo logo pixelato<\/h2>\n
Questa soluzione \u00e8 un po’ tecnica, ma ho delineato i passaggi nel modo pi\u00f9 chiaro possibile.<\/p>\n
Quello che farai \u00e8 caricare una versione del tuo logo che \u00e8 2 volte la dimensione normale e quindi usare i CSS per rimpicciolirlo a dimensioni normali (ho gi\u00e0 scritto il codice per te).<\/p>\n
Ad esempio, se l’immagine del logo che stai attualmente visualizzando \u00e8 larga 300 px, allora caricherai una versione larga 600 px. Quando il tuo file immagine \u00e8 esattamente il doppio di quello che appare sul tuo sito, viene visualizzato perfettamente nitido sugli schermi ad alta risoluzione. Se guardi il logo su questo sito in questo momento, \u00e8 essenzialmente quello che sto facendo.<\/p>\n
Ora passiamo ai passaggi.<\/p>\n
Scopri qual \u00e8 la tua taglia ideale<\/h3>\n
Il primo passo \u00e8 accedere al tuo sito e aprire Live Customizer.<\/p>\n
Ecco come accedere a Live Customizer<\/p>\n Una volta all’interno del Customizer, fai clic sulla sezione CSS aggiuntivo in basso.<\/p>\n Quindi, copia e incolla questo codice nella sezione:<\/p>\n Vedrai il tuo logo aggiornarsi istantaneamente con una larghezza di 300 pixel. Ignora se \u00e8 sfocato o meno in questo momento: lo sistemeremo nel passaggio successivo.<\/p>\n Nel CSS, modifica il valore "300px" finch\u00e9 il tuo logo non viene visualizzato nella dimensione desiderata. Ancora una volta, non preoccuparti della sfocatura, modificalo finch\u00e9 non occupa la giusta quantit\u00e0 di spazio sul sito.<\/p>\n So che questa potrebbe essere la prima volta che modifichi il codice, quindi ecco un rapido esempio di come apparirebbe il codice se decidessi che il tuo logo ha un aspetto migliore quando \u00e8 largo 450 pixel:<\/p>\n Ha senso?<\/p>\n Una volta che il logo occupa la giusta quantit\u00e0 di spazio nell’intestazione, puoi pubblicare le modifiche o salvarlo come bozza per ora.<\/p>\n Il prossimo passo \u00e8 ridimensionare il file immagine stesso.<\/p>\n Affinch\u00e9 il tuo logo appaia nitido sul tuo sito, avrai bisogno di una versione che sia esattamente il doppio della dimensione che hai inserito nel CSS.<\/p>\n Ad esempio, se il codice CSS rende il logo largo 450 px, vorrai una copia dell’immagine del tuo logo larga 900 px.<\/p>\n Se non disponi di una versione sufficientemente grande del tuo file immagine, dovrai contattare il designer del tuo logo o accedere al documento di progettazione originale per esportare una dimensione sufficientemente grande.<\/p>\n Altrimenti, se hai solo una copia originale larga 600 px, quando la estendi a 900 px, l’immagine sar\u00e0 sfocata anche quando la visualizzi sul tuo computer.<\/p>\n Una volta ottenuta una versione doppia dell’immagine, sei pronto per il passaggio finale.<\/p>\n All’interno del Customizer, individua l’opzione di caricamento del logo. Per la maggior parte dei temi, sar\u00e0 all’interno della sezione Identit\u00e0 del sito.<\/p>\n Carica la tua nuova versione 2x del logo e apparir\u00e0 bella e nitida sul sito.<\/p>\n Per riassumere, cambi la dimensione del logo con i CSS finch\u00e9 non riempie la giusta quantit\u00e0 di spazio nell’intestazione. Quindi carichi un’immagine che \u00e8 il doppio di quella dimensione e apparir\u00e0 nitida sugli schermi ad alta risoluzione.<\/p>\n Questo \u00e8 essenzialmente ci\u00f2 che fa il supporto retina per le immagini sul web dietro le quinte e questo \u00e8 un modo semplice per implementarlo da soli.<\/p>\n Questo \u00e8 tutto quello che c’\u00e8 da fare!<\/p>\n \u00c8 un peccato che WordPress non abbia un buon modo per visualizzare loghi ad alta risoluzione, ma la soluzione \u00e8 abbastanza semplice.<\/p>\n In alternativa, puoi caricare una versione SVG del tuo logo, ma ci\u00f2 richiede anche l’ aggiunta del supporto SVG<\/a>.<\/p>\n Anche se potresti non sapere nulla sui CSS, i passaggi qui richiedono principalmente il copia e incolla e spero che ti sia piaciuto acquisire alcune nuove competenze tecniche seguendo questo tutorial.<\/p>\n Se vuoi saperne di pi\u00f9 sull’utilizzo dei CSS per personalizzare il tuo sito, dai un’occhiata a questo tutorial:<\/p>\n![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4861240.png\")
<\/a><\/p>\n![\"Come](\"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>\nRidimensiona la tua immagine<\/h3>\n
Carica la tua nuova immagine<\/h3>\n
Conclusione<\/h2>\n