So erstellst du einen Scroll-Video-Effekt mit Elementor (ganz ohne Plugin!)
Du möchtest, dass deine Website Besucher*innen sofort beeindruckt? Mit einem scrollbaren Video im Hintergrund kannst du genau das erreichen – und das ganz ohne Plugin. In diesem Beitrag zeige ich dir Schritt für Schritt, wie du mit Elementor und einem kleinen Code-Snippet diesen modernen Effekt umsetzt – ideal für kreative Unternehmer:innen, Webdesigner:innen und alle, die ein bisschen mehr Wow auf ihrer Website wollen.
Warum ein scrollbares Video?
Ein solcher Effekt ist nicht nur ein optisches Highlight – er:
zieht sofort Aufmerksamkeit auf sich,
vermittelt Professionalität & Kreativität,
unterstützt dein Branding,
und bleibt garantiert in Erinnerung.
Aber keine Sorge: Du brauchst dafür kein technisches Know-how, nur Elementor Pro und das passende Video.
So funktioniert’s: Step-by-Step Anleitung
Vorbereitung im Elementor Editor
Lege einen neuen Container an.
Füge ein selbstgehostetes Video als Hintergrund ein (z. B. als .mp4-Datei mit 30 FPS).
Stelle sicher, dass das Video automatisch abgespielt wird, ohne Ton und ohne Player-Steuerung.
Style & Platzierung
Entferne äußere Abstände, stelle die Breite auf 100 %.
Passe die Mindesthöhe (z. B.
500vh) an, um genug Scrollfläche zu haben.Mache den nächsten Abschnitt transparent, damit der Effekt beim Scrollen sichtbar wird.
HTML-Code einfügen
Füge unter dem Video ein HTML-Widget ein.
Verwende dort den GSAP + ScrollTrigger Code (Quelle: Nicolai Palmkvist – YouTube-Link im Video).
Der Code sorgt dafür, dass das Video mit dem Scrollverhalten synchron läuft.
Finale Anpassungen
Stelle sicher, dass dein Header sichtbar bleibt (Z-Index).
Nutze Sticky-Effekte und überprüfe die Sichtbarkeit auf Desktop.
Wichtig zu wissen:
Funktioniert nur am Desktop (Mobile leider nicht).
Das Video muss im richtigen Format und mit der passenden Framerate vorliegen.
Für ein professionelles Ergebnis: hochwertige, lizenzierte Videos verwenden.
Fazit: Mehr WOW auf deiner Website
Mit einem Scroll-Video-Effekt setzt du dein Branding auf ein neues Level – und zeigst direkt beim ersten Scroll, dass deine Website mehr ist als 0815. Wenn du lernen willst, wie du solche Effekte mit Leichtigkeit umsetzt oder deine Website richtig strategisch aufbaust, begleite ich dich gerne.
➡️ Zum Video-Tutorial auf YouTube: Scroll Video Effekt mit Elementor erstellen
➡️ Lust auf professionelles Webdesign oder Webdesign lernen? Besuche meine Seite: michellebrandboutique.com
Du möchtest noch mehr Webdesign-Hacks? Dann folge mir auf Instagram @michelle.webdesign
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen



