Schaltflächen-Stil konfigurieren
Hier passt du das Aussehen deiner Schaltflächen detailliert an. Du siehst eine Live-Vorschau und kannst alle Eigenschaften nach deinen Wünschen einstellen.
Voraussetzungen
- Du hast die Schaltflächen-Stil-Auswahl geöffnet
- Ein Block mit Schaltflächen wird bearbeitet
Aufbau der Seite
Das Konfigurationsfenster enthält:
- Live-Vorschau: Zeigt, wie die Schaltfläche aussehen wird
- Rahmen-Schalter: Umschalten zwischen vollflächig und Umrandung
- Tab-Schalter: Bestimmt das Link-Verhalten
- Symbol-Auswahl: Wähle ein optionales Icon
- Stil-Auswahlfeld: Farbschema der Schaltfläche
- Größen-Auswahlfeld: Bestimmt die Schaltflächen-Größe
- Speichern-Schaltfläche: Übernimmt alle Einstellungen
So arbeitest du mit dieser Seite
Grundeinstellungen anpassen
- Rahmen-Modus wählen:
- Aus: Vollflächige Schaltfläche mit Hintergrundfarbe
- Ein: Nur Umrandung, transparenter Hintergrund
- Tab-Verhalten festlegen:
- Aus: Link öffnet im gleichen Tab
- Ein: Link öffnet in neuem Tab/Fenster
Symbol hinzufügen
- Symbol-Auswahlfeld nutzen: Wähle aus verfügbaren Icons
- "Kein Icon" wählen: Für Schaltflächen ohne Symbol
- Vorschau prüfen: Das Symbol erscheint sofort in der Vorschau
Stil und Farbe wählen
- Stil-Auswahlfeld öffnen: Klicke auf das Auswahlfeld
- Farbe wählen: Wähle aus den verfügbaren Optionen:
- Primary: Hauptfarbe deiner Website (meist blau)
- Secondary: Zweitfarbe (meist grau)
- Success: Erfolg/Positiv (meist grün)
- Danger: Warnung/Negativ (meist rot)
- Warning: Vorsicht (meist gelb/orange)
- Info: Information (meist hellblau)
- Light: Heller Hintergrund
- Dark: Dunkler Hintergrund
- Link: Wie ein Textlink gestaltet
Größe bestimmen
- Größen-Auswahlfeld öffnen: Wähle die passende Größe
- Verfügbare Größen:
- Default: Normale Größe
- Small: Kleinere Schaltfläche
- Large: Größere, auffälligere Schaltfläche
Vorschau nutzen
- Live-Updates: Alle Änderungen werden sofort in der Vorschau sichtbar
- Beispiel-Text: "Beispiel Button" zeigt, wie der Text aussieht
- Responsive Verhalten: Die Vorschau zeigt das finale Aussehen
Einstellungen speichern
- "Speichern" klicken: Übernimmt alle Änderungen
- Fenster schließt sich: Du kehrst zur Block-Konfiguration zurück
- Änderungen sichtbar: Die Schaltfläche im Block hat das neue Design
Tipps und Hinweise
- Konsistenz wahren: Verwende ähnliche Stile für ähnliche Aktionen
- Hierarchie beachten: Wichtigere Aktionen sollten auffälliger sein
- Kontrast prüfen: Stelle sicher, dass Text gut lesbar ist
- Rahmen-Modus gezielt einsetzen: Outline-Buttons für sekundäre Aktionen
- Symbole sinnvoll wählen: Icons sollten die Aktion verdeutlichen
- Größe angemessen wählen: Große Buttons für wichtige Aktionen
Empfohlene Kombinationen
- Hauptaktion: Primary + Large + passendes Symbol
- Sekundäraktion: Secondary + Default + Rahmen-Modus
- Positive Aktion: Success + Default (z.B. "Speichern")
- Kritische Aktion: Danger + Default (z.B. "Löschen")
- Info-Aktion: Info + Small + Rahmen-Modus
Häufige Verwendungszwecke
- Call-to-Action: Primary, Large, auffälliges Symbol
- Navigation: Link-Stil oder Secondary mit Rahmen
- Formulare: Success für Senden, Secondary für Abbrechen
- Downloads: Info oder Primary mit Download-Symbol
- Kontakt: Primary oder Success mit Kontakt-Symbol