Wie man einen Parallaxen-Effekt in Elementor erstellt | 3 Wege

Der Parallax-Effekt in Elementor ist ein Designmerkmal, bei dem sich der Hintergrund beim Scrollen mit einer anderen Geschwindigkeit bewegt als der Vordergrundinhalt. Dadurch entsteht ein Gefühl von Tiefe und Bewegung auf der Webseite.

Um einen Parallaxen-Effekt in Elementor zu erstellen, öffnen Sie die Seite, auf der Sie den Effekt wünschen, und wählen Sie das Element aus. Gehen Sie zu Stil > Hintergrundund fügen Sie Ihr Bild hinzu. Dann gehen Sie zu Fortgeschrittene > Bewegungseffekte und schalten Sie Bildlaufeffekte oder Mauseffekt. Stellen Sie dort die Bildlaufeinstellungen und die Geschwindigkeit ein und passen Sie sie an Ihre Bedürfnisse an.

In diesem Blog zeige ich 3 verschiedene Möglichkeiten, den Parallaxen-Effekt in Ihre Elementor-Website einzubauen. 

1. Parallaxen-Effekte für Web-Elemente
2. Parallaxen-Effekte für den Hintergrund.
3. Parallaxen-Effekt mit erweiterten Anpassungsmöglichkeiten

Also, fangen wir an.

Wie man mit Elementor einen Parallaxen-Effekt erzeugt | 3 Wege

Es gibt zwei Hauptmöglichkeiten, um in Elementor Parallaxe hinzuzufügen. Die erste ist die Anwendung von Parallaxen-Effekten auf Web-Elemente, die zweite die Verwendung von Parallaxen-Effekten auf Hintergrundabschnitten. 

Beide Optionen sind nur in Elementor Pro verfügbar, Sie benötigen also die Pro-Version, um sie zu nutzen.

Hier erfahren Sie, wie Sie mit Elementor Schritt für Schritt einen Parallax-Effekt erstellen können.

1. Parallaxen-Effekt für ein Web-Element erstellen

Ein Parallaxen-Effekt auf einem Web-Element entsteht, wenn sich ein Abschnitt, eine Spalte oder ein Widget anders als der Rest der Seite bewegt und so Tiefe und Bewegung erzeugt. Da es sich um eine Profi-Funktion von Elementor handelt, verwenden wir hier Elementor Pro.

Schauen wir uns also an, wie das geht.

Schritt 1: Eine Seite hinzufügen und mit Elementor bearbeiten

Öffnen Sie zunächst eine neue oder bestehende Seite auf Ihrer Website. Klicken Sie dort auf "Mit Elementor bearbeiten", um die Parallaxe auf den Seitenelementen zu verwenden.

Schritt 2: Wählen Sie ein Element zum Hinzufügen von Parallaxe

Wählen Sie dann den Abschnitt, die Spalte oder das Widget aus, in dem Sie den Parallaxen-Effekt anwenden möchten.

Schritt 3: Aktivieren der Bildlaufeffekte

Hier müssen Sie zunächst den Scroll-Effekt aktivieren, also gehen Sie zum Menüpunkt Fortgeschrittene und scrollen Sie nach unten, um die Registerkarte Bewegungseffekte Einstellungen. 

Dann finden Sie Optionen für Bildlaufeffekte und Mauseffekte. Aktivieren Sie einfach die Bildlaufeffekte Kippschalter.

Schritt 4: Anpassen des Bildlaufs

Jetzt können Sie jeden Effekt ganz einfach an Ihre Bedürfnisse anpassen. Klicken Sie einfach auf die Stiftsymbolund es öffnet sich ein Einstellungsfenster mit allen Bedienelementen.

Von dort aus können Sie die Richtung, die Geschwindigkeit und das Ansichtsfenster fein abstimmen und genau festlegen, wann die Animation beginnt und wann sie endet. 

Sie können auch die Skalierung des Ansichtsfensters festlegen, um zu bestimmen, an welchem Punkt des Bildlaufs der Effekt beginnen und an welchem Punkt er enden soll.

In diesem Beispiel wende ich den Effekt "Horizontaler Bildlauf" an, indem ich auf das Bleistiftsymbol für die Option "Horizontaler Bildlauf" klicke, um einen solchen Effekt zu erzeugen. 

• Richtung: Rechts
• Geschwindigkeit: 4,8
• Ansichtsfenster (oben): 38%
• Ansichtsfenster (unten): 75%

