Der kreisförmige Zähler ermöglicht es Ihnen, eine einzelne Statistik auf ästhetisch ansprechende Weise anzuzeigen. Wenn Sie nach unten scrollen, zählt die Zahl herunter und das Tortendiagramm füllt sich allmählich, um dem Prozentwert zu entsprechen. Versuchen Sie, mehrere Kreiszählermodule auf einer Seite zu kombinieren, um Ihren Besucher eine unterhaltsame Art, mehr über Ihr Unternehmen oder Ihre persönlichen Fähigkeiten zu erfahren.

circulerire counter Beispiel divi.png

So fügen Sie Ihrer Seite ein Rundmessermodul hinzu

Bevor Sie Ihrer Seite ein Kreiszählermodul hinzufügen können, müssen Sie zuerst auf Divi Builder zugreifen. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher.

Durch Klicken auf diese Schaltfläche können Sie Divi Builder aktivieren, wodurch Sie auf alle Divi Builder-Module zugreifen können. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten.

Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder wenn Sie Ihre Website durchsuchen, wenn Sie in Ihrem WordPress-Dashboard angemeldet sind.

Verwenden Sie Divi Builder

Nach der Eingabe in Visual Builder können Sie auf die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Gegenkreis divi.png

Suchen Sie das Kreiszählermodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar. Sie können also auch das Wort "Kreiszähler" eingeben und dann auf die Eingabetaste klicken, um das Kreiszählermodul automatisch zu suchen und hinzuzufügen!

Sobald das Modul hinzugefügt wurde, werden Sie mit der Liste der Moduloptionen begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Anwendungsfall, um Projektziele in einer Fallstudie anzuzeigen

Eine der besten Möglichkeiten, das Kreiszählermodul zu verwenden, ist die Veranschaulichung Statistik für Fallstudien oder Portfolio-Items.

Identifizieren Sie einfach jeden Zähler mit einer bestimmten Projektfunktion oder einem bestimmten Projektziel, damit der Benutzer weiß, welche Dienste im Projekt enthalten sind. In diesem Beispiel verwende ich das Modul „Kreiszähler“, um drei Projektziele anzuzeigen.

Wie Sie in der Abbildung unten sehen können, enthält der obere Rand der Seite die drei Ziele des Projekts mithilfe des Balkenzählermoduls und der untere Teil der Seite die Ergebnisse der Fallstudie mit dem Zählernummernmodul .

Beispielmodul circle divi animation.gif

Lassen Sie uns beginnen.

Verwenden Sie den Visual Builder, um einen Standardabschnitt mit einem Layout voller Breite (1 Spalte) hinzuzufügen. Fügen Sie dann der Zeile ein Kreiszählermodul hinzu.

Zählerkreiskonfiguration divi.png

Aktualisieren Sie die Kreiszählereinstellungen wie folgt:

Inhaltsoptionen

Titel: Animation
Nummer: 80
% Zeichen: Ja
Balkenhintergrundfarbe: #e07a5e

Design-Optionen

Farbe des Kreises: #e07a5e
Farbe des Textes: Dunkel
Titelschrift: Standard
Titel Schriftgröße: 26px
Titel Textfarbe: #405c60
Schriftnummer: Standard
Größe Schriftgröße: 46px
Zahlentextfarbe: #405c60

animation divi kreierung eines kreises mit einer grafik divi.png

Einstellungen speichern

Duplizieren Sie jetzt das Modul für den Kreiszähler zweimal und ziehen Sie jede Kopie in die zweite und dritte Spalte Ihrer Zeile.

Kopieren Sie ein kreisförmiges Metermodul divi.png

Da Ihre Gestaltungselemente in doppelte Module übertragen wurden, müssen Sie nur den Titel und die Nummer des Zirkularzählers aktualisieren.

Das ist es!

Besuchen Sie die Seite.

Design Zähler divi builder.png

Circular Counter Inhalt Optionen

Auf der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer in dieser Registerkarte.

Kreismodul Inhalt section.png

Titel

Geben Sie einen Titel für den Kreiszähler ein. Dies ist normalerweise ein Wort, das die angezeigte Statistik darstellt. Es wird unter der Nummer im Kreisdiagramm angezeigt.

Name

