Animierte Zahlenzähler sind im Internet beliebt, um Zahlen anzuzeigen. Daten um den Wert von Dienstleistungen, Fallstudien usw. hervorzuheben. Divi verfügt über ein dediziertes Zahlenzählermodul, mit dem auf einfache Weise animierte Zahlenzähler generiert werden können.
In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie numerische Zähler erstellen, die beim Scrollen animiert werden Divi. Verwendung der Positionsoptionen und Scrolleffekte von Divi, entwerfen wir ein einfaches Layout, um ein Datum mit scrollenden Zahlen anzuzeigen.
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 Zeile mit einer Spalte hinzu.
Fügen Sie dann der Zeile ein neues Textmodul hinzu.
Aktualisieren Sie die Inhalt des Textbausteins mit folgenden Elementen:
Merken Sie den Termin vor
Aktualisieren Sie dann den Header-Textstil wie folgt:
- Überschrift 2 Schriftart: Prata
- Punkt 2 Textgröße: 130px (Desktop), 70px (Tablet), 40px (Telefon)
Teil 2: Erstellung von Zählern mit Bildlaufanimation
In diesem nächsten Teil erstellen wir die drei Zähler, die die Bildlaufnummern animieren, bis sie anhalten, um ein Datum (Monat, Tag und Jahr) anzuzeigen. Jeder Zähler wird aus insgesamt 5 Textmodulen und einem Trennmodul aufgebaut. Das erste Textmodul dient als Beschriftung des Zählers (d. H. Monat, Tag, Jahr). Die nächsten vier Textmodule enthalten jeweils eine andere Nummer (in Bearbeitung), die beim Scrollen mithilfe der vertikalen Bewegungsversätze in Divi animiert wird. Das untere Trennmodul hilft dabei, den Überlauf von Zahlen zu verbergen.
So geht's
Fügen Sie eine zweite Zeile hinzu
Fügen Sie unterhalb der vorhandenen Zeile einer Spalte eine weitere Zeile hinzu.
Leitungseinstellungen
Aktualisieren Sie die Zeilenparameter wie folgt, bevor Sie ein Modul hinzufügen:
- Dachrinnenbreite: 1
- Auffüllen: 0px hoch, 0px niedrig
Spaltenparameter
Öffnen Sie dann die Spalteneinstellungen und aktualisieren Sie die Füllung wie folgt:
- Polsterung (Schreibtisch): 100px niedrig
- Polsterung (Tablet und Telefon): 0px niedrig
Fügen Sie ein Textmodul hinzu
Fügen Sie dann der Spalte ein Textmodul hinzu.
Inhalt / Label
Für den Inhalt Fügen Sie aus dem Textmodul das Wort „Monat“ hinzu.
Einstellungen für das Textdesign
Sobald die Inhalt hinzugefügt, aktualisieren Sie die Designeinstellungen wie folgt:
- Hintergrundfarbe: #ffffff
- Textschrift: Sprechen
- Textgröße: 40px
- Höhe der Textzeile: 2em
- Breite: 100%
- Auffüllen: 20 Pixel oben, 20 Pixel unten, 20 Pixel links, 20 Pixel rechts
- Breite des unteren Randes: 5px
- Farbe des unteren Randes: #eeeeee
Position
Aktualisieren Sie dann auf der Registerkarte "Erweitert" die Positionsoptionen wie folgt:
- Position: Relativ
- Z-Index 1
Fügen Sie ein Textmodul für die erste Ausgabe hinzu
Sobald das erste Textmodul vorhanden ist, können wir die Zahlen hinzufügen, die sich auf der Schriftrolle bewegen. Um die erste Nummer hinzuzufügen, fügen Sie ein neues Textmodul unter dem vorhandenen Textmodul "Monat" hinzu.
Nummer / Inhalt hinzufügen
Aktualisieren Sie dann die Beschriftung des Textmoduls, um zur leichteren Bezugnahme „num1“ zu lesen. Aktualisieren Sie dann den Inhalt mit der Nummer „01“.
Designeinstellungen für Nummer
Aktualisieren Sie auf der Registerkarte Design Folgendes:
- Textschrift: Prata
- Text Textfarbe: # 8ab2d3
- Text Textgröße: 70px
- Textbuchstabenabstand: 4px
- Textzeilenhöhe: 1.5em
- Polsterung: 20px übrig
HINWEIS: Die Zahlen haben eine Textgröße von 70 Pixel und eine Zeilenhöhe von 1.5 Pixel. Dies bedeutet, dass die Gesamthöhe des Textmoduls nahe 100 Pixel liegt. Dies ist wichtig, wenn Sie mit dem Hinzufügen der vertikalen Bewegungsversätze beginnen. Wenn Sie beispielsweise dem Textmodul einen vertikalen Versatz von „1“ hinzufügen, wird das Textmodul genau um 100 Pixel verschoben, was der Höhe des Textmoduls entspricht.
Bildlaufeffekte 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
- Startoffset: 1 (bei 10%)
- Durchschnittlicher Offset: 0 (bei 20%)
- Endversatz: -1 (bei 30%)
Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:
- Ein- und Ausblenden aktivieren: JA
- Anfangsopazität: 0% (bei 10%)
- Durchschnittliche Deckkraft: 100% (bei 20%)
- Endopazität: 0% (bis 30%)
Stellen Sie sicher, dass der Auslöser für den Bewegungseffekt oben im Clip eingestellt ist:
- Bewegungseffekt-Trigger: Element oben
Erstellen Sie das Textmodul für die zweite Nummer
Dupliziere die erste Nummer
Sobald die erste Nummer erstellt wurde, duplizieren Sie sie, um das Textmodul für die zweite Nummer zu erstellen. Aktualisieren Sie dann die Beschriftung in der Ebenenansicht, um eine bessere Referenz zu erhalten.
Nummer / Inhalt aktualisieren
Öffnen Sie die Parameter des zweiten digitalen Textmoduls und aktualisieren Sie den Inhalt mit der Nummer "02".
Position aktualisieren
Aktualisieren Sie dann die Positionsoptionen wie folgt:
- Position: Absolut
- Vertikaler Versatz: 126px
Aktualisieren Sie die Bildlaufeffekte
Aktualisieren Sie dann die Bildlaufeffekte wie folgt:
Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:
- Startoffset: 1 (bei 20%)
- Durchschnittlicher Offset: 0 (bei 30%)
- Endversatz: -1 (bei 40%)
Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:
- Anfangsopazität: 0% (bei 20%)
- Durchschnittliche Deckkraft: 100% (bei 30%)
- Endopazität: 0% (bis 40%)
Erstellen Sie ein Textmodul für die dritte Ausgabe
Dupliziere die zweite Nummer
Um das Textmodul für die dritte Nummer zu erstellen, duplizieren Sie das Textmodul für die zweite Nummer.
Nummer / Inhalt aktualisieren
Aktualisieren Sie den Inhalt mit der Nummer "03".
Aktualisieren Sie die Bildlaufeffekte
Aktualisieren Sie dann die Bildlaufeffekte:
Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:
- Startoffset: 1 (bei 30%)
- Durchschnittlicher Offset: 0 (bei 40%)
- Endversatz: -1 (bei 50%)
Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:
- Anfangsopazität: 0% (bei 30%)
- Durchschnittliche Deckkraft: 100% (bei 40%)
- Endopazität: 0% (bis 50%)
Erstellen Sie ein Textmodul für die vierte Ausgabe
Dritte doppelte Ausgabe
Um die vierte Nummer für den Bildlaufzähler zu erstellen, duplizieren Sie das Textmodul für die dritte Nummer.
Nummer / Inhalt aktualisieren
Aktualisieren Sie den Inhalt mit der Nummer "04".
Aktualisieren Sie die Bildlaufeffekte
Aktualisieren Sie dann die Bildlaufeffekte:
Aktualisieren Sie auf der Registerkarte Vertikale Bewegung Folgendes:
- Startoffset: 1 (bei 40%)
- Durchschnittlicher Offset: 0 (bei 50%)
- Endversatz: 0 (bei 60%)
Aktualisieren Sie auf der Registerkarte Einblenden und Ausblenden Folgendes:
- Anfangsopazität: 0% (bei 40%)
- Durchschnittliche Deckkraft: 100% (bei 50%)
- Endopazität: 100% (bis 60%)
Fügen Sie ein unteres Trennzeichen hinzu
Fügen Sie unter dem letzten Textmodul ein neues Trennmodul hinzu. Dies wird verwendet, um den unteren Überlauf des angezeigten Bildlauftextes auszublenden.
Wählen Sie dann NEIN, um das Trennzeichen anzuzeigen.
Stil- und Positionseinstellungen
Aktualisieren Sie das Separator-Design wie folgt:
- Hintergrundfarbe: #ffffff
- Breite: 100%
- Höhe: 100px
- Breite des oberen Randes: 5px
Aktualisieren Sie auf der Registerkarte Erweitert Folgendes:
- Deaktivieren auf: Telefon und Tablet
- Position: Absolut
- Ort: unten links
WICHTIG: Der Platz, den das Trennzeichen einnimmt, wurde zuvor erstellt, indem der Spalte eine untere Auffüllung von 100 Pixel hinzugefügt wurde. Wenn Sie diese Auffüllung nicht hinzufügen, überlappt das Trennzeichen die Ziffern.
Erstellung zusätzlicher Zähler und Spalten
Duplizieren Sie Spalte 1 und aktualisieren Sie den Inhalt
Um einen neuen Zähler zu erstellen, duplizieren Sie Spalte 1. Dadurch wird automatisch eine zweite Spalte mit allen Elementen erstellt.
Dann müssen Sie nur noch den Inhalt aller Textmodule mit neuen Texten und Zahlen aktualisieren.
Duplizieren Sie Spalte 2 und aktualisieren Sie den Inhalt
Sobald der Inhalt aller Textmodule 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 jedes Textmoduls nach Bedarf.
Endergebnis
Hier ist das Endergebnis.
Andere Ressourcen
- Verwendung des Nummernzählermoduls bei Divi
- Verwendung des kreisförmigen Zählermoduls bei Divi
- Wie man kreisförmige Zähler erstellt, die auf Divi lebendig werden
Abschließende Gedanken
Dieses einfache Layout mit scrollenden animierten Zahlenzählern sollte für die Anzeige nützlich sein Daten digital auf eine neue und einzigartige Weise. Fühlen Sie sich frei, das Datumskonzept aufzugeben und die Zähler für alles zu verwenden, was Sie sich vorstellen können!
