So erstellen Sie einen wegbrechenden Bildübergang mit Divis Scroll-Effekten

Die Scroll-Effekte von Divi ermöglichen es uns, außergewöhnliche Übergangsanimationen zu erstellen, die die Besucher mit einem auffälligen Design begeistern können. Insbesondere Bilder können die Kraft dieser Scroll-Effekte auf überraschende Weise zeigen. In diesem Tutorial erklären wir Ihnen Schritt für Schritt, wie Sie mit den Scroll-Effekten von Divi einen abreißenden Bildübergang erstellen. Dieser Effekt wurde ursprünglich auf der Demoseite vorgestellt. Der Effekt besteht darin, Bilder vorher mit einem Fotoeditor wie Photoshop zu schneiden (es ist ziemlich einfach zu machen). Nachdem die Bilder geschnitten wurden, müssen wir sie nur noch zu Divi hinzufügen und die integrierten Scroll-Effekte verwenden, um die Magie zu verwirklichen.

Lass uns anfangen.

Vorgeschmack

Hier ist ein Blick auf das Design für heute.

Die Original-Live-Demo des Designs können Sie sich auch auf der Demo-Seite unter dem Titel „Übung muss nicht langweilig sein“ ansehen.

Laden Sie das Breakaway Image Transition Divi Layout KOSTENLOS herunter

Um das Layout aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Abgesehen vom obigen Divi-Setup benötigen Sie:

• Zwei Bilder (mindestens 1080px x 540px)
• Eine Fotobearbeitungssoftware wie Photoshop, um die Bilder zu schneiden, bevor sie zu Divi hinzugefügt werden.

Teil 1: Schneiden der Bilder in Photoshop

Bevor wir mit der Erstellung unseres Designs in Divi beginnen können, müssen wir unsere beiden Bilder aufschneiden, die für den Scroll-Effekt des abbrechenden Übergangs verwendet werden. Beide Bilder müssen so zugeschnitten werden, dass sie genau 1080px x 540px groß sind. Danach müssen sie in 8 gleiche Teile (4 quer, 2 nach unten) geschnitten werden. Sobald sie fertig sind, können wir sie auf unserem Computer speichern und die Bildscheiben auf unsere Site hochladen. Beginnen wir mit dem ersten Bild.

Bild #1

Zuschneiden des Bildes

Als erstes müssen wir das Bild so zuschneiden, dass es die genauen Abmessungen von 1080 x 540 Pixel hat. Dazu können Sie jede Bildbearbeitungssoftware verwenden. In Photoshop können Sie das Zuschneidewerkzeug verwenden.

Schneiden des Bildes

Klicken Sie anschließend auf , um das Slice-Tool zu verwenden und das gesamte Bild auszuwählen. Klicken Sie mit der rechten Maustaste auf das Slice/Bild und wählen Sie die Option Slice teilen.

Aktualisieren Sie im Optionsfeld Slice teilen Folgendes:

Horizontal teilen in:

• 2 Scheiben nach unten, gleichmäßig verteilt
• 270 Pixel pro Scheibe

Vertikal unterteilen in:

• 4 Scheiben quer, gleichmäßig verteilt
• 270 Pixel pro Scheibe

Klicken Sie dann auf OK.

Speichern der Bild-Slices

Jetzt haben wir ein Bild, das in 8 gleiche Blöcke unterteilt ist, jeder von ihnen 270 x 270 Pixel.

Um die Bild-Slices zu speichern, navigieren Sie zu Datei > Exportieren > Für Web speichern.

Wählen Sie dann das Dateiformat und klicken Sie auf Speichern.

Stellen Sie im Popup-Fenster sicher, dass Sie Folgendes aktualisieren:

• Speichern unter: [Namen für Bild(er) eingeben]
• Format: Nur Bilder
• Einstellungen: Standardeinstellungen
• Scheiben: Alle Scheiben

Klicken Sie dann auf Speichern.

Jetzt werden alle Ihre Bild-Slices auf dem Computer gespeichert und können auf Divi hochgeladen werden.

Bild #2

Um das zweite Bild zu erstellen, das für diesen abreißenden Bildübergangs-Scroll-Effekt benötigt wird, sollten wir den gleichen Prozess (Beschneiden, Schneiden und Speichern) befolgen, den wir zum Erstellen des ersten Bildes verwendet haben.

Bildscheiben drehen

Aufgrund der Funktionsweise des rotierenden Scroll-Effekts muss jedoch jeder der Bildabschnitte, aus denen das zweite Bild besteht, entweder um 90 Grad nach links oder rechts gedreht werden.

Um ein Bild zu drehen, können Sie Photoshop oder die integrierte Bildbearbeitungssoftware Ihres Betriebssystems verwenden (Sie können sogar die WordPress-Mediengalerie verwenden, um die Bilder nach dem Hochladen auf Ihre Website zu bearbeiten und zu drehen).

