Hinzufügen eines benutzerdefinierten Logo-Bildes in Divi

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 deiner Website einzubinden. Dein Logo ist ein zentraler Bestandteil deines 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?

Logg dich zunächst in dein WordPress-Dashboard ein und navigiere im Menü zu Divi > Theme Options.
Dort findest du auf der Registerkarte Allgemein (General) den Bereich Logo. In diesem Feld gibst du die vollständige URL deines Logobildes an oder lädst ein neues Bild direkt hoch.

2. Logo über die Theme Options hochladen

So gehst du Schritt für Schritt vor:

1. Öffne im WordPress-Dashboard den Menüpunkt Divi > Theme Options.
2. Bleib auf der Registerkarte General (Allgemein).
3. Such das Eingabefeld mit der Bezeichnung Logo.
4. Klicke auf die Schaltfläche Upload unter dem Feld.
5. Lade dein Logo-Bild aus der Mediathek hoch oder wähle ein bereits vorhandenes Bild aus.
6. Kopiere die URL des hochgeladenen Logos und füge sie in das Feld ein.
7. Klicke auf Save Changes, um deine Änderungen zu speichern.

Nach dem Speichern wird das Logo automatisch im Header-Bereich deiner Website angezeigt.

3. Empfohlene Logo-Größen und Formate

Damit dein Logo auf allen Geräten optimal dargestellt wird, solltest du 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) lädst du eine doppelt so große Version des Logos hoch.

4. Logo über den Divi Theme Customizer ändern

Alternativ passt du das Logo auch über den WordPress Customizer an. Geh dazu auf Design > Customizer > Header & Navigation > Hauptmenü.
Dort findest du ebenfalls die Option, dein Logo hochzuladen oder zu ersetzen. Der Vorteil dieser Methode ist, dass du die Änderungen direkt in der Live-Vorschau siehst, bevor du sie speicherst.

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 du jedoch ein anderes Logo für Smartphones verwenden möchtest (z. B. eine kompaktere Version), passt du das im Theme Builder unter den Header-Einstellungen an. Hier legst du für das mobile Menü ein alternatives Logobild fest oder blendest per CSS-Regel (Media Query) ein anderes Bild ein.

6. Logo-Dateien im Theme-Paket

Falls du noch kein Logo besitzt, findest du im Divi-Theme-Paket zwei Beispiel-Dateien als Grundlage:

• logo.psd – eine bearbeitbare Photoshop-Datei mit Text-Layer, ideal für die Anpassung deiner eigenen Schriftzüge.
• logo_blank.png – eine leere Grafikdatei, die du in einem beliebigen Bildbearbeitungsprogramm nutzt.

Beide Dateien befinden sich im Verzeichnis /psd/ des Divi-Themes.

7. Tipps für ein professionelles Erscheinungsbild

• Verwende nach Möglichkeit eine Vektorgrafik (SVG), um gestochen scharfe Darstellung auf allen Geräten zu gewährleisten.
• Nutz ausreichend Weißraum um dein Logo, um die Lesbarkeit zu erhöhen.
• Vermeide komplexe Formen oder zu kleine Schriftgrößen im Logodesign.
• Pass das Logo-Farbschema an das Design deines 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 fügst du dein Logo mit wenigen Klicks ein und passt es jederzeit an. Ein klar erkennbares, hochauflösendes Logo stärkt deine Markenidentität und sorgt für ein professionelles Erscheinungsbild deiner Website auf allen Geräten. Bei Fragen zur optimalen Einbindung deines Logos oder zu Divi-Designanpassungen hilft dir unser Support unter hello@mikas.at gerne weiter.