[ad_1]
Divi Builder hat eine eingebaute Funktion, um einen Parallaxen-Hintergrund hinzuzufügen. Allerdings ist der Parallaxen-Effekt, den Divi Builder anbietet, eher begrenzt. Du kannst nicht einmal einen Parallaxen-Effekt auswählen. Die einzige Option, die Divi Builder für die Parallaxe bietet, ist die Parallaxenmethode (echte Parallaxe oder CSS). Zum Glück bietet Divi Builder benutzerdefinierte Positions- und Scrolleffekte. Du kannst diese beiden Funktionen kombinieren, um einen stilvolleren Parallaxen-Effekt zu erzielen. In diesem Beispiel zeigen wir dir, wie du einen Zoom-Parallaxen-Hintergrund erstellen kannst, indem du diese Funktionen verwendest.
Die Idee ist, das Bildmodul zu verwenden und die Position auf absolut zu setzen. Wenn du die Position eines Moduls auf absolut setzt, wird kein Platz auf der Seite für das zugehörige Modul geschaffen. Du kannst es dir einfach als ein schwebendes Modul vorstellen, das über anderen Elementen liegt, die den eigentlichen Platz einnehmen. Du kannst dieses Konzept nutzen, um das Bildmodul als Hintergrund für einen Abschnitt zu verwenden. Um den Zoom-Effekt hinzuzufügen, kannst du die Bildlaufeffekte verwenden.
Einen Zoom-Parallaxen-Hintergrund in Divi Builder erstellen
Um zu beginnen, füge einen neuen regulären Abschnitt hinzu, indem du auf die blaue Plus-Schaltfläche im Canvas-Bereich klickst. Füge eine Zeile ein und wähle die einspaltige Struktur.
Öffne das Einstellungsfenster für den Abschnitt, indem du auf das Zahnradsymbol am Abschnittsgriff (den blauen Griff) klickst. Sobald das Abschnittseinstellungs-Panel geöffnet ist, gehst du zu den Erweitert und öffnen Sie die Registerkarte Sichtbarkeit Block. Setze die Horizontaler Überlauf und die Vertikaler Überlauf zu Versteckt.
Als Nächstes öffnest du das Einstellungsfenster für die Reihe, indem du auf das Zahnradsymbol am Griff der Reihe klickst (der grüne Griff). Gehe im Einstellungsfenster für die Reihe auf die Seite Entwurf und öffnen Sie die Registerkarte Größenbestimmung Block. Setze die Breite der Rinne bis 1, Breite auf 100% und Maximale Breite auf 100%.
Als Nächstes kannst du die Module zu der Reihe hinzufügen. Du kannst jedes Modul hinzufügen, das du möchtest. Wenn du mit dem Hinzufügen und Bearbeiten der Module fertig bist, füge ein weiteres Modul hinzu – das Modulbild – und platziere es ganz oben. Um dir die Arbeit zu erleichtern, kannst du in den Modus Drahtgitteransicht wechseln.
Öffne das Einstellungsfenster für das Modul Bild, indem du auf das Zahnradsymbol am Griff des Moduls Bild klickst. Auf der Registerkarte Inhalt Registerkarte, öffnen Sie die Bild Block und entferne den Standard Image Handler, falls er existiert.
Immer noch auf der Inhalt Registerkarte, öffnen Sie die Hintergrund Block. Auf dem Hintergrund Block, klickst du auf die Registerkarte Bild und wählst das Bild aus, das du als Hintergrund verwenden möchtest, indem du auf den Plus-Button klickst. Aktiviere den Parallaxen-Effekt verwenden und setze die Parallaxenmethode auf CSS.
Gehe zum Design und öffnen Sie die Registerkarte Größenbestimmung Block. Aktiviere den Volle Breite erzwingen Option.
Auch auf der Design Registerkarte, öffnen Sie die Abstände Block und setze das obere und untere Padding auf etwa 30% (du kannst den Wert an den Inhalt des Abschnitts anpassen).
Als nächstes gehst du zum Erweiterte und öffnen Sie die Registerkarte Position Block. Auf der Position Option, eingestellt auf Absolute. Auf der Standort Option, auf links oben eingestellt.
Öffne zum Schluss die Option Scroll-Effekte Block. Da wir eine Zoom-Parallaxe erstellen wollen, klicke auf den Nach oben und unten skalieren Registerkarte auf der Scroll-Transform-Effekte Abschnitt und aktivieren Sie die Scalling nach oben und unten aktivieren Option.
Auf der Set Scalling Up and Down Im Abschnitt “Skalierung nach oben und unten” stellst du die Anfangsskala auf etwa 150%, die mittlere Skala auf 150% und die Endskala auf 100%. Mit diesen Einstellungen erzeugst du den Verkleinerungseffekt. Um einen Vergrößerungseffekt zu erzielen, kannst du die Endskala unter die Anfangsskala und die mittlere Skala setzen.
Hier ist der von uns erstellte Zoom-Parallaxen-Effekt.
[ad_2]