Profi-Tipp: Für ein dynamischeres Aussehen können Sie mehrere Animationen in einem einzigen Element kombinieren. Dieser Schritt ist völlig optional und hängt hauptsächlich von Ihrem gesamten Website-Design ab. Mit mehreren Parallaxen-Animationen können Sie jedoch mehrschichtige Effekte erzeugen, die sich von anderen abheben.

Schritt 5: Aktivieren des Mauseffekts für Web-Element

Nun müssen Sie die mausbasierte Parallaxe aktivieren, damit sich das Element leicht bewegt, wenn Sie den Mauszeiger bewegen. 

Aktivieren Sie zunächst den Mauseffekt und passen Sie mit dem Bleistiftsymbol die Mausspur und die 3D-Neigung an.

Für den 3D-Neigungseffekt habe ich zum Beispiel die folgenden Einstellungen vorgenommen:

• Richtung: Direkt
• Geschwindigkeit: 4

Schritt 6: Parallaxe auf verschiedenen Geräten anwenden

Nun ist es an der Zeit, auf den Parallaxen-Effekt auf verschiedenen Geräten wie Desktop, Tablet und Handy zu reagieren. Nehmen Sie bei Bedarf Anpassungen vor, damit Ihre Parallaxe auf allen Geräten reibungslos funktioniert.

Zum Schluss sehen Sie die endgültige Ausgabe des Parallaxen-Effekts für das Web-Element:

2. Parallaxen-Effekt auf Website-Hintergrund erstellen

Eine weitere beliebte Möglichkeit, in Elementor Parallaxe hinzuzufügen, ist die Anwendung auf den Hintergrund eines Abschnitts. Dadurch wirkt Ihre Seite dynamischer, da sich der Hintergrund im Vergleich zum Inhalt im Vordergrund anders bewegt. Dies ist eine einfache, aber effektive Möglichkeit, Ihr Design zum Leben zu erwecken. Befolgen Sie diese Schritte zur Einrichtung:

Schritt 1: Wählen Sie den Hintergrundabschnitt

Zunächst müssen Sie den Bereich auswählen, in dem der Parallaxen-Effekt erscheinen soll. Das kann Ihr Heldenbanner, ein hervorgehobener Bereich oder ein beliebiger Bereich sein, den Sie hervorheben möchten.

Schritt 2: Öffnen Sie die Einstellungen für Bewegungseffekte oder Mauseffekte.

Gehen Sie dann zum Fortgeschrittene und finden Sie die Registerkarte Bewegungseffekte Panel. Hier können Sie entweder Bildlaufeffekte oder Mauseffekte, je nachdem, welchen Stil Sie wünschen.

Schritt 3: Anpassen des Parallaxen-Animationsstils

Nun müssen Sie den Animationsstil anpassen. Öffnen Sie dazu zunächst die Registerkarte Stil. Laden Sie Ihr Hintergrundbild hoch und passen Sie dann die Richtung, Geschwindigkeit und Intensität des Effekts an, bis er sich nahtlos in Ihr Design einfügt.

Hier können Sie zwischen 2 verschiedenen Effekten wählen, die Sie auf Ihre Hintergrundebene anwenden können, z. B. den Bildlaufeffekt mit dem Mauseffekt.

Schritt 4: Aktivieren der Mauseffekte für den Hintergrund

Nachdem Sie den Bildlaufeffekt eingestellt haben, aktivieren Sie die mausbasierte Parallaxe, damit der Hintergrund auf die Bewegungen des Mauszeigers reagiert. Dadurch entsteht für die Besucher ein interaktives Gefühl. Verwenden Sie also das Bleistiftsymbol, um die Mausspur anzupassen und fein abzustimmen.

Hier habe ich zum Beispiel den Weichzeichner-Effekt konfiguriert,

• Richtung: Auf "Ausblenden" eingestellt, d. h. das Element wird beim Verlassen des Ansichtsfensters allmählich unscharf.
• Niveau: 15
• Ansichtsfenster-Bereich: Zwischen 49% und 84% legen wir fest, wann der Effekt beginnt und endet, abhängig von der Bildlaufposition des Benutzers.

Schritt 5: Geräteübergreifend testen

Jetzt ist es an der Zeit zu prüfen, wie sich der Parallaxen-Effekt auf den verschiedenen Geräten verhält: Desktop, Tablet und Handy. Nehmen Sie bei Bedarf Anpassungen vor, um sicherzustellen, dass die Animation reibungslos läuft und überall gut aussieht.

Und hier ist das Endergebnis des Hintergrundparallaxeneffekts:

