Mit dem Block „Fortschrittsbalken“ können Sie animierte, visuelle Fortschrittsbalken zu jeder SeedProd-Seite hinzufügen. Ganz gleich, ob Sie ein Spendenziel hervorheben, Qualifikationsstufen anzeigen, den Abschluss einer Kampagne darstellen oder prozentuale Kennzahlen kommunizieren möchten – mit diesem Block lassen sich diese Informationen auf übersichtliche und ansprechende Weise präsentieren.
Jeder Fortschrittsbalken ist vollständig anpassbar – legen Sie den Beschriftungstext, den Fortschrittsprozentsatz und die Balkenfarbe auf der Registerkarte „Inhalt“ fest, wählen Sie aus vier vorgefertigten Stilvorlagen aus und nehmen Sie dann auf der Registerkarte „Erweitert“ Feinabstimmungen an der Typografie, der Hintergrundfarbe, dem Randradius und den Schatteneffekten vor. Der Block enthält auch Steuerelemente für den Abstand und die Sichtbarkeit pro Gerät, damit Ihre Fortschrittsbalken auf jeder Bildschirmgröße gut aussehen.
Hinzufügen des Fortschrittsbalken-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Fortschrittsbalken-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Fortschrittsbalken“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Fortschrittsbalken“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie im Abschnitt „Fortschrittsbalken“ die Beschriftung, den Prozentsatz und die Füllfarbe für den Balken festlegen.
- Balken-Text: Geben Sie die Beschriftung ein, die im ausgefüllten Teil des Fortschrittsbalkens angezeigt wird (z. B. „75 % abgeschlossen“, „Finanzierungsziel“ oder ein Fertigkeitsname). Dieser Text wird über den ausgefüllten Balken gelegt, sodass Besucher sofort sehen, was der Fortschritt bedeutet.
- Prozent: Stellen Sie den Füllgrad des Balkens mit dem Schieberegler ein (0–100). Dieser Wert bestimmt, wie viel des Balkens optisch gefüllt ist, und stellt den Fortschrittsprozentsatz dar, der den Besuchern angezeigt wird.
- Farbe: Legen Sie die Füllfarbe des Balkens fest. Diese Farbe gilt für den gefüllten (Fortschritts-)Teil des Balkens, während die Farbe des nicht gefüllten Hintergrunds separat auf der Registerkarte „Erweitert“ festgelegt wird.
Schritt 2a: Wählen Sie einen Vorlagenstil aus.
Auf der Registerkarte „Vorlagen“ können Sie aus vorgefertigten Fortschrittsbalken-Stilen auswählen, um das allgemeine Erscheinungsbild Ihres Balkens schnell zu ändern.
- Stilvorlagen: Wählen Sie aus 4 verschiedenen Vorlagendesigns mit jeweils einzigartigem visuellen Stil und Farbgestaltung. Klicken Sie auf eine beliebige Vorlage, um sie sofort anzuwenden. Nach der Auswahl eines Stils können Sie jederzeit zu den Registerkarten „Inhalt“ und „Erweitert“ zurückkehren, um weitere Anpassungen vorzunehmen.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihrer Fortschrittsanzeige mit Typografie, Farben, Schatteneffekten und mehr feinabstimmen.
Stile:
- Typografie: Legen Sie die Schriftart, Größe, Stärke, Zeilenhöhe, Zeichenabstand und Textumwandlung für den Text der Balkenbeschriftung fest.
- Hintergrundfarbe: Legen Sie die Farbe des nicht gefüllten Teils (Spur) des Fortschrittsbalkens fest – den Hintergrund, der hinter dem gefüllten Abschnitt sichtbar ist. Standardmäßig ist hellgrau eingestellt (
#F7F7F7). - Eckenradius: Legt die Abrundung der Ecken sowohl für die Balkenspur als auch für die Füllung fest (0–25 px). Erhöhen Sie diesen Wert, um einen pillenförmigen oder vollständig abgerundeten Balken zu erstellen.
- Textschatten: Fügen Sie dem Text der Balkenbeschriftung einen Schatteneffekt hinzu. Wählen Sie aus voreingestellten Größen (Keine, Haarlinie, Klein, Mittel, Groß, X Groß, 2X Groß), um Tiefe zu verleihen oder die Beschriftung vor dem Hintergrund der Balkenfarbe besser lesbar zu machen.
- Schatten: Fügen Sie dem gesamten Fortschrittsbalkenelement einen Kastenschatten hinzu, um ihm Tiefe zu verleihen und ihn vom Seitenhintergrund abzuheben.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Fortschrittsbalken-Block herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Balken und den umgebenden Elementen auf der Seite angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Fortschrittsbalken-Blocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen dem Balken und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Fortschrittsbalken-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-progress|75).
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Block „Fortschrittsbalken“ auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Block „Fortschrittsbalken“ auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Block „Fortschrittsbalken“ auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Fortschrittsbalken-Block in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Eindrehen“ und viele mehr – ideal, um die Aufmerksamkeit auf eine wichtige Kennzahl zu lenken, wenn Besucher auf Ihrer Seite nach unten scrollen.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Fortschrittsbalken-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Fortschrittsbalken-Block zu Ihrer Seite hinzugefügt! Fortschrittsbalken sind eine leistungsstarke Möglichkeit, um den Fertigstellungsgrad, das Qualifikationsniveau, Spendenziele oder andere prozentuale Kennzahlen auf einen Blick zu vermitteln. Experimentieren Sie mit verschiedenen Vorlagenstilen, Füllfarben, Werten für den Rahmenradius und Einstiegsanimationen, um Fortschrittsbalken zu erstellen, die Aufmerksamkeit erregen und die Botschaft Ihrer Seite unterstreichen.