Suche
Suche
Close this search box.
Animationen mit Elementor

Animationen und Effekte in Elementor

tl;dr: Animationen sind – vorsichtig eingesetzt – ein wichtiges Werkzeug um Websites angenehmer und aufregender zu gestalten. Elementor bietet eine Reihe von Tools, um Animationen schnell und einfach – auch ohne Coding – umzusetzen.

Inhalt

Möglichkeiten für Animationen

In diesem Artikel werden 4 grundsätzliche Möglichkeiten vorgestellt, wie man Inhalte in und mit Elementor animieren und mit Effekten versehen kann:

  1. Widgets
  2. Animationen bei Hover
  3. CSS Filter
  4. Bewegungseffekte

Je nach Möglichkeiten und Kenntnissen kann man mit wenigen Klicks einfache Animationen erstellen oder aber auch umfangreiche Animationen aus anderen Umgebungen darstellen. Allen gemeinsam ist, dass man keine übertriebenen Movies (mp4 oder ähnliches) verwendet, sondern daß alle Bewegung die entsteht im Browser während der Betrachtung errechnet wird. Die übertragene Datenmenge kann dadurch sehr gering und die Geschwindigkeit recht hoch sein. 

Widgets mit Animationen

Von den 4 hier vorgestellten Widgets ist der Fortschrittsbalken auch in der freien Version verfügbar. Die drei anderen benötigen eine Elementor Pro Lizenz

Fortschrittsbalken

Diese Website ist
animiert zu 71%

Ein recht klassisches Gestaltungselement ist  der bis zu einem bestimmten Wert wachsende Balken. Titel, Text und der Wert selber (von 0 – 100) können auch als dynamische Werte eingefügt werden. Farbe, Schriften, Größe etc. können gestaltet werden. 

Elementor Fortschrittsbalken

Animierte Überschrift

Diese Überschrift ist animiert
Vorher animierter Text ausgetauschter Text nachher

Mit Hilfe dieses Widgets kann man (auch Teile) von Überschriften animieren, indem man den Animationsstil Hervorgehoben oder Rotierend wählt. Im ersten Fall kann man aus einer Reihen von Gestaltungsmöglichkeiten (Rund, Gewellt, Unterstrichen, Doppelt, Doppelt Unterstrichen ZickZack Unterstrichen, Diagonal, Durchgestrichen und X-Durchgestrichen) wählen. 

Rotierend bedeutet, dass der Text selber geändert werden kann und verschiedene Textstücke angezeigt werden. Die Animation von rotierenden Text kann als Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide und Slide Down eingestellt werden.

Die Überschrift selber ist 3geteilt in Text DavorAnimierter Text und Text Danach. Zusammen mit den Einstellungs,öglichkeiten für den Stil ergeben sich aus diesen Optionen eine sehr umfangreiche Palette für animierte Headlines, die auffällig sein können aber nicht müssen. Ein sehr gutes Widget!

Progress Tracker

Wahlweise rund oder als Balken kann der Progress-Tracker angezeigt werden. Dabei handelt sich um ein Tool, dass grafisch den Scrollfortschritt innerhalb eines Bereiches anzeigt. Bei langen Seiten wird es sinnvoll sein, dieses Widget Sticky zu stellen, um es auch im Viewport zu halten. 

Der Bereich kann die gesamte Seite, der Inhaltsbereich oder auch ein über einen CSS-Selector gewählt werden. Die Gestaltungmöglichkeiten sind wir zu erwarten, der praktische Nutzen eines solchen Werkzeuges sei mal dahin gestellt.

 

Elementor Progress Tracker

Lottie Files

Lottie Files sind eine gute Möglichkeit, um sehr flexible Animationen aus Vektorgrafiken zu gestalten. Das Problem dabei ist, dass man zum Erzeugen dieser Animationen Adobe After Effects benötigt. Ganz abgesehen von den Kosten ist auch die Bedienung nicht ganz einfach, wer nur hin und wieder eine Animation für eine Website benötigt wird sich das nicht antun. Alternativ dazu gibt es kostenlosen Haiku Animator (Mac, Win). Hier kann man Sketch, Figma, Adobe Illustrator oder auch SVG-Dateien verknüpfen und animieren. 

Noch einfacher ist es, wenn man seine SVG-Dateien über Lottifiles.com animiert. Hier kann man seine SVG-Datei uploaden und aus einer Auswahl von Animationsarten wählen und danache die fertige .json-Datei downloaden. Diese ist über das Widget einfach in die Mediathek zu laden und einzubinden. Das werkform-Logo wurde so animiert. 

Lottifiles arbeitet an einem Online-Generator. Damit soll es künftig möglich sei nicht nur zu animieren sondern die Grafiken gleich komplett online zu erstellen. Wir sind gespannt.

Elementor Lottie Files

Animationen bei Hover

Eine gerne eingesetzte Technik ist es, Elemente bei Mauskontakt zu verändern. Das entspricht dem gelernten haptischen Feedback im richtigen Leben, es fühlt sich richtig an, wenn man über ein Element streicht und dieses dann darauf reagiert.  Die Beispiele hier verdeutliche den Effekt: beides ist in Ordnung, aber die Animation rechts verstärkt das Gefühl bei der Bedienung.

Je nach Widget sind die Möglichkeiten unterschiedlich, jedoch lassen sich die selben Arten der Animation überall einstellen.

Bei dem Beispiel hier wurde die Animation Pulse gewählt, zusätzlich wurde die Rahmenfarbe ebenfalls bei Hover geändert.

Möglich sind solche Animationen bei den Widgets u.a. bei Button, Icon, Bild. Manche Widgets wie zB. die Bilderbox haben diese Animationen bei Mausberührung im Stil-Tab eingebaut. 

Die verschiedenen Animationsmöglichkeiten werden hier nun anhand des Widgets Icon angezeigt (einfach mit der Maus drüber fahren!).

Elementor Hover Panel
Beispiel Button: unter Hover kann man die Rahmenfarbe und eine Animation bei Mausberührung einstellen.
Grow
Shrink
Pulse
Pulse Grow
Pulse Shrink
Push
Pop
Bounce in
Bounce out
Rotate
Grow Rotate
Float
Sink
Bob
Hang
Skew
Skew Forward
Skew Backward
Wobble Vertical
Wobble Horizontal
Wobble To Bottom Right
Wobble To Top Right
Wobble Top
Wobble Bottom
Wobble Skew
Buzz
Buzz Out

CSS Filter

Auch CSS-Filter lassen sich gut bei Mausberührung einsetzen, sie können aber auch schon bei der initialen Anzeige eines Elements angewendet werden. Für diese CSS-Filter lässt sich auch eine Übergangsdauer einstellen. Also wie lange es dauern soll vom Mauskontakt bis zur vollständigen Anwendung des eingestellten Filters. Ausserdem lassen sich diese Filter gemeinsam einsetzen, es sind also kombinierte Effekte möglich. Zusätzlich lassen sich diese CSS-Filter mit den beschriebenen Hover-Effekten kombinieren.

Diese Filter sind immer dann zu finden, wenn man Bilder einstellen kann: in den Widgets Bild, Bilder-Box, Galerie, Hotspot, CallToAction etc. 

Normalerweise im Tab Stil des jeweiligen Widgets. 

Wie schon der Namen ahnen lässt, wird hier nicht die Mediendatei verändert sondern es werden die Daten (des Bildes) je nach eingestellten Filter umgerechnet. Da das per CSS passiert findet diese Rechenarbeit im Browser statt, der Webserver überträgt einfach die Bilddaten und die entsprechenden CSS-Anweisungen. 

Elementor CSS Filter
CSS Filter tauchen in Elementor oft im Stil-Menu auf, wenn man Bilder einstellen kann
Sonnenblume
Helligkeit

50 - 150

Sonnenblume
Kontrast

50 - 150

Sonnenblume
Sättigung

50 - 150

Sonnenblume
Tönung

50 - 280

Bewegungseffekte

Im Menüpunkt Erweitert jedes Widgets – egal ob es um eine Struktur wie einen Container oder einen Abschnitt oder einen Inhalt wie ein Bild oder eine Überschrift geht – gibt es einen Tab Bewegungseffekte.  Man kann also diese Effekte so gut wie überall auf alles und jedes anwenden. Umgekehrt heisst das, man sollte mit Bedacht vorgehen um nicht zu sehr vom Inhalt abzulenken sondern viel mehr diesen zu Unterstützen.

Scrolling Effekte

Die Bewegungseffekte können an für die unterschiedlichen Darstellungen auf Desktop, Tablet und Handy de- und aktiviert werden. Die wichtigste Einstellung ist der Bezugsrahmen, zu dem die Effekte angewandt werden sollen:  hier ist neben dem Viewport (also der angezeigten Fenstergöße) und der gesamten Seite zu entscheiden. 

Abhängig von dieser Auswahl sind dann bei den einzelnen Effektarten die Punkte zu setzen, zwischen denen der Effekt angewandt werden soll. Hier ist ein wenig Ausprobieren unumgänglich, intuitiv ist dieser Bereich nicht leicht zu erfassen.

Elementor Scrolling Effekte
Verschiedene Scroll-Effekte stehen für alle Elemente der Webseite zur Verfügung

Die Richtung (Direction) ist natürlich immer abhängig von der Art des Effektes, die Geschwindigkeit kann von 1-10 gesetzt werden. Der Viewport gibt an wo der Seitenauschnitt innerhalb des Browserfensters sein muss damit der Effekt wirkt. Die Effekte sind

  • Vertikales Scrollen
  • Horizontales Scrollen
  • Transparenz
  • Unschärfe
  • Drehung
  • Skalierung

Diese Effekte können addiert werden, also zb. eine Bewegungsunschärfe gemeinsam mit einem Horizontalem Scrolling gesetzt werden. 

Effekt Viewport
Neben der Richtung und der Geschwindigkeit muß für jeden Effekt der Bereich (Viewport) angegeben werden, innerhalb dessen der Bewegungseffekt ausgeführt werden soll
Sonnenblume
Vertical Scroll

Geschwindigkeit: 4
Viewport: 25 - 80

