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

Möchten Sie lernen, wie Sie die Größe Ihres WordPress-Logos ändern können?

Das Logo Ihrer Website ist ein wichtiger Teil Ihrer Marke, daher möchten Sie sicherstellen, dass es gut aussieht. Manchmal ist jedoch nicht klar, wie man das Logo größer oder kleiner macht.

In diesem Artikel zeigen wir Ihnen, wie Sie die WordPress-Logo-Größe in jedem Theme einfach ändern können.

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

Egal, ob Sie jemanden beauftragen, ein benutzerdefiniertes Logo für Ihre WordPress-Website zu entwerfen, oder es selbst mit einem kostenlosen Logo-Maker entwerfen, Logos sind ein wichtiger Bestandteil jeder Website.

Die Standard-WordPress-Bildgrößen funktionieren jedoch möglicherweise nicht für Ihr Logo.

Ein zu kleines Logo wird nicht auffallen, während ein zu großes Logo die Besucher von Ihren anderen Inhalten ablenken kann.

Während Sie grundlegende Bildbearbeitung in WordPress durchführen können, ist das Logo Ihrer Website ein wichtiger Teil Ihres Brandings, daher möchten Sie sicherstellen, dass es gut aussieht. Lassen Sie uns nun sehen, wie Sie die Logo-Größe in WordPress richtig ändern können. Verwenden Sie einfach die Schnelllinks unten, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Ändern Sie die Logo-Größe mit dem WordPress Customizer (empfohlen)
• Methode 2: WordPress-Logo-Größe mit dem Full Site Editor ändern (Nur Block-basierte Themes)
• Methode 3: Ändern der WordPress-Logo-Größe durch Bearbeiten von CSS (funktioniert mit den meisten Themes)
• Methode 4: WordPress-Logo-Größe ohne CSS-Bearbeitung ändern (Kein Code)

Methode 1: Ändern Sie die Logo-Größe mit dem WordPress Customizer (empfohlen)

Der einfachste und unkomplizierteste Weg, die Logo-Größe in WordPress zu ändern, ist die Verwendung des Theme Customizers. Diese Methode funktioniert jedoch nur, wenn Ihr Theme zusätzliche Bildgrößen in WordPress unterstützt.

Die gute Nachricht ist, dass viele der beliebten Themes integrierte Tools zum Ändern der Logo-Größe mitbringen, darunter Divi, Astra und Ultra.

Hinweis: Ihr Logo wird immer nur so groß sein wie das Bild, das Sie hochladen. Stellen Sie also sicher, dass Sie ein größeres Bild hochladen, wenn Sie das Logo größer machen möchten.

In dieser Anleitung zeigen wir Ihnen, wie Sie Ihr Logo in den Themes Divi, Astra und Ultra ändern können, aber die Methode ist für die meisten beliebten WordPress-Themes ähnlich.

Selbst wenn wir Ihr spezifisches Theme nicht behandeln, lohnt es sich trotzdem zu prüfen, ob Sie die Logo-Größe über den WordPress Customizer ändern können.

Gehen Sie einfach zu Darstellung » Anpassen und suchen Sie nach Einstellungen, die als Header, Website-Identität, Logo oder ähnlich bezeichnet sind.

Wenn Sie diese Einstellungen nicht sehen, können Sie jederzeit die Dokumentation Ihres Themes überprüfen oder sich an den Entwickler wenden, um Hilfe zu erhalten. Weitere Informationen zu diesem Thema finden Sie in unserem Leitfaden unter So fragen Sie richtig nach WordPress-Support und erhalten ihn.

Wenn Ihr Theme keinen integrierten Logo-Editor hat, müssen Sie Methode 2 oder 3 verwenden.

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

Gehen Sie zuerst zu Divi » Theme Customizer und klicken Sie auf „Header & Navigation“.

Wählen Sie danach „Primäre Menüleiste“ aus.

Hier können Sie die Größe Ihres Logos ändern. Sie könnten es zum Beispiel als Bild in voller Größe anzeigen.

Zuerst müssen Sie die Einstellung 'Menühöhe' anpassen. Diese steuert die Höhe Ihres gesamten Navigationsmenüs, was definiert, wie groß Sie Ihr Logo machen können.

Danach können Sie die Einstellung „Maximale Logo-Höhe“ ändern, die einen Prozentsatz der gesamten Menühöhe darstellt.

Sie können den Schieberegler 'Maximale Logo-Höhe' nach oben und unten ziehen, bis Sie die perfekte Größe für Ihr WordPress-Blog gefunden haben.

