So erstellen Sie animierte Seitenübergänge mit Divis Theme Builder

Wenn Besucher auf Ihrer Divi-Website von Seite zu Seite navigieren, erfolgt der Übergang normalerweise sofort. Was ist, wenn es eine Möglichkeit gibt, diese Seitenübergänge zu animieren? Mit Divi's Theme Builder ist dies sicher, ohne dass Sie benutzerdefinierten Code benötigen! Sobald Ihre Besucher eine Seite verlassen, um eine andere zu betreten, können Sie eine Animation anwenden. Im heutigen Tutorial zeigen wir Ihnen, wie Sie diese animierten Seitenübergänge erstellen. Darüber hinaus stellen wir Ihnen drei verschiedene Beispiele vor, die Sie sofort bei Ihrem nächsten Projekt anwenden können. Sie können die JSON-Vorlagendateien 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.

Animierter Seitenübergang #1

Desktop

Handy, Mobiltelefon

Animierter Seitenübergang #2

Desktop

Handy, Mobiltelefon

Animierter Seitenübergang #3

Desktop

Handy, Mobiltelefon

Laden Sie die Seitenvorlagen KOSTENLOS herunter

Um die kostenlosen Seitenvorlagen 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!

1. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Seitenvorlage hinzu

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Als erstes müssen Sie zu Ihrem Divi Theme Builder gehen und auf "Neue Vorlage hinzufügen" klicken.

Vorlage auf allen Seiten verwenden

Verwenden Sie die neue Vorlage auf allen Seiten (oder den Seiten, auf die der Übergang angewendet werden soll).

• Verwenden auf: Alle Seiten

Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Beginnen Sie dann mit dem Erstellen des benutzerdefinierten Hauptteils Ihrer Seitenvorlage.

2. Erstellen Sie den Seitenkörper mit dem Post-Content-Modul

Abschnittseinstellungen

Abstand

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Sichtweite

Um sicherzustellen, dass während der Animation keine horizontale Bildlaufleiste angezeigt wird, müssen wir beide Abschnittsüberläufe im erweiterten Tab der Abschnittseinstellungen ausblenden.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

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

Abstand

Außerdem entfernen wir die standardmäßige obere und untere Auffüllung der Zeile. Zu diesem Zeitpunkt haben die Abschnitts-, Zeilen- und Spaltencontainer genau die gleiche Größe. Es gibt keinerlei Leerzeichen zwischen den Containern. Dies ist wichtig für den nächsten Schritt; Hinzufügen des dynamischen Seiteninhalts.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Modul für Post-Inhalte zur Spalte hinzufügen

Das einzige Modul, das wir brauchen, um den Seiteninhalt dynamisch erscheinen zu lassen, ist das Post-Content-Modul. Fahren Sie fort und fügen Sie dieses Modul der Spalte Ihrer Zeile hinzu. Dank der Abschnitts- und Zeileneinstellungen, die wir in den vorherigen Teilen dieses Beitrags angewendet haben, nimmt der dynamische Seiteninhalt die gesamte Breite und Höhe des Abschnittscontainers ein.

3. Wenden Sie einen animierten Seitenübergang Ihrer Wahl an

Animierten Seitenübergang 1 neu erstellen

Abschnittseinstellungen

Hintergrundfarbe

Zeit, die animierten Seitenübergänge anzuwenden! Wir teilen drei verschiedene Beispiele, aber mit den integrierten Optionen von Divi sind die Animationsmöglichkeiten endlos. Um den ersten animierten Seitenübergang anzuwenden, öffnen Sie den Abschnittscontainer und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #d8cdbe

Animation

Wir wenden auch die folgenden Animationseinstellungen auf den Abschnitt an:

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Zeileneinstellungen

Hintergrundfarbe

Öffnen Sie als nächstes die Zeileneinstellungen und fügen Sie die folgende Hintergrundfarbe hinzu:

• Hintergrundfarbe: #e2e2e2

Animation

Fahren Sie fort, indem Sie die folgende Animation auf die Zeile anwenden:

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsverzögerung: 500 ms
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Spalteneinstellungen

Hintergrundfarbe

Weiter zum nächsten Container, den wir animieren werden, dem Spaltencontainer. Öffnen Sie die Spalteneinstellungen und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Animation

Fügen Sie der Spalte auch eine benutzerdefinierte Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsverzögerung: 1200 ms
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Einstellungen für das Post-Content-Modul

