header-logo
Erfahre, wie du Wix für den Aufbau deiner Website und deines Unternehmens nutzen kannst
Gestalte und verwalte deine Website mit Wix.
Verwalte Premiumpakete, Abos und Rechnungen
Führe dein Unternehmen und vernetze dich mit Mitgliedern.
Kaufe, verknüpfe oder übertrage eine Domain.
Stärke dein Unternehmen und deine Webpräsenz.
Steigere deine Sichtbarkeit mit SEO und Marketing.
Nutze erweiterte Funktionen für mehr Effizienz.
Finde Lösungen oder kontaktiere uns.
placeholder-preview-image
Verbessere deine Kenntnisse mit unseren Tutorials.
Erhalte Tipps für Webdesign, Marketing und mehr.
Erfahre, wie du den organischen Traffic steigerst.
Erstelle eine Website mit unserer Full-Stack-Plattform.
Finde einen Spezialisten, der dir hilft, deine Ziele zu erreichen.
placeholder-preview-image

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.
Screenshot eines beispielhaften Fortschrittsbalkens.
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
  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 auf Einstellungen.
  8. Gib ein Label ein, das Besucher und Screenreader wissen lässt, was die Leiste darstellt (z. B. „Fortschritt in Richtung Ziel“).
  9. Wähle, ob du den Zielwert als dynamischen Wert oder statischen Wert festlegen möchtest:
OSZAR »