Elementor Pro transparent sticky header animation

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.

Elementor Header Mindesthöhe

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%

Scrolling Effect und Transparenz einstellen

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.

Effects relativ to “gesamte Seite”

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.

Elementor Header Margin und Z-Index

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.

Elementor Header Bewegungseffekt

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.

weitere artikel