Hinweis: Möchten Sie den Parallaxen-Effekt stärker an Ihre Marke anpassen?

Dies sind die beiden gängigsten Methoden zum Hinzufügen von Parallaxen-Effekten in Elementor. Wenn Sie jedoch fortgeschrittenere Effekte wie erweiterte ParallaxenschnitteKippeffekte oder erweiterte 3D-ParallaxeElementor selbst bietet diese Funktionen nicht standardmäßig an. Hierfür müssen Sie ein Elementor Parallaxen-Effekt Plugin.

Hier müssen Sie Element pro kaufen, um den Parallaxen-Effekt auf Ihrer Website hinzuzufügen. Aber was ist, wenn Sie eine fortschrittlichere Parallaxe auch zu einem günstigeren Preis hinzufügen können?

Das ist es, was wir uns ausgedacht haben Element Pack Pro als eine der besten Elementor-Addon-Optionen. Zusammen mit 4 verschiedenen Widgets für den Parallaxen-Effekt, kommt dieses Plugin mit anderen 300+ Elementor-Widgets.

Selbst wenn Sie kein Experte sind oder nicht wissen, welcher Parallaxen-Stil am besten zu Ihrer Website passt, können Sie einfach die Demo-Designs erkunden und dasjenige auswählen, das perfekt zu Ihrer Website passt.

Erweiterte Elementor-Parallaxen-Effekte mit Element Pack erstellen

Elementor Pro bietet grundlegende parallaxenähnliche Effekte, wie Motion Effects, Transformieren & Skalierenund Klebrige Elemente. 

Wenn Sie über die grundlegenden Parallaxenoptionen von Elementor hinausgehen möchten, ist das Element Pack-Plugin eine gute Wahl. Es gibt Ihnen Zugang zu erweiterten Parallaxe-Hintergründemit Kippeffekten, fortschrittlicher 3D-Parallaxe und vorgefertigten Blöcken, damit Sie professionelle Designs erstellen können.

Fangen wir also damit an, wie man einen fortgeschrittenen Parallax-Effekt in Elementor mit Element Pack Schritt für Schritt erstellt:

Schritt 1: Installieren und Aktivieren von Element Pack

Installieren Sie zunächst die Element Pack Plugin auf Ihrer WordPress-Website und aktivieren Sie es dann.

Anmerkung: Installieren Sie zunächst das kostenlose Elementor auf Ihrer Website und dann das Element Pack.

Schritt 2: Aktive Parallax-Widgets

Dann gehen Sie zu Element Pack Dashboard > Extensions > Active Parallaxen-Effekt-bezogene Erweiterungen nach Bedarf, wie

• Hintergrundbild Parallaxe
• Parallaxen-/Scrolling-Effekte
• Abschnitt Bildparallaxe
• Scroll-Fülleffekt
• Animierter Farbverlauf BG
• Cursor-Effekte

Es gibt eine Vielzahl von Optionen, so dass Sie problemlos weitere benutzerdefinierte Funktionen aktivieren können, um Ihre Parallaxen-Effekte zu verbessern. 

Schritt 3: Öffnen Sie die Elementor-Seite 

Wählen Sie nun die Seite, auf der Sie den Parallaxen-Effekt hinzufügen möchten, und klicken Sie auf Bearbeiten mit Elementor.

Schritt 4: Wählen Sie ein Element zum Hinzufügen von Parallaxe

Um einen Parallaxen-Effekt im Hintergrund hinzuzufügen, aktivieren Sie zunächst den Hintergrund-Parallaxen-Effekt, wählen den Abschnitt aus und gehen zu Stil > Hintergrundund schalten Sie die BG Parallaxen-Effekt.

Passen Sie dann die Bildlaufbewegung mit Parallaxe X und Parallaxe Y nach Bedarf.

Wählen Sie nun einen anderen Unterabschnitt, eine Spalte oder ein Widget, auf den/die Sie den Parallaxen-Effekt anwenden möchten, und gehen Sie dann zu Fortgeschrittene.

Schritt 5: Anpassen der Parallaxeneinstellungen

Nun, im Fortgeschrittene erhalten Sie viele Anpassungsbereiche wie 

• Konfetti-Effekte
• Cursor-Effekte
• Effekte aufdecken
• Welligkeitseffekte
• Klebrig
• Text Farbverlauf Hintergrund
• Realistischer Bildschatten
• QuickInfo
• Sichtbarkeitskontrollen
• Sound-Effekt.

