So ändern Sie die Größe Ihres WordPress-Logos (funktioniert mit jedem Thema)
Kürzlich fragte einer unserer Leser, ob es möglich sei, die Größe Ihres Logos in WordPress zu ändern?
Ihr Website-Logo ist ein wichtiger Bestandteil Ihrer Marke. Abhängig von dem WordPress-Theme, das Sie verwenden, ist manchmal nicht klar, wie Sie die Größe Ihres Logos ändern können, um es größer oder kleiner zu machen.
In diesem Artikel zeigen wir Ihnen, wie Sie die Größe des WordPress-Logos Schritt für Schritt ändern können.
Warum die Größe des Logos in WordPress ändern?
Wenn Sie Ihr Logo in WordPress hochladen, hat es möglicherweise nicht immer die richtige Größe.
Ein zu kleines Logo fällt nicht auf. Ein zu großes Logo kann sich jedoch negativ auf das Design Ihrer Website auswirken.
Wenn Sie in ein benutzerdefiniertes Logo-Design investiert haben, möchten Sie sicherstellen, dass Ihr Logo in der richtigen Größe in der Kopfzeile Ihrer Website angezeigt wird.
Für diejenigen, die noch im Logo-Design-Prozess sind, sehen Sie sich unsere Auswahl der besten kostenlosen Logo-Maker an.
Davon abgesehen zeigen wir Ihnen einige verschiedene Möglichkeiten, wie Sie die Logo-Größe in WordPress ändern können.
Die Methode, die Sie wählen, hängt von dem WordPress-Theme ab, das Sie verwenden, und von Ihrem Komfort beim Bearbeiten von CSS-Code.
- Ändern Sie die WordPress-Logo-Größe mit WordPress Customizer
- Ändern Sie die WordPress-Logo-Größe durch Bearbeiten von CSS-Code
- Ändern Sie die WordPress-Logo-Größe ohne Bearbeiten von CSS-Code
Methode 1. Ändern Sie die Größe des WordPress-Logos mit WordPress Customizer
Die einfachste und einfachste Möglichkeit, die Größe des Logos in WordPress zu ändern, ist die Verwendung des Theme Customizers. Diese Methode funktioniert jedoch nur, wenn Ihr WordPress-Theme dies unterstützt.
Viele beliebte Themen wie Divi, Astra, Ultra und andere verfügen über ein integriertes Tool zum Ändern der Logo-Größe.
Wenn Sie Ihr Logo in WordPress hochladen, können Sie mit diesen Themen das Logo einfach mit einem einfachen Schieberegler anpassen, mit dem Sie die Breite und Höhe anpassen können.
Hinweis: Ihre Logogröße ist nur so groß wie das Bild, das Sie hochladen. Sie sollten daher sicherstellen, dass Sie ein größeres Logobild hochladen, wenn Sie es vergrößern möchten.
Für das Tutorial zeigen wir, wie Sie Ihr Logo in Divi, Astra und Ultra Theme ändern können, aber die Methode ist für die beliebtesten WordPress Themes ähnlich. Wenn Ihr Thema diese Option nicht hat, müssen Sie die Methode 2 oder 3 dieses Tutorials verwenden.
Ändern Sie die WordPress-Logo-Größe in Divi WordPress Theme
Navigieren Sie zunächst zu Divi “ Theme Customizer und klicken Sie auf die Menüoption „Header & Navigation“.
Klicken Sie anschließend auf die Dropdown-Option ‚Primäre Menüleiste‘.
Hier können Sie die Größe Ihres Logos ändern.
Zuerst müssen Sie die Einstellung ‚Menühöhe‘ anpassen. Dies steuert die Höhe Ihres gesamten Navigationsmenüs und definiert, wie groß Sie Ihr Logo machen können.
Danach können Sie die Einstellung ‚Maximale Höhe des Logos‘ ändern, die einem Prozentsatz der gesamten Menühöhe entspricht.
Sie können den Schieberegler ‚Logo Max Height‘ nach oben und unten anpassen, bis Sie die perfekte Logogröße für Ihr WordPress-Blog gefunden haben.
Stellen Sie sicher, dass Sie auf die Schaltfläche ‚Veröffentlichen‘ klicken, um Ihre Änderungen zu speichern, bevor Sie den Bildschirm verlassen.
Ändern Sie die WordPress-Logo-Größe in Ihrem WordPress-Theme
Als erstes müssen Sie zu „Aussehen“ navigieren und dann auf die Menüoption „Kopfzeile“ klicken.
Klicken Sie anschließend auf die Menüoption ‚Site Identity‘.
Hier können Sie ganz einfach die Größe Ihres Logos anpassen.
Alles, was Sie tun müssen, ist den Schieberegler ‚Logobreite‘ nach links oder rechts zu verschieben.
Sie können automatisch sehen, wie sich die Größe Ihres Logos in Echtzeit ändert, wenn Sie den Schieberegler bewegen.
Wenn Sie mit der Größe Ihres Logos zufrieden sind, klicken Sie auf ‚Veröffentlichen‘, bevor Sie die Seite verlassen.
Ändern Sie die WordPress-Logo-Größe in Ultra WordPress Theme
Um die Logo-Größe in Ultra Theme anzupassen, navigieren Sie zu „Anpassen“ und klicken Sie auf das Navigationselement „Site Logo & Tagline“.
Klicken Sie anschließend auf das Dropdown-Menü ‚Site-Logo‘.
Wählen Sie dann das Optionsfeld ‚Logo Image‘, das angezeigt wird.
Jetzt können Sie die Größe des Logos ändern, indem Sie neue Dimensionen in die Felder rechts neben Ihrem Logo-Bild eingeben. Wenn Sie möchten, dass das Bild basierend auf der Originalgröße skaliert wird, geben Sie nur neue Logoabmessungen in ein Feld ein.
Sie können die Breite mit dem Feld links und die Höhe mit dem Feld rechts ändern.
Wenn Sie neue Dimensionen eingeben, ändert sich die Größe Ihres Logos in Echtzeit.
Wenn Sie die Größe Ihres Logos angepasst haben, klicken Sie auf die Schaltfläche ‚Veröffentlichen‘.
Wenn Ihr Thema oben nicht hervorgehoben ist, besteht immer noch die Möglichkeit, dass Sie die Größe Ihres Logos mithilfe des WordPress-Customizers anpassen können.
Gehen Sie einfach zu Darstellung “ Anpassen an das von Ihnen verwendete Thema und sehen Sie, welche Anpassungsoptionen für Ihr Logo oder Ihre Kopfzeile verfügbar sind.
Methode 2. Ändern Sie die Größe des WordPress-Logos durch Bearbeiten von CSS
Wenn Ihr WordPress-Theme das Ändern der Logogröße mit dem WordPress-Theme-Customizer nicht unterstützt, können Sie die Größe ändern, indem Sie benutzerdefiniertes CSS hinzufügen.
Als erstes müssen Sie zu Ihrer Website-Homepage navigieren.
Klicken Sie dann mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie die Option ‚Inspizieren‘. Dadurch wird ein Inspektionsmenü angezeigt, in dem der gesamte Code für die Seite angezeigt wird.
Danach müssen Sie auf das Symbol ‚Element auswählen‘ klicken, das wie ein Mauszeiger aussieht.
Auf diese Weise können Sie das Logo-Element Ihrer Website auswählen und den Code anzeigen.
Als nächstes bewegen Sie einfach den Mauszeiger über Ihr Website-Logo, bis die CSS-Klasse angezeigt wird. Es wird ähnlich wie das Bild unten aussehen.
Mit dieser CSS-Klasse können Sie die Größe Ihres WordPress-Logos anpassen. Schreiben Sie dies also in einem Texteditor wie Notepad auf.
Jetzt können Sie zurück zu Ihrem WordPress Admin Dashboard gehen und zu Aussehen “ Anpassen“ navigieren. Sie müssen auf die Menüoption ‚Zusätzliches CSS‘ klicken.
Dadurch wird ein Dropdown-Menü angezeigt, in dem Sie benutzerdefinierten CSS-Code hinzufügen können.
Fügen Sie einfach die zuvor gefundene CSS-Klasse hinzu und geben Sie die neuen Bilddimensionen an. Sie können den folgenden CSS-Code als Beispiel verwenden.
img.custom-logo { max-height: 100px !important;}
Sie müssen die CSS-Klasse img.custom-logo oben in die CSS-Klasse ändern, die Ihr Thema verwendet.
Sie können den max-height auch in eine beliebige Größe ändern.
So sieht es im WordPress Customizer aus.
Sobald Sie Ihre Änderungen vorgenommen haben, klicken Sie einfach auf die Schaltfläche ‚Veröffentlichen‘, um Ihre Änderungen live zu schalten.
Methode 3. Ändern Sie die Größe des WordPress-Logos, ohne CSS zu bearbeiten
Wenn Sie keine Themendateien bearbeiten oder benutzerdefiniertes CSS hinzufügen möchten, ist diese Methode genau das Richtige für Sie.
Mit einem WordPress-Styling-Plugin können Sie visuelle Änderungen an Ihrer Website vornehmen, ähnlich wie mit einem Drag & Drop-Seitenersteller.
Wir empfehlen die Verwendung von CSS Hero. Es ist ein Styler-Plugin, mit dem Sie fast jeden CSS-Stil auf Ihrer WordPress-Site bearbeiten können, ohne eine einzige Zeile CSS-Code zu schreiben.
Deal: WPBeginner-Leser erhalten über unseren CSS Hero-Gutscheincode einen Rabatt von 34%.
Als erstes müssen Sie das Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie auf die Schaltfläche ‚Weiter zur Produktaktivierung‘ klicken, um das Plugin zu aktivieren. Es befindet sich direkt über Ihrer Liste der installierten Plugins.
Dies bringt Sie zu einem Bildschirm, in dem Sie Ihren Benutzernamen und Ihr Passwort eingeben können. Befolgen Sie einfach die Anweisungen auf dem Bildschirm, und Sie werden zurück zu Ihrer Website weitergeleitet, sobald Ihr Konto überprüft wurde.
Klicken Sie anschließend oben in Ihrer WordPress-Admin-Symbolleiste auf die Schaltfläche ‚Mit CSS-Helden anpassen‘.
Dies führt Sie zu Ihrer Website, auf der CSS Hero ausgeführt wird. CSS Hero verwendet einen WYSIWYG-Editor (What You See Is What You Get).
Wenn Sie auf ein Element Ihrer Seite klicken, wird links eine Symbolleiste angezeigt, in der Sie Anpassungen vornehmen können.
Klicken Sie anschließend oben auf der Seite auf Ihr WordPress-Logo.
Klicken Sie anschließend auf den Link ‚Erweiterte Requisiten anzeigen‘.
Dies bietet Ihnen noch mehr CSS-Anpassungsoptionen.
Suchen Sie dann das Feld ‚Maßnahmen‘. Hier finden Sie Optionen namens ‚Max Width‘ und ‚Max Height‘.
Sie möchten diese in die gewünschte Bildgröße ändern. Wenn Sie möchten, dass das Bild die gleichen Abmessungen behält, ändern Sie nur die Höhe oder Breite.
Die von Ihnen vorgenommenen Änderungen werden automatisch auf Ihrer Seite angezeigt.
Sobald Sie die Größe Ihres Logos geändert haben, müssen Sie auf ‚Speichern und veröffentlichen‘ klicken, um Ihre Änderungen live zu übertragen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Größe Ihres WordPress-Logos zu ändern. Vielleicht möchten Sie auch unsere Experten-Tipps für die beste Live-Chat-Software für kleine Unternehmen und unsere Liste der WordPress-Plugins für Business-Websites sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.