Hinzufügen eines benutzerdefinierten Logo-Bildes in Divi
Das Divi-Theme von Elegant Themes bietet eine einfache Möglichkeit, ein benutzerdefiniertes Logo in die Kopfzeile Ihrer Website einzubinden. Ihr Logo ist ein zentraler Bestandteil Ihres Corporate Designs und wird standardmäßig oben auf jeder Seite angezeigt – meist im linken oder mittleren Bereich der Kopfzeile.
1. Wo finde ich die Logo-Einstellungen in Divi?
Loggen Sie sich zunächst in Ihr WordPress-Dashboard ein und navigieren Sie im Menü zu Divi > Theme Options.
Dort finden Sie auf der Registerkarte Allgemein (General) den Bereich Logo. In diesem Feld können Sie die vollständige URL Ihres Logobildes angeben oder ein neues Bild direkt hochladen.
2. Logo über die Theme Options hochladen
So gehen Sie Schritt für Schritt vor:
- Öffnen Sie im WordPress-Dashboard den Menüpunkt Divi > Theme Options.
- Bleiben Sie auf der Registerkarte General (Allgemein).
- Suchen Sie das Eingabefeld mit der Bezeichnung Logo.
- Klicken Sie auf die Schaltfläche Upload unter dem Feld.
- Laden Sie Ihr Logo-Bild aus der Mediathek hoch oder wählen Sie ein bereits vorhandenes Bild aus.
- Kopieren Sie die URL des hochgeladenen Logos und fügen Sie sie in das Feld ein.
- Klicken Sie auf Save Changes, um Ihre Änderungen zu speichern.
Nach dem Speichern wird das Logo automatisch im Header-Bereich Ihrer Website angezeigt.
3. Empfohlene Logo-Größen und Formate
Damit Ihr Logo auf allen Geräten optimal dargestellt wird, sollten Sie folgende Empfehlungen beachten:
- Dateiformat: webp (mit transparentem Hintergrund) oder SVG für skalierbare Logos
- Empfohlene Größe: ca. 250 × 100 Pixel (Breite × Höhe)
- Dateigröße: unter 200 KB für schnelle Ladezeiten
Divi passt das Logo automatisch an verschiedene Bildschirmgrößen an. Für besonders hochauflösende Geräte (z. B. Retina-Displays) können Sie eine doppelt so große Version des Logos hochladen.
4. Logo über den Divi Theme Customizer ändern
Alternativ können Sie das Logo auch über den WordPress Customizer anpassen. Gehen Sie dazu auf Design > Customizer > Header & Navigation > Hauptmenü.
Dort finden Sie ebenfalls die Option, Ihr Logo hochzuladen oder zu ersetzen. Der Vorteil dieser Methode ist, dass Sie die Änderungen direkt in der Live-Vorschau sehen können, bevor Sie sie speichern.
5. Logo im mobilen Menü anpassen
Divi verwendet standardmäßig dasselbe Logo sowohl für die Desktop- als auch für die mobile Ansicht. Wenn Sie jedoch ein anderes Logo für Smartphones verwenden möchten (z. B. eine kompaktere Version), können Sie dies im Theme Builder unter den Header-Einstellungen anpassen. Hier können Sie für das mobile Menü ein alternatives Logobild festlegen oder per CSS-Regel (Media Query) ein anderes Bild einblenden.
6. Logo-Dateien im Theme-Paket
Falls Sie noch kein Logo besitzen, finden Sie im Divi-Theme-Paket zwei Beispiel-Dateien, die Sie als Grundlage verwenden können:
- logo.psd – eine bearbeitbare Photoshop-Datei mit Text-Layer, ideal für die Anpassung Ihrer eigenen Schriftzüge.
- logo_blank.png – eine leere Grafikdatei, die Sie in einem beliebigen Bildbearbeitungsprogramm nutzen können.
Beide Dateien befinden sich im Verzeichnis /psd/ des Divi-Themes.
7. Tipps für ein professionelles Erscheinungsbild
- Verwenden Sie nach Möglichkeit eine Vektorgrafik (SVG), um gestochen scharfe Darstellung auf allen Geräten zu gewährleisten.
- Nutzen Sie ausreichend Weißraum um Ihr Logo, um die Lesbarkeit zu erhöhen.
- Vermeiden Sie komplexe Formen oder zu kleine Schriftgrößen im Logodesign.
- Passen Sie das Logo-Farbschema an das Design Ihres Divi-Themes an (z. B. Header-Hintergrund).
8. Fazit
Das Hinzufügen eines benutzerdefinierten Logos in Divi ist unkompliziert und schnell erledigt. Über die Theme Options oder den Customizer können Sie Ihr Logo mit wenigen Klicks einfügen und jederzeit anpassen. Ein klar erkennbares, hochauflösendes Logo stärkt Ihre Markenidentität und sorgt für ein professionelles Erscheinungsbild Ihrer Website auf allen Geräten. Bei Fragen zur optimalen Einbindung Ihres Logos oder zu Divi-Designanpassungen steht Ihnen unser Support unter hello@mikas.at gerne zur Verfügung.
