Sticky Header mit Elementor erstellen

So fixierst du deinen Header am oberen Bildschirmrand mit Hilfe von Elementor Pro.

Was ist Sticky Scrolling?

Sticky Scrolling ist eine Option in Elementor Pro die es möglich macht verschiedenste Element auf deiner Website während des Scrollens zu fixieren und somit schöne Effekte zu erzielen . 

Sticky Header in Elementor

Besonders beliebt ist die Funktion „Sticky“ bei Headern. Bestimmt hast du schon öfters auf anderen Webseiten gesehen, dass der Headerbereich am oberen Bildrand während des Scrollens „kleben“ bleibt. Grad bei langen Websites hat ein Sticky Header den Vorteil, dass man ohne lästiges zurückscrollen einfach durch die Seite navigieren kann.

Um deinen Header am oberen Bildrand zu fixieren, musst du im Navigator den Abschnitt deines Headers auswählen. Anschließend öffnet sich links das Bearbeitungsmenü für diesen Abschnitt. Hier wählst du den Reiter „Erweitert“ → „Bewegungseffekte„. Nun kannst du die verschiedenen Bewegungseinstellungen entdecken. Klicke das DropDown bei dem Titel „Sticky“ an und wähle „Oben„, wenn dein Header am oberen Bildschirmrand fixiert werden soll. 

Hier kannst du auch einstellen, ob dieser Effekt ebenfalls auf dem Tablet oder Smartphones angezeigt werden soll. Möchtest du den Effekt nur auf dem Desktop anwenden, so entferne einfach die Optionen „Tablet“ und „Mobil“ indem du auf das „X“ klickst. 

Soll dein Header nicht direkt am Bildschirmrand, sondern beispielsweise 20px darunter fixiert werden, dann kannst du dieses im Bereich „Auslassen“ einstellen.

Elementor Sticky Effekt
Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
Share on email

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.