Springe zum Hauptinhalt

Wie benutze ich das animierte Balkenmodul bei Divi?

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.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 Zähler sind eine unterhaltsame und effektive Möglichkeit, Ihren Besuchern Statistiken anzuzeigen. Die Animation wird durch das verzögerte Laden ausgelöst, um die Navigation auf der Seite wirklich interessant zu machen. Innerhalb dieses Moduls können Sie beliebig viele Zähler platzieren.

Zählermodul divi.png

So fügen Sie Ihrer Seite ein Balkenzählermodul hinzu

Bevor Sie Ihrer Seite ein Balkenzählermodul hinzufügen können, müssen Sie zunächst auf Divi Builder zugreifen. Sobald das Divi-Design 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.

Wenn Sie auf diese Schaltfläche klicken, können Sie Divi Builder aktivieren, mit dem Sie auf alle Module von Divi Builder 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.

Verwenden Sie Divi Builder

Sobald Sie in Visual Builder eingegeben haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen. .

Bartheke divi.png

Suchen Sie das Thekenmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Bartheke" eingeben und dann die Eingabetaste drücken, um das Barthekenmodul zu suchen und automatisch hinzuzufügen!

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

Use Cases, um die Ziele eines Projekts in einer Fallstudie anzuzeigen

Eine der besten Möglichkeiten, das Modul "Balkenzähler" zu verwenden, besteht darin, die Statistiken für die Fallstudien zu veranschaulichen. Identifizieren Sie einfach jeden Balken mit einer bestimmten Projektfunktion oder einem bestimmten Projektzweck, damit der Benutzer weiß, welche Dienste im Projekt enthalten sind. In diesem Beispiel verwende ich das Leistenmodul, um drei Projektziele anzuzeigen.

zeige 3-Projekt goals.jpg

Wie Sie sehen, werden oben auf der Seite die drei Ziele des Projekts mit dem Modul "Thekenzähler" und unten auf der Seite die Ergebnisse der Fallstudie mit dem Modul "Thekenzähler" angezeigt. Nummer ».

Lassen Sie uns beginnen.

Verwenden Sie den Visual Builder, um einen Standardabschnitt mit einem Layout in voller Breite (1-Spalte) hinzuzufügen. Fügen Sie dann der Linie ein Barthekenmodul hinzu.

Aktualisieren Sie die Parameter der Balkenzähler wie folgt:

Inhaltsoptionen

Nutzungsgrade: ON
Hintergrundfarbe: #dddddd
Hintergrundfarbe der Leiste: # 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

füge einen Zähler divi.png hinzu

Kehren Sie jetzt zur Registerkarte Inhalt zurück und wählen Sie + Fügen Sie einen neuen Artikel hinzu um den ersten Barzähler zum Modul hinzuzufügen.

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]

Aktualisieren Sie die einzelnen Moduleinstellungen wie folgt:

Registerkarte "Inhalt"

Titel: Mein Titel
Prozent: 80

Einstellungen speichern

Anpassungsbarnummer divi.png

Fügen Sie dem Modul zwei zusätzliche Balkenzähler hinzu, und geben Sie jeweils einen Titel und einen Prozentsatz an.

bar counter Divi Liste der Bars.png

Das ist alles!

Endergebnis Divi Modul barre.png

Optionen für den Inhalt von Theken

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

Optionsinhalt Modulleiste divi.png

Prozentsätze der Nutzung

Standardmäßig werden die Prozentsätze im Farbbalkenzähler angezeigt. Dieser Text kann mit dieser Einstellung deaktiviert werden, sodass das visuelle Balkendiagramm für sich selbst spricht.

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.

Hintergrundfarbe der Leiste

Mit dieser Option können Sie die Hintergrundfarbe der gefüllten Leiste anpassen. Diese Hintergrundfarbe deckt die vorherige Hintergrundfarbeneinstellung ab.

Administrationsetikett

Dadurch wird die Modulbezeichnung im Generator zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

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]

Bar Counter Design Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, 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 Konstruktionsparametern, mit denen Sie so gut wie alles bearbeiten können.

Option Design Modul Zähler barre.png

Textfarbe

Sie können hier auswählen, ob Ihr Text hell oder dunkel sein soll. Wenn Sie mit einem dunklen Hintergrund arbeiten, sollte Ihr Text klar sein. Wenn Ihr Hintergrund klar ist, sollte Ihr Text schwarz sein. Sie können Ihre Textfarbe weiter anpassen, indem Sie die folgenden zusätzlichen Textfarboptionen verwenden.

Titel Schriftart

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

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 Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene 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 Farbe Ihres Titeltexts ändern möchten, wählen Sie mit dieser Option die Farbe Ihrer Wahl aus der Farbauswahl.

Abstand der Titelbriefe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben Ihres Titeltexts vergrößern möchten, verwenden Sie den Intervall-Schieberegler, um den Abstand anzupassen, oder geben Sie die Größe des gewünschten Abstands in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene 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 wirkt sich auf den Abstand zwischen den einzelnen Zeilen des Titeltexts aus. 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 verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Prozentsatz des Textdivi-Moduls barre.png

Prozentsatz des Textes

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

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 Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, 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 Farbe Ihrer Wahl in der Farbauswahl.

Prozentualer Buchstabenabstand

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. 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 Größe des gewünschten Abstands in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Prozentlinie

Die Zeilenhöhe wirkt sich in Prozent auf den Abstand zwischen den einzelnen Textzeilen aus. 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 verschiedene Maßeinheiten, dh Sie können je nach Größe "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Rahmenradius

Durch Anwenden eines Rahmenradius werden die Ecken des Balkens in der Balkenzähler abgerundet. Je größer der Radius des Randes ist, desto gerundeter sind die Ecken.

Rahmenoption divi builder.png

Benutze den Rand

Wenn Sie diese Option aktivieren, wird Ihr Modul mit einem Rahmen versehen. Dieser Rahmen kann mit den folgenden bedingten Parametern 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 haben die Ränder eine Breite von 1-Pixeln. Sie können diesen Wert erhöhen, indem Sie den Schieberegler in den Bereich 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 eine andere Einheit ändern, z. B. em, vh, vw usw.

Grenzstil

Die Ränder unterstützen acht verschiedene Stile, darunter: Solide, Gepunktete, Gepunktete, Doppelte, Groove, Crest, Inset und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen anzuwenden.

Polsterung der Bar

Das Auffüllen ist der Raum, der in Ihrem Modul zwischen der Kante des Moduls und seinen internen Elementen hinzugefügt wird. Hier können Sie dem Stangenmodul benutzerdefinierte Polsterungen oben und unten hinzufügen.

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]

Erweiterte Barzähleroptionen

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

Optionen für die Zählerleiste advanced.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Ein Bezeichner kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt 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 Website hinzufügen, indem Sie die Divi-Designoptionen oder die Divi Builder-Seiteneinstellungen verwenden.

Benutzerdefiniertes CSS

Ein benutzerdefiniertes CSS kann auch auf das Modul und eines der 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 in Style-Tags eingebettet. Sie müssen 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Das war es für dieses Tutorial.

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
11 Aktien
Aktie6
tweet
Registrieren5