Hier ist eine Anleitung, wie die Bilder beim Schneiden des Bildes innerhalb ihrer ursprünglichen Position gedreht werden sollten.

Hier ist das Originalbild.

So sollten die Bild-Slices gedreht werden, bevor sie auf Ihre Site hochgeladen werden.

Dies ist notwendig, damit wir schließlich den folgenden Scroll-Effekt erzielen können.

Nachdem beide Bilder zugeschnitten, in Scheiben geschnitten, gespeichert und gedreht wurden, können Sie sie Ihrer Divi-Site hinzufügen. Sie sollten insgesamt 16 Bilder haben (8 aus Bild 1 und 8 aus Bild 2).

Teil 2: Erstellen des Bildübergangs-Scroll-Effekts Breakaway in Divi

Sobald die Bild-Slices fertig sind, können wir mit dem Designprozess in Divi beginnen. So geht's.

Zeile 1 hinzufügen

Erstellen Sie zunächst eine vierspaltige Zeile.

Zeileneinstellungen

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Max. Breite: 1080px (Desktop), 540px (Tablet und Telefon)
• Padding: 0px oben, 0px unten
• Horizontaler Überlauf: sichtbar
• Vertikaler Überlauf: sichtbar

Abschnittsauffüllung aktualisieren

Da wir unsere zweite Reihe absolut über der ersten Reihe positionieren werden, müssen wir die obere (und untere) Polsterung des Abschnitts entfernen, damit die Position der zweiten Reihe nicht verschoben wird. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Füllung: 0px oben, 0px links

Hinzufügen der Bilder

In der ersten Zeile werden wir jedes der 8 Bilder/Slices hinzufügen, aus denen das erste Bild besteht. Die Bilder sollten innerhalb der Spalten genau so positioniert werden, wie sie in Photoshop geschnitten wurden (4 quer und 2 nach unten).

Hier ist eine Illustration jedes Bildes, das mit einer Nummer gekennzeichnet ist. So sollte es aussehen, nachdem alle Bilder der Zeile hinzugefügt wurden.

Bild #1

Fügen Sie das erste Bildmodul zu Spalte 1 hinzu.

Laden Sie dann die erste Bildscheibe in das Modul hoch.

Scroll-Effekte

Fügen Sie auf der Registerkarte "Erweitert" die folgenden Bildlaufeffekte zum Bild hinzu.

• Ein- und Ausblenden aktivieren: JA
• Anfangsdeckkraft: 100 % (bei 20 % Ansichtsfenster)
• Mittlere Deckkraft: 100 % (bei 20 % Ansichtsfenster)
• Endopazität: 0 % (bei 50 % Ansichtsfenster)

Klicken Sie auf die Registerkarte Skalierung und aktualisieren Sie Folgendes:

• Skalierung nach oben und unten aktivieren: JA
• Startmaßstab: 100 % (bei 20 % Ansichtsfenster)
• Mittlere Skala: 70 % (bei 32 % – 48 % Ansichtsfenster)
• Endskala: 100 % (bei 60 % Ansichtsfenster)

Klicken Sie auf die Registerkarte Rotieren und aktualisieren Sie Folgendes:

• Drehen aktivieren: JA
• Startrotation: 0 Grad (bei 0% Ansichtsfenster)
• Mittlere Drehung: 0 Grad (bei 20 % Ansichtsfenster)
• Enddrehung: -90 Grad (bei 60% Ansichtsfenster)

Der Scroll-Effekt sieht beim Scrollen auf der Seite so aus.

Bild #2

Um Bild Nr. 2 zu erstellen, duplizieren Sie Bild Nr. 1 und platzieren Sie das Duplikat in Spalte 2.

Aktualisieren Sie das Duplikat-Image-Modul mit Image #2.

Scroll-Effekt aktualisieren

Wir werden die meisten der gleichen Scroll-Effekte aus Bild 1 beibehalten. Das einzige, was wir ändern müssen, ist die Rotation. Gehen Sie zur Registerkarte "Erweitert" und ändern Sie die Enddrehung auf 90 Grad (anstelle von -90 Grad), damit sie sich in die entgegengesetzte Richtung dreht.

• Enddrehung: 90 Grad

Bild #3

Um Bild Nr. 3 zu erstellen, kopieren Sie Bild Nr. 1 und fügen Sie es in Spalte 3 ein und ändern Sie dann das Bild in Bild Nr. 3.

Bild #4

Um Bild Nr. 4 zu erstellen, kopieren Sie Bild Nr. 2, fügen Sie es in Spalte 4 ein und aktualisieren Sie das Bild auf Bild Nr. 4.

Bild #5

Um Bild Nr. 5 zu erstellen, duplizieren Sie Bild Nr. 1, sodass sich das Duplikat direkt darunter in Spalte 1 befindet.

