So erstellen Sie einen dynamischen Fortschrittsbalken in Brizy

Manchmal müssen Sie die Daten in einem grafischen Design anzeigen. Nun, der Fortschrittsbalken könnte die Lösung sein. Üblicherweise wird der Fortschrittsbalken verwendet, um den Fortschritt eines erweiterten Computervorgangs zu visualisieren, z. B. Download/Upload-Dateiübertragung, Festplattenspeicher, Prozessor, Installation usw. Heutzutage dient ein Fortschrittsbalken nicht nur dazu, einen Computervorgang anzuzeigen. Mit Ihrer Kreativität kann der Fortschrittsbalken für viele Dinge verwendet werden, die Sie auf Ihrer Website anwenden können.

Die Verwendung des Fortschrittsbalkens auf der folgenden Website ist unten aufgeführt:

• Bewertungen
• Tabellierung der Daten
• Indikator für Verbesserungen
• Indikator für den Projektfortschritt
• Usw.

Mit Brizy können Sie ganz einfach einen Fortschrittsbalken erstellen. Mit der Möglichkeit, benutzerdefinierte Felddaten anzuzeigen, können Sie Ihren Inhalten dynamisch benutzerdefinierte Elemente hinzufügen, einschließlich eines Fortschrittsbalkens. Dieser Artikel zeigt Ihnen, wie Sie in Brizy einen dynamischen Fortschrittsbalken erstellen.

So erstellen Sie einen dynamischen Fortschrittsbalken in Brizy

Schritt 1: Erstellen Sie die benutzerdefinierten Felder

Zuerst müssen Sie die benutzerdefinierten Felder erstellen und den Feldtyp auf eine Zahl festlegen . Standardmäßig verfügt WordPress nicht über eine Funktion für benutzerdefinierte Felder. Sie müssen es also zuerst herunterladen und installieren. Es gibt viele benutzerdefinierte WordPress-Felder-Plugins im WordPress-Verzeichnis. In diesem Tutorial verwenden wir ACF als unser WordPress-Plugin für benutzerdefinierte Felder. Wenn Sie ACF nicht mögen, können Sie Pods oder andere ACF-Alternativen verwenden, die das Zahlenfeld unterstützen.

Nachdem Sie das ACF-Plugin heruntergeladen und in Ihrem WordPress installiert haben, gehen Sie in Ihrem WordPress-Dashboard zu Benutzerdefinierte Felder -> Neu hinzufügen , um eine neue benutzerdefinierte Feldgruppe zu erstellen. Geben Sie Ihrer benutzerdefinierten Feldgruppe einen Namen und klicken Sie auf die Schaltfläche Feld hinzufügen, um ein neues Feld hinzuzufügen.

Als Nächstes können Sie die Feldbezeichnung und den Feldnamen in den Feldern Feldbezeichnung und Feldname festlegen. Legen Sie im Feld Feldtyp die Option Zahl fest, und dann können Sie den Mindestwert und den Höchstwert in den Feldern Mindestwert und Höchstwert festlegen . In diesem Beispiel setzen wir den Minimalwert auf 1 und den Maximalwert auf 100 .

Klicken Sie auf die Schaltfläche Feld hinzufügen, um weitere Felder hinzuzufügen, und wiederholen Sie die obigen Schritte. In diesem Beispiel wird ein dynamischer Fortschrittsbalken für die Sneaker-Überprüfung erstellt. Deshalb haben wir einige Felder hinzugefügt, die für die Sneaker-Bewertung relevant sind.

Nachdem Sie die benutzerdefinierten Felder hinzugefügt haben, gehen Sie zum Abschnitt Standort , um festzulegen, wo die Gruppe der benutzerdefinierten Felder zugewiesen werden soll. Sie können die Standardregel verwenden, wenn Sie möchten, dass die Gruppe der benutzerdefinierten Felder Blogbeiträgen zugewiesen wird. Klicken Sie auf die Schaltfläche Veröffentlichen, um die Gruppe der benutzerdefinierten Felder zu veröffentlichen.

Schritt 2: Erstellen Sie die benutzerdefinierte Vorlage für den Blogbeitrag

Die Funktion zum Erstellen einer benutzerdefinierten Vorlage ist in der kostenlosen Version von Brizy verfügbar, aber wir empfehlen Ihnen, Ihr Brizy auf die Pro-Version zu aktualisieren, damit Sie auf alle Elemente im Elementbereich zugreifen können. Mit Brizy Pro kann Ihre benutzerdefinierte Vorlage maximiert werden.

