Animierte Zähler sind eine unterhaltsame und effektive Art der Präsentation Statistik Schliff Besucher. Die Animation wird durch Lazy Loading ausgelöst, um die Seitennavigation wirklich interessant zu machen. Sie können in diesem Modul so viele Zähler platzieren, wie Sie möchten.
So fügen Sie Ihrer Seite ein Balkenzählermodul hinzu
Bevor Sie Ihrer Seite ein Barthekenmodul hinzufügen können, müssen Sie zunächst 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 im Frontend durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.
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. .
Suchen Sie das Balkenzä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 "Balkenzähler" eingeben und dann auf die Eingabetaste klicken, um das Balkenzä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 Barthekenmodul zu verwenden, ist die Veranschaulichung der Statistik für die Fallstudien. Markieren Sie einfach jede Bar mit einer bestimmten Projektfunktion oder einem bestimmten Zweck, damit der Benutzer weiß, welche Dienstleistungen im Projekt enthalten sind. In diesem Beispiel verwende ich das Balkenmodul, um drei Projektziele anzuzeigen.
Wie Sie sehen können, enthält der obere Rand der Seite die drei Ziele des Projekts mithilfe des Moduls „Bar Counter“ und der untere Teil der Seite die Ergebnisse der Fallstudie mit dem Modul „Counter“ Nummer ".
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 Balkenzählermodul hinzu.
Aktualisieren Sie die Parameter der Balkenzähler wie folgt:
Inhaltsoptionen
Nutzungsprozentsätze: EIN
Hintergrundfarbe: #dddddd
Balkenhintergrundfarbe: # e07a5e
Design-Optionen
Textfarbe: Dunkel
Titelschrift: Standard
Titel Schriftgröße: 20px
Titel Textfarbe: # 405c60
Titellinie Höhe: 2em
Prozentschrift: Standard
Prozent Schriftgröße: 16px
Prozent Textfarbe: #ffffff
Prozentuale Linienhöhe: 2.5em
Gehen Sie nun zurück zur Registerkarte Inhalt und wählen Sie + Fügen Sie einen neuen Artikel hinzu um den ersten Barzähler zum Modul hinzuzufügen.
Aktualisieren Sie die einzelnen Moduleinstellungen wie folgt:
Registerkarte "Inhalt"
Titel: Mein Titel
Prozent: 80
Einstellungen speichern
Fügen Sie dem Modul zwei zusätzliche Balkenzähler hinzu, und geben Sie jeweils einen Titel und einen Prozentsatz an.
Das ist es!
Optionen für den Inhalt von Theken
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.
Nutzungsprozentsätze
Standardmäßig werden Prozentsätze im Farbbalkenzähler angezeigt. Dieser Text kann mit dieser Einstellung deaktiviert werden, sodass das visuelle Balkendiagramm für sich selbst sprechen kann.
Hintergrundfarbe
Mit dieser Option können Sie die Hintergrundfarbe jedes Balkenzählers anpassen. Diese Einstellung gilt für den negativen Bereich hinter der Farbe des gefüllten Balkens.
Balkenhintergrundfarbe
Mit dieser Option können Sie die Hintergrundfarbe des gefüllten Balkens anpassen. Diese Hintergrundfarbe überschneidet sich mit der vorherigen Hintergrundfarbeneinstellung.
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.
Bar Counter Design Optionen
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.
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. Sie können Ihre Textfarbe mithilfe der folgenden zusätzlichen Textfarboptionen weiter anpassen.
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.
Prozentsatz des Textes
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.
Prozentuale Schriftgröße
Hier können Sie die Größe Ihres Textes in Prozent 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.
Prozent Textfarbe
Standardmäßig werden alle Textfarben in Divi in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Textes in Prozent ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl aus.
Prozentualer Buchstabenabstand
Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Textes in Prozent vergrößern möchten, verwenden Sie den Intervall-Schieberegler, um den Abstand anzupassen, 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.
Höhe der Prozentlinie
Die Zeilenhöhe wirkt sich prozentual auf den Abstand zwischen den einzelnen Textzeilen aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Intervall-Schieberegler, um den Abstand anzupassen, oder geben Sie die gewünschte Leerzeichengröß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.
Rahmenradius
Durch Anwenden eines Randradius werden die Ecken des Balkens im Balkenzähler abgerundet. Je größer der Randradius ist, desto abgerundeter sind die Ecken.
Benutze den Rand
Wenn Sie diese Option aktivieren, wird ein Rand um Ihr Modul gelegt. Dieser Rahmen kann mithilfe der folgenden bedingten Parameter angepasst werden.
Farbe der Grenze
Diese Option wirkt sich auf die Farbe Ihres Rahmens aus. Wählen Sie im Farbwähler eine benutzerdefinierte Farbe aus, um sie auf Ihren Rand anzuwenden.
Breite der Grenze
Standardmäßig sind die Ränder 1 Pixel breit. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Schieberegler eingeben. Unterstützte benutzerdefinierte Maßeinheiten, dh Sie können die Standardeinheit von "px" in etwas anderes ändern, z. B. em, vh, vw usw.
Grenzstil
Rahmen unterstützen acht verschiedene Stile, darunter: fest, gepunktet, gepunktet, doppelt, Nut, Grat, Einschub und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen anzuwenden.
Polsterung der Bar
Polsterung ist der Raum, der innerhalb Ihres Moduls zwischen der Kante des Moduls und seinen internen Elementen hinzugefügt wird. Hier können Sie dem Stangenmodul eine benutzerdefinierte obere und untere Polsterung hinzufügen.
Erweiterte Barzä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.
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 zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der 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. 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.