Aktualisieren Sie das Bild auf Bild #5. Aktualisieren Sie dann den Bildlaufeffekt Ein- und Ausblenden wie folgt:

• Anfangsdeckkraft: 100 % (bei 0 % Ansichtsfenster)
• Mittlere Deckkraft: 100 % (bei 0 % Ansichtsfenster)
• Endopazität: 0 % (bei 40 % Ansichtsfenster)

Aktualisieren Sie dann den Scroll-Effekt „Skalieren nach oben und unten“ wie folgt:

• Startskala: 100 % (bei 0 % Ansichtsfenster)
• Mittlere Skala: 70 % (bei 12 % – 28 % Ansichtsfenster)
• Endskala: 100 % (bei 40 % Ansichtsfenster)

Aktualisieren Sie schließlich den Rotating Scroll-Effekt wie folgt:

• Startrotation: 0 Grad (bei 0% Ansichtsfenster)
• Mittlere Drehung: 0 Grad (bei 0% Ansichtsfenster)
• Enddrehung: 90 Grad (bei 40% Ansichtsfenster)

Bild #6

Um Bild Nr. 6 zu erstellen, duplizieren Sie Bild Nr. 5 und verschieben Sie es in Spalte 2 (unter Bild Nr. 2).

Aktualisieren Sie das Image-Modul mit Image #5. Stellen Sie dann den rotierenden Scroll-Effekt in die entgegengesetzte Richtung (-90 Grad) wie folgt ein:

• Enddrehung: -90 Grad

Bild #7

Um Bild Nr. 7 zu erstellen, duplizieren Sie Bild Nr. 5 und verschieben Sie es unter Bild Nr. 3 in Spalte 3. Aktualisieren Sie dann das Modul Dupliziertes Bild mit Bild Nr. 7.

Bild #8

Um Bild Nr. 8 zu erstellen, duplizieren Sie Bild Nr. 6 und verschieben Sie es unter Bild Nr. 4 in Spalte 4. Aktualisieren Sie dann das Modul Dupliziertes Bild mit Bild Nr. 8.

Jetzt wurden alle Bild-Slices mit dem Breakaway-Scroll-Effekt zu Zeile 1 hinzugefügt.

So sieht das Ergebnis bisher aus.

Zeile 2 hinzufügen

Die Gestaltung der zweiten Bildreihe nimmt nicht viel Zeit in Anspruch. Alles, was wir tun müssen, ist, Zeile 1 zu duplizieren, alle Bilder mit den richtigen zu aktualisieren und ihr dann eine absolute Position zuzuweisen.

Fahren Sie fort und duplizieren Sie Zeile 1.

Bilder von Zeile 2 aktualisieren

Denken Sie an die gedrehten Bilder, die wir für Bild 2 erstellt haben. Jetzt müssen wir sie nur noch an die richtige Bildmodulposition in Zeile 2 hochladen.

Bildlaufeffekte aktualisieren

Sobald die neuen gedrehten Bilder vorhanden sind, müssen wir den Bildlaufeffekt Ein- und Ausblenden aus allen Bildern in Zeile 2 entfernen.

Stellen Sie dazu den Drahtmodell-Ansichtsmodus bereit und verwenden Sie die Mehrfachauswahl, um alle 8 Bilder in Zeile 2 auszuwählen. Öffnen Sie dann die Einstellungen für eines der ausgewählten Images, um die Elementeinstellungen bereitzustellen. Aktualisieren Sie unter der Option Ein- und Ausblenden des Bildlaufeffekts Folgendes:

• Ein- und Ausblenden aktivieren: NEIN

Positionszeile #2

Unser letzter Schritt besteht darin, Reihe 2 direkt hinter Reihe 1 zu positionieren. Eine einfache Möglichkeit, dies zu tun, besteht darin, die Zeile und die absolute Position anzugeben. Öffnen Sie die Einstellungen für Zeile 2 und aktualisieren Sie Folgendes:

• Position: Absolut
• Ort: Top Center

Endergebnis

Um das Ergebnis zu sehen, müssen Sie Ihrem Abschnitt möglicherweise einen erheblichen oberen und unteren Rand geben oder andere Abschnitte über und unter dem Design erstellen. Dadurch erhalten Sie den Raum, den Sie benötigen, um den Scroll-Effekt richtig zu sehen.

Schauen wir uns das Endergebnis an.

Und hier ist es auf dem Handy.

Abschließende Gedanken

Dieser abtrünnige Bildübergang ist an sich schon ein beeindruckendes Design, aber Sie können ihn leicht verwenden, um Besuchern eine Botschaft vom Typ Transformation zu vermitteln (wie ein Vorher und Nachher). Und auch mit diesem Design müssen Sie sich nicht zufrieden geben. Fühlen Sie sich frei, mit verschiedenen Scroll-Effekten zu experimentieren, um noch erstaunlichere Bildübergänge zu erzielen. Haben Sie Ideen?

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!