CMS: Einen Fortschrittsbalken hinzufügen und einrichten
8 min
Füge einen Fortschrittsbalken hinzu, um den Fortschritt beim Erreichen eines Ziels visuell darzustellen. Du kannst Velo-Codierung oder ein CMS-Sammlungsfeld verwenden, um den Fortschrittswert darzustellen. Für den Zielwert kannst du einen statischen Wert festlegen, der sich nicht ändert, oder einen dynamischen Wert mit Velo festlegen oder ein Sammlungsfeld verknüpfen.

Beispiele für die Verwendung von Fortschrittsbalken:
- Anzeigen, wie viele Aufgaben auf einer To-Do-Liste als „erledigt“ markiert sind
- Prozentsatz der Schritte anzeigen, die während eines Onboarding-Prozesses abgeschlossen wurden
- Betrag anzeigen, der für ein Spendenziel gesammelt wurde
- Anzahl der Personen anzeigen, die eine Petition unterzeichnet haben, für die eine bestimmte Anzahl von Stimmen erforderlich ist
Tipp:
Du kannst Velo verwenden, um den Wert des Fortschrittsbalkens zu aktualisieren, ohne eine Verbindung zum CMS herstellen zu müssen. Erfahre mehr im Artikel Mit der Fortschrittsbalken-API arbeiten (Artikel zurzeit nur auf Englisch verfügbar).
Bevor du loslegst:
Musst du deiner Website das CMS hinzufügen und eine Sammlung erstellen, die den Feldtyp „Zahl“ für deinen Fortschrittswert enthält. Wenn du einen dynamischen Wert als Zielwert verwenden möchtest, füge auch ein Zahlenfeld hinzu, das den Zielwert darstellt.
Um einen Fortschrittsbalken hinzuzufügen und einzurichten:
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Achte darauf, dass du in deinem Editor Velo aktiviert hast:
- Klicke oben auf Dev-Modus.
- Klicke auf Dev-Modus aktivieren.
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen
.
- Klicke auf Interaktiv.
- Klicke unter Indikatoren auf Fortschrittsbalken.
- Klicke und ziehe den Fortschrittsbalken deiner Wahl auf die Seite.
- Klicke auf dem Fortschrittsbalken auf Einstellungen.
- Gib ein Label ein, das Besucher und Screenreader wissen lässt, was die Leiste darstellt (z. B. „Fortschritt in Richtung Ziel“).
- Wähle, ob du den Zielwert als dynamischen Wert oder statischen Wert festlegen möchtest:
Dynamischer Zielwert
Statischer Zielwert