CMS: Einen Fortschrittsbalken hinzufügen und einrichten

6 Min. Lesezeit
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 verbinden.
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. Mehr erfahren im Artikel Mit dem Fortschrittsbalken-Element arbeiten.
Bevor du loslegst:
Du musst das CMS hinzufügen und eine Sammlung erstellen, die ein Zahlenfeld für deinen Fortschrittswert enthält.

Um einen Fortschrittsbalken hinzuzufügen und einzurichten:

Wix Editor
Editor X
Studio Editor
  1. Öffne deinen Editor.
  2. Achte darauf, dass du in deinem Editor Velo aktiviert hast:
    1. Klicke oben auf Dev-Modus.
    2. Klicke auf Dev-Modus aktivieren.
  3. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
  4. Klicke auf Interaktiv.
  5. Klicke unter Indikatoren auf Fortschrittsbalken.
  6. Klicke und ziehe den Fortschrittsbalken deiner Wahl auf die Seite.
  7. Klicke auf dem Fortschrittsbalken-Element auf das Symbol für Mit CMS verknüpfen .
  8. Klicke auf das Aufklappmenü Datensatz wählen und wähle einen vorhandenen Datensatz aus, der mit deiner Sammlung verbunden ist. Klicke alternativ auf Datensatz erstellen. Wähle dann die Sammlung, die du verbinden möchtest, gib dem Datensatz einen Namen und klicke auf Erstellen.
  9. Klicke auf das Aufklappmenü Fortschrittswert verbinden mit und wähle das Feld aus, das du verwenden möchtest, um den Fortschritt beim Erreichen des Ziels darzustellen.
  10. Lege den Zielwert entweder als statische Zahl fest, die immer gleich bleibt, oder als dynamischen Wert:
    • Statischen Zielwert festlegen: Klicke auf dem Fortschrittsbalken-Element auf Zielwert festlegen und gib den Wert in das Feld Zielwert ein.
    • Dynamischen Zielwert festlegen: Klicke auf das Aufklappmenü Zielwert verbinden mit und wähle das Feld aus, das du zur Darstellung des Zielwerts verwenden möchtest.
  11. Klicke auf das Symbol für Layout  und wähle die Richtung, in die sich der Fortschritt bewegt.
  12. Klicke auf das Symbol für Design  und wähle ein voreingestelltes Design oder passe das vorhandene Design weiter an.
  13. (Optional) Klicke auf das Symbol für Animation , um dem Element einen Animationseffekt hinzuzufügen.

War das hilfreich?

|