Einen Circle Counter hinzufügen.

Sie erhalten einen animierten Ring, der sich bis zu einer Kennzahl füllt, zum Beispiel einer Quote oder einem Score. Nutzen Sie ihn, um eine Statistik auf einer Landingpage oder einer Über-uns-Seite hervorzuheben.

Einen Circle Counter 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 Circle counter. Der Circle Counter landet oben in der Spalte und sein Einstellungsdialog öffnet sich.
2. Ziehen Sie den Regler Percent, um festzulegen, wie weit sich der Ring füllt, oder geben Sie den Wert in das Feld daneben ein. Hier stellen wir 78 ein.
3. Wählen Sie die Bogenfarbe unter Foreground color.
4. Öffnen Sie den Bereich Circle content und geben Sie eine Text-Beschriftung für die Kennzahl ein.
5. Geben Sie im Feld Icon darunter chart in das Suchfeld Search ein und klicken Sie im Raster auf ein Icon.
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 Ring füllt sich bis zu dem von Ihnen eingestellten Prozentwert, mit Ihrem Icon und Ihrer Beschriftung in der Mitte. Im Video ist er lila, füllt sich zu 78 Prozent und trägt die Aufschrift Renewal rate. Der Ring animiert sich, sobald er ins Sichtfeld scrollt. Besucher sehen ihn, sobald Sie die Seite speichern und sie veröffentlicht ist.

Ihren Circle Counter einrichten

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

• Percent: wie weit sich der Ring füllt, von 0 bis 100.
• Dimension: die Größe des Kreises in Pixeln, von 100 bis 500.
• Foreground color: die Farbe des gefüllten Bogens.
• Background color: die Farbe der leeren Spur.
• Fill color: die Farbe im Inneren des Kreises.
• Foreground width: die Stärke des Bogens.
• Animation: füllt den Bogen ab null. Animation duration und Animation delay legen das Timing in Millisekunden fest.
• Animation in-viewport: wartet mit der Animation, bis der Kreis ins Sichtfeld scrollt.

Jeder Regler hat ein Zahlenfeld daneben für exakte Werte. Der Bereich Circle content legt fest, was in der Mitte steht:

• Show progress: zeigt die Prozentzahl statt Ihres eigenen Texts und Icons. Standardmäßig ausgeschaltet.
• Text: eine kurze Beschriftung. Font size und Text color gestalten sie.
• Info: eine kleinere zweite Zeile unter dem Text.
• Icon: ein Icon vor dem Text. Das Dropdown neben Search begrenzt das Raster auf ein Icon-Set. Icon size und Icon color gestalten es.

Wenn Sie es nicht sehen

• Der Circle Counter ist nicht im Content-Tab. Ihr Benutzerprofil blendet ihn aus. Bitten Sie die Administration, ihn 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 Ring ist blass oder fehlt. Foreground color und Background color liegen zu nah an der Seitenfarbe. Fahren Sie mit der Maus über das Element und öffnen Sie More > Settings, und wählen Sie dann Farben mit mehr Kontrast.
• Der Ring animiert sich nicht. Animation ist ausgeschaltet oder der Ring wartet, bis er ins Sichtfeld scrollt. Schalten Sie Animation ein und scrollen Sie den Kreis ins Sichtfeld.
• Ihr Text und Icon erscheinen nicht. Show progress ist eingeschaltet, daher zeigt der Ring stattdessen die Prozentzahl. Schalten Sie Show progress unter Circle content aus.

Wie geht es weiter?

Style-Tab, um Abstände und Hintergrund Ihres Circle Counters zu ändern.