Mit dem Fortschrittsbalken-Block können Sie animierte, visuelle Fortschrittsbalken zu jeder SeedProd-Seite hinzufügen. Egal, ob Sie ein Spenden-Ziel hervorheben, Fähigkeiten anzeigen, den Abschluss einer Kampagne darstellen oder eine prozentuale Kennzahl kommunizieren möchten, dieser Block macht es einfach, diese Informationen übersichtlich und ansprechend darzustellen.
Jeder Fortschrittsbalken ist vollständig anpassbar – legen Sie den Beschriftungstext, den Fortschrittsprozentsatz und die Balkenfarbe im Tab „Inhalt“ fest, wählen Sie aus vier vorgefertigten Stilvorlagen und passen Sie dann die Typografie, die Hintergrundfarbe, den Radius des Rahmens und die Schatteneffekte im Tab „Erweitert“ an. Der Block enthält auch gerätespezifische Abstands- und Sichtbarkeitssteuerungen, 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 Fortschrittsbalken-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Fortschrittsbalken-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie im Abschnitt Fortschrittsbalken die Beschriftung, den Prozentsatz und die Füllfarbe für den Balken festlegen.
- Balkentext: Geben Sie die Beschriftung ein, die im gefüllten Teil des Fortschrittsbalkens angezeigt wird (z. B. „75 % abgeschlossen“, „Finanzierungsziel“ oder ein Fähigkeitsname). Dieser Text überlagert die Balkenfüllung, sodass Besucher sofort sehen, was der Fortschritt darstellt.
- Prozent: Stellen Sie den Füllstand des Balkens mit dem Schieberegler (0–100) ein. Dieser Wert steuert, wie viel vom Balken visuell 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 ungefüllte Hintergrundfarbe separat im Tab „Erweitert“ eingestellt wird.
Schritt 2a: Wählen Sie einen Vorlagenstil
Im Tab Vorlagen können Sie aus vordefinierten Fortschrittsbalken-Stilen auswählen, um das Gesamterscheinungsbild Ihres Balkens schnell zu ändern.
- Stilvorlagen: Wählen Sie aus 4 verschiedenen Vorlagendesigns, jedes mit einem einzigartigen visuellen Stil und einer Farbgebung. Klicken Sie auf eine beliebige Vorlage, um sie sofort anzuwenden – Sie können jederzeit zu den Tabs „Inhalt“ und „Erweitert“ zurückkehren, um nach der Auswahl eines Stils weitere Anpassungen vorzunehmen.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das Erscheinungsbild Ihres Fortschrittsbalkens mit Typografie, Farben, Schatteneffekten und mehr feinabstimmen.
Stile:
- Typografie: Legen Sie Schriftfamilie, Größe, Stärke, Zeilenhöhe, Buchstabenabstand und Texttransformation für den Beschriftungstext des Balkens fest.
- Hintergrundfarbe: Legen Sie die Farbe des ungefüllten (Spur-)Teils des Fortschrittsbalkens fest – der Hintergrund, der hinter dem gefüllten Abschnitt sichtbar ist. Standardmäßig ist dies ein hellgrau (
#F7F7F7). - Randienradius: Legt die Eckabrundung für die Balkenspur und die Füllung fest (0–25px). Erhöhen Sie diesen Wert, um einen pillenförmigen oder vollständig abgerundeten Balken zu erstellen.
- Textschatten: Fügt dem Text der Balkenbeschriftung einen Schatteneffekt hinzu. Wählen Sie aus vordefinierten Größen (Keine, Haarfein, Klein, Mittel, Groß, X-Groß, 2X-Groß), um Tiefe zu erzeugen oder die Beschriftung besser lesbar gegen die Balkenfarbe zu machen.
- Schatten: Fügt dem gesamten Fortschrittsbalken-Element einen Kastenschatten hinzu, um ihm Tiefe und Trennung vom Seitenhintergrund zu verleihen.
Abstand:
- Abstand (Außen): Steuert den äußeren Abstand um Ihren Fortschrittsbalken-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Balken und den umgebenden Elementen auf der Seite erscheint.
- Abstand (Innen): Passt den inneren Abstand innerhalb Ihres Fortschrittsbalken-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum 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 spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Blocks beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert (z. B. data-progress|75).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blendet den Fortschrittsbalken-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Fortschrittsbalken-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Fortschrittsbalken-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Fortschrittsbalken-Block in den Ansichtsbereich gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr – ideal, um die Aufmerksamkeit auf eine wichtige Metrik zu lenken, während Besucher nach unten scrollen.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Fortschrittsbalken-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Fortschrittsbalken-Block zu Ihrer Seite hinzugefügt! Fortschrittsbalken sind eine leistungsstarke Möglichkeit, Vollständigkeit, Fähigkeitsniveaus, Spendenaktionen oder jede prozentbasierte Metrik auf einen Blick zu kommunizieren. Experimentieren Sie mit verschiedenen Vorlagenstilen, Füllfarben, Randradiuswerten und Eingabeanimationen, um Fortschrittsbalken zu erstellen, die Aufmerksamkeit erregen und die Botschaft Ihrer Seite verstärken.