So reparieren Sie Ihr verpixeltes Logo<\/h2>\n
Diese L\u00f6sung ist ein wenig technisch, aber ich habe die Schritte so klar wie m\u00f6glich beschrieben.<\/p>\n
Was Sie tun werden, ist, eine Version Ihres Logos hochzuladen, die das Doppelte der normalen Gr\u00f6\u00dfe hat, und es dann mit CSS auf die normale Gr\u00f6\u00dfe zu verkleinern (ich habe den Code bereits f\u00fcr Sie geschrieben).<\/p>\n
Wenn das aktuell angezeigte Logobild beispielsweise 300\u00a0Pixel breit ist, laden Sie eine 600\u00a0Pixel breite Version hoch. Wenn Ihre Bilddatei genau doppelt so gro\u00df ist, wie sie auf Ihrer Website angezeigt wird, wird sie auf hochaufl\u00f6senden Bildschirmen perfekt scharf dargestellt. Wenn Sie sich gerade das Logo auf dieser Website ansehen, dann ist das im Wesentlichen das, was ich tue.<\/p>\n
Kommen wir nun zu den Schritten.<\/p>\n
Finden Sie heraus, was Ihre ideale Gr\u00f6\u00dfe ist<\/h3>\n
Der erste Schritt besteht darin, sich bei Ihrer Site anzumelden und den Live Customizer zu \u00f6ffnen.<\/p>\n
So greifen Sie auf den Live Customizer zu<\/p>\n Klicken Sie im Customizer unten auf den Abschnitt Zus\u00e4tzliches CSS.<\/p>\n Kopieren Sie als N\u00e4chstes diesen Code und f\u00fcgen Sie ihn in den Abschnitt ein:<\/p>\n Ihr Logo wird sofort auf 300px Breite aktualisiert. Ignorieren Sie, ob es jetzt verschwommen ist oder nicht \u2013 wir werden das im n\u00e4chsten Schritt beheben.<\/p>\n \u00c4ndern Sie im CSS den Wert "300px", bis Ihr Logo in der gew\u00fcnschten Gr\u00f6\u00dfe angezeigt wird. Machen Sie sich auch hier keine Sorgen \u00fcber Unsch\u00e4rfe, sondern bearbeiten Sie es einfach, bis es den richtigen Platz auf der Website einnimmt.<\/p>\n Ich wei\u00df, dass dies m\u00f6glicherweise das erste Mal ist, dass Sie Code bearbeiten. Hier ist ein kurzes Beispiel daf\u00fcr, wie der Code aussehen w\u00fcrde, wenn Sie entscheiden w\u00fcrden, dass Ihr Logo mit einer Breite von 450 Pixeln am besten aussieht:<\/p>\n Sinn ergeben?<\/p>\n Sobald das Logo den richtigen Platz in der Kopfzeile einnimmt, k\u00f6nnen Sie Ihre \u00c4nderungen ver\u00f6ffentlichen oder vorerst als Entwurf speichern.<\/p>\n Der n\u00e4chste Schritt besteht darin, die Gr\u00f6\u00dfe der Bilddatei selbst zu \u00e4ndern.<\/p>\n Damit Ihr Logo auf Ihrer Website scharf angezeigt wird, ben\u00f6tigen Sie eine Version, die genau doppelt so gro\u00df ist wie die Gr\u00f6\u00dfe, die Sie im CSS eingegeben haben.<\/p>\n Wenn der CSS-Code das Logo beispielsweise 450\u00a0px breit macht, ben\u00f6tigen Sie eine Kopie Ihres Logos mit einer Breite von 900\u00a0px.<\/p>\n Wenn Sie nicht \u00fcber eine ausreichend gro\u00dfe Version Ihrer Bilddatei verf\u00fcgen, m\u00fcssen Sie sich an Ihren Logodesigner wenden oder Zugriff auf das urspr\u00fcngliche Designdokument erhalten, um eine ausreichend gro\u00dfe Version zu exportieren.<\/p>\n Andernfalls, wenn Sie nur eine 600px breite Originalkopie haben, dann wird das Bild beim Dehnen auf 900px verschwommen, selbst wenn Sie es auf Ihrem Computer anzeigen.<\/p>\n Sobald Sie eine Version des Bildes in 2x-Gr\u00f6\u00dfe erhalten haben, sind Sie bereit f\u00fcr den letzten Schritt.<\/p>\n Suchen Sie im Customizer die Option zum Hochladen des Logos. Bei den meisten Themes befindet es sich im Abschnitt Site Identity.<\/p>\n Laden Sie Ihre neue 2x-Version des Logos hoch und es wird auf der Website sch\u00f6n und scharf angezeigt.<\/p>\n Zusammenfassend \u00e4ndern Sie die Logogr\u00f6\u00dfe mit CSS, bis sie den richtigen Platz im Header ausf\u00fcllt. Dann laden Sie ein Bild hoch, das doppelt so gro\u00df ist und es auf hochaufl\u00f6senden Bildschirmen scharf aussieht.<\/p>\n Dies ist im Wesentlichen das, was die Retina-Unterst\u00fctzung f\u00fcr Bilder im Web hinter den Kulissen leistet, und dies ist eine einfache M\u00f6glichkeit, sie selbst zu implementieren.<\/p>\n Das ist alles dazu!<\/p>\n Es ist eine Schande, dass WordPress keine gute M\u00f6glichkeit bietet, hochaufl\u00f6sende Logos anzuzeigen, aber die Problemumgehung ist einfach genug.<\/p>\n Sie k\u00f6nnen alternativ eine SVG-Version Ihres Logos hochladen, dies erfordert jedoch auch das Hinzuf\u00fcgen von SVG-Unterst\u00fctzung<\/a>.<\/p>\n Auch wenn Sie vielleicht nichts \u00fcber CSS wissen, erfordern die Schritte hier haupts\u00e4chlich Kopieren und Einf\u00fcgen, und ich hoffe, dass Sie es genossen haben, einige neue technische F\u00e4higkeiten zu erwerben, indem Sie diesem Tutorial folgen.<\/p>\n Wenn Sie mehr \u00fcber die Verwendung von CSS zum Anpassen Ihrer Website erfahren m\u00f6chten, sehen Sie sich dieses Tutorial an:<\/p>\n![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-208187-61713c4861240.png\")
<\/a><\/p>\n![\"So](\"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>\n\u00c4ndern Sie die Gr\u00f6\u00dfe Ihres Bildes<\/h3>\n
Laden Sie Ihr neues Bild hoch<\/h3>\n
Abschluss<\/h2>\n