Elementor kann Parallaxen-Hintergrundeffekte erstellen, die eine WebsiteLebendiger und mehr Schichten hinzufügen. Dieser Artikel gibt Ihnen einen detaillierten Überblick darüber, wie Sie dieErstellen eines Parallaxen-HintergrundsDas Ergebnis ist ein fesselndes visuelles Erlebnis.

Was ist der Parallaxen-Effekt?

Parallaxe ist ein Effekt, der durch den Unterschied in der relativen Bewegung zwischen Hintergrund und Vordergrund ein Gefühl von Tiefe und Dynamik erzeugt. Wenn Sie eine Webseite scrollen, bewegt sich der Hintergrund mit einer anderen Geschwindigkeit als der Vordergrund, wodurch die Illusion von Bewegung entsteht. Die Parallaxe wird häufig im Webdesign und bei Spielen eingesetzt, um das visuelle Erlebnis noch intensiver zu gestalten.

Warum Parallaxen-Hintergründe verwenden?

Parallaxen-Effekte ziehen nicht nur die Aufmerksamkeit der Besucher auf sich, sondern lassen den Seiteninhalt auch dreidimensionaler erscheinen. Durch die Anpassung der unterschiedlichen Bewegungsgeschwindigkeit zwischen dem Hintergrund und dem Inhalt kann ein Gefühl von Bewegung und Hierarchie erzeugt werden, das das visuelle Erlebnis des Benutzers verbessert und die Verweildauer auf der Seite erhöhen kann.

Schritte zur Erstellung eines parallaxen Hintergrunds in Elementor

Unnötig Elementor Pro Version können Parallaxen-Effekte in der kostenlosen Version von Elementor implementiert werden. Hier sind die Schritte:

Schritt 1: Erstellen oder bearbeiten Sie eine Seite

Zuallererst müssen Sie über dieEine neue Seite erstellen(math.) GattungOder bearbeiten Sie eine bestehende Seite.

1. Melden Sie sich in Ihrem WordPress-Dashboard an und klicken Sie auf "Web-Seite">"Neue Seite hinzufügen" oder wählen Sie die zu bearbeitende Seite.

2. Klicken Sie "Elementor Editor verwenden", um den Elementor-Editor zu öffnen.

Schritt 2: HinzufügenContainerim Gesang antwortenElement

Im Elementor-EditorHinzufügen eines neuen ContainersDer Parallaxen-Effekt wird auf den Hintergrund des Kapitels angewendet. Sie können dem Kapitel beliebige Inhalte hinzufügen, z. B. Text, Bilder, Titel, Karten, Symbole usw.

1. Klicken Sie "Hinzufügen eines neuen Containers" und wählen Sie die Struktur (z.B.Einspaltig, zweispaltig(usw.).

2. Ziehen Sie Texteditoren, Schaltflächen oder andere Elemente per Drag & Drop in die Abschnitte, um den Inhalt zu füllen.

Schritt 3: Fügen Sie einen Hintergrund hinzu

Als nächstes fügen Sie dem Container ein Hintergrundbild hinzu, auf das dieParallaxen-Effekt auf Seiten der.

1. Klicken Sie auf das Symbol "Container bearbeiten" und gehen Sie auf die Registerkarte "Stile".

2. Suchen Sie "Hintergrundtyp" und wählen Sie den Modus "Klassisch".

3. Klicken Sie "Bild auswählen" und laden Sie ein geeignetes Hintergrundbild hoch oder wählen Sie es aus der Mediathek aus.

4. Konfigurieren Sie die Bildanzeigeoptionen wie Position, Wiederholungsmethode usw., um sicherzustellen, dass das Bild auf der Seite korrekt angezeigt wird.

Schritt 4: Aktivieren Sie die Parallaxe

Dies ist der entscheidende Schritt vonHintergrundbild korrigiertParallaxen-Effekte werden realisiert.

1. Unter "Hintergrundtyp" finden Sie "Anhang (E-Mail)", setzen Sie diese Option auf "Fixierung".
   • Dies wird dieHintergrundbild ist fixiertund der Inhalt im Vordergrund bewegt sich beim Scrollen, wodurch ein Parallaxen-Effekt entsteht.

2. Die Anzeige des Hintergrundbildes kann je nach Bedarf fein eingestellt werden, z. B. "Platzierung"Die Option kannKontrollbildDie Ausrichtung des "Größenordnung" Mit dieser Option können Sie den Bildzoom-Modus einstellen.

Schritt 5: Speichern und Vorschau des Effekts

Nachdem Sie die obigen Einstellungen vorgenommen haben, können Sie eine Vorschau der Seite anzeigen, um die tatsächliche Wirkung des Parallaxen-Effekts zu sehen.

1. Klicken Sie auf Elementor ".Augen" Symbol und wählen Sie "Vorschau der Änderungen".
2. Scrollen Sie die Seite in einem neuen Fenster und beobachten Sie, wie sich der Parallaxen-Effekt verhält.

Wie kann der Parallaxenhintergrund weiter optimiert werden?

Wenn der voreingestellte Parallaxen-Effekt nicht ganz den Anforderungen entspricht, versuchen Sie die folgenden Optimierungstipps:

1. Anpassen der Transparenz des Hintergrundbildes: Heben Sie den Inhalt im Vordergrund stärker hervor, indem Sie die Transparenz des Hintergrunds anpassen.

2. Hinzufügen eines Farb-Overlays: Wenn Sie dem Hintergrundbild eine Ebene mit transparenter Farbe hinzufügen, kann dies die stilistische Konsistenz der Seite insgesamt verbessern.

3. Kombiniert mit dynamischen EffektenWenn Sie etwas Auffälligeres wünschen, können Sie die Bildlaufeffekte von Elementor verwenden, um andere Animationen zu Vorder- oder Hintergrundelementen hinzuzufügen.

Überlegungen zum Parallaxenhintergrund

• Bildauswahl: Die Wahl des richtigen Hintergrundbildes ist entscheidend. Es empfiehlt sich, Bilder zu verwenden, die klar und thematisch sind.
• LadegeschwindigkeitParallaxe-Hintergründe können die Ladezeit der Seite verlängern. Versuchen Sie, optimierte Bilder zu verwenden, um die Leistung der Website zu gewährleisten.
• Kompatibilität mit mobilen GerätenEinige Parallaxen-Effekte funktionieren auf mobilen Geräten möglicherweise nicht gut. Sie können steuern, ob Parallaxen-Effekte auf mobilen Geräten angezeigt werden oder nicht, indem Sie die Anzeigeoptionen anpassen.

Zusammenfassungen

Der Parallaxen-Effekt ist ein sehr nützliches visuelles Mittel, um die Attraktivität einer Seite zu erhöhen. Elementor bietet eine einfach zu bedienende Möglichkeit, diesen Effekt ohne zusätzliche Plugins zu erzielen. Wir hoffen, dass die detaillierten Schritte und Optimierungsvorschläge in diesem Artikel Ihnen helfen werden, beeindruckende Parallaxen-Hintergründe in Elementor zu erstellen.