Mit Elementor Pro kannst header scrolling effects einfügen. Ich zeige dir wie du einen Transparenten Header beim scrollen schrumpfen lassen kannst zu einem kleineren, nicht-transparentem Header.
Voraussetzungen:
Elementor Pro
Mindesthöhe festlegen
Erstelle einen Header in Elementor. Markiere den Abschnitt des Headers. Wichtig: Gib ihm im “Layout”-Bereich eine Mindesthöhe. Welche Höhe du wählst ist egal, merke dir aber wie viel.
Transparenz und Scrolling Effect zuweisen
Im Bereich “Stil” wählst du eine Hintergrundfarbe aus. Diese nimmt der Header an sobald du scrollst. Damit er das macht, musst du “Scrolling Effects” aktivieren und bei der “Transparenz” folgende Sachen einstellen:
- Direction: Fade In
- Ebene: 10
- Viewport: Beginn 0% und Ende 5%
Die Einstellungen für die Transparenz kannst du schließen. Anschließend stellst du bei “Effects Relative To” die gesamte Seite ein, weil wir den Effekt im Verhältnis zur gesamten Seite haben möchten.
Negativen Margin und Z-Index einfügen
Füge im Tab “Erweitert” einen negativen Margin ein. Dieser sollte die gleiche Zahl besitzen wie die Mindesthöhe, nur negativ. In unserem Beispiel sind das -100px. Damit schiebt sich der Body der Webseite hinter den Header.
Vergebe auch einen Z-Index von 95. Das stellt sicher, dass der Header über allen anderen Elementen auf der Webseite liegt.
Sticky Header Effect
Stelle bei den Bewegungseffekten Sticky auf “Oben” und trage bei “Offset” den Wert 100 ein. Dieser gibt die Distanz des scrollen an, nach welcher der Effekt eintritt.
Eigene CSS einfügen
Füge anschließend im Tab “Erweitert” unter “Eigenes CSS” folgenden Code ein.
selector.elementor-sticky--effects >.elementor-container{
min-height: 80px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}Trage bei “min-height“ eine Höhe ein, welche niedriger ist als die Mindesthöhe aus Schritt 1. Der Header schrumpft auf die eingetragene Höhe.
Wenn du nun scrollst, hast du einen transparenten Header, welcher beim scrollen schrumpft und eine Hintergrundfarbe bekommt.
