Springe zum Hauptinhalt

So erstellen Sie eine Bildlaufanimation auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Die Seite "Über Sie" ist eine der wichtigsten Seiten Ihrer Website. Auf diese Weise können die Leute Sie besser kennenlernen und entscheiden, ob sie den nächsten Schritt bequem machen möchten. Wenn Sie nach einer einfachen Möglichkeit suchen, das Geschichtenerzählen in diese Seite aufzunehmen, werden Sie dieses Tutorial lieben. Wir werden die Bildlaufeffekte von Divi verwenden, um einen reibungslosen Übergang zum Geschichtenerzählen auf dem Bildlauf zu erzielen. Sobald ein Teil der Geschichte verblasst, erscheint ein anderer Teil. Es gibt den Besuchern das Gefühl, eine interessante Geschichte zu lesen. 

Mögliches Endergebnis

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Divi Animation

1. Erstellen Sie den ersten Vollbildabschnitt der Seite

Einen neuen Abschnitt hinzufügen

Hintergrundfarbe

Fügen Sie zunächst einen ersten Abschnitt zu Ihrer Info-Seite hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe in Schwarz.

  • Hintergrundfarbe: # 000000
Divi Hintergrundabschnitt

Sizing

Drehen Sie dann den Abschnitt in den Vollbildmodus, indem Sie den Größenparametern eine Mindesthöhe hinzufügen.

  • Min. Höhe: 100vh
Divi Abschnitt Höhe

2. Fügen Sie eine animierte Linie hinzu

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Fügen Sie dann Ihrem Abschnitt eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Fügen Sie eine Divilinie hinzu

Sizing

Öffnen Sie die Linienparameter und lassen Sie die Linie die gesamte Breite des Abschnittscontainers einnehmen, indem Sie die Bemaßungsparameter ändern.

  • Breite: 100%
  • Maximale Breite: 100%
Maximale Divibreitenkonfiguration

Abstand

Fügen Sie dann die linke und rechte Füllung auf verschiedenen Bildschirmgrößen hinzu.

  • Linke Polsterung: 20vw (Schreibtisch), 10vw (Tablet und Telefon)
  • Rechte Polsterung: 20vw (Schreibtisch) 10vw (Tablet und Telefon)
Passen Sie die Divi-Polsterung an

Animation

Um den Storytelling-Effekt zu erhöhen, verwenden wir auch eine Fade-Animation für die Linie.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Animationsstil: Ausblenden
  • Animationsdauer: 3000ms
  • Animationsgeschwindigkeitskurve: Easy-In-Out
  • Animation wiederholen: einmal
Divi Abschnitt Animation

Position

Schließlich stellen wir sicher, dass die Linie in der Mitte des Abschnittscontainers positioniert ist, indem wir die Positionsoptionen ändern.

  • Position: absolut
  • Ort: Zentrum
Position abgeschafft divi

3. Fügen Sie einen Titel mit Bildlaufeffekten ein

Fügen Sie der Spalte den Textbaustein # 1 hinzu

Fügen Sie H1-Inhalte hinzu

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul mit H1-Inhalt.

Design titire divi

Titel 1 Texteinstellungen

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die H1-Texteinstellungen wie folgt:

  • Titelschrift: Nunito
  • Schriftgröße des Titels: Halb fett
  • Kopfzeilentextfarbe: #ffffff
  • Kopfzeilentextgröße: 7vw (Desktop), 9vw (Tablet), 11vw (Telefon)
Divi Schriftkonfiguration

Vertikale Bewegung

Wir werden auch eine subtile vertikale Animation hinzufügen.

  • Vertikale Bewegung aktivieren: Ja
  • Startoffset: 0 (bei 50%)
  • Durchschnittlicher Offset: 10 (bei 100%)
  • Endversatz: 10
Divi Textanimation

Eingehender und ausgehender Bildlaufeffekt