Okay, sobald Ihre benutzerdefinierten Felder fertig sind, können Sie die benutzerdefinierten Vorlagen für die Artikeltypen erstellen, die Sie dem dynamischen Fortschrittsbalken hinzufügen möchten. Wenn Sie bereits eine oder mehrere Vorlagen haben, können Sie direkt zu Ihrer vorhandenen Vorlage gehen und sie bearbeiten. In diesem Tutorial werden wir unsere aktuelle Vorlage bearbeiten. Aber wenn Sie neu bei Brizy sind und lernen möchten, wie Sie eine benutzerdefinierte Vorlage erstellen, können Sie den Artikel „So erstellen Sie eine benutzerdefinierte Vorlage für einzelne Posts in WordPress mit Brizy“ lesen.

Gehen Sie zu Ihrer bestehenden Vorlage und klicken Sie auf die Schaltfläche Mit Brizy bearbeiten , die Sie zum Brizy-Editor bringt.

In Ordnung, es ist Zeit, den Fortschrittsbalken zu Ihrer Vorlage hinzuzufügen. Wählen Sie in Ihrem Brizy-Editor das Progress-Element aus dem Elementbereich aus und ziehen Sie es per Drag-and-Drop in den Canvas-Bereich. Sie können das Progress-Element beliebig platzieren. In diesem Beispiel platzieren wir das Progress-Element unter dem Content-Element.

Als nächstes ist es an der Zeit, den Fortschrittsbalken zu bearbeiten und zu gestalten. Zuerst wollen wir die Breite des Fortschrittsbalkens bearbeiten. Gehen Sie in der Optionsleiste des Fortschrittsbalkens zu den Einstellungen und klicken Sie darauf. In diesem Beispiel setzen wir die Breite auf 60 % .

Nachdem Sie die Breite des Fortschrittsbalkens bearbeitet haben, gehen Sie ganz links in die Optionsleiste und klicken Sie darauf. Es gibt einige Einstellungen, die Sie hier vornehmen können. Es gibt Style, Fill, Title und Percentage . Gehen Sie zunächst zu den Fülleinstellungen , klicken Sie auf das Hamburger-Symbol (siehe GIF) und weisen Sie den soeben erstellten benutzerdefinierten Feldern eine Feldbezeichnung zu.

Wie bereits erwähnt, werden wir einen dynamischen Fortschrittsbalken für die Sneaker-Überprüfung erstellen. Wir möchten also die Prozentoption deaktivieren, indem wir den Prozentschalter nach links schieben.

Bearbeiten Sie als Nächstes den Titel des Fortschrittsbalkens gemäß der Feldbezeichnung, die Sie in den Fülleinstellungen zugewiesen haben. Nachdem Sie den Titel bearbeitet haben, können Sie den Fortschrittsbalken duplizieren, indem Sie auf die Schaltfläche Duplizieren klicken. Da wir vier Feldbeschriftungen von benutzerdefinierten Feldern haben, duplizieren wir den Fortschrittsbalken dreimal.

Jetzt können Sie die anderen Fortschrittsbalken wie beim ersten Fortschrittsbalken bearbeiten (in den Fülleinstellungen eine Feldbezeichnung zuweisen und den Titel des Fortschrittsbalkens bearbeiten). Nachdem Sie diese Fortschrittsbalken bearbeitet und gestaltet haben, aktualisieren Sie Ihre einzelne Beitragsvorlage, indem Sie auf die Schaltfläche Aktualisieren klicken.

Schritt 3: Erstellen Sie einen neuen Blogbeitrag

In Ordnung, Sie können einen neuen Blogbeitrag erstellen, sobald alles fertig ist. Stellen Sie sicher, dass Sie die Werte zu den benutzerdefinierten Feldern hinzufügen, die Sie in Schritt 1 oben erstellt haben. Die angegebenen Werte werden verwendet, um die Füllungen der Balken festzulegen.

Stellen Sie zu guter Letzt sicher, dass Sie die Kategorie entsprechend der Kategorie der benutzerdefinierten Vorlage festlegen, der sie zugewiesen ist (Schritt 2).

Das Endergebnis

Dieser Artikel zeigt Ihnen, wie Sie in Birizy einen dynamischen Fortschrittsbalken erstellen. Brizy ist eines der einfachsten Tools zum Erstellen von Websites, Blogs und Online-Shops. Die Integration zwischen Brizy und dem WordPress-Plugin für benutzerdefinierte Felder ermöglicht es uns, einen dynamischen Fortschrittsbalken für unsere Website zu erstellen. Neben dem Fortschrittsbalken können wir allen Brizy-Elementen, die eine Option zum dynamischen Festlegen des Werts bieten, dynamische Inhalte hinzufügen. Das Bewertungselement ist ein weiteres Beispiel, mit dem Sie eine dynamische Sternebewertung erstellen können.