Divi Tutorial: Wie man das Nummernzähler Modul benutzt

Das Nummernzählermodul auf der Wordpress-Theme Divi ist eine großartige Möglichkeit, Zahlen auf unterhaltsame und ansprechende Weise anzuzeigen. Dieses Modul wird häufig zur Anzeige verwendet Statistik über Sie oder Ihr Unternehmen. Beispielsweise ist die Anzeige Ihrer Anzahl von Kunden oder Followern auf Facebook eine großartige Möglichkeit, soziale Beweise zu präsentieren.

Wie füge ich das Modul hinzu Gegennummer von Divi

Bevor Sie Ihrer Seite ein Zählermodul hinzufügen können, müssen Sie zuerst in den Divi Builder springen. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. 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 Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Nachdem Sie Visual Builder eingegeben haben, 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, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Suchen Sie das Nummernzä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 "Nummernzähler" eingeben und dann auf "Enter" klicken, um das Nummernzählermodul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Beispiel für einen Anwendungsfall: Verwenden des digitalen Zählermoduls zum Anzeigen der Ergebnisse eines Projekts

Eine großartige Möglichkeit, das Zahlenzählermodul zu verwenden, besteht darin, das zu veranschaulichen Statistik für die Fallstudien. Beschriften Sie einfach jeden Zähler mit einer Nummer, damit der Benutzer den Erfolg des Projekts leicht erkennen kann. In diesem Beispiel verwende ich das digitale Zählermodul, um vier Projektergebnisse anzuzeigen.

Wie Sie sehen können, enthält der obere Rand der Seite die drei Ziele des Projekts, das das Modul " Bartheke Am Ende der Seite finden Sie die Ergebnisse der Fallstudie mit den digitalen Zählermodulen.

Der Abschnitt der Seite, der die Ergebnisse der Fallstudie unter Verwendung der digitalen Module zeigt, erfordert die Verwendung eines speziellen Abschnitts. Fügen Sie mit Visual Builder der Seite einen speziellen Abschnitt hinzu und wählen Sie das folgende Layout aus:

Wählen Sie ein 1-Spalten-Layout für die rechte Seite des Abschnitts und geben Sie den Titel und den Text ein, die für die Ergebnisse der Fallstudie erforderlich sind.

Fügen Sie ein Layout von 2-Spalten direkt unter dem 1-Spaltenlayout auf der rechten Seite des Abschnitts ein.

Fügen Sie nun Ihr erstes Nummernzählermodul in die linke Spalte ein.

füge eine Abschnittsnummer divi.png hinzu

Aktualisieren Sie die Parameter der Nummernzähler wie folgt:

Inhaltsoptionen

Titel: Neue Besucher
Nummer: 54210
Prozentzeichen: AUS

Design-Optionen

Farbe des Textes: Dunkel
Schrift des Titels: Standard
Titel Schriftgröße: 20px
Titel Textfarbe: # 405c60
Höhe der Titelzeile: 1em
Anzahl der Zeichen: Standard, Fett
Anzahl der Zeichen: 60px
Nummer Textfarbe: # e07a5e
Nummer Zeilenhöhe: 72px

Einstellungen speichern

Duplizieren Sie das Modul Zahlenzähler und ziehen Sie es in die angrenzende rechte Spalte. Aktualisieren Sie die Optionen Titel und Zahl.

Duplizieren Sie die Zeile, die die beiden Nummernzählermodule enthält, so dass unten zwei weitere Nummernzähler angezeigt werden.

Aktualisieren Sie dann die Titel- und Nummernoptionen für diese. Jetzt haben Sie alle vier vollständigen Zähler.

Vergessen Sie nicht, das Bild 667 x 320 in der linken Spalte / Seite des Fachbereichs hinzuzufügen.

Es ist vollbracht! Die Kombination von Nummernzählern und Balkenzählern auf dieser Fallstudienseite macht den Inhalt wirklich ansprechend.

Optionen für digitale Zählerinhalte

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

Ausgewählter Bereich Inhalt wordpress divi.png

Titel

Geben Sie einen Titel für den Zähler ein. Dies wird unter der Nummer in kleinerem Text angezeigt.

Name

Dies ist die Zahl, die der Zähler zählt. Wenn Sie die Seite nach unten scrollen und den Zähler erreichen, zählt die Zahl schnell von 0 bis zur hier eingestellten Zahl. Hier können nur numerische Werte platziert werden.

Prozentzeichen

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

Hintergrundfarbe

Definieren Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul oder lassen Sie das Feld leer, um die Standardfarbe zu verwenden.

Hintergrundbild

Wenn festgelegt, wird dieses Bild als Hintergrund für dieses Modul verwendet. Um ein Hintergrundbild zu entfernen, entfernen Sie einfach die URL aus dem Einstellungsfeld. Hintergrundbilder werden über den Hintergrundfarben angezeigt. Dies bedeutet, dass die Hintergrundfarbe beim Anwenden eines Hintergrundbilds nicht sichtbar ist.

Administratorkennzeichnung

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

Gestaltungsmöglichkeiten (Style) des Digitalzählers

Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, 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 Änderungen vornehmen können.

Textfarbe

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

Titel Schriftart

Sie können die Schriftart Ihres Titeltextes ä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 Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit Fett, Kursiv, Großbuchstaben und Unterstreichungsoptionen anpassen.

Titel Schriftgröße

Hier können Sie die Größe Ihres Titeltextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, 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 die gewünschte Farbe aus der Farbauswahl.

Abstand der Titelbriefe

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Titeltext vergrößern möchten, passen Sie den Abstand mit dem Bereichsschieberegler 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ößenwert "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 Ihres Titeltextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Schriften der Nummer

Sie können die Schriftart Ihres Textes ä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 Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit Fett, Kursiv, Großbuchstaben und Unterstreichungsoptionen anpassen.

Schriftgröße der Nummer

Hier können Sie die Größe Ihres digitalen Textes anpassen. Sie können den Bereichsregler ziehen, um den Text zu vergrößern oder zu verkleinern, oder 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ößenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Farbe des digitalen Texts

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

Abstand der digitalen Briefe

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem numerischen Text vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, 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ößenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Zeilenhöhe der Nummer

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres numerischen Textes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, können Sie den Abstand mit dem Bereichsregler anpassen oder die gewünschte Abstandsgröße in das Eingabefeld eingeben befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

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. Benutzerdefinierte Maßeinheiten werden unterstützt. Dies bedeutet, dass Sie die Standardeinheit von "px" in etwas anderes wie em, vh, vw usw. ändern können.

Grenzstil

Rahmen unterstützen acht verschiedene Stile: fest, gepunktet, gepunktet, doppelt, Rille, Grat, Überlagerung und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen anzuwenden.

Benutzerdefinierte Polsterung

Füllung ist der Raum, der innerhalb Ihres Moduls zwischen der Kante des Moduls und seinen internen Elementen hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Entfernen Sie den Mehrwert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Erweiterte Optionen für den Nummernzähler

Auf der Registerkarte "Erweitert" finden Sie Optionen, die erfahrene Webdesigner möglicherweise als nützlich erachten, 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 im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der Einstellungen auf der Divi Builder-Seite hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.

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.

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "erweitert" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI-THEMA HERUNTERLADEN [/ vcex_button] [/ width_column] [»vc_col] vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700 "style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]