Eine Progress Bar hinzufügen.

Sie erhalten einen farbigen Balken mit Beschriftung, der auf einen Blick zeigt, wie weit etwas gekommen ist. Nutzen Sie ihn für Projektstatus, Spendenziele, Kursfortschritt oder Skill-Level.

Eine Progress Bar hinzufügen

Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. Ihre erste Seite zeigt die Grundlagen.

1. Fahren Sie mit der Maus über die Spalte und klicken Sie in ihrer Steuerleiste auf +; klicken Sie auf einer leeren Seite auf Add Elements. Öffnen Sie den Content-Tab und klicken Sie auf Progress bar. Die Progress Bar landet oben in der Spalte und ihr Einstellungsdialog öffnet sich.
2. Geben Sie ein Label für den Balken ein, zum Beispiel „Website redesign“.
3. Ziehen Sie Progress, um festzulegen, wie weit sich der Balken füllt, oder geben Sie den Wert in das Feld neben dem Regler ein. Hier wählen wir 73 Prozent.
4. Wählen Sie eine Front color für den gefüllten Teil aus der Palette.
5. Weiter unten im selben Dialog wählen Sie, ob der Balken Stripes erhält. Hier kreuzen wir Add striped pattern to bar an.
6. Klicken Sie im Dialog auf Speichern. Klicken Sie dann in der Symbolleiste oben im Inhaltsbereich auf Speichern, um die Seite zu speichern.

Was Sie sehen

Ein Balken mit Ihrer Beschriftung füllt sich bis zum eingestellten Wert, in der von Ihnen gewählten Farbe. Die Beschriftung sitzt im gefüllten Teil. Im Video trägt der gestreifte Balken die Aufschrift Website redesign und füllt 73 % seiner Spur. Besucher sehen ihn, sobald Sie die Seite speichern und sie veröffentlicht ist.

Ihre Progress Bar einrichten

Fahren Sie mit der Maus über das Element und öffnen Sie in seiner Steuerleiste More > Settings. Optionen:

• Label: der Text auf dem Balken. Sie können auch auf die Beschriftung auf der Seite klicken und sie dort bearbeiten.
• Progress: wie weit sich der Balken füllt, von 0 bis 100 Prozent. Die Vorgabe ist 50.
• Bar height: die Höhe des Balkens in Pixeln. Die Vorgabe ist 45.
• Back color: die Farbe der leeren Spur.
• Front color: die Farbe des gefüllten Teils.
• Grow animation: standardmäßig ausgeschaltet. Wenn eingeschaltet, startet der Balken leer und füllt sich, sobald er zur Hälfte im Sichtfeld ist.
• Stripes: Add striped pattern to bar fügt diagonale Streifen hinzu. Animate stripes (requires striped pattern) bewegt sie.

Wenn Sie es nicht sehen

• Die Progress Bar ist nicht im Content-Tab. Ihr Benutzerprofil blendet sie aus. Bitten Sie die Administration, sie unter User Profiles zu aktivieren.
• Es ist nach dem Neuladen verschwunden. Die Seite wurde nicht gespeichert. Fügen Sie es erneut hinzu und klicken Sie in der Symbolleiste oben im Inhaltsbereich auf Speichern.
• Der Balken sieht leer aus. Progress steht auf 0 oder Grow animation ist eingeschaltet und der Balken ist noch nicht zur Hälfte im Sichtfeld. Scrollen Sie zum Balken oder fahren Sie mit der Maus über das Element und öffnen Sie More > Settings, um Progress zu erhöhen.
• Es gibt keine Streifen oder sie bewegen sich nicht. Add striped pattern to bar ist nicht angekreuzt und Animate stripes (requires striped pattern) braucht es. Kreuzen Sie Add striped pattern to bar unter Stripes an.
• Der gefüllte Teil verschmilzt mit der Spur. Front color und Back color sind sich zu ähnlich. Wählen Sie eine dunklere Front color oder eine hellere Back color.

Wie geht es weiter?

Style-Tab, um Abstände und Hintergrund Ihrer Progress Bar zu ändern.