In diesem Beitrag zeige ich dir, wie du in Elementor den Header beim Scrollen ändern kannst (Hintergrundfarbe, Logo, Farbe der Menü-Schrift, Farbe des Hamburger-Icon, etc.).
Das alles funktioniert mit einem einfachen CSS-Code, den du dir hier kopieren und dann einfach bei deiner Webseite einfügen kannst.
In diesem Video demonstriere ich den Effekt:
Das ganze funktioniert allerdings nur dann, wenn du den Header auch wirklich mit Elementor erstellt hast. Dafür benötigst du die Pro-Version von Elementor (hier kannst du dir die Preise ansehen*).
Kommen wir jetzt aber zur Schritt für Schritt Anleitung:
#1 Header beim Scrollen anhängen (Sticky Header)
Als erstes muss der Header logischerweise beim Scrollen angehängt bleiben (Sticky Header). Wenn du das noch nicht gemacht hast, kannst du es hier einstellen:
Erweitert – Bewegungseffekte – Sticky: oben
Setze zusätzlich die Option Offset Effekte auf 1 oder höher.
#2 Benötigte CSS-Klassen einfügen
Damit das ganze korrekt funktioniert, müssen wir CSS-Klassen definieren. Das klingt zwar kompliziert – ist aber ganz einfach 🙂
2.1 CSS Klasse beim Header-Abschnitt einfügen
Als erstes musst du beim Header-Abschnitt eine CSS Klasse einfügen.
Klicke dafür mit der rechten Maustaste auf den Header Abschnitt (Abschnitt bearbeiten), dann auf Erweitert.
Bei CSS-Klassen dann einfach dieses Wort eingeben (ohne Punkt davor):
stickyheadersection
2.2 CSS Klasse beim Logo-Bild einfügen
Jetzt einfach beim Logo auch eine CSS-Klasse einfügen. Klicke dafür mit der rechten Maustaste auf dein Logo (Bild bearbeiten), dann auf Erweitert.
Bei CSS-Klassen dann einfach dieses Wort eingeben (ohne Punkt davor):
logo
2.3 CSS Klassen beim Navigationsmenü einfügen
Jetzt noch zwei Klassen beim Navigationsmenü einfügen.
Klicke dafür mit der rechten Maustaste auf das Menü (Navigationsmenü bearbeiten), dann auf Erweitert.
Bei CSS-Klassen dann einfach diese zwei Wörter eingeben (ohne Punkt davor), einfach mit einem Abstand (Leerzeichen) dazwischen:
menu-color sticky-menu-items
#3 CSS Code einfügen (copy & paste)
Jetzt kannst du einfach den CSS-Code kopieren und einfügen. Klicke dazu mit der rechten Maustaste auf den Header-Abschnitt (Abschnitt bearbeiten), dann auf Eigenes CSS.
Hier kannst du den folgenden CSS-Code einfach reinkopieren.
In meinem kostenlosen Newsletter erhältst du exklusive Inhalte, Elementor Tricks und CSS Codes.
Einfach kostenlos abonnieren und ich schicke dir das Passwort zum Freischalten des folgenden Inhalts.
Double-Opt-In und DSGVO (du erhältst im Anschluss noch eine E-Mail, um die Anmeldung zu bestätigen). Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung der hier eingegebenen Daten zu. Mehr Informationen dazu in der Datenschutzerklärung.
#4 CSS Code weiter anpassen
Wenn du Schritt #1 bis #3 erledigt hast, dann sollte jetzt alles ordnungsgemäß funktionieren. Natürlich kannst du jetzt noch Anpassungen vornehmen (Farben, Logo, etc.).
Farben anpassen
Die Farben im CSS-Code kannst du ganz einfach ändern. Ich habe in diesem Code immer die Farben schwarz (Farbcode #000000) und weiß (#FFFFFF) genommen. Füge hier einfach den Farbcode ein, den du verwenden möchtest.
Header Logo anderes Bild
Nachdem du den CSS Code eingefügt hast, muss du nur noch die URL der Bilddatei ändern. Diese findest du einfach in deiner WordPress Mediathek bei dem jeweiligen Bild.
Wenn du dein Logo beim Scrollen gar nicht ändern möchtest, dann lösche dieses Stück des CSS-Code einfach.
Fragen oder Hilfe benötigt?
Bitte beachte, dass ich keinen kostenlosen Support per Mail anbieten kann – dafür fehlt mir einfach die Zeit. Wenn du Fragen zum Code hast, oder irgendetwas nicht funktioniert, dann hinterlasse bitte hier einfach ein Kommentar.