Wenn Sie mit dem Aussehen des Logos zufrieden sind, klicken Sie auf „Veröffentlichen“, bevor Sie den WordPress Customizer schließen.

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

Wenn Sie das Astra-Theme verwenden, gehen Sie zu Darstellung » Anpassen und klicken Sie auf die Menüoption „Header Builder“.

Klicken Sie danach auf die Menüoption 'Seitentitel & Logo'.

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

Ziehen Sie einfach den Schieberegler 'Logo-Breite' nach links oder rechts, um das Logo größer oder kleiner zu machen.

Der WordPress Customizer zeigt diese Änderungen in seiner Live-Vorschau an, sodass Sie verschiedene Größen ausprobieren können, um zu sehen, was für Ihre WordPress-Website am besten aussieht.

Wenn Sie mit dem Aussehen des Logos zufrieden sind, klicken Sie auf „Veröffentlichen“, um es auf Ihrer Website live zu schalten.

WordPress-Logo-Größe im Ultra WordPress Theme ändern

Um die Größe des Logos im Ultra-Theme anzupassen, gehen Sie zu Darstellung » Anpassen und klicken Sie im linken Menü auf 'Site-Logo & Untertitel'.

Klicken Sie danach auf das Dropdown-Menü 'Site-Logo'.

Wenn es erscheint, wählen Sie die Radio-Schaltfläche 'Logo-Bild'.

Jetzt können Sie das Logo größer oder kleiner machen, indem Sie neue Größen in die Felder eingeben.

Sie können die Breite mit der linken Box und die Höhe mit der rechten Box ändern.

Wenn Sie das Logo basierend auf der Originalgröße skalieren möchten, ändern Sie nur die Abmessungen in einem Feld.

Während Sie neue Abmessungen eingeben, ändert sich die Größe des Logos in Echtzeit.

Wenn Sie mit dem Aussehen des Logos zufrieden sind, klicken Sie auf „Veröffentlichen“, um Ihre Änderungen live zu schalten.

Methode 2: WordPress-Logo-Größe mit dem Full Site Editor ändern (Nur Block-basierte Themes)

Wenn Sie ein blockbasiertes Theme wie Hestia Pro verwenden, können Sie Bilder ohne Qualitätsverlust vergrößern, indem Sie den Full Site Editor verwenden.

Ändern Sie die Logo-Größe mit dem Vollständigen Website-Editor.

Um zu beginnen, gehen Sie einfach im WordPress-Dashboard zu Themes » Editor.

Standardmäßig zeigt der Full-Site-Editor die Home-Vorlage Ihres Themes an.

Um das Logo Ihrer Website zu skalieren, wählen Sie normalerweise „Muster“ aus.

Der Editor zeigt nun eine Liste aller Muster und Vorlagenteile an, aus denen Ihr Theme besteht.

Klicken Sie einfach auf die Option „Header“, die das Layout des Headers Ihres Blogs steuert.

WordPress zeigt nun alle Header-Vorlagenteile an, aus denen das aktuelle Theme besteht. Suchen Sie einfach den Header, den Sie bearbeiten möchten, und klicken Sie darauf.

Sie sehen nun eine Vorschau dieser Header-Vorlage. Um fortzufahren und die Vorlage zu bearbeiten, klicken Sie auf das kleine Stiftsymbol.

Wenn Sie damit fertig sind, klicken Sie, um das Logo Ihrer Website auszuwählen.

Wählen Sie im rechten Menü die Registerkarte 'Block'.

Wählen Sie dann die Registerkarte 'Einstellungen'.

Sie können das Logo jetzt größer oder kleiner machen, indem Sie den Schieberegler „Bildbreite“ ziehen.

Wenn Sie mit dem Aussehen des Logos zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“.

Wenn Sie nun Ihre Website besuchen, sehen Sie das neue Logo in Aktion.

Methode 3: Ändern der WordPress-Logo-Größe durch Bearbeiten von CSS (funktioniert mit den meisten Themes)

Wenn Ihr WordPress-Theme keine integrierte Unterstützung zum Ändern der Logo-Größe bietet, ist eine andere Option das Hinzufügen von benutzerdefiniertem CSS. Dies ermöglicht es Ihnen, Ihr Logo ohne ein separates Bildoptimierungs-Plugin zu skalieren.

Zuerst müssen Sie die CSS-Klasse des Logos Ihrer Website kennen. Um diese Information zu erhalten, gehen Sie zu einer beliebigen Seite, auf der das Logo angezeigt wird, z. B. zur Startseite Ihrer Website.

