Ein neues Projekt – ein neues Problem. Der Kunde hat zwei Unternehmensbereiche mit unterschiedlichen Logos. Das passende Logo sollen im jeweiligen Bereich der Website angezeigt werden. Seite A soll also Logo A anzeigen, Seite B das Logo B, jeweils im Header (nicht im Inhaltsbereich).

WordPress und auch Divi sehen dafür keine Lösung vor. Das Logo wird einmal unter Divi > Theme-Optionen > General eingestellt und fertig. Eine Lösung wäre es, ein Child-Theme anzulegen und direkte Änderungen im PHP-Code von header.php vorzunehmen. Das ist mir allerdings zu kompliziert und möglicherweise fehlerbehaftet.

Divi (Elegant Themes) zeigt auf dem Blog, wie ein Logo beim Wechsel auf die statische Navigation (beim Scrollen nach unten) gewechselt werden kann. Das hilft in unserem speziellen Fall aber auch nicht weiter – wir suchen eine Lösung „Logo anzeigen abhängig von der Inhaltsseite“.

Letztendlich habe ich eine schnelle Lösung ersonnen, die nicht perfekt ist aber mit ein wenig CSS schnell umgesetzt werden kann:

1. Das Logo für die Seite A unter unter Divi > Theme-Optionen > General hochladen. Damit haben wir jetzt auf jeder Seite das gleiche Logo, das immer per Default angezeigt wird.

2. Die Seite im Visuellen Builder von Divi aufrufen, die das Logo B erhalten soll.

3. Die Seiteneinstellungen im Footer auswählen.

Divi Theme: Die Seiteneinstellungen aufrufen

4. Unter Fortgeschritten gibt es die Möglichkeit, eigenen (benutzerdefinierten) CSS-Code einzufügen. Ganz wichtig: dieser Code wird nur für die aktuell verwendete Inhaltsseite verwendet. Damit ist es genau das, was wir für unser Problem gesucht haben.

Benutzerdeinfiertes CSS für Divi in WordPress

5. Der CSS-Code:

/* Default-Logo abschalten */
#logo {
display: none;
}
 
/* neues Logo einfügen */
.et_menu_container:before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 150px;
background-size: 100%;
background: url("http://deine-url-zum-logo-b.png");
background-repeat: no-repeat;
}

Im ersten Teil wird das Standard-Logo (Logo A) abgeschaltet.  Dann erfolgt das Einfügen von Logo B.

Update (17.05.18):

Mittlerweile habe ich eine Variante gefunden, die noch einmal deutlich kürzer ist und einwandfrei funktioniert:

/* Default-Logo abschalten */
#logo {
    display: none;
}
/* neues Logo einfügen */
.et_header_style_left .logo_container:before {
    content: url("http://deine-url-zum-logo-b.png");
}

Ein Problem gibt es noch:

Es ist keine Verlinkung mehr auf dem Logo. Per Standard erhält das Logo einen Link auf die Startseite, so wie es der Nutzer erwartet. Dafür habe ich noch keine Lösung gefunden. Hierzu ist es notwendig, das das neue Bild genau zwischen den <a href> geschrieben wird.

Update (18.05.18):

Mittlerweile habe ich die Lösung gefunden, damit das neue Logo auch korrekt verlinkt wird. Eigentlich ganz simpel, wenn man denn darauf kommt… 😉

Der CSS-Code:

/* neues Logo einfügen */
.et_header_style_left #logo {
    content: url("http://deine-url-zum-logo-b.png");
}

Das Logo wird also in dieser Variante nicht abgeschaltet, sondern einfach überschrieben. Bisher habe ich das noch nicht auf allen Geräten getestet, es sollte aber einwandfrei funktionieren, sofern das Logo B mindestens so groß oder größer ist als Logo A.

Sofern ihr das Logo nicht auf der linken Seite habt (Kopfzeilen-Stil: Standard in Divi), sondern z.B. zentriert verwendet (Kopfzeilen-Stil: Zentriert), so müsst ihr natürlich den Selektor entsprechend anpassen (in diesem Fall: .et_header_style_centered statt .et_header_style_left).