Mit einem eingehenden und ausgehenden Fade-Effekt.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 100%
  • Durchschnittliche Deckkraft: 100% (bei 55%)
  • Endopazität: 0% (bis 62%)
Auswahl der Deckkraftanimation

Skalieren des Scroll-Effekts nach oben und unten

Zu guter Letzt verwenden wir auch einen Bildlaufeffekt nach oben und unten.

  • Skalierung nach oben und unten aktivieren: Ja
  • Startskala: 100% (bis 40%)
  • Durchschnittliche Skala: 95% (bis 74%)
  • Endskala: 90%
Divi Animationstext

4. Klonen Sie einen ganzen Abschnitt einmal und fügen Sie Beschreibungstext mit Bildlaufeffekten hinzu

Titel und Inhalt bearbeiten

Sobald Sie den ersten Abschnitt abgeschlossen haben, können Sie ihn vollständig klonen. Öffnen Sie das Textmodul im Container für doppelte Abschnitte und verwenden Sie eine H2-Kopie.

Abschnitt dupliziert divi

Ändern Sie die Textparameter des H2-Textmoduls

Ändern Sie die H2-Texteinstellungen entsprechend:

  • Titel 2 Polizei: Nunito
  • Schrifttitel 2: halb fett
  • Punkt 2 Textfarbe: #ffffff
  • Punkt 2 Textgröße: 5vw (Desktop), 7vw (Tablet), 8vw (Telefon)
  • Höhe der Linie 2: 1em (Büro), 1.2em (Tablet und Telefon)
Geschichte auf Schriftrolle

Fügen Sie der Spalte den Textbaustein # 2 hinzu

Inhalt hinzufügen

Fügen Sie dann der Spalte ein weiteres Textmodul mit einem Beschreibungsinhalt Ihrer Wahl hinzu.

Geschichte auf Schriftrolle

Texteinstellungen

Ändern Sie die Texteinstellungen für das Textmodul wie folgt:

  • Textschrift: Öffnen Sie Sans
  • Textfarbe: #ffffff
  • Textgröße: 1vw (Desktop), 2.5vw (Tablet), 3vw (Telefon)
  • Höhe der Textzeile: 3.1 em (Schreibtisch), 2.5 em (Tablet und Telefon)
Geschichte auf Schriftrolle

Abstand

Verwenden Sie auch einen oberen Rand.

  • Oberer Rand: 8vw
Geschichte auf Schriftrolle

Eingehender und ausgehender Bildlaufeffekt

Wechseln Sie als Nächstes zu Bildlaufeffekten auf der Registerkarte "Erweitert" und verwenden Sie die folgenden Einstellungen zum Ein- und Ausblenden:

  • Ein- und Ausblenden aktivieren: Ja
  • Anfangsopazität: 100%
  • Durchschnittliche Deckkraft: 0% (bei 31%)
  • Endopazität: 0% (bis 35%)
Scrollanimation des Divi-Textmoduls

Skalieren des Scroll-Effekts nach oben und unten

Fügen Sie außerdem einen Skalierungseffekt hinzu.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • Skalierung nach oben und unten aktivieren: Ja
  • Startskala: 100% (bis 40%)
  • Durchschnittliche Skala: 95% (bis 74%)
  • Endskala: 90%
Divi-Textmodul für Animationsanpassung

Sie können diesen letzten Abschnitt jetzt so oft klonen. Sie müssen jedoch den Inhalt jedes Abschnitts an Ihre Bedürfnisse anpassen.

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Beispielergebnis

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie mithilfe der in Divi integrierten Bildlaufeffekte eine Geschichte auf Ihrer Info-Seite erzählen. Durch den von uns erstellten Effekt kann die aufeinanderfolgende Kopie ausgeblendet und ausgeblendet werden, sodass Besucher das Gefühl haben, eine Geschichte zu lesen. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

Dieser Artikel enthält 1 Kommentar

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren