Wie Sie die Größe Ihres WordPress-Logos ändern (funktioniert mit jedem Theme)

Kürzlich fragte einer unserer Leser, ob es möglich sei, die Größe des Logos in WordPress zu ändern?

Das Logo Ihrer Website ist ein wichtiger Teil Ihrer Marke. Je nach WordPress-Theme, das Sie verwenden, ist es 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 ganz einfach ändern können, Schritt für Schritt.

Warum sollte man die Größe des Logos in WordPress ändern?

Wenn Sie Ihr Logo in WordPress hochladen, hat es vielleicht nicht immer die richtige Größe.

Ein zu kleines Logo hebt sich nicht ab. Ein zu großes Logo hingegen kann sich negativ auf das Design Ihrer Website auswirken.

Wenn Sie in ein individuelles Logodesign investiert haben, sollten Sie sicherstellen, dass Ihr Logo in der richtigen Größe in der Kopfzeile Ihrer Website erscheint.

Für diejenigen, die sich noch im Prozess des Logodesigns befinden, haben wir eine Auswahl der besten kostenlosen Logoersteller zusammengestellt.

Davon abgesehen, zeigen wir Ihnen ein paar verschiedene Möglichkeiten, wie Sie die Logogröße in WordPress ändern können.

Welche Methode du wählst, hängt von dem WordPress-Theme ab, das du verwendest, und davon, wie gut du dich mit der Bearbeitung von CSS-Code auskennst.

Methode 1. Ändern Sie die Größe des WordPress-Logos mit dem WordPress Customizer

Der einfachste und leichteste Weg, die Logogröße in WordPress zu ändern, ist die Verwendung des Theme-Customizers. Diese Methode funktioniert jedoch nur, wenn Ihr WordPress-Theme dies unterstützt.

Viele beliebte Themes wie Divi, Astra, Ultra und andere haben ein eingebautes Tool zum Ändern der Logogröße.

Wenn Sie Ihr Logo in WordPress hochladen, erleichtern diese Themes die Anpassung des Logos mit einem einfachen Schieberegler, mit dem Sie die Breite und Höhe anpassen können.

Hinweis: Ihr Logo ist nur so groß wie das Bild, das Sie hochladen. Sie sollten also sicherstellen, dass Sie ein größeres Logobild hochladen, wenn Sie es größer machen wollen.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihr Logo in den Themes Divi, Astra und Ultra ändern können, aber die Methode ist bei den meisten gängigen WordPress-Themes ähnlich. Wenn Ihr Theme diese Option nicht hat, müssen Sie die Methode 2 oder 3 dieses Tutorials verwenden.

Ändern der Größe des WordPress-Logos im Divi-WordPress-Theme

Navigieren Sie zunächst zu Divi “ Theme Customizer und klicken Sie auf die Menüoption „Header & Navigation“.

Danach klicken Sie 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 bestimmt, wie groß Sie Ihr Logo machen können.

Danach können Sie die Einstellung „Logo Max Height“ ändern, die einen Prozentsatz der Gesamthöhe des Menüs angibt.

Sie können den Schieberegler „Logo Max Height“ nach oben und unten anpassen, bis Sie die perfekte Logogröße für Ihren WordPress-Blog gefunden haben.

Klicken Sie unbedingt auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen zu speichern, bevor Sie den Bildschirm verlassen.

Ändern Sie die Größe des WordPress-Logos im Astra WordPress-Theme

Navigieren Sie zunächst zu Darstellung “ Anpassen und klicken Sie dann auf die Menüoption „Kopfzeile“.

Danach klicken Sie auf die Menüoption „Site Identity“.

Hier können Sie die Größe Ihres Logos ganz einfach anpassen.

Dazu müssen Sie nur den Schieberegler „Logobreite“ nach links oder rechts bewegen.

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 der Größe des WordPress-Logos im Ultra-WordPress-Theme

Um die Logogröße im Ultra-Theme anzupassen, navigieren Sie zu Darstellung “ Anpassen und klicken Sie auf den Navigationspunkt „Site Logo & Tagline“.

Klicken Sie anschließend auf das Dropdown-Menü „Site Logo“.

Wählen Sie dann die Optionsschaltfläche „Logo-Bild“, die erscheint.

Nun können Sie die Größe des Logos ändern, indem Sie neue Abmessungen in die Felder rechts neben dem Logobild eingeben. Wenn Sie möchten, dass das Bild auf der Grundlage der Originalgröße skaliert wird, geben Sie die neuen Abmessungen des Logos nur 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 Abmessungen eingeben, sehen Sie, wie sich die Größe Ihres Logos in Echtzeit ändert.

Sobald Sie die Größe Ihres Logos angepasst haben, klicken Sie auf die Schaltfläche „Veröffentlichen“.

