So erstellen Sie mit Divi . animierte Zahlenzähler

Animierte Zahlenzähler sind im gesamten Web beliebt, um numerische Daten anzuzeigen, um den Wert von Dienstleistungen, Fallstudien und mehr hervorzuheben. Divi verfügt über ein dediziertes Zahlenzählermodul, mit dem sich ganz einfach animierte Zahlenzähler erstellen lassen.

In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie mit Divi Zahlenzähler erstellen, die beim Scrollen animiert werden. Mit den Positionsoptionen und Scrolleffekten von Divi entwerfen wir ein einfaches Layout, um ein Datum mit scrollenden Zahlen anzuzeigen.

Hör zu!

Vorgeschmack

Hier ist ein kurzer Blick auf die animierten Scroll-Zähler, die wir in Divi entwerfen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs 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.

Teil 1: Erstellen des Titelabschnitts

In diesem ersten Teil erstellen wir einen einfachen Titel für das Layout.

Fügen Sie dem Abschnitt zunächst eine einspaltige Zeile hinzu.

Fügen Sie dann der Zeile einen neuen Textbaustein hinzu.

Aktualisieren Sie den Inhalt des Textmoduls wie folgt:

<h2>Save The Date<h2>

Aktualisieren Sie dann den Überschriftentextstil wie folgt:

• Überschrift 2 Schriftart: Prata
• Überschrift 2 Textgröße: 130px (Desktop), 70px (Tablet), 40px (Telefon)

Teil 2: Erstellen der Zähler mit Scroll-Animation

In diesem nächsten Teil werden wir die drei Zähler erstellen, die Zahlen beim Scrollen animieren, bis sie zur Ruhe kommen, um ein Datum (Monat, Tag und Jahr) anzuzeigen. Jeder Zähler wird aus insgesamt 5 Textbausteinen und einem Teilermodul aufgebaut. Der erste Textbaustein dient als Label des Zählers (dh Monat, Tag, Jahr). Die nächsten vier Textmodule enthalten jeweils eine andere Zahl (in Progression), die beim Scrollen unter Verwendung der vertikalen Bewegungsoffsets in Divi animiert wird. Das untere Trennmodul hilft dabei, den Überlauf der Zahlen zu verbergen.

So geht's.

Zweite Reihe hinzufügen

Fügen Sie unter der vorhandenen Zeile eine weitere einspaltige Zeile hinzu.

Zeileneinstellungen

Aktualisieren Sie die Zeileneinstellungen wie folgt, bevor Sie ein Modul hinzufügen:

• Dachrinnenbreite: 1
• Padding: 0px oben, 0px unten

Spalteneinstellungen

Öffnen Sie dann die Einstellungen für die Spalte und aktualisieren Sie das Padding wie folgt:

• Polsterung (Desktop): 100px unten
• Polsterung (Tablet und Telefon): 0px unten

Textmodul hinzufügen

Fügen Sie dann der Spalte einen Textbaustein hinzu.

Inhalt/Label

Fügen Sie für den Inhalt des Textmoduls das Wort „Monat“ hinzu.

Einstellungen für Textdesign

Nachdem der Inhalt hinzugefügt wurde, aktualisieren Sie die Designeinstellungen wie folgt:

• Hintergrundfarbe: #ffffff
• Textschriftart: Prata
• Text Textgröße: 40px
• Textzeilenhöhe: 2em
• Breite: 100%
• Padding: 20px oben, 20px unten, 20px links, 20px rechts
• Breite des unteren Rands: 5px
• Farbe des unteren Rands: #eeeeee

Position

Aktualisieren Sie dann auf der Registerkarte "Erweitert" die Positionsoptionen wie folgt:

• Position: Relativ
• Z-Index 1

Textmodul für erste Zahl hinzufügen

Sobald das erste Textmodul vorhanden ist, können wir mit dem Hinzufügen der Zahlen beginnen, die beim Scrollen verschoben werden. Um die erste Zahl hinzuzufügen, fügen Sie unter dem bestehenden Textbaustein „Monat“ einen neuen Textbaustein hinzu.

Nummer/Inhalt hinzufügen

Aktualisieren Sie dann die Beschriftung des Textmoduls auf „num1“, um die Referenz zu erleichtern. Aktualisieren Sie dann den Inhalt mit der Nummer „01“.

Designeinstellungen für Zahl

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Textschriftart: Prata
• Text Textfarbe: #8ab2d3
• Text Textgröße: 70px
• Text Buchstabenabstand: 4px
• Textzeilenhöhe: 1.5em
• Füllung: 20px übrig

HINWEIS: Die Zahlen haben eine Textgröße von 70px und eine Zeilenhöhe von 1,5em, was bedeutet, dass die Gesamthöhe des Textmoduls annähernd 100px beträgt. Dies ist wichtig, wenn wir beginnen, die vertikalen Bewegungsoffsets hinzuzufügen. Wenn Sie beispielsweise dem Textmodul einen vertikalen Versatz von „1“ hinzufügen, wird das Textmodul um genau 100 Pixel verschoben, was der Höhe des Textmoduls entspricht.

Scroll-Effekte für die erste Zahl

