So ändern Sie die Größe Ihres WordPress-Logos

Muneeb WordPress-Tutorials Sep 1, 2021

Ihr Website-Logo soll das weiche Image Ihrer Marke sein. Daher ist es sehr wichtig, wie Ihr Logo angezeigt wird. Auch die Größe des Logos sollte mit dem Gesamtdesign Ihrer Website Hand in Hand gehen.

Für die meisten Benutzer ist es, unabhängig vom verwendeten Theme, ziemlich unklar, dass sie die Größe des Logos ihrer Website ändern können. In diesem Tutorial werden wir einige Möglichkeiten besprechen, die Größe Ihres WordPress-Logos zu ändern.

So ändern Sie die Größe des WordPress-Logos mit dem Customizer

Die Verwendung des WordPress-Anpassers zum Ändern der Größe Ihres Logos ist der einfachste und schnellste Weg, dies zu tun, wenn Ihr Theme dies unterstützt. Viele gängige Themes verfügen über ein Tool zum Ändern der Größe Ihres WordPress-Logos. Ihr WordPress-Logo kann jedoch nur so groß sein wie das von Ihnen hochgeladene Bild, also stellen Sie sicher, dass Sie ein größeres Bild hochladen, wenn Sie ein größeres Logo wünschen.

In diesem Tutorial werden wir Themen wie Divi, Ultra Theme und Astra verwenden, um die Größe unseres WordPress-Logos zu ändern. Der Prozess ist jedoch für alle WordPress-Themes ungefähr gleich.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

So ändern Sie die Größe Ihres WordPress-Logos im Divi-Theme

Gehen Sie in Ihrem WordPress-Dashboard zu Divi und wählen Sie dann Theme Customizer .

Als nächstes müssen Sie das Kopfzeilen- und Navigationsmenü aus der Liste drücken.

Klappen Sie die Option Primäre Menüleiste nach unten, wo Sie die Größe des Logos ändern können.

Die Menü - Option Höhe steuert die Höhe Ihres Navigationsmenü und auch die Größe Ihres Logos diktieren. Wohingegen die Logo Max Height die Gesamthöhe des Menüs definiert.

Stellen Sie sicher , dass Sie Ihre Einstellungen veröffentlichen, wenn Sie fertig sind.

So ändern Sie die Größe Ihres WordPress-Logos im Ultra-Theme

In Ultra Theme auf WordPress können Sie die Größe des Logos ändern, indem Sie die Option Anpassen im Erscheinungsbild- Bedienfeld in Ihrem WordPress-Dashboard aufrufen.

Klicken Sie auf das Dropdown-Menü Site-Logo und Slogan.

Als nächstes müssen Sie aus den drei runden Schaltflächen Logo-Bild auswählen.

Hier können Sie Ihr neues Logo hinzufügen oder mit dem bestehenden arbeiten. Sie können völlig neue Dimensionen für Ihr Logo einrichten und die Größe Ihres Logos ändert sich in Echtzeit.

So ändern Sie die Größe Ihres Logos im Astra-Design

Gehen Sie zu Ihrem WordPress-Dashboard und wählen Sie Anpassen aus dem Erscheinungsbild-Bereich und drücken Sie dann die Dropdown-Schaltfläche Kopfzeile .

Drücken Sie die Option Site Identity, um die Größe Ihres Logos zu ändern.

Bewegen Sie den Breitenbalken auf der angegebenen Skala nach links oder rechts und Sie sehen, wie sich die Größe Ihres Logos in Echtzeit ändert.

Wenn Sie mit Ihren Einstellungen zufrieden sind, veröffentlichen Sie das Logo und fahren Sie fort.

Wenn Ihr Theme den WordPress-Customizer nicht unterstützt, gibt es hier einige andere Möglichkeiten, die Größe Ihres WordPress-Logos zu ändern.

So ändern Sie die Größe Ihres WordPress-Logos mit benutzerdefiniertem CSS

