Springe zum Hauptinhalt

So erstellen Sie Kreiszähler, die beim Scrollen mit Divi zum Leben erweckt werden

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 Kreiszähler sind eine beliebte Methode, um Informationen (wie Statistiken oder Metriken) auf einer Webseite mit unterhaltsamer Interaktion darzustellen. Möglicherweise sind Sie bereits mit dem Kreiszählermodul von Divi vertraut, mit dem Sie schnell und einfach Kreiszähler zu Ihrer Divi-Site hinzufügen können. 

In diesem Tutorial zeigen wir Ihnen jedoch, wie Sie vollständig benutzerdefinierte Kreiszähler erstellen, die beim Scrollen animiert werden! Wir benötigen kein externes benutzerdefiniertes CSS, um sie zu erstellen. Der Trick besteht darin, die Ebenenfunktion von Divi zu nutzen, um mehrere überlagerte und animierte Module präzise zu verwalten.

Mögliches Ergebnis

Hier ist eine kurze Übersicht über die animierten Kreisteiler, die wir in diesem Tutorial erstellen werden.

animierte Kreiszähler auf der Schriftrolle

Erstellung der vier Kreiszähler, die beim Scrollen mit Divi lebendig werden

Schnitt- und Linienkonfiguration

Fügen Sie dem Standardabschnitt zunächst eine vierspaltige Zeile hinzu.

animierte Kreiszähler auf der Schriftrolle

Öffnen Sie als Nächstes die Abschnittseinstellungen und fügen Sie einen oberen und einen unteren Rand hinzu, damit genügend Platz vorhanden ist, um die Bildlaufeffekte der zu erstellenden Kreiszähler zu testen.

  • Marge: 85vh hoch, 85vh niedrig
animierte Kreiszähler auf der Schriftrolle

Öffnen Sie dann die Leitungseinstellungen und aktualisieren Sie Folgendes:

  • Dachrinnenbreite: 1
  • Breite: 100%
  • Maximale Breite: 1200px
animierte Kreiszähler auf der Schriftrolle

Verwenden der Ebenenansicht

Stellen Sie vor dem Erstellen der animierten Kreiszähler sicher, dass Sie die Funktion "Divi-Ebenen" bereitstellen. Klicken Sie dazu im unteren Einstellungsmenü auf das graue Ebenensymbol.

animierte Kreiszähler auf der Schriftrolle

Da wir viele überlappende Elemente (oder Ebenen) erstellen werden, wird das Ebenenfeld in Zukunft definitiv nützlich sein, um unsere Ebenen zu verwalten.

Erstellung des animierten Kreiszählers Nr. 1 (25%)

Dieser erste animierte Kreiszähler animiert bis zu 25% des Kreises auf der Schriftrolle und enthält den prozentualen Text, der der Mitte entspricht, die in die Schriftrolle eingefügt wird. Um das komplette Kreiszählerdesign zu erstellen, werden wir mehrere überlappende Textteiler und Module verwenden. Hier erfahren Sie, wie es geht.

Der hintere Kreis

Um den hinteren Kreis zu erstellen, verwenden wir ein Trennmodul, das wir als Kreis formen und ihm eine Hintergrundfarbe geben.

Fügen Sie ein Trennmodul hinzu
animierte Kreiszähler auf der Schriftrolle

Ziehen Sie den Teiler in der Ebenenansicht nach oben und ändern Sie die Beschriftung in "Rückkreis". Öffnen Sie dann die Einstellungen des Trennmoduls und aktualisieren Sie Folgendes:

  • Teiler anzeigen: NEIN
  • Hintergrundfarbe: # c3e0e5
animierte Kreiszähler auf der Schriftrolle

Aktualisieren Sie die Entwurfsparameter 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]

  • Breite: 250px
  • Höhe: 250px
  • Rand: 25 Pixel oben, 25 Pixel unten, 25 Pixel links
  • Abgerundete Ecken: 50%
animierte Kreiszähler auf der Schriftrolle

Der rotierende Farbbalken

Der nächste Teil des Kreiszählers ist der rotierende Farbbalken. Duplizieren Sie den vorherigen Teiler (hinterer Kreis), um das Design neu zu starten. Aktualisieren Sie dann das neue Trennzeichen mit der Bezeichnung "Farbleiste".

animierte Kreiszähler auf der Schriftrolle

Um den rotierenden Farbbalkeneffekt zu erzeugen, müssen wir diesen Teiler in einen Halbkreis mit der Farbe verwandeln, die wir für den Balken verwenden möchten.

Öffnen Sie die Einstellungen für das Farbbalken-Trennzeichen und aktualisieren Sie Folgendes:

  • Hintergrundfarbe: keine
  • Linker Farbverlaufshintergrund: # 121b55
  • Hintergrundfarbe mit Farbverlauf rechts: rgba (255,255,255,0)
  • Steigungsrichtung: 90deg
  • Ausgangsposition: 50%
  • Endgültige Position: 0%
animierte Kreiszähler auf der Schriftrolle

Bei einigen Browsern gibt es ein kleines überlappendes Problem, bei dem unerwünschte Farben durch die Ebenen angezeigt werden. Um dies zu vermeiden, werden wir diesen Halbkreis etwas kleiner machen und den Versatz entsprechend anpassen.

  • Breite: 248px
  • Höhe: 248px
animierte Kreiszähler auf der Schriftrolle

Geben Sie dem Teiler eine absolute Position wie folgt, damit der Kreis des Farbbalkens den hinteren Kreis überlappt:

  • Position: absolut
  • Vertikaler Versatz: 26 Pixel
  • Horizontaler Versatz: 26 Pixel
