Last Updated on 11/10/2021 by MTE Leben
In diesem Tutorial erfahren Sie, wie Sie Schritt für Schritt einen Parallax-Effekt erzeugen. Bitte beachten Sie, dass es Ihnen freisteht, Ihre eigenen Bilder und Effekte zu verwenden.
So bereiten Sie das Widget auf den Parallax-Effekt vor
Öffnen Sie die Elementor-Editor-Seite, klicken Sie auf die Schaltfläche Neuen Abschnitt hinzufügen .
Wählen Sie die Struktur für Ihr zukünftiges Widget aus und ziehen Sie JetElements-Module per Drag & Drop in die Spalten. Für dieses Tutorial haben wir das Modul Überschrift ausgewählt.
In verschiedenen JetElements-Modulen können die Einstellungen variieren. Sie haben die Möglichkeit zu experimentieren und Ihre eigenen Widgets zu erstellen!.
Navigieren Sie zum Inhalts-Tab auf der linken Seite und geben Sie den Widget-Titel ein. Außerdem stehen Ihnen weitere Einstellungen zur Anpassung zur Verfügung (z. B. Linkoptionen, Größe, HTML-Tag und Ausrichtung).
Navigieren Sie zur Registerkarte Stil, um das Aussehen des Titels zu ändern. In diesem Tutorial haben wir mit den Optionen Typografie und Textfarbe gearbeitet.
Navigieren Sie zur Registerkarte Erweitert. Hier sehen Sie eine Liste von Blöcken, die Ihnen beim Stylen des Widgets helfen.
Der erweiterte Block ist für das gesamte Widget-Erscheinungsbild und die darauf anzuwendenden Effekte verantwortlich. Sie können die Parameter der Optionen für Rand, Abstand und Widget-Animation ändern.
Navigiere zum Hintergrundblock, der zwei Modi mit Einstellungen hat: Normal und Hover. Wir haben den normalen Modus ausgewählt und den Anpassungsprozess gestartet. Es stehen zwei Varianten des Hintergrundtyps zur Auswahl (Klassisch und Verlauf). Schauen wir uns beide an.
Im Verlaufstyp müssen Sie zwei Farben auswählen, um einen Verlaufseffekt zu erzeugen. Entsprechend haben wir rgba(97,206.112,0,38) und rgba(242,41,91,0,65) ausgewählt. Außerdem müssen Sie entweder den linearen oder den radialen Verlaufstyp auswählen.
Im klassischen Typ können Sie Farbe (zB rgba(97,206,112,0.38) oder/und Bild aus Ihrer WordPress-Medienbibliothek auswählen. Wenn Sie ein Bild auswählen, müssen Sie Optionen für auswählen die Einstellungen für Anhang (z. B. Mitte Mitte), Anhang (wir haben Standard belassen), Wiederholen (z. B. Keine Wiederholung) und Größe (wir haben Auto eingestellt). Hier ist, was wir für den Moment haben.
Der Rahmenblock ermöglicht das Hinzufügen eines Rahmens zum gesamten Widget. Er enthält auch zwei Modi zur Anpassung: Normal und Hover. Für dieses Tutorial haben wir den Rahmentyp “Vollton” ausgewählt, seine Breite auf 2 gesetzt, die Farbe #23a455 ausgewählt und Setzen Sie den Randradius auf 9. So sieht das Widget mit dem Rand aus.
So erstellen Sie einen Parallax-Effekt
Jetzt fahren wir mit dem Hinzufügen des Parallax-Effekts fort. Fahren Sie mit der Maus über den Abschnitt und klicken Sie auf Abschnitt bearbeiten
Im geöffneten Fenster auf der linken Seite finden Sie Blöcke, die angepasst werden müssen.
Navigieren zu Layoutblock und Optionen auswählen, die am besten zu Ihnen passen. Für sein Tutorial haben wir die Inhaltsbreite auf Voll eingestellt Breite, ausgewählt Keine Lücken, Mindesthöhe und Position der mittleren Spalte.
Navigieren Sie nun zum Jet Parallax Block und klicken Sie auf die Schaltfläche Artikel hinzufügen. Ein neuer Artikel wird hinzugefügt und Sie können ihn anpassen, um einen Parallax-Effekt zu erzeugen.
Bitte beachten Sie, dass Sie so viele Artikel hinzufügen können, wie Sie benötigen . Für dieses Tutorial verwenden wir einen.
Klicken Sie auf den Bildbereich und wählen Sie das Bild, das Sie für den Parallax-Effekt verwenden möchten, aus Ihrer Medienbibliothek oder Ihrer Festplatte aus. Navigieren Sie als Nächstes zum Parameter Parallax Speed und stellen Sie den Prozentwert der Geschwindigkeit ein (z. B. 37%).
Als nächstes wählen Sie Parallax Type aus einer Dropdown-Liste (wir haben Mouse Move verwendet), legen Sie den Z-Index-Parameter fest, der es ermöglicht, das Objekt oder die Parallax-Ebene mit der Z-Achse zu verschieben, Zoom es bei Mausbewegung usw. 3D-Effekt in Animationen verwenden.
In diesem Schritt müssen Sie die horizontale (Hintergrund-X-Position %) und die vertikale Position (Hintergrund-Y-Position %) in Prozent im Verhältnis zum Hintergrund definieren.
Navigieren Sie zur Option Hintergrundgröße, um die gewünschte Größe für das Element auszuwählen (Auto, Cover oder Enthalten). Wählen Sie außerdem die Einstellung Animationseigenschaften, damit sich das Bild in drei verschiedenen Modi bewegen kann: Hintergrundposition, Transformieren und 3D-Transformieren.
Die Verwendung der Transform-Animationseigenschaft wird dringend empfohlen!
Herzlichen Glückwunsch! Wir haben erfolgreich ein Widget mit Parallax-Effekt erstellt!
Um die Änderungen anzuzeigen, klicken Sie bitte auf die Schaltfläche Speichern, um die Änderungen zu speichern und klicken Sie in der unteren linken Ecke auf die Option Seite anzeigen, um zur Seite zu navigieren und die Ergebnisse anzuzeigen.
