Mittlerweile gehört diese Variante bereits zu den Klassikern im Bereich Webdesign: Ein Kopfbereich mit einem transparenten Hintergrund, der erst beim Beginn des Scrollens eine feste Hintergrundfarbe erhält. Noch cooler sieht das ganze aus, wenn ihr zunächst eine helle Variante eures Logos anzeigen lasst, doch diese bei Beginn des Scrollens mit einer dunklen Version ersetzt. Zumindest die Hälfte dieser Feature-Kombination geht mit den Standard-Einstellungen leicht von der Hand (der Logowechsel ist etwas komplizierter), doch wie funktioniert das eigentlich, wenn man auf den Theme Builder von Divi setzt? Wir erläutern es euch in diesem Tutorial.

Template für den Header im Theme Builder erstellen

1. Geht zunächst auf den Theme Builder von Divi, den ihr im Admin-Bereich unter Divi -> Theme Builder findet.
2. Erstellt ein neues Template für den Kopfbereich / Header eurer Seite.
3. Fügt hier zunächst eine Sektion hinzu, in die Sektion kommt eine vollbreite Zeile und in die vollbreite Zeile kommt ein Menü-Modul.

Damit steht schon einmal das grobe Gerüst für euren Header. In den Einstellungen des Menüs wollt ihr die Variante des Logos hochladen, das standardmäßig angezeigt werden soll, also bevor man scrollt.

Beim hochgeladenen Logo sollte es sich um die Version des Logos handeln, die ihr VOR dem Scrollen anzeigen möchtet.

Jetzt gehen wir die wichtigsten Einstellungen durch, um den transparenten Header zu erzeugen, der beim Scrollen eine Hintergrundfarbe bekommt.

Änderungen bei der Sektion selbst

Zunächst solltet ihr die Hintergrundfarbe auf transparent ändern. Dazu wählt ihr einfach den Punkt „Hintergrund“ aus und ihr gebt entweder händisch den Farbcode „rgba(0,0,0,0)“ an oder schiebt den Transparenz-Schieberegler ganz nach unten (wichtig ist im Grunde immer nur die letzte 0 bei der Farbe, es kann also auch „rgba(255,255,255,0)“ sein). Dadurch hat euer Kopfbereich keine Hintergrundfarbe mehr und wird standardmäßig über eurem Hintergrundbild platziert, das ihr auf der jeweiligen Seite hochgeladen habt.

Macht weiter mit dem Bereich „Design“, wählt dort „Zwischenraum“ und setzt den Innenabstand (Padding) sowohl oben als auch unten auf 0px.

Geht in die erweiterten Einstellungen und wählt dort bei „Scroll Effects“ (ganz unten) die Option „Stick to Top“ für den ersten Punkt „Scroll Effects“ aus.

Bei den Scroll-Effekten muss die Einstellung „Stick to Top“ ausgewählt werden

Das war es auch schon. Hier nochmal mit dem Filter „Geänderte Stile anzeigen“ die Änderungen auf einen Blick:

Änderungen an der Zeile

Hier müssen ein paar zusätzliche Anpassungen vorgenommen werden. Zunächst solltet ihr wieder auf die Hintergrund-Einstellungen gehen. Klickt hier auf das kleine Reißnagel-Icon, um die Sticky-Styles zu öffnen. Dann legt ihr nur für den Sticky-Zustand weiß (oder eben die Farbe eurer Wahl) als Hintergrundfarbe fest.
Nochmal: KEINE Hintergrundfarbe im Standard-Zustand, aber in den Sticky-Styles dann z. B. weiß.

Weiter geht es im Registerreiter „Design“. Hier wollt ihr unter „Größe einstellen“ den Spaltenabstand ändern und auf den Spaltenabstand Wert 1 setzen.
Die Breite sowie die Maximalbreite der Zeile müsst ihr jeweils auf 100% ändern.
Im Bereich Zwischenraum wollt ihr den Innenabstand (Padding) oben auf 20px und unten auf 0px ändern. Dazu vergebt ihr links und rechts jeweils 10% Padding.
Wechselt immer noch bei Innenabstand (Padding) auf die Sticky-Styles und vergebt hier 10px als padding-top. Dadurch schrumpft der Header ein klein wenig, wenn ihr mit dem Scrollen beginnt.

Alles auf einen Blick:

Zuletzt müsst ihr noch in die erweiterten Einstellungen und dort dann………. „Arbeitsstelle“ auswählen. Das ist die absolut hervorragende Übersetzung für das englische „position“, das natürlich wesentlich mehr Sinn ergibt. (Nebenbei erwähnt… wir haben ein Tutorial, in dem wir euch erläutern, wie ihr die Übersetzung von Divi verbessert.)

Die Standardeinstellungen für die Position / „Arbeitsstelle“ der Zeile muss „Absolute“ sein

Ändert den Standard-Wert hier auf „Absolute“, geht dann in die Sticky-Styles und wählt hier unbedingt „Relative“. Das ist der wichtigste Teil dieses Tutorials.

Wichtig: Die Sticky-Einstellung für die Zeile muss auf „Relative“ geändert werden!

Einstellungen für das Menü

Ich will hier nicht unendlich tief ins Detail gehen, weil wir euch in unseren Tutorials grundsätzlich nicht erklären, welche Schrift ihr auswählen müsst und wie ihr dieser eine Farbe gebt… das ist immerhin kein Tutorial von Elegant Themes.
Geht zunächst auf die Hintergrundfarbe und setzt diese wieder auf eine Transparenz (s.o.).
Empfehlen würde ich euch hier, die Maximalbreite des Logos zu ändern. Ich persönlich bin ein großer Fan davon, das Logo noch etwas kleiner zu machen, sobald man zu scrollen beginnt, daher würde ich euch dazu raten, diese Maximalbreite nochmal weiter zu verkleinern, wenn ihr auf die Sticky-Styles geht.
Die Schriftfarbe ist bei mir standardmäßig häufig weiß und beim Scrollen wird diese auf eine dunkle Farbe geändert. Also auch hier wieder mit den Sticky-Styles arbeiten.

Änderung auf ein anderes Logo beim Scrollen

Um jetzt noch diesen letzten Trick umsetzen zu können, müsst ihr zunächst die Version des Logos, die beim Scrollen angezeigt werden soll, in eure Mediathek hochladen. Klickt die Datei anschließend an und nutzt die Funktion „URL in die Zwischenablage kopieren“.

Rechts unten im Screenshot seht ihr die URL der hochgeladenen Datei und darunter den Button „URL in die Zwischenablage kopieren“

Dann wieder zurück in den Theme Builder und in die Einstellungen des Menüs. Geht hier auf „Erweitert“ und dann zu „Benutzerdefinierte CSS“.
Ihr findet hier als letzten Punkt „Menü Logo“. Wählt wieder die Sticky-Styles an und gebt dann folgende Zeile ein:

content: url("URL-EURES-LOGOS-BEIM-SCROLLEN.png");

So sieht das dann in etwa aus:

Dadurch ändert sich das Logo jetzt beim Scrollen auf das von euch in die Mediathek hochgeladene Logo.

CSS Code Snippets

Wir waren der Ansicht, dass sich alles noch etwas weiter optimieren lässt. Wir haben u. a. den Standard-Abstand zwischen dem Menü-Modul sowie dem zentrierten Logo darüber etwas verkleinert und dann noch einmal dafür gesorgt, dass beim Scrollen dieser Abstand etwas kleiner wird (um den Header zusätzlich schrumpfen zu lassen). Diese Änderungen ließen sich nicht ohne eigenes CSS umsetzen, daher teilen wir hier nochmal unseren Code mit euch:

/* Transparent Header that fixes on scroll */
#page-container header.et-l .et_pb_section .et_pb_menu .et_pb_menu__logo {
  transition: all 300ms ease;
}
#page-container header.et-l .et_pb_section .et_pb_menu ul li a {
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all 300ms ease;
}
#page-container header.et-l .et_pb_section.et_pb_sticky .et_pb_row {
  padding-top: 10px !important;
}
#page-container header.et-l .et_pb_section.et_pb_sticky .et_pb_menu ul li a {
  padding-top: 15px;
  padding-bottom: 15px;
}

Probiert einfach aus, ob es für euch ebenfalls gut funktioniert und passt ggf. die Werte für die Abstände noch etwas an. Diese Anpassungen müsst ihr definitiv nicht machen, es ist nur unsere zusätzliche Empfehlung für einen möglichst hübschen Header.

Wir hoffen, das Tutorial hat euch vernünftig durch den Prozess geführt. Seid ihr an einer bestimmten Stelle hängen geblieben? Dann lasst es uns in einem Kommentar wissen und wir gehen gerne auf eure Fragen ein!