Sie müssen sich keine Sorgen machen, wenn Ihr WordPress-Theme den WordPress-Customizer nicht unterstützt. Sie können die Größe Ihres WordPress-Logos ändern, indem Sie benutzerdefiniertes CSS hinzufügen.

Um zu beginnen, müssen Sie zu Ihrer WordPress-Homepage gehen und mit der rechten Maustaste klicken, um die Inspect-Option auszuwählen, die alle Codes der Seite anzeigt.

Um das Logo-Element Ihrer Website auszuwählen, klicken Sie auf das obere rechte Mauszeiger-Symbol.

Navigieren Sie dann zu Ihrem Website-Logo und die CSS-Klasse wird angezeigt, wie in der Abbildung unten gezeigt. Diese CSS-Klasse wird verwendet, um die Größe Ihres Logos zu ändern, also bearbeiten und speichern Sie es in einem Texteditor wie Notepad.

Gehen Sie als Nächstes über das Aussehen- Panel in Ihrem WordPress-Dashboard zu Anpassen und wählen Sie dann das zusätzliche CSS- Menü.

Als nächstes müssen Sie die zuvor kopierte CSS-Klasse hinzufügen und dann neue Dimensionen für Ihr Logo hinzufügen. Hier ist ein Beispiel, das Sie verwenden können.

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

Sie müssen auch die img.custom-logo- Klasse in die CSS-Klasse ändern, die Ihr Theme unterstützt, und die max-height auf Ihre bevorzugte Höhe.

Wenn Sie mit den Änderungen fertig sind, stellen Sie sicher, dass Sie sie veröffentlichen .

So ändern Sie die Größe des Logos mit einem Plugin

Diese dritte Methode ist für diejenigen gedacht, die den WordPress-Anpasser nicht verwenden können und die CSS-Methode nicht verwenden können. Mit einem einfachen Styling-Plugin können Sie die Größe Ihres Logos ändern.

CSS Hero ist eines der besten WordPress-Styling-Plugins, mit dem Sie die Größe Ihres Logos ändern können. Es ermöglicht Ihnen, fast jedes CSS-Element auf Ihrer WordPress-Website zu bearbeiten, ohne Codierung verwenden zu müssen.

Sobald Sie das Plugin installiert und aktiviert haben. Sie werden aufgefordert, Ihr Produkt zu aktivieren. Drücken Sie Weiter zur Aktivierung und geben Sie dann Ihre Zugangsdaten ein.

Wenn Sie zu Ihrer Website weitergeleitet werden, klicken Sie ganz oben auf Mit CSS Hero anpassen.

Es bringt Sie zurück zu Ihrer Website, wobei CSS Hero im Hintergrund läuft. Wenn Sie CSS hero verwenden, sobald Sie Ihren Cursor auf ein Element setzen, erscheint links ein Menü zur Anpassung.

Sie müssen festgestellt haben, dass Sie Ihren Cursor auf Ihr WordPress-Logo setzen müssen. Drücken Sie dann im Anpassungsmenü auf der linken Seite auf ShowAdvanced Props .

Mit den Maßoptionen können Sie die Größe Ihres Logos ändern. Sie haben sowohl die Option Max. Breite als auch die Option Max. Höhe .

Wenn Sie Ihre Abmessungen angeben, werden Ihnen die Änderungen in Echtzeit angezeigt. Wenn Sie mit den Änderungen zufrieden sind, veröffentlichen Sie Ihre Einstellungen.

So können Sie die Größe Ihres WordPress-Logos ändern, unabhängig davon, welches Theme Sie verwenden. Wir haben Methoden für alle möglichen Situationen aufgelistet, damit Sie die Größe Ihres Logos ändern können.

Das ist alles von uns für dieses Tutorial. Folgen Sie uns auf Facebook und Twitter , um kein Update zu verpassen.

Divi WordPress Theme