Klicken Sie hier mit der rechten Maustaste irgendwo auf dieser Seite und wählen Sie die Option „Untersuchen“.

Dies öffnet ein Inspektionsmenü, das den gesamten Code für die Homepage anzeigt.

Klicken Sie danach auf das Symbol „Ein Element auswählen“, das wie ein Mauszeiger aussieht.

Bewegen Sie dann einfach die Maus über das Logo Ihrer Website, bis die CSS-Klasse angezeigt wird.

Es wird ähnlich wie im folgenden Bild aussehen.

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

Gehen Sie im WordPress-Dashboard zu Darstellung » Anpassen. Klicken Sie dann auf die Option 'Zusätzliches CSS'.

Sie können nun benutzerdefinierten CSS-Code in den kleinen Code-Editor einfügen.

Fügen Sie einfach die zuvor gefundene CSS-Klasse hinzu und geben Sie dann die neuen Logo-Abmessungen an, die Sie verwenden möchten.

Hier ist ein Beispiel, wie der Code aussehen wird:

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

Stellen Sie sicher, dass Sie die CSS-Klasse img.custom-logo und den Wert max-height ändern.

Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“, um sie live zu schalten.

Methode 4: WordPress-Logo-Größe ohne CSS-Bearbeitung ändern (Kein Code)

Wenn Sie sich nicht wohl dabei fühlen, Theme-Dateien zu bearbeiten oder benutzerdefiniertes CSS hinzuzufügen, können Sie stattdessen ein WordPress-CSS-Plugin verwenden. Diese Plugins ermöglichen es Ihnen, visuelle Änderungen an Ihrer Website vorzunehmen, ähnlich wie bei einem Drag-and-Drop-Page-Builder.

Wir empfehlen die Verwendung von CSS Hero, da es Ihnen ermöglicht, Bilder zu optimieren und fast jeden CSS-Stil anzupassen, ohne eine einzige Zeile CSS-Code schreiben zu müssen.

Angebot: WPBeginner-Leser erhalten über unseren CSS Hero Gutscheincode einen Rabatt von 40%.

Das erste, was Sie tun müssen, ist, das Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung klicken Sie auf die Schaltfläche 'Zum Produkt-Abonnement fortfahren', um das Plugin zu aktivieren. Sie finden sie direkt über Ihrer Liste der installierten Plugins.

Dies bringt Sie zu einem Bildschirm, auf dem Sie Ihren Benutzernamen und Ihr Passwort eingeben können. Befolgen Sie einfach die Anweisungen auf dem Bildschirm, um Ihr Konto zu verifizieren. Sie werden nach Abschluss zurück zum WordPress-Dashboard weitergeleitet.

Klicken Sie danach in der WordPress-Admin-Symbolleiste auf die Schaltfläche „Mit CSS Hero anpassen“.

Sie sehen nun Ihre Website mit CSS Hero darüber.

CSS Hero verwendet einen WYSIWYG (What You See Is What You Get) Editor. Klicken Sie also einfach auf ein beliebiges Element auf der Seite, und Sie sehen eine Symbolleiste mit allen Anpassungen, die Sie vornehmen können.

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

Wählen Sie danach den Link „Erweiterte Eigenschaften anzeigen“, um alle Änderungen anzuzeigen, die Sie an Ihrem WordPress-Logo vornehmen können.

Im Feld „Maße“ finden Sie die Optionen „Maximale Breite“ und „Maximale Höhe“.

Um die Größe des Logos zu ändern, geben Sie einfach neue Zahlen in diese Felder ein. Wenn Sie die ursprünglichen Bildabmessungen beibehalten möchten, ändern Sie nur die Höhe oder die Breite.

Die Live-Vorschau zeigt Ihre Änderungen automatisch an. Das bedeutet, Sie können verschiedene Größen ausprobieren, um zu sehen, was am besten aussieht.

Wenn Sie mit dem Aussehen Ihres Logos zufrieden sind, klicken Sie auf „Speichern und Veröffentlichen“, um das skalierte Logo live zu schalten.

Wir hoffen, dieser Artikel hat Ihnen geholfen, die Größe Ihres Logos zu ändern. Möglicherweise möchten Sie auch unsere Expertenauswahl der besten WordPress-Plugins für die Bildverwaltung sehen oder unseren Leitfaden zur Auswahl des besten Bildformats für WordPress.

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.