Einen Knopf gestalten
Hier bestimmst du, wie ein Knopf auf deiner Website aussieht: seine Farbe, Größe, ob er nur einen Rand hat, welches Symbol er trägt und ob er in einem neuen Browserfenster öffnet.
Voraussetzungen
Du hast einen Knopf-Block in deiner Website eingefügt und öffnest gerade das Gestaltungs-Fenster dafür.
So gehst du vor
Schau dir in der Vorschau oben an, wie dein Knopf gerade aussieht.
Falls der Knopf-Stil „Nur mit Rahmen" unterstützt (das trifft auf die meisten zu): Schalte die Option Nur mit Rahmen ein, wenn der Knopf keinen gefüllten Hintergrund haben soll – nur die Umrandung wird dann sichtbar.
Schalte In neuem Fenster öffnen ein, wenn der Link, auf den der Knopf führt, sich in einem neuen Browserfenster öffnen soll.
Wenn der Knopf ein Symbol zeigen soll: Klicke Symbol auswählen und wähle ein Icon aus der Liste. Ohne Auswahl bleibt der Knopf reiner Text.
Wähle unter Stil die Farbe des Knopfs:
- Standard (grau, die Voreinstellung)
- Primary (die Hauptfarbe deiner Website)
- Akzent, Success, Danger, Warning (vordefinierte Farben für bestimmte Zwecke)
- Light, Dark (hell oder dunkel)
- Ghost (transparent mit Rand)
- Link (sieht aus wie ein Textlink)
Wähle unter Größe aus:
- Default (Standardgröße)
- Small (kleinerer Knopf)
- Large (größerer Knopf)
Klicke Speichern.
Aufbau des Fensters
Das Fenster zeigt oben eine Live-Vorschau, wie dein Knopf mit den aktuellen Einstellungen aussieht.
Nur mit Rahmen: Diese Umschaltoption ist nur verfügbar, wenn der gewählte Stil sie unterstützt. Sie entfernt die Hintergrundfarbe.
In neuem Fenster öffnen: Mit dieser Umschaltoption öffnet sich der Link des Knopfs in einem neuen Fenster.
Symbol auswählen: Fügt ein Icon vor oder nach dem Knopftext ein.
Stil: Legt die Farbe und das Design des Knopfs fest. Die verfügbaren Optionen sind Standard, Primary, Akzent, Success, Danger, Warning, Light, Dark, Ghost und Link.
Größe: Bestimmt, wie groß der Knopf auf der Website wirkt.
Was danach passiert
Deine Einstellungen werden gespeichert und das Fenster schließt sich. Der Knopf auf deiner Website zeigt jetzt die neuen Einstellungen. Wenn du den Knopf später noch einmal anpassen möchtest, öffnest du dieses Fenster erneut.
Tipps und Hinweise
- Die Option Nur mit Rahmen ist nicht bei allen Stilen verfügbar. Wenn du ein Styling wechselst, das diese Option nicht unterstützt, wird sie automatisch ausgeschaltet.
- Wähle Primary, wenn der Knopf besondere Aufmerksamkeit bekommen soll (z. B. ein Bestellknopf oder ein Call-to-Action). Standard eignet sich für untergeordnete Aktionen.
- Mit Link wird aus dem Knopf ein einfacher Textlink – das ist sinnvoll, wenn mehrere Links in einer Reihe stehen.
- Das Symbol wird automatisch neben dem Knopftext platziert. Achte darauf, dass die Beschriftung des Knopfs nicht zu lang wird, wenn du ein Symbol hinzufügst.