Über die Abschnitte können Sie Geschwindigkeit, Richtung, Auslöseoptionen und Animationsstil anpassen. Mit Element Pack können Sie sogar mehrere Elemente überlagern, um erweiterte 3D- oder Kippeffekte zu erzeugen.

Hier füge ich zum Beispiel "Realistischer Bildschatten" hinzu, der einen lebensechten Schatten unter das Bild eines stilisierten Cartoon-Raketenschiffs legt. Dieser Effekt verleiht der Grafik ein Gefühl von Dimensionalität und lässt sie aus der Seite herausragen.

Dann passe ich die Bildlaufbewegung mit Parallaxe X und Parallaxe Y nach Bedarf.

Schritt 6: Vorgefertigte Parallaxenblöcke verwenden (schnelle Methode)

Wenn Sie nicht von Grund auf neu bauen wollen, wählen Sie einen der vorgefertigten Parallax-Effekte fertige Blöcke in Element Pack enthalten. Navigieren Sie einfach zum Element Pack-Vorlagenbibliothek in Ihrem Elementor-Editor.

Schauen Sie sich nun die verfügbaren vorgefertigten Parallaxenabschnitte an, bis Sie einen finden, der zu Ihrem Design passt.

Bewegen Sie dann den Mauszeiger über den gewünschten Block und klicken Sie auf Live-Kopie um das Layout und die Effekte zu kopieren.

Gehen Sie nun zu Ihrem Elementor-Canvas und fügen Sie den kopierten Block in den gewünschten Abschnitt oder Container ein.

Ersetzen Sie dann die Platzhaltertexte, -bilder und -links durch Ihre eigenen Inhalte, die zu Ihrer Marke passen.

Ändern Sie nun über den Stil die Feinabstimmung von Farben, Typografie und Parallaxeneinstellungen, um sie an die Ästhetik Ihrer Website anzupassen.

Schritt 7: Optimieren für verschiedene Geräte

Testen Sie nun Ihren Parallaxen-Effekt auf dem Desktop, dem Tablet und dem Handy mit dem Ansprechbar und stellen Sie sicher, dass es überall glatt aussieht.

Und hier ist das Endergebnis des Parallaxen-Effekts, der mit der Element Pack:

Wenn Sie Parallaxen-Effekte direkt mit Elementor Pro erstellen, erhalten Sie die Grundlagen. Aber mit Element Pack erhalten Sie weit mehr Flexibilität. 

Statt auf Standardbewegungen beschränkt zu sein, können Sie Animationen überlagern, die Bildlaufgeschwindigkeit steuern und sogar Parallaxen mischen, wie z. B. Konfetti-Effekte, Cursor-Effekte, Reveal-Effekte, Ripple-Effekte und viele weitere erweiterte Funktionen, die Elementor Pro nicht bietet. 

Das heißt, Sie fügen nicht nur "Bewegung" zu einem Abschnitt hinzu, sondern schaffen eine vollständig interaktive Erfahrung, auch wenn Sie kein Entwickler sind.

Beste Praktiken für die Gestaltung von Parallaxen-Effekten mit Elementor 

Parallaxen-Effekte können Ihre Website modern, einnehmend und visuell ansprechend aussehen lassen. Aber um die besten Ergebnisse zu erzielen, müssen Sie sie klug einsetzen. Hier sind einige bewährte Verfahren, die Sie beachten sollten:

1. Schutz der Lesbarkeit

Ihr Inhalt sollte immer an erster Stelle stehen. Wenn der Text auf einem Parallaxen-Hintergrund steht, sollten Sie den Kontrast überprüfen. Wenn der Hintergrund zu unruhig ist, verwenden Sie Überlagerungen oder Unschärfeeffekte.

Beispiel: Manchmal verursachen Parallaxen-Effekte Unschärfen in Textinhalten. Achten Sie daher bei der Verwendung von Inhalten auf einem Parallaxen-Display darauf, dass der Inhalt deutlich sichtbar ist.

2. Entspricht der Markenpersönlichkeit

Der Stil der Parallaxe sollte mit Ihrer Marke übereinstimmen. Ein Wellness-Spa könnte einen langsamen, beruhigenden Scroll-Effekt verwenden, während eine Spiele-Website schnellere, dynamischere Bewegungen verwenden könnte.

Beispiel: Stellen Sie sich vor, auf der Website eines Luxushotels spiegeln langsam bewegte Wellen im Hintergrund die entspannende Atmosphäre des Standorts am Meer wider und passen perfekt zur Geschichte der Marke.