Wenn Ihr Theme 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 in dem von Ihnen verwendeten Theme und sehen Sie nach, 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 die Änderung der Logogröße über den WordPress-Theme-Customizer nicht unterstützt, können Sie die Größe ändern, indem Sie benutzerdefinierte CSS hinzufügen.

Als Erstes müssen Sie zu Ihrer Website-Homepage navigieren.

Klicken Sie dann mit der rechten Maustaste auf eine beliebige Stelle der Seite und wählen Sie die Option „Inspizieren“. Daraufhin wird ein Inspektionsmenü angezeigt, das den gesamten Code der Seite enthält.

Danach müssen Sie auf das Symbol „Element auswählen“ klicken, das wie ein Mauszeiger aussieht.

Dadurch können Sie das Logo-Element Ihrer Website auswählen und den Code anzeigen.

Bewegen Sie nun den Mauszeiger über das Logo Ihrer Website, bis die CSS-Klasse erscheint. Sie sieht dann ähnlich aus wie in der Abbildung unten.

Sie verwenden diese CSS-Klasse, um die Größe Ihres WordPress-Logos anzupassen. Notieren Sie sich dies in einem Texteditor wie Notepad.

Nun können Sie zu Ihrem WordPress-Admin-Dashboard zurückkehren und zu Darstellung “ Anpassen navigieren. Klicken Sie auf die Menüoption „Zusätzliche CSS“.

Daraufhin wird ein Dropdown-Menü angezeigt, in dem Sie benutzerdefinierten CSS-Code hinzufügen können.

Fügen Sie einfach die CSS-Klasse hinzu, die Sie zuvor gefunden haben, und geben Sie die neuen Bildabmessungen an. Sie können den folgenden CSS-Code als Beispiel verwenden.

img.custom-logo {
     max-height: 100px !important;
}

Sie müssen die obige CSS-Klasse img.custom-logo in die CSS-Klasse ändern, die Ihr Thema verwendet.

Sie können auch die maximale Höhe auf die von Ihnen gewünschte 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 die Änderungen zu aktivieren.

Methode 3. Ändern Sie die Größe des WordPress-Logos ohne CSS-Bearbeitung

Wenn Sie keine Lust haben, Themedateien zu bearbeiten oder benutzerdefinierte CSS hinzuzufügen, 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-and-Drop-Page-Builder.

Wir empfehlen die Verwendung von CSS Hero. Es ist ein Styler-Plugin, mit dem Sie fast jeden CSS-Stil auf Ihrer WordPress-Website bearbeiten können, ohne eine einzige Zeile CSS-Code zu schreiben.

Deal: WPBeginner-Leser können durch unseren CSS Hero-Gutscheincode einen Rabatt von 34% erhalten.

Als erstes müssen Sie das Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie auf die Schaltfläche „Proceed to Product Activation“ klicken, um das Plugin zu aktivieren. Sie befindet sich direkt über der Liste der installierten Plugins.

Daraufhin wird ein Bildschirm angezeigt, in den Sie Ihren Benutzernamen und Ihr Passwort eingeben können. Folgen Sie einfach den Anweisungen auf dem Bildschirm. Sobald Ihr Konto verifiziert ist, werden Sie wieder zu Ihrer Website weitergeleitet.

Klicken Sie anschließend auf die Schaltfläche „Mit CSS Hero anpassen“ oben in der Symbolleiste Ihrer WordPress-Verwaltung.

Dadurch gelangen Sie zu Ihrer Website, auf der CSS Hero läuft. CSS Hero verwendet einen WYSIWYG-Editor (What You See Is What You Get).

Wenn Sie auf ein beliebiges Element Ihrer Seite klicken, wird auf der linken Seite eine Symbolleiste angezeigt, mit der Sie Anpassungen vornehmen können.

Klicken Sie dann auf Ihr WordPress-Logo oben auf der Seite.

Danach klicken Sie auf den Link „Erweiterte Requisiten anzeigen“.

Dadurch erhalten Sie noch mehr CSS-Anpassungsoptionen.

Suchen Sie dann das Feld „Maße“. Hier finden Sie die Optionen „Maximale Breite“ und „Maximale Höhe“.

Ändern Sie diese auf die von Ihnen bevorzugte Bildgröße. Wenn Sie möchten, dass das Bild die gleichen Abmessungen behält, ändern Sie nur die Höhe oder die Breite.

Die Änderungen, die Sie vornehmen, 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, damit die Änderungen wirksam werden.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Größe Ihres WordPress-Logos zu ändern. Vielleicht interessieren Sie sich auch für unsere Expertenauswahl der besten Live-Chat-Software für kleine Unternehmen und unsere Liste der unverzichtbaren WordPress-Plugins für Unternehmenswebsites.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.