Fügen Sie dem Textmodul die folgenden Bildlaufeffekte hinzu.

Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:

• Vertikale Bewegung aktivieren: JA
• Startversatz: 1 (bei 10%)
• Mittlerer Offset: 0 (bei 20%)
• Endversatz: -1 (bei 30%)

Aktualisieren Sie auf der Registerkarte Ein- und Ausblenden Folgendes:

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

Stellen Sie sicher, dass der Auslöser für den Bewegungseffekt oben im Element eingestellt ist:

• Bewegungseffekt-Trigger: Top of Element

Erstellen Sie das Textmodul für die zweite Zahl

Doppelte erste Zahl

Nachdem die erste Nummer erstellt wurde, duplizieren Sie sie, um den Textbaustein für die zweite Nummer zu erstellen. Aktualisieren Sie dann die Beschriftung in der Ebenenansicht für eine bessere Referenz.

Nummer/Inhalt aktualisieren

Öffnen Sie die Einstellungen für den zweiten Zahlentextbaustein und aktualisieren Sie den Inhalt mit der Zahl „02“.

Position aktualisieren

Aktualisieren Sie dann die Positionsoptionen wie folgt:

• Position: Absolut
• Vertikaler Versatz: 126px

Scroll-Effekte aktualisieren

Aktualisieren Sie dann die Scroll-Effekte wie folgt:

Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:

• Startversatz: 1 (bei 20%)
• Mittlerer Offset: 0 (bei 30%)
• Endversatz: -1 (bei 40%)

Aktualisieren Sie auf der Registerkarte Ein- und Ausblenden Folgendes:

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

Textbaustein für dritte Zahl erstellen

Doppelte zweite Zahl

Um den Textbaustein für die dritte Zahl zu erstellen, duplizieren Sie den Textbaustein für die zweite Zahl.

Nummer/Inhalt aktualisieren

Aktualisieren Sie den Inhalt mit der Nummer „03“.

Scroll-Effekte aktualisieren

Aktualisieren Sie dann die Scroll-Effekte:

Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:

• Startversatz: 1 (bei 30%)
• Mittlerer Offset: 0 (bei 40%)
• Endversatz: -1 (bei 50%)

Aktualisieren Sie auf der Registerkarte Ein- und Ausblenden Folgendes:

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

Textbaustein für vierte Zahl erstellen

Doppelte dritte Nummer

Um die vierte Zahl für den Scroll-Zähler zu erstellen, duplizieren Sie den Textbaustein für die dritte Zahl.

Nummer/Inhalt aktualisieren

Aktualisieren Sie den Inhalt mit der Nummer „04“.

Scroll-Effekte aktualisieren

Aktualisieren Sie dann die Scroll-Effekte:

Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:

• Startversatz: 1 (bei 40%)
• Mittlerer Offset: 0 (bei 50%)
• End-Offset: 0 (bei 60%)

Aktualisieren Sie auf der Registerkarte Ein- und Ausblenden Folgendes:

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

Unterteiler hinzufügen

Fügen Sie unter dem letzten Textmodul ein neues Trennmodul hinzu. Dies wird verwendet, um den unteren Überlauf des Textes auszublenden, der in die Ansicht gescrollt wird.

Wählen Sie dann NICHT aus, um den Teiler anzuzeigen.

Stil- und Positionseinstellungen

Aktualisieren Sie das Design für den Teiler wie folgt:

• Hintergrundfarbe: #ffffff
• Breite: 100%
• Höhe: 100px
• Breite des oberen Rands: 5px

Aktualisieren Sie auf der Registerkarte "Erweitert" Folgendes:

• Deaktivieren auf: Telefon und Tablet
• Position: Absolut
• Ort: Unten links

WICHTIG: Der Platz, den die Trennlinie einnimmt, wurde zuvor erstellt, indem der Spalte eine untere Auffüllung von 100 Pixeln hinzugefügt wurde. Wenn Sie diese Auffüllung nicht hinzufügen, überlappt der Teiler die Zahlen.

Weitere Zähler und Spalten erstellen

Spalte 1 duplizieren und Inhalt aktualisieren

Um einen neuen Zähler zu erstellen, duplizieren Sie Spalte 1. Dadurch wird automatisch eine zweite Spalte mit allen Elementen erstellt.

Anschließend müssen Sie nur noch den Inhalt aller Textbausteine ​​mit neuem Text und Zahlen aktualisieren.

Spalte 2 duplizieren und Inhalt aktualisieren

Nachdem der Inhalt aller Textbausteine ​​in Spalte 2 aktualisiert wurde, duplizieren Sie Spalte 2, um einen dritten Zähler für das Jahr zu erstellen. Aktualisieren Sie dann den Inhalt für jeden Textbaustein nach Bedarf.

Endergebnis

Hier ist das Endergebnis.

Abschließende Gedanken

Dieses einfache Layout mit scroll-animierten Zahlenzählern sollte sich als praktisch erweisen, um numerische Daten auf frische und einzigartige Weise anzuzeigen. Zögern Sie nicht, das Datumskonzept aufzugeben und die Zähler für alles zu verwenden, was Sie sich vorstellen können!

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

Danke schön!