Sonnenblume
Horizontal Scroll

Richtung: nach rechts
Geschwindigkeit: 4
Viewport:0-100

Sonnenblume
Transparenz

Richtung: Fade in
Ebene: 10
Viewport: 20 - 80

Sonnenblume
Unschärfe

Richtung: Fade in out
Ebene: 7
Viewport: 30 - 75

Sonnenblume
Drehen

Richtung: Nach Link
Geschwindigkeit 1
Viewport: 0 - 100

Sonnenblume
Skalieren

Richtung: Vergrößern
Geschwindigkeit: 4
Viewport: 20 - 80

Maus Effekte

Wie der Namen schon vermuten lässt ist bei einem Mouse-Effect die aktuelle Cursor-Position im Verhältnis zu dem Element der Ausgangsprunkt für den Bewegungseffekt. Hier kann man Elemente in oder gegen die Mausrichtung bewegen oder über ein sog 3D-Tilt Effekt eine Neigung simulieren. 

Mouse Track
Beim Mouse Track bewegt sich das Element in oder gegen die Richtung der Cursorbewegung
3D Tilt
Der Effekt beim 3D-Tilt ist eine Neigung abhängig vom Mauszeiger.
Sonnenblume
Mouse Track

Richtung: Opposit
Geschwindigkeit 1

Sonnenblume
3D-Tilt

Richtung: Direction
Geschwindigkeit: 4

Sticky

Um Inhalte fest innerhalb des Viewports zu verankern – also das hinausscrollen aus dem sichtbaren Bereich zu verhindern – kann man Elemente und Strukturen Sticky setzen. Häufig wird das für Header eingesetzt, manchmal auch für Footer. Auf dieser Seite die gerade gelesen wird ist die Inhaltsangabe links von diesem Text fest auf der Seite verankert, und zwar so, dass nach oben genug Platz bleibt. 

Zuerst muss man wählen ob das gewählte Element oben oder unten angepinnt werden soll. Weiters kann man (zb für Mobile Geräte) diese Option ausschalten. Als nächstes können 2 Werte gesetzt werden: Auslassen bedeutet, dass zwischen der (zb. oberen) Kante des Viewports und dem Element ein bestimmter Abstand ausgelassen wird. Damit klebt das Element nicht am Fensterrahmen. 

Offset Effekte bedeutet, dass hier ein Wert eingegeben werden kann den der User gescrollt haben muss bevor der Sticky Effekt schlagend wird. 

In der Spalte bleiben bedeutet, dass das sticky gesetzte Element solange sichtbar bleibt, solange die Spalte auch sichtbar ist. Sollte die gesamte Spalte aus dem Viewport verschwinden wird auch das Element aus dem Viewport gescrollt. 

Elemente Sticky setzen
Für festgepinnte Elemente kann man festlegen, in welchen resonsive Modi und ob sie oben oder unten festgesetzt werden sollen
Sonnenblume

Diese Sonnenblume rechts bleibt 120 px (Abstand!) unter dem oberen Fensterrand stehen, sobald nach unten gescrollt wird.

Eingangsanimationen

Jedes Element kann beim Auftauchen innerhalb des sichtbaren Bereiches (Viewport) animiert werden. Zu finden sind die Einstellungen immer im 

... > [Widget] > Erweitert > Bewegungseffekte > Eingangsanimationen

Als Parameter können die Geschwindigkeit und eine Verzögerung gesetzt werden, also ein Zeitraum der zwischen dem Auftauchen im Viewport und dem Beginn der Animation steht. Ausserdem ist es möglich für die unterschiedlichen responsive-Modi verschiedene Animationen einzustellen – das ergibt Sinn, oft sind in der Mobilversion Eingangsanimationen eher störend als hilfreich.

Sonnenblume
Specials

Roll In

Sonnenblume
Light Speed

Light Speed In

Unterteilt werden die Animationen nach Art, gewählt werden kann dann jeweils die Richtung in der Animationen ausgeführt werden:

  • Fading
  • Bouncing
  • Sliding
  • Rotating
  • Attention Seakers
  • Light Speed
  • Specials

Während die ersten 4 ± selbsterklärend sind kommen bei den restlichen Animationsarten die kreativen Ideen der Programmierer durch. 

Elementor Eingangsanimationen
Geschwindigkeit und Anfangsverzögerung kann für jede Eingangsanmiation eingestellt werden

Fazit

Animationen und Effekte sind in Elementor einfach anzuwenden. Die Elementor Pro Version bietet wie immer mehr Auswahl und genauerer Gestaltungsmöglichkeiten. Animationen und Effekte können die Gestaltung einer Webseite sehr gut unterstützen. Sie dürfen aber nie Selbstzweck sein oder mangelnde Kreativität übderdecken.

Sonnenblume
Fading

Fade in left

Sonnenblume
Zooming

Zoom in right

Sonnenblume
Bouncing

Bounce in left

Sonnenblume
Sliding

Slide in right

Sonnenblume
Rotating

Rotate in up left

Sonnenblume
Specials

Roll In

Sonnenblume
Light Speed

Light Speed In