Sticky Header mit Elementor

Einen Sticky Header Effekt mit Elementor zu erstellen ist relativ einfach. Dazu benötigt man kein extra Plugin. Mit etwas CSS oder copy&paste bekommen wir diesen Effekt.

Sticky Header mit Elementor 1

Zuerst einen eigenen Header erstellen und diesen Abschnitt “sticky” machen. Der “Offset Effekt” (scroll in pixel) gibt an, wann der sticky Effekt ausgeführt werden soll.

Sticky Header mit Elementor 2

Falls ihr auch das Logo verkleinern möchtet, dem Logo eine Klasse “logo” geben

Sticky Header mit Elementor 3

Jetzt unter “Erweitert – Eigenes CSS” folgenden CSS Code eintragen

Diesen Code eintragen unter “Eigenes CSS”

Sticky Header mit Elementor 4

Mehr Infos zu “sticky Header” direkt bei Elementor: https://elementor.com/blog/sticky-scrolling-effect/

Standardbild
Mario
Hier schreibt Mario Röder, Gründer und Inhaber von Digital-Workshop.at. Ich helfe Unternehmen und Online Shop Betreibern, ihre Webseite zu optimieren und zu pflegen. Somit haben Sie mehr Zeit für Ihr Unternehmen und mehr Erfolg.
Abonnieren
Benachrichtige mich bei
0 Comments
Inline Feedbacks
View all comments