Elementor Scroll

Scroll Snap und Page Scroll

tl;dr: Wer das Scrolling steuern will oder zwischen Viewports Animationen einbauen will sollte sich die Optionen in Elementor und die Erweiterung Dynamic Content for Elementor näher anschauen.

Animationen einzelner Elemente wurden hier beschrieben. in diesem Post geht es um das Verhalten ganzer Container (Abschnitte) und aller ihrer Inhalte, die den ganzen Viewport ausfüllen oder größer sind.

Voraussetzung ist ein aktives Elementor Pro.

Die Funktion Scroll Snap ist unter 

Dashboard > Elementor > Einstellungen | Eigenschaften (Stabile Merkmale) | Scroll Snap

zu aktivieren. Danach kann man auf jeder Seite über 

Panel > Seitenseinstellungen (links unten) > Erweitert | Scroll Snap

die Funktion für die aktuelle Seite/Beitrag/Template aktivieren. 

Scroll Snap mit Elementor Pro

Wenn man Scroll Snap aktiviert gibt es 3 Einstellungen, die jeweils responsiv für Tablet, Mobil etc. auch angepasst werden können.

Snap Position ist default auf oben eingestellt. Das bedeutet die obere Kante des Containers wird an der oberen Kante des Fensters ausgerichtet. 
Mitte bedeutet, dass der Container vertikal zentriert im Viewport beim Scrollen einrastet. Unten schliesslich richtet an der unteren Fensterkante aus. 

Was aber nun, wenn man einen Sticky Header hat? Hier kommt nun die Option Snap Padding ins Spiel. Wenn zB. einen Sticky Header mit einer Höhe von 100px hat und hier den Wert 100 einträgt rastet bei der Einstellung oben der Conatiner eben 100 px unter der oberen Fensterkante, und damit auch unter dem Header ein.  Gegengleich funktioniert das auch mit einem Footer und der Snap Position unten.

Die Einstellung Scroll Snap Stop kann von der Defaulteinstellung Normal auch auf Always umgestellt werden. Normal bedeutet, dass beim Scrollen nur gestoppt wird wenn der Abschnitt/Container der nächste ist, bei Always ist das "Überscrollen" eines Containers ohne Stop nicht möglich - wer's braucht…

Elementor Scroll Snap
Die Einstellungen für Scroll Snap auf einer Seite

Container Höhen Einstellen

Besonders viel Sinn machen diese Scroll Snap Einstellungen wenn man ein Design (typisch für Onepager) hat wo die verschiedenen Inhaltsbereiche untereinander Bildschirmfüllend angezeigt werden sollen.

Um einen Container in der vollen Bildschirmhöhe anzuzeigen wird die Angabe 

… Container > Layout | Min. Höhe: 100 vh 

verwendet. Wenn man aber zB. einen Sticky Header mit der Höhe 100 px verwendet wäre der Container (siehe Snap Padding im vorigen Absatz) dann höher als der Viewport, man muss also die Höhe des Headers von der Mindest Höhe substrahieren.  Dazu kann man statt der Einheit das Editiersymbol beim Eingabefeld für die Zahl verwenden und zB:

calc(100vh - 100px)

eingeben. Nun passt die Höhe wieder.

Elementor Conatiner Mindeshöhe
Unter Elementor kann man auch CSS calc() verwenden.
Beispielseite mit Conatinerhöhen in neuem Tab öffnen

Was aber nun, wenn man mehr will? Wie so oft bietet hier die Erweiterung Dynamic Content for Elementor einiges an Features. Hinsehen lohnt sich. 

Page Scroll von Dynamic Content

Aktiviert werden die entsprechenden Features unter 

Dashboard > dynamic.ooo > Features > Page Settings | Page Scroll

Die Einstellungen findet man dann im 

Panel > Seiten Einstellungen | Page Scroll

es gibt 3 unterschiedliche Bereiche: 

  • Effects Scroll
  • Snap Scroll
  • Inertia Scroll
Page Scroll Dynamic Content
Die Erweiterung Page Scroll von Dynamic Content

Um Effects Scroll zu nutzen verwendet man CSS-Klassen. Dazu muss man den betroffenen Container(n) oder Abschnitt(en) unter

Panel > Container | Layout | CSS-Klassen

eine Klasse zuweisen. In dem Beispiel hier wurde die Klasse einfach scrolleffect genannt (Syntax beachten: Kleinschreibung, keine Sonder- oder Leerzeichen verwenden).

Hinweis: beim Arbeiten mit Elementor kann es vorkommen, dass die Effekte nicht sofort sichtbar sind. Speichern, Vorschau und Neuladen können hier Abhilfe schaffen.

CSS Klasse Container zuweisen
Einem Container oder Abschnitt wird unter > Erweitert > Layout eine Klasse zugewiesen

Die zuvor erfundene und den gewünschten Teilen zugeordnete Klasse wird nun unter Custom section class eingetragen, die man in den Seiteneinstellungen bei aktivem Page Scroll und aktiviertem Effects Scroll angezeigt bekommt.  

Man kann die Scroll-Effekte bestimmten Viewports zuordnen.

Wenn das erledigt ist kann man nun in der Zeile  Animation Effects einen oder mehrere auswählen, wobei beliebige Kombinationen möglich sind. Zur Auswahl stehen

  • Scale Down (verkleinern)
  • Opacity (Deckung)
  • Fixed
  • Rotation
  • Lazy
  • Eger
  • Slalom
  • Spin
  • SpinRev
  • DriftLeft
  • DriftRight
  • LeftToRight
  • RightToLeft
  • ZoomInOut
  • ZoomIn
  • ZoomOut
  • Swing
  • Speedy

Diese Animationen sind kombinierbar. So kann man zB mit Opacity und Fixed dafür sorgen, dass ein Container beim Runterscrollen oben stehen bleibt und ausgeblendet wird. Hier ein paar Beispiele auf der Herstellerseite:

dynmaic.ooo effect scroll
Effect Scroll funktionoert am besten, indem man eine Klasse definiert die man dann den gewünschten Containern zuweist

Snap Scroll macht in etwa das, was auch Scroll Snap (s.o.) macht. Nur dass man zusätzlich eine konfigurierbare Navigation erhält und wirklich eine Menge Einstellungen vornehmen kann. Da es sich um Seiteneinstellungen handelt sind Funktionen und Stil-Einstellungen untereinander untergebracht (es gibt keine Einstellungen im Tab Stil).

Custom section class empfiehlt sich für die Definition einer Klasse für die Effekte. (Wie oben). Sollte man die Sektionen dem Theme überlassen kann man mit Interstitial Section jene Sektionen ausnehmen, die kein Scap Scroll können sollen. Unter Scroll Speed kann man die Geschwindigkeit in 1000tel Sekunden angeben, Offset dient zur Einstellung eines Abstandes am oberen Fensterrand.

Über die Funktion Set section height to full screen kann man die Höhenangaben auch dem Plugin überlassen. Hier gilt einfach zu überprüfen, ob das gewählte Theme das auch so unterstützt. Wenn nicht: Klassen definieren!

Die folgenden Funktionen sind auf den ersten Blick ev. ein wenig unklar, experimentieren hilft: Overflow Scroll erlaubt das Scroll Snap die Kontrolle über das Scrollen von überlaufenden Sektionen. Update Hash definiert. ob die Browser-Scroll-Position bei durchscrollen Upgedatet werden soll. Über Show Scrollbar können die Scrollbars ausgeblendet werden; Touch Scroll legt fest, ob Snap Scroll auch touch-scroll-events kontrollieren können soll.

Ein vmtl. wichtigeres Feature für die Verwendung der Erweiterung ist die Option Enable Navigation. Dadurch wird am rechten Rand des Viewports vertikal zentriert eine Navigation eingeblendet, die vielfältig gestaltet werden kann. Von einfachen Punkten bis hin zu eigenen Icons sogar mit Beschriftung (hier werden die CSS-ID's verwendet) sind möglich. Einige Demos auf der Herstellerseite geben einen Vorgeschmack:

Wenn man also die gewünschten anspringbaren Sektionen über eine CSS-Klasse definiert und dann diese Navigation aktiviert bekommt man eine sehr gut konfigurierbare Subnavigation innerhalb der Seite. Besonders für lange Seiten und Onepager eine gute Bedienungserleichterung für die User.

Snap Scroll Panel
Das Umfangreiche Panel zu den Snap Scroll Funktionen von dynamic.ooo
Scroll Snap Navigation Styles
Eine große Auswahl an konfigurierbaren Navigations-Styles für die Sektionen

Die dritte mögliche Option heisst Inertia Scroll, übersetzt so in etwa "träges Scrollen".  Diese Trägheit wird durch einen Koeffizienten gesetzt, dazu kann man der Sektion eine Neigung (Skew) und ein Abprallen (Bounce) angeben. Das ganze kann wie gewohnt vertikal oder aber auch horizontal angewendet werden. 

Von den Voraussetzungen her ist das Ganze aber nicht ganz so trivial, dynamic.ooo hat es für die Verwendung mit dem Theme OceanWP voreingestellt. Man kann ausprobieren, ob das verwendete Theme funktioniert indem man den Automatic Wrapper aktiviert, sollte das nicht funktionieren kann man die IDs für Viewport und Content Scroll eintragen. Ein wenig ausprobieren wird wohl notwendig sein, hier je eine Beispielanwendung für 

Sicher ein sehr trendiges Gestaltungselement das jedoch umsichtig eingesetzt verwendet werden sollte.

Inertia Scroll
Träges Scrollen mit Bouncing auch horizontal - inertia Scroll von dynamic.ooo

Fazit

Mit Elementor Pro kommt man also recht einfach vom simplen Scrollen zu einem userfreundlichen Scroll Snap. Weiter gedacht und angewendet mit dem Erweiterungspaket Dynamic Content for Elementor kann aus einem Scrollvorgang ein wichtiges Designelemenent der Usererfahrung werden. 

Veröffentlicht am: 6. August 2023
Letztes Update am: 29. Juli 2026

2 Kommentare

  • Adrian
    Vor 3 Jahren Antworten

    Super hilfreich! Eine Frage hätte ich noch. Meine Seite ist so aufgebaut, dass ich einen übergeordneten Hauptcontainer habe, in den ich mehrere Unterconteiner eingefügt habe. Nach diesem Schema folgend auf meiner Startseite noch drei weitere Hauptcontainer. Wenn ich jetzt den Scroll-Snap aktiviere, bleibt man auch bei den untergeordneten Container stehen. Ich möchte aber, dass man nur bei den „Hauptcontainern“ stehen bleibt. Habt Ihr einen Lösungsvorschlag? Vielen Dank schonmal!

    • A
      Harry Martin
      Vor 3 Jahren Antworten

      Die Scroll Snap Funktion von Elementor bietet hier wohl keine Antwort, aber jene von dynamic.ooo page-scroll: hier kannst du den Containern, die einrasten sollen, eine Klasse zuweisen die du dann in den Optionen einträgst.

Hinterlasse deinen Kommentar