animierte Kreiszähler auf der Schriftrolle

Fügen Sie dann den folgenden Bildlaufeffekt hinzu, um den kreisförmigen Balken um 90 Grad (oder 25% des Kreises) zu drehen.

Unter der Registerkarte Rotationseffekte ...

  • Startrotation: 0 Grad (bei 15% des Fensters)
  • Durchschnittliche Drehung: 90 Grad (bei 20% -25% des Ansichtsfensters)
  • Ende der Drehung: 90 Grad (bei 30% des Ansichtsfensters)
animierte Kreiszähler auf der Schriftrolle

Die Prozentsätze und Rotationswerte hier scheinen an dieser Stelle möglicherweise nicht vollständig sinnvoll zu sein. Wir machen es einfacher, die Drehung später zu aktualisieren, wenn wir den nächsten Kreiszähler erstellen, der bei 180 Grad (50% des Kreises) endet. Das Wichtigste an diesem Punkt ist, dass die Drehung bei 90 Grad (oder 25%) endet.

Der Schild

Das nächste Element unseres Kreiszählers ist das, was ich Schild nenne. Dies ist ein weiterer Halbkreis, der die linke Seite des Farbbalkenkreises beim Drehen verbirgt.

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]

 Um das Schild zu erstellen, duplizieren Sie das erste zuvor erstellte Back Circle-Teilermodul. Ziehen Sie es dann unter das Trennmodul "Farbleiste" und aktualisieren Sie das Etikett zum einfachen Nachschlagen auf "Abschirmung".

animierte Kreiszähler auf der Schriftrolle

Öffnen Sie die Einstellungen des Schildteilers und aktualisieren Sie Folgendes:

  • Hintergrundfarbe: keine
  • Hintergrundfarbe des linken Verlaufs: # c3e0e5 (wie der hintere Kreis)
  • Hintergrundfarbe mit Farbverlauf rechts: rgba (255,255,255,0)
  • Steigungsrichtung: 90deg
  • Ausgangsposition: 50%
  • Endgültige Position: 0%
animierte Kreiszähler auf der Schriftrolle

Geben Sie dem Modul nun eine absolute Position wie folgt:

  • Position: absolut
  • Vertikaler Versatz: 25px
  • Horizontaler Versatz: 25 Pixel
animierte Kreiszähler auf der Schriftrolle

Der vordere Kreis

Der nächste Teil des Kreiszählers ist der vordere Kreis, der den mittleren Teil der vorherigen Ebenen verbirgt und die Außenkante freilegt.

Um es zu erstellen, duplizieren Sie den hinteren Kreisteiler, legen Sie ihn unter das Schildteilermodul und aktualisieren Sie die Beschriftung auf "vorderer Kreis".

animierte Kreiszähler auf der Schriftrolle

Öffnen Sie die Einstellungen des Frontkreis-Trennmoduls und aktualisieren Sie Folgendes:

  • Hintergrundfarbe: #ffffff
  • Breite: 200px
  • Höhe: 200px
animierte Kreiszähler auf der Schriftrolle

Fügen Sie dann die absolute Position wie folgt hinzu:

  • Position: absolut
  • Vertikaler Versatz: 50px
  • Horizontaler Versatz: 50px
animierte Kreiszähler auf der Schriftrolle

Die Anzahl der Verfärbungen

Das letzte Stück dieses ersten Kreiszählers ist die Anzahl der Verfärbungen, die dem durch den Drehstab angezeigten Wert entspricht.

Fügen Sie zum Erstellen ein neues Textmodul unter dem Modul zum Trennen des vorderen Kreises hinzu.

animierte Kreiszähler auf der Schriftrolle

Benennen Sie im Feld Ebenen das neue Textmodul "num1". Öffnen Sie dann die Einstellungen und aktualisieren Sie den Körper auf "25%".

animierte Kreiszähler auf der Schriftrolle

Aktualisieren Sie unter den Designeinstellungen Folgendes:

  • Schriftgewicht des Textes: fett
  • Textgröße: 25px
  • Höhe der Textzeile: 2em
  • Textausrichtung: Mitte
animierte Kreiszähler auf der Schriftrolle
  • Breite: 200px
  • Höhe: 200px
  • Abgerundete Ecken: 50%
animierte Kreiszähler auf der Schriftrolle
  • Polsterung: über 75px
  • Position: absolut
  • Vertikaler Versatz: 50px
  • Horizontaler Versatz: 50px
animierte Kreiszähler auf der Schriftrolle

Jetzt sollte der Text perfekt im Kreiszähler zentriert sein.

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]

Aktualisieren Sie die folgenden Bildlaufeffekte, um den Überblendungseffekt hinzuzufügen:

Unter der Registerkarte Einblenden und Ausblenden ...

  • Ein- und Ausblenden aktivieren: JA
  • Anfangsopazität: 0% (bei 10% des Fensters)
  • Durchschnittliche Deckkraft: 100% (bei 20% des Fensters)
  • Endopazität: 100% (bei 100% des Ansichtsfensters)
animierte Kreiszähler auf der Schriftrolle

Das war's für den Rundmeter. Entdecken Sie das Ergebnis.

animierte Kreiszähler auf der Schriftrolle

Jetzt müssen Sie nur noch das duplizieren, was wir bisher in den anderen Spalten getan haben, und die verschiedenen Werte ändern, um den Zähler eindeutig zu machen.

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
1 Aktien
Aktie1
tweet
Registrieren