Springe zum Hauptinhalt

So fügen Sie dem Scrollen auf Divi einen animierten Zähler hinzu

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]

Animierte Nummernzähler sind im Internet beliebt, um numerische Daten anzuzeigen und den Wert von Diensten, Fallstudien usw. hervorzuheben. Divi verfügt über ein spezielles Nummernzählermodul, mit dem auf einfache Weise animierte Nummernzähler generiert werden können.

In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie digitale Zähler erstellen, die beim Scrollen mit Divi animiert werden. Mit den Positionsoptionen und Bildlaufeffekten von Divi entwerfen wir ein einfaches Layout, um ein Datum mit Bildlaufnummern 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.

Registrieren Sie ein Divi-Section-Modul

Fügen Sie dann der Zeile ein neues Textmodul hinzu.

Aktualisieren Sie den Inhalt des Textmoduls wie folgt:

Merken Sie den Termin vor
Speichern Sie das Datum 1

Aktualisieren Sie dann den Header-Textstil wie folgt:

  • Überschrift 2 Schriftart: Prata
  • Punkt 2 Textgröße: 130px (Desktop), 70px (Tablet), 40px (Telefon)
Änderung des Divi-Titels

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
Divi Border Konfiguration

Spaltenparameter

Öffnen Sie dann die Spalteneinstellungen und aktualisieren Sie die Füllung wie folgt:

  • Polsterung (Schreibtisch): 100px niedrig
  • Polsterung (Tablet und Telefon): 0px niedrig
Konfiguration des Divi-Spaltenabstands

Fügen Sie ein Textmodul hinzu

Fügen Sie dann der Spalte ein Textmodul hinzu.

Fügen Sie ein Divi-Textmodul hinzu

Inhalt / Label

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

Geben Sie die Monatsdivi an

Einstellungen für das Textdesign

Aktualisieren Sie nach dem Hinzufügen von Inhalten 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:

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]

  • Position: Relativ
  • Z-Index 1
Prata WordPress-Modul

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.

Fügen Sie ein Storyteller-Textmodul 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“.

Divi-Nummernmodul hinzufügen

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
Divi Farbkonfiguration

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
Konfiguration des Divi-Textes des Animationsmoduls

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.

Duplizieren Sie das Divi 1-Textmodul

Nummer / Inhalt aktualisieren

Öffnen Sie die Parameter des zweiten digitalen Textmoduls und aktualisieren Sie den Inhalt mit der Nummer "02".

Speichern Sie Nummer 2 Divi

Position aktualisieren

Aktualisieren Sie dann die Positionsoptionen wie folgt:

  • Position: Absolut
  • Vertikaler Versatz: 126px
Position des Divi-Textmoduls ändern

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%)
Animation Scroll Effekt Divi

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.

Duplizieren Sie das Textmodul Nummer 3

Nummer / Inhalt aktualisieren

Aktualisieren Sie den Inhalt mit der Nummer "03".

Ändern Sie das Divi-Textmodul

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%)
Bearbeiten Sie die Animation des Textmoduls

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.

Doppelte Textmodul-Divi Nummer 4

Nummer / Inhalt aktualisieren

Aktualisieren Sie den Inhalt mit der Nummer "04".

Konfigurieren Sie den Wert des Divi-Textmoduls

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%)
Animationskonfigurationsmodul 4 divi

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.

Divi Separator Modul hinzufügen

Wählen Sie dann NEIN, um das Trennzeichen anzuzeigen.

Zeigen Sie das Divi-Trennzeichen nicht an

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.

Doppelte ganze Spaltenteilung

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

Abschließende Gedanken

Dieses einfache Layout mit animierten Bildlaufzählern sollte nützlich sein, um digitale Daten auf eine neue und einzigartige Weise anzuzeigen. Zögern Sie nicht, das Konzept des Datums aufzugeben und die Zähler für alles zu verwenden, wovon Sie träumen können!

Dieser Artikel enthält Kommentare 0

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
0 Aktien
Aktie
tweet
Registrieren