Animation

Zu guter Letzt animieren wir das Post Content Module (das alle dynamischen Seiteninhalte enthält).

• Animationsstil: Ausblenden
• Animationsverzögerung: 2500 ms
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Animierten Seitenübergang 2 neu erstellen

Abschnittseinstellungen

Hintergrundfarbe

Möchten Sie stattdessen die zweite Animation erstellen? Öffnen Sie die Abschnittseinstellungen und verwenden Sie die folgende Hintergrundfarbe:

• Hintergrundfarbe: #d8cdbe

Animation

Wenden Sie dann eine benutzerdefinierte Animation auf den Abschnitt an.

• Animationsstil: Folie
• Animationsrichtung: Links
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Zeileneinstellungen

Hintergrund mit Farbverlauf

Öffnen Sie als nächstes die Zeileneinstellungen und verwenden Sie den folgenden Verlaufshintergrund dafür:

• Farbe 1: rgba(255,255,255,0)
• Farbe 2: #ffffff
• Verlaufstyp: Linear
• Verlaufsrichtung: 90deg
• Startposition: 50%
• Endposition: 50%

Animation

Fügen Sie Ihrer Zeile auch eine benutzerdefinierte Animation hinzu.

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Animationsverzögerung: 800 ms
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In
• Animationswiederholung: Einmal

Spalteneinstellungen

Hintergrundfarbe

Öffnen Sie dann die Spalteneinstellungen der Zeile und verwenden Sie eine weiße Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Animation

Fahren Sie fort, indem Sie der Spalte eine Animation hinzufügen.

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsverzögerung: 2000 ms
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Einstellungen für das Post-Content-Modul

Animation

Öffnen Sie zu guter Letzt die Einstellungen für das Post Content Module und verwenden Sie die folgenden Animationseinstellungen:

• Animationsstil: Ausblenden
• Animationsverzögerung: 3000ms
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Animierten Seitenübergang 3 neu erstellen

Abschnittseinstellungen

Hintergrund mit Farbverlauf

Auf zum nächsten und letzten animierten Seitenübergang! Öffnen Sie die Abschnittseinstellungen und verwenden Sie den folgenden Verlaufshintergrund:

• Farbe 1: #d8cdbe
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Oben
• Startposition: 20%
• Endposition: 20%

Animation

Wechseln Sie zum Design-Tab des Abschnitts und ändern Sie die Animationseinstellungen entsprechend:

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsintensität: 10%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Zeileneinstellungen

Hintergrund mit Farbverlauf

Öffnen Sie dann die Zeileneinstellungen und wenden Sie einen Verlaufshintergrund an:

• Farbe 1: #ffffff
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 50%
• Endposition: 50%

Animation

Ändern Sie auch die Animationseinstellungen der Zeile.

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In
• Animationswiederholung: Einmal

Spalteneinstellungen

Hintergrundfarbe

Fahren Sie fort, indem Sie die Spalteneinstellungen öffnen. Ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Animation

Wenden Sie auch die folgenden Animationseinstellungen auf die Spalte an:

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsverzögerung: 1500 ms
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Einstellungen für das Post-Content-Modul

Animation

Und schließen Sie den dritten animierten Seitenübergang ab, indem Sie die folgenden Animationseinstellungen auf das Post-Content-Modul anwenden:

• Animationsstil: Ausblenden
• Animationsverzögerung: 3000ms
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

6. Alle Theme Builder-Änderungen speichern und das Ergebnis anzeigen

Nachdem Sie den Hauptteil Ihrer Seitenvorlage erstellt und den animierten Seitenübergang Ihrer Wahl hinzugefügt haben, können Sie alle Änderungen im Theme Builder speichern und das Ergebnis auf Ihrer Website anzeigen!

Vorschau

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

Animierter Seitenübergang #1

Desktop

Handy, Mobiltelefon

Animierter Seitenübergang #2

Desktop

Handy, Mobiltelefon

Animierter Seitenübergang #3

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie animierte Seitenübergänge nur mit den integrierten Optionen von Divi und dem Theme Builder erstellen. Dies ist eine großartige Möglichkeit, Ihrer Website eine weitere Interaktionsebene hinzuzufügen, ohne dass zusätzlichen Code erforderlich ist. Sie konnten die JSON-Beispieldateien 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.