Animationen mit dem WordPress Page Builder Elementor erstellen
Der WordPress Page Builder Elementor bietet mehrere Optionen Bewegung in eine Seite oder einen Beitrag zu integrieren.
Bewegungseffekte
Eine einfache Variante Ihre WordPress Seiten und Beiträge mit Animationen zu gestalten, bieten die Elementor Bewegungseffekte von Abschnitten, Spalten und Widgets. Die Bewegungseffekte sind bei der kostenlosen Elementor Version integriert.
Dazu wählen Sie das gewünschte Element im Elementor in Ihrem WordPress Backend aus und gehen im linken Menü-Bereich auf „Erweitert“. Hier ist der Menüpunkt „Bewegungseffekte“ zu finden. Dieser bietet dem User die Möglichkeit, eine sog. Eingangsanimation festzulegen.
Wählen Sie hier eine Option aus (die Animation wird direkt nach der Auswahl am aktivierten Element demonstriert) und bestimmen Sie danach die Animationsdauer. Sie können auch eine Verzögerung in Millisekunden einstellen. Die Animation wird standardmäßig direkt ausgelöst, sobald der Bereich im WordPress Frontend sichtbar wird. Wenn Sie eine Verzögerung einstellen, wird das Erscheinen entsprechend herausgezögert.
Hinweis: Bitte beachten Sie, dass Animationen, welche Elemente von der Seite einblenden lassen, in der mobilen Ansicht am Smartphone fehlerhafte Darstellungen der Website auslösen können. Wenn Sie trotzdem seitliche Animationen verwenden möchten, arbeiten Sie am besten im WordPress Backend mit separaten Elementen für die unterschiedlichen responsiven Ansichten. Eine Anleitung, wie Sie mit Elementor responsiv arbeiten können, finden Sie in diesem Quick Tipp: Elementor – responsive Seiten und Beiträge »
Motion Effects
Elementor Pro bietet seit Version 2.5 sog. Motion Effects an, welche ebenfalls Bewegung in WordPress Seiten und Beiträge bringt. Durch diese Effekte können Sie Scrolling- und Maus-Animationen für Abschnitte, Spalten und Widgets festlegen. Genauso wie die Bewegungseffekte, sind die Motion Effects in Elementor Pro im WordPress Backend ebenfalls im linken Menü-Bereich unter „Erweitert“ zu finden.
Scrolling-Effekte werden getriggert, wenn der User die Seite oder den Beitrag durchscrollt, wohingegen Maus-Effekte auf die Bewegung des Maus-Cursors des Users reagiert. Wählen Sie ein Element aus und aktivieren Sie die Scrolling- oder Maus-Effekte. Es werden nun die Art des Effekts bestimmt, sowie Richtung und Geschwindigkeit.
Die letzte Einstellung betrifft den sog. Viewport. Mit dem Viewport ist die sichtbare Bildschirmgröße gemeint, unabhängig vom Endgerät. Standardmäßig ist der Viewport bei den Motion Effects auf 0-100 % eingestellt. Wenn der Effekt jedoch in einem kleineren Bereich angezeigt werden soll, können Sie hier den Viewport beliebig ändern.
Wenn der eingestellte Motion Effekt Ihrer WordPress Seite nicht auf jedem Endgerät angezeigt werden soll, haben Sie auch die Möglichkeit, das direkt im Menüpunkt zu bestimmen. Hier können Sie einfach das Endgerät entfernen, bei dem der Effekt nicht angezeigt werden soll.
Weitere Informationen zu den einzelnen Arten der Motion Effects bei Elementor Pro finden Sie hier: Elementor Motion Effects »
Möchten Sie noch mehr über Elementor erfahren? Hier finden Sie all unsere Quick Tipps über den beliebten Page Builder: Elementor WordPress Quick Tipps »
Bei anderen Versionen kann es daher zu Abweichungen der beschriebenen Optik oder der Funktionen kommen.