Stellen Sie eine Zahl für den kreisförmigen Zähler ein. Wenn Sie eine Zahl unter 100 auswählen, wird das Kreisdiagramm zu einem Prozentsatz gefüllt, der der von Ihnen eingegebenen Zahl entspricht. Wenn Sie beispielsweise die Zahl 20 eingeben, wird der Kreis zu 20% mit Ihrer Akzentfarbe gefüllt.

Prozentzeichen

Hier können Sie wählen, ob das Prozentzeichen nach der oben definierten Zahl eingefügt werden soll.

Balkenhintergrundfarbe

Dadurch wird die Füllfarbe des Balkens geändert. Die Menge der Füllfarbe wird durch die oben ausgewählte "Nummer" gesteuert. Wenn Sie die Zahl 50 und eine blaue Farbe auswählen, füllt Ihr Kreis 50% mit einer blauen Farbe.

Administrationsetikett

Dadurch wird die Modulbezeichnung im Generator zur einfachen Identifizierung geändert. Bei Verwendung der WireFrame-Ansicht in Visual Builder werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Optionen für den runden Zähler

Auf der Registerkarte Design finden Sie alle Optionen für den Modulstil, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie nahezu alles optimieren können.

Umlaufzähleroption divi.png

Farbe des Kreises

Dies ist die Farbe, die für den nicht ausgefüllten Teil des Kreises verwendet wird (der negative Bereich, der nicht von der Hintergrundfarbe des auf der Registerkarte Inhalt definierten Balkens ausgefüllt wird).

Deckkraft der Farbe des Kreises

Mit dieser Einstellung können Sie die Deckkraft des gefüllten Teils des Kreises verringern.

Textfarbe

Hier können Sie wählen, ob Ihr Text hell oder dunkel sein soll. Wenn Sie mit einem dunklen Hintergrund arbeiten, sollte Ihr Text hell sein. Wenn Ihr Hintergrund hell ist, sollte Ihr Text schwarz sein.

Titel Schriftart

Sie können die Schriftart Ihres Textes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden fantastischer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit den Optionen Fett, Kursiv, Groß- und Kleinschreibung und Unterstreichung anpassen.

Titel Schriftgröße

Hier können Sie die Größe Ihres Titeltextes anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Titel Textfarbe

Standardmäßig werden alle Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Textfarbe Ihres Titels ändern möchten, wählen Sie mit dieser Option Ihre bevorzugte Farbe aus der Farbauswahl.

Abstand der Titelbriefe

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Titeltexts vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Titelzeile

Die Zeilenhöhe beeinflusst den Abstand zwischen den einzelnen Zeilen des Titeltexts. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Polizeinummer

Sie können die Schriftart Ihres Textes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden fantastischer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit den Optionen Fett, Kursiv, Groß- und Kleinschreibung und Unterstreichung anpassen.

Nummer Text divi builder circular counter.png

Anzahl Schriftgröße

Hier können Sie die Größe Ihres nummerierten Textes anpassen. Sie können den Intervall-Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder Sie können den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Farbe des Zifferntextes

Standardmäßig werden alle Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Textes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.

Abstand der nummerierten Buchstaben

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Textes vergrößern möchten, passen Sie den Abstand mit dem Intervall-Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Text Meter Abstand Buchstaben divi.png

Höhe der Zahlenreihe

Die Zeilenhöhe beeinflusst den Abstand zwischen den einzelnen Zeilen Ihres digitalen Textes. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die Größe des gewünschten Bereichs in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Erweiterte Zirkularzähleroptionen

Auf der Registerkarte Erweitert finden Sie Optionen, die erfahrene Webdesigner möglicherweise nützlich finden, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.

advanced counter divi.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann verwendet werden, um ein benutzerdefiniertes CSS-Styling zu erstellen. Sie können mehrere Klassen hinzufügen, getrennt durch ein Leerzeichen. Diese Klassen können in Ihrem verwendet werden Divi-Thema Untergeordnet oder in benutzerdefiniertem CSS, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt CSS hinzufügen können. Die CSS-Einträge in diesen Einstellungen sind bereits mit Stil-Tags eingebettet. Sie müssen also nur CSS-Regeln eingeben, die durch Semikolons getrennt sind.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

Das war's für dieses Tutorial.