3. Vermeiden Sie eine Überladung mit Animationen

Wenn Ihre Website mit Schiebe-, Überblend- und Zoom-Elementen vollgepackt ist, macht das Hinzufügen mehrerer Parallaxen-Effekte nur Lärm. Beschränken Sie sich auf ein oder zwei Momente, in denen Parallaxe Sinn macht, wie z. B. ein Hero-Banner oder eine Produktpräsentation.

Beispiel: Sie werden feststellen, dass die Produktseiten von Apple oft nur sehr wenig Parallaxe verwenden und in der Regel ein einzelnes Produktmerkmal beim Scrollen hervorheben. Das ist alles, was nötig ist, um die Besucher zu fesseln.

4. Leistung beobachten

Animationen + große Bilder = langsamere Ladezeiten. Testen Sie nach dem Hinzufügen von Parallaxe immer die Leistung. Wenn sich Ihre Website träge anfühlt, komprimieren Sie die Bilder, verwenden Sie "Lazy Loading" oder reduzieren Sie den Effekt.

Profi-Tipp: Überprüfen Sie Ihre Website nach dem Hinzufügen von Parallax mit PageSpeed Insights oder GTmetrix. Wenn Sie rote Fahnen sehen, optimieren Sie, bevor Sie live gehen.

Elementor Parallaxen-Effekt funktioniert nicht - Probleme & Lösung

Manchmal kann es vorkommen, dass der Parallaxen-Effekt in Elementor nicht wie erwartet funktioniert. Dies kann aufgrund von Einstellungen, Themenkonflikten oder sogar Geräteeinschränkungen passieren. Hier sind die häufigsten Probleme und wie man sie beheben kann:

1. Bewegungseffekte nicht aktiviert

Wenn die Parallaxe nicht funktioniert, prüfen Sie zunächst, ob Bewegungseffekte für den Abschnitt, die Spalte oder das Widget aktiviert sind. Gehe zu Erweitert > Bewegungseffekte und stellen Sie sicher, dass die Bildlauf- oder Mauseffekte aktiviert sind.

3. Theme- oder Plugin-Konflikte

Manchmal kann Ihr Theme oder ein anderes Plugin die Skripte von Elementor außer Kraft setzen. Versuchen Sie, andere Plugins nacheinander zu deaktivieren, oder wechseln Sie vorübergehend zu einem Standard-Theme wie Hello Elementor, um es zu testen.

4. Browser- oder Gerätebeschränkungen

Parallaxen-Effekte werden auf Mobiltelefonen oder bestimmten Browsern nicht immer gleich angezeigt. Prüfen Sie die Reaktionsfähige Einstellungen in Elementor, um zu bestätigen, dass die Wirkung auf Tablets und Handys erlaubt ist.

5. Zwischenspeicherung und Leistungsaspekte

Browser-Cache, CDN oder Optimierungs-Plugins blockieren möglicherweise die Ausführung von Animationen. Leeren Sie Ihren Cache, löschen Sie das CDN und überprüfen Sie die Website erneut.

Häufig gestellte Fragen

Abschließende Überlegungen

Parallaxen-Effekte können Ihrer Website Persönlichkeit, Realismus und Bewegung verleihen. Aber nur, wenn Sie sie mit Bedacht einsetzen. Sie sollten sie dezent halten, die Lesbarkeit schützen und immer geräteübergreifend testen, damit Ihr Design überall reibungslos funktioniert.

Elementor gibt Ihnen die Werkzeuge an die Hand, mit denen Sie loslegen können, aber wenn Sie Ihre Kreativität noch weiter ausreizen wollen, bringt Element Pack diese Möglichkeiten auf die nächste Stufe. Mit den zusätzlichen Funktionen für Parallaxen-Effekte wie Konfetti-Effekte, Cursor-Effekte, gleiche Höhe, Bild-Parallaxe, Sticky, Tile Scroll, Sichtbarkeitssteuerung und vielen weiteren fortschrittlichen Bewegungsoptionen können Sie Designs erstellen, die nicht nur gut aussehen, sondern sich auch einprägen.

Letztendlich geht es nicht darum, Effekte um ihrer selbst willen hinzuzufügen. Es geht darum, ein Erlebnis zu schaffen, das sich für Ihre Besucher natürlich anfühlt. Und wenn Sie dieses Gleichgewicht richtig hinbekommen, wird die Parallaxe zu einem dieser kleinen Details, die Ihre Website von anderen abheben.