So markieren Sie einen neuen Divi-Abschnitt mit subtilen Bewegungsformen

Es gibt viele Möglichkeiten, wie Sie Ihren Besucher darauf aufmerksam machen können, dass er zu einem anderen Abschnitt Ihrer Seite wechselt. Innerhalb von Divi gibt es eine große Auswahl an Abschnittsteilern, die Sie sofort verwenden können. Wenn Sie jedoch nach einer animierteren Möglichkeit suchen, dies zu verdeutlichen, werden Sie dieses Tutorial lieben. Wir zeigen Ihnen, wie Sie mit subtilen Bewegungsformen einen neuen Divi-Abschnitt markieren. Wir erstellen diese Formen mit den integrierten Optionen von Divi und fügen ihnen mit den Scroll-Effekten von Divi Bewegung hinzu. Die Möglichkeiten sind endlos, aber wir stellen Ihnen drei Designbeispiele vor, die Sie sofort verwenden können. Sie können die JSON-Dateien auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Beispiel #3

Desktop

Handy, Mobiltelefon

Laden Sie die subtilen Bewegungsformen-Layouts KOSTENLOS herunter

Um die kostenlosen Layouts für subtile Bewegungsformen in die Hände zu bekommen, müssen Sie sie 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!

Allgemeine Schritte

Landingpage-Layout für die Kunstgalerie hochladen

Für dieses Tutorial verwenden wir das Art Gallery Layout Pack, aber Sie können die Technik auf jede Art von Website anwenden, die Sie erstellen. Fügen Sie eine neue Seite hinzu und laden Sie die Landingpage des Layoutpakets hoch.

Neue Zeile am Ende von Abschnitt 1 hinzufügen

Spaltenstruktur

Nun gehen wir einige grundlegende Schritte durch, die für alle drei Beispiele gelten, die zu Beginn dieses Tutorials gezeigt wurden. Fügen Sie zunächst eine neue Zeile am unteren Rand des ersten Abschnitts Ihrer Seite hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Ändern Sie auch die Werte für Rand und Abstand.

• Oberer Rand: 10vw
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Entfernen Sie die untere Polsterung von Abschnitt 1

Um sicherzustellen, dass die Zeile und die Bewegungsformen am unteren Rand des Abschnitts angezeigt werden, müssen wir die untere Auffüllung des Abschnitts entfernen.

• Untere Polsterung: 0vw

Beispiel 1 neu erstellen

Trennmodul #1 hinzufügen

Sichtweite

Nachdem Sie die allgemeinen Schritte abgeschlossen haben, ist es an der Zeit, die verschiedenen Beispiele neu zu erstellen, beginnend mit dem ersten. Fügen Sie ein erstes Teilermodul hinzu und stellen Sie sicher, dass die Option „Teiler anzeigen“ aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Linienfarbe.

• Linienfarbe: #ffa100

Größe

Ändern Sie auch die Größeneinstellungen des Moduls.

• Teilergewicht: 50px
• Höhe: 50px

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Linker Rand: -200px (nur Tablet und Telefon)
• Rechter Rand: -200px (nur Tablet und Telefon)
• Linke Polsterung: 15vw
• Rechte Polsterung: 15vw

Schiefe transformieren

Wir werden das Modul auch leicht transformieren, indem wir in den Transformationseinstellungen einen unteren Skew-Wert hinzufügen.

• Unten: 60 Grad

Horizontaler Bewegungs-Scroll-Effekt

Zeit, unserem Modul die verschiedenen Scroll-Effekte hinzuzufügen! Zuerst fügen wir eine horizontale Bewegung hinzu.

• Horizontale Bewegung aktivieren: Ja
• Startversatz: 0
• Mittenversatz: 0 (bei 80%)
• Endversatz:
  • Desktop: 20 (bei 85 %)
  • Tablet & Telefon: 5 (bei 85%)

Ein- und Ausblenden des Scroll-Effekts

Wir werden auch einen Ein- und Ausblendeffekt hinzufügen.

• Ein- und Ausblenden aktivieren: Ja
• Anfangsdeckkraft: 0%
• Mittlere Deckkraft: 0% (bei 36%)
• Endopazität: 100 % (bei 40 %)

Scroll-Effekt nach oben und unten skalieren

Und wir vervollständigen die Moduleinstellungen, indem wir einen Skalierungseffekt nach oben und unten hinzufügen.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala: 20 %
• Mittlere Skala: 50 % (bei 69 %)
• Endskala: 100 % (bei 73 %)

Clone Divider Modul #1

Sobald Sie das Divider-Modul abgeschlossen haben, können Sie es klonen.

Linienfarbe ändern

Öffnen Sie die Einstellungen des duplizierten Moduls und ändern Sie die Linienfarbe.

• Linienfarbe: #24252d

Abstand ändern

Ändern Sie auch die Abstandswerte des Moduls.

• Linker Rand: -200px (nur Tablet und Telefon)
• Rechter Rand: -200px (nur Tablet und Telefon)
• Linke Polsterung: 25vw
• Rechte Polsterung: 25vw

Ändern des horizontalen Bewegungs-Scroll-Effekts

Gehen Sie dann zu den Bildlaufeffekten auf der Registerkarte Erweitert und ändern Sie den Endversatz des Bildlaufeffekts der horizontalen Bewegung.

• Endversatz:
  • Desktop: -20
  • Tablet & Telefon: -5

Beispiel 2 neu erstellen

Trennmodul #1 hinzufügen

Sichtweite

Wenn Sie das zweite Beispiel lieber neu erstellen möchten, fügen Sie der letzten Zeile Ihres Abschnitts ein erstes Trennmodul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Ändern Sie als nächstes die Linienfarbe des Moduls.

• Linienfarbe: #ffa100

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 200px
• Breite: 200px
• Modulausrichtung: Mitte
• Höhe: 200px

Grenze

Als nächstes verwandeln wir das Modul in einen Kreis, indem wir einen Randradius hinzufügen.

• Alle Ecken: 200px

Horizontaler Bewegungs-Scroll-Effekt

Zeit, die Scroll-Effekte hinzuzufügen! Der erste Effekt, den wir verwenden, ist die horizontale Bewegung.

• Horizontale Bewegung aktivieren: Ja
• Startversatz: -2
• Mittenversatz: 0
• Endversatz:
  • Desktop: 20
  • Tablet & Telefon: 5

Scroll-Effekt nach oben und unten skalieren

Als Nächstes aktivieren wir auch einen Skalierungseffekt nach oben und unten.

• Skalierung nach oben und unten aktivieren: Ja
• Startskala: 20 %
• Mittlere Skala: 100 %
• Endskala: 100%

Teilermodul klonen

Machen Sie weiter und klonen Sie das gesamte Divider-Modul.

Linienfarbe ändern

Öffnen Sie das Duplikat und ändern Sie die Linienfarbe.

• Linienfarbe: #24252d

Abstand ändern

Fügen Sie auch etwas oberen Rand hinzu.

• Oberer Rand: -200px

Ändern Sie den horizontalen Bewegungs-Scroll-Effekt

Gehen Sie dann zu den Einstellungen für den horizontalen Bewegungs-Scroll-Effekt und ändern Sie den End-Offset.

• Endversatz:
  • Desktop: -20
  • Tablet & Telefon: -5

Beispiel 3 neu erstellen

Zeilenauffüllung hinzufügen

Auf zum nächsten und letzten Beispiel! Öffnen Sie zunächst die Zeile, die Sie in den allgemeinen Schritten dieses Tutorials erstellt haben, und ändern Sie die Abstandswerte in den Abstandseinstellungen.

• Obere Polsterung: 50px
• Untere Polsterung: 50px

Trennmodul #1 hinzufügen

Sichtweite

Fügen Sie der letzten Zeile Ihres Abschnitts ein neues Trennmodul hinzu und blenden Sie die Trennlinie aus.

• Teiler anzeigen: Nein

Hintergrund mit Farbverlauf

Fügen Sie als nächstes einen Hintergrund mit Farbverlauf hinzu.

• Farbe 1: #ffa100
• Farbe 2: #f77f00
• Verlaufstyp: Linear
• Verlaufsrichtung: 121deg

Größe

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Größeneinstellungen wie folgt:

• Breite: 200px
• Modulausrichtung: Mitte
• Höhe: 0px

Abstand

Als nächstes fügen wir einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 100px
• Untere Polsterung: 100px

Horizontaler Bewegungs-Scroll-Effekt

Jetzt ist es an der Zeit, die Scroll-Effekte hinzuzufügen, beginnend mit einer horizontalen Bewegung über verschiedene Bildschirmgrößen.

• Horizontale Bewegung aktivieren: Ja
• Startversatz: -1 (bei 30%)
• Mittenversatz: 0
• Endversatz:
  • Desktop: 20
  • Tablet & Telefon: 5

Rotierender Scroll-Effekt

Wir vervollständigen die Moduleinstellungen, indem wir einen rotierenden Scroll-Effekt hinzufügen.

• Drehen aktivieren: Ja
• Startrotation: 0° (bei 46%)
• Mittlere Drehung: 50° (bei 75%)
• Enddrehung: 90°

Teilermodul klonen

Fahren Sie fort und klonen Sie das gesamte Modul.

Hintergrund mit Farbverlauf ändern

Öffnen Sie die Einstellungen des Duplikats und ändern Sie die Hintergrundfarben des Farbverlaufs.

• Farbe 1: #24252d
• Farbe 2: #16161c

Abstand ändern

Fügen Sie einen negativen oberen Rand hinzu.

• Oberer Rand: -100px

Horizontalen Scroll-Effekt ändern

Und ändern Sie den Endversatz der horizontalen Bewegung in den Bildlaufeffekteinstellungen.

• Endversatz:
  • Desktop: -20
  • Tablet & Telefon: -5

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Beispiel #3

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Bewegungsformen erstellen und diese verwenden, um einen neuen Abschnitt auf Ihrer Divi-Seite zu markieren. Die Verwendung dieser Technik hilft den Besuchern, sich noch mehr der Tatsache bewusst zu werden, dass sie zu einem anderen Teil Ihrer Seite wechseln. Die von uns neu erstellten Bewegungseffekte sind subtil und fügen Ihrer Website mühelos Interaktionen hinzu. Sie konnten die JSON-Dateien auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.