Springe zum Hauptinhalt

Divi Tutorial: Wie man das Nummernzähler Modul benutzt

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]

Das Number Counter-Modul des WordPress Divi-Themas ist eine großartige Möglichkeit, die Zahlen auf unterhaltsame und ansprechende Weise anzuzeigen. Dieses Modul wird häufig zum Anzeigen von Statistiken über Sie oder Ihr Unternehmen verwendet. Die Anzeige der Anzahl Ihrer Kunden oder Follower auf Facebook ist beispielsweise eine hervorragende Möglichkeit, soziale Belege zu präsentieren.

Anzeige Nummer divi wordpress.png

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. 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. 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.

Divi Builder

Nachdem Sie Visual Builder aufgerufen 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.

divi.png Zahlenzähler

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, dh Sie können auch das Wort "Nummernzähler" eingeben und dann auf "Enter" klicken, um das Nummernzählermodul automatisch zu suchen und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Verwenden des Digitalzählermoduls zum Anzeigen von Projektergebnissen

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

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

Beispiel compteur.gif

Der Abschnitt der Seite, der die Ergebnisse der Fallstudie mit digitalen Modulen anzeigt, 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:

custom section divi.png

Wählen Sie ein 1-Spaltenlayout 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.

Einführbereich divi.png

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

geteilte divi.png Spalte

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:

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

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

Inhalt Abschnittsnummer divi.png

Einstellungen speichern

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

Zählernummer Beispiel construction.png

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

Digitaler Zähler Duplikation divi.png

Aktualisieren Sie dann die Optionen für Titel und Nummer. Jetzt haben Sie alle vier Vollwahlzähler.

Vergessen Sie nicht, das 667 x 320-Bild in die linke / seitliche Spalte des Fachbereichs einzufügen.

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

Letztes Realisierungsmodul compteur.png

Optionen für digitale Zählerinhalte

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 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 Nummer von 0 aus schnell nach unten, bis sie die hier festgelegte Nummer erreicht. Hier können nur numerische Werte eingegeben werden.

Prozentzeichen

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

Hintergrundfarbe

Legen Sie eine benutzerdefinierte Hintergrundfarbe für Ihr Modul fest 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 löschen, löschen Sie einfach die URL aus dem Einstellungsfeld. Die Hintergrundbilder werden über den Hintergrundfarben angezeigt. Dies bedeutet, dass die Hintergrundfarbe nicht sichtbar ist, wenn ein Hintergrundbild angewendet wird.

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]

Administratorkennzeichnung

Dadurch wird die Modulbezeichnung im Konstruktor 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.

Gestaltungsmöglichkeiten (Style) des Digitalzählers

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. 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 alles ändern können.

Zonendesignzähler divi.png

Textfarbe

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

Titel Schriftart

Sie können die Schriftart Ihres Titeltexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer 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 Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Titel Textfarbe

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Titeltextes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in 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 in Ihrem Titeltext 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 Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Titelzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Titeltexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Schriften der Nummer

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ßer 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.

Schriftgröße der Nummer

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

Farbe des digitalen Texts

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

Abstand der digitalen Briefe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. 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 Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Zeilenhöhe der Nummer

Die Höhe der Zeile wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres digitalen Texts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

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 Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Regler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt, dh Sie können die Standardeinheit von "px" in eine andere Einheit ändern, z. B. em, vh, vw usw.

Grenzstil

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

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]

Benutzerdefinierte Polsterung

Füllung ist der in Ihrem Modul hinzugefügte Raum zwischen der Kante des Moduls und seinen internen Elementen. Sie können einer der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Entfernen Sie den hinzugefügten Wert 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 für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines 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.

digitaler Zählerabschnitt design.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID 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-Stylesheet verwendet werden, 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 eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Andere Divi Tutorials

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
Aktie4
tweet1
Registrieren6