Schritt für Schritt erobert Elementor die WordPress Welt. Mit der kontinuierlichen Einführung von tollen neuen Features fällt es immer schwerer, der Pro Version des Plugins zu widerstehen. Mit einem der letzten großen Updates, wurden die Motion Effects eingeführt. Wenn auch du mehr Bewegung auf deine Website bringen möchtest, zeigt dir dieser Artikel einige Tipps für die Anwendung von Motion Effects sowie Gründe, die für den Einsatz von Bewegungseffekten sprechen.
Welche Möglichkeiten der Motion Effects gibt es?
Mit Elementor hast du die Möglichkeit, zwei Arten von Bewegungseffekten anzuwenden:
Effekte durch Scrollen
Darunter fallen sowohl die vertikale Bewegung (klassischer Parallax Effect) als auch die horizontale Bewegung eines Objektes während man mit der Maus nach unten oder oben scrollt. Elementor bietet hier aber auch weitere Möglichkeiten an, ein Element beim Scrollen zu animieren, wie z. B. die Transparenz anpassen, einen Blur-Effekt hinzuzufügen, oder die Objekte zu drehen bzw. zu skalieren.
Effekte durch Mausbewegung
Maus-Tracking und 3D Neigung (3D Tilt) gehören zu den Effekten, die durch die Maus getriggert werden können. Darunter ist zu verstehen, dass abhängig von der Mausbewegung, die Elemente eine bestimmte Animation ausführen.
Viewport verstehen
Beim Einsatz von Motion Effects ist es wichtig, die Einstellung Viewport zu verstehen. Dabei handelt es sich um die gesamte Bildschirmgröße unabhängig vom Gerät, mit dem die Website betrachtet wird. Die Voreinstellung hier ist standardmäßig von 0 bis 100 %. Das bedeutet, dass der eingestellte Effekt über die gesamte Bildschirmhöhe bzw. -breite (bei horizontalem Bewegungseffekt) vollzogen wird. Ist das nicht gewünscht, sollte dieser Wert dementsprechend angepasst werden.
Gründe für den Einsatz von Motion Effects
Auf den ersten Blick braucht das Feature kein Mensch. Jede Website kann auch gut ohne die Motion Effects auskommen, ohne an Professionalität einzubüßen. Warum also das Ganze?
Show Effekt
Mit dem Release von Motion Effekt sorgt Elementor dafür, dass nun auch ein Otto-Normal-Website Besitzer aufwendige Animationen ohne Programmierkenntnisse umsetzen kann. Ich vermute, dass wir in Zukunft viel mehr Webseiten mit bewegten Elementen beim Scrollen erleben werden. Die Mehrheit dieser Scrolling Effekte wird wohl eher eine Styling Ursache haben und weniger die Aussage des Inhalts unterstützen. Bei den Motion Effects ist deshalb viel Show dabei. Wenn die Animationen jedoch gut umgesetzt sind, können sie durchaus einen gewissen WOW-Effekt beim Besucher auslösen und für zusätzliche Aufmerksamkeit sorgen, was im besten Fall dazu führt, dass die Seite über die Online Kanäle geteilt wird und somit die Popularität der Seite zunimmt.
Interaktivität fordern
Der Website Betreiber verspricht sich durch den Einsatz von Animationseffekten u. a. auch eine höhere Interaktivität der User. Passend dazu wurde mit den Motion Effects auch das Maus Tracking Feature eingeführt. Wie bereits erwähnt, folgt dabei das ausgewählte Element der Mausbewegung der User. Ein mögliches Ziel könnte deshalb sein, durch die Scrolling-Effekte die Verweildauer auf der Seite zu erhöhen und somit ein positives User Signal an Google zu senden, was zu einem besseren Ranking der Seite führen kann.
Call to Action
Es geht aber nicht nur um die SEO Vorteile durch positive Nutzersignale. Mit den Motion Effects könnte man den Besucher auch dazu bewegen, eine bestimmte Aktion auf der Webseite auszuführen (Call to Action). Ein animierter Pfeil in Richtung einer Telefonnummer oder eines Kontaktformulars könnte dabei schon ausreichen.
Videos auf dem Vormarsch
Ein weiterer Trend, der über die letzten Jahre zu beobachten ist, ist der große Erfolg des Mediums Video. Egal ob es um Unterhaltung oder Informationsgewinnung geht, das bewegte Bild wird oft dem geschriebenen Wort vorgezogen. Diese Entwicklung spricht ebenfalls für die Animationen und Scrolling Effekte auf einer Website, erst recht, wenn sie dazu beitragen, ein Thema oder ein Produkt besser zu beschreiben.
SEO Nachteile durch Motion Effects?
Du solltest allerdings darauf achten, die Bewegungseffekte ganz dezent einzusetzen. Denn ansonsten könnten die genervten User deine Website sofort verlassen, wobei sich die Absprungrate erhöht, was wiederum für Google ein Zeichen dafür ist, deine Website im Ranking abzustufen.
Es lohnt sich auch, einen Vorher/Nachher Performance Check durchzuführen. Für den Fall, dass sich die Ladezeiten durch die Bewegungseffekte zu sehr verschlechtern, wäre es wahrscheinlich ratsam, doch auf die Animationen zu verzichten. Denn was schlecht für die Performance ist, ist auch schlecht für SEO. Welchen Einfluss die Motion Effects auf die Performance haben, werden wir uns aber gleich noch ansehen.
Tipps bei der Anwendung von Motion Effects
Ein wenig Planung schadet nicht
Natürlich kann man die Funktionen sofort am eigenen Design ausprobieren und mit den verschiedenen Einstellungen herumspielen. Was jedoch bei der Anwendung von Motion Effects schnell auffällt, man muss sich durchaus überlegen, wie die „Szene“ am Ende aussehen sollte. Welche Website Elemente sollen beim Scrollen bewegt werden? In welche Richtung? Soll sich der Hintergrund mitbewegen? Wie sollen die einzelnen Elemente positioniert werden?
Beachte bei deiner Planung, dass sich nur der Hintergrund bewegen lässt, nicht jedoch die Hintergrund Überlagerung. Die Bewegungseffekte für den Hintergrund findest du übrigens unter dem Tab „Stil“.
Mit der Positionierung vertraut machen
Sobald man sich mit den Bewegungseffekten beschäftigt, muss man sich auch zwangsweise mit der richtigen Positionierung auseinandersetzen. Speziell die Positionierungsmöglichkeiten der Website Elemente in Elementor sind mittlerweile sehr komplex geworden. Die verschiedenen Optionen wie inline, absolut, fixed, etc. überfordern nicht nur Elementor Einsteiger. Um die einzelnen Einstellungsmöglichkeiten besser zu verstehen, ist es hilfreich, sich ein wenig CSS Hintergrundwissen anzueignen. Eine der besten Quellen, um sich CSS Kenntnisse kostenlos anzueignen ist aus meiner Sicht die Seite Internetingishard.
Auf Smartphones ausblenden
Während die Bewegungseffekte auf dem Desktop durchaus einen gewissen Charme haben können, sind sie auf den Handys oder Tablets doch eher ein Störfaktor. Es empfiehlt sich deshalb die Motion Effects auf den mobilen Geräten auszuschalten. Das geht mit Elementor relativ einfach.
Beispiel für Motion Effects
Ich musste natürlich das neue Feature sofort ausprobieren und habe deshalb den Hero-Bereich meiner Firmenwebsite angepasst. Im Folgenden findest du ein YouTube Tutorial über die Anwendung von Motion Effects. Mich würde es auch interessieren, was du zu dem Update denkst. Schicke mir gerne eine Nachricht oder hinterlasse einfach unten einen Kommentar.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Wie wirken sich die Motion Effects auf die Performance einer Website aus?
Auf ihrem Blog berichtet Elementor, dass sie für die Motion Effects keine bestehende Bibliothek verwenden, sondern alles von Grund auf neu programmiert haben. Dadurch sollen sich die Motion Effects nur minimal auf die Ladezeiten und die Performance einer Website auswirken.
Mit der Elementor Meetup Gruppe aus München wollten wir es natürlich genau wissen und haben die Probe auf Exempel gemacht. Dabei haben wir eine Seite mit verschiedenen Elementen erstellt und haben beinahe alle vorhandenen Motion Effects an den Objekten ausprobiert. Anschließend haben wir die Seite dupliziert, alle Bewegungseffekte entfernt und beide Seiten mit GTmetrix.com und Pingdom getestet.
Das Ergebnis war für mich persönlich sehr überraschend! Die Motion Effects führen zu keinem erwähnenswerten Performance-Verlust. Anscheinend wird nur eine zusätzliche Datei nachgeladen, da die Requests an den Server um einen Request gestiegen sind. Die Größe der Seite ist natürlich gleichgeblieben und die Ladezeit hat sich nur um wenige Millisekunden verschlechtert. Da ich sehr viel Wert auf Performance lege, war das für mich eine beruhigende Erkenntnis.
Fazit
Mit den Motion Effects hat Elementor ein tolles Feature eingeführt, dass jedem WordPress Einsteiger hilft, Website Elemente einfach in Bewegung zu setzen. Um jedoch die Elemente richtig zu positionieren sind Webdesign Kenntnisse klar von Vorteil. Aber, und das ist auch das schöne an Elementor, auch mit Trial & Error lässt sich ein tolles Ergebnis erzielen. Dauert nur unter Umständen etwas länger 🙂
Eine Antwort
Sieht echt cool aus!