Passe die Formen, Farben und Textstile von Buttons an dein Markendesign an.

Verwende Website-Stile, um das Erscheinungsbild von Buttons auf deiner Website zu bearbeiten und Handlungsaufforderungen auf das visuellen Design deiner Website abzustimmen. Um dir bei der Gestaltung eines einheitlichen Designs zu helfen, wirken sich alle Stil-Änderungen, die du vornimmst, auf die meisten Buttons deiner Website aus.

Diese Button-Stile sind auf Websites der Version 7.1 verfügbar. Bei Websites der Version 7.0 gibt es andere Optionen zur Gestaltung von Buttons.

Video zu Button-Stilen

Dieses Video gibt dir einen Überblick über Gestaltungsmöglichkeiten für Buttons auf deiner Website.

Wähle ein Button-Paket aus

Unter Website-Stile kannst du ein Button-Paket auswählen, um automatisch einheitliche Stil-Einstellungen auf Buttons deiner Website anzuwenden. Jedes Paket unterteilt Button-Stile in drei Typen.

Button-Pakete sind sehr praktisch, wenn du die detaillierteren Einstellungen nicht manuell ändern möchtest, aber du kannst sie auch als Ausgangspunkt nutzen und dann weiter anpassen.

So legst du dein Button-Paket fest:

1. Öffne das Menü „Website-Stile“.
2. Klicke auf Buttons.
3. Sieh dir die empfohlenen Button-Pakete an. Wenn du den Mauszeiger über ein Paket bewegst, wird eine Vorschau auf seine primären, sekundären und tertiären Stile angezeigt.
4. Wähle aus den empfohlenen Button-Paketen oder klicke auf Anpassen und dann auf Alle Button-Pakete, um weitere Optionen anzuzeigen.
5. Wenn du ein Button-Paket findest, das dir gefällt, klicke darauf.

Passe die Formen und Schriftarten deiner Buttons an

Nachdem du ein Button-Paket ausgewählt hast, kannst du spezifischere Änderungen an deinen Button-Stil-Optionen vornehmen. Du kannst zwar bestimmte Größen und Formen festlegen, Buttons können jedoch größer werden und ihre Form ändern, um sich dem Text anzupassen. Wir empfehlen, den Button-Text auf unter 25 Zeichen zu beschränken, um die bestmögliche Kontrolle zu behalten.

Einige Anpassungen wirken sich nicht auf Buttons auf deiner Website aus, wenn das Design deiner Website dadurch beeinträchtigt werden könnte. Um zum Beispiel das Layout des Newsletter-Blocks beizubehalten, wirken sich Anpassungen beim Padding nicht auf Newsletter-Block-Buttons aus.

So gestaltest du deine Buttons:

1. Öffne das Menü „Website-Stile“.
2. Klicke neben Buttons auf ＞.
3. Klicke auf Primär, Sekundär oder Tertiär. Wenn du Änderungen vornimmst, zeigt eine Vorschau an, wie Buttons dieses Typs auf deiner Website angezeigt werden. Denke daran, dass deine Änderungen verloren gehen, wenn du Änderungen an einem Button-Typ vornimmst und dann ein neues Button-Paket auswählst.
4. Klicke auf Schriftart, um die Textstile anzupassen.
5. Klicke auf Form, um die Button-Form festzulegen.
6. Verwende den Kontur-Schieberegler, um die Konturstärke festzulegen.
7. Lege das Padding auf S, M oder L fest oder klicke auf …, um das Padding oben und unten und das Padding links und rechts separat festzulegen. Diese Option wirkt sich nicht auf Button-Blöcke aus, die in Abschnitten des Kreativen Editors auf Füllen eingestellt sind. Ändere die Größe von Blöcken, um stattdessen Padding hinzuzufügen.
8. Optional: Um diese Stil-Einstellungen auf alle Button-Typen auf deiner Website anzuwenden, klicke auf Auf alle Button-Typen anwenden.
9. Optional: Um die Stile des Button-Typs, den du bearbeitest, auf die Standardeinstellungen zurückzusetzen, klicke auf Button-Stile zurücksetzen.
10. Klicke auf Speichern.

Passe deine Button-Farben an

Buttons passen sich an die Farben deiner gesamten Website an und fügen sich daher in der Regel nahtlos in das Markendesign deiner Website ein. Du kannst eine größere Auswahl an Button-Farben verwenden, indem du verschiedene Farbschemen in verschiedenen Abschnitten verwendest.

So änderst du die Farben deiner Buttons:

1. Öffne das Menü „Website-Stile“.
2. Klicke neben Farben auf ＞.
3. Klicke auf das Farbschema, bei dem du die Farben deiner Buttons ändern möchtest.
4. Klicke unter Button auf die Anpassungen, um die Textfarbe und die Hintergrundfarbe des Buttons für alle drei Button-Typen zu ändern. Bei Buttons, die auf Füllen eingestellt sind, füllt die Hintergrundfarbe den Button aus. Bei Buttons, die auf Keine Füllung eingestellt sind, oder Buttons, die die Form Unterstrichen verwenden, gilt die Hintergrundfarbe des Buttons sowohl für die Kontur als auch für den Text.
5. Optional: Wenn ein Block einen Button hat, kannst du manchmal die Button-Farbe unabhängig ändern. Schau im Menü „Farbschema bearbeiten“ unter „Block-Abschnitte“ nach blockspezifischen Farbanpassungen für Buttons.
6. Klicke auf Speichern.

Was sind Button-Typen?

Website-Stile unterteilt Buttons in drei Typen: Primär, Sekundär und Tertiär. Die meisten Buttons folgen den primären Stilen und ihr Typ ist nicht veränderbar.

Du kannst den Typ für Button-Blöcke, Header-Blöcke und Sende-Buttons in Formular-Blöcken ändern. Dies ist eine hervorragende Möglichkeit, die wichtigsten Handlungsaufforderungen für deine Besucher hervorzuheben oder zwischen verschiedenen Arten von Links zu unterscheiden.

Welche Buttons verwenden primäre Stile?

Zu den Buttons, die primäre Stile verwenden, gehören:

• „In den Warenkorb“-Buttons
• Auto-Layout-Buttons
• Header-Buttons, Button-Blöcke und Formular-Block-Buttons, die auf Primär eingestellt sind
• Kasse-Buttons
• Button „Alle akzeptieren“ auf dem Cookie-Banner
• Spenden-Block-Buttons
• Abomodell-Block-Buttons
• Newsletter-Block-Buttons

Welche Buttons verwenden sekundäre Stile?

Buttons, die sekundäre Stile verwenden, sind unter anderem:

• Header-Buttons, Button-Blocks und Formular-Block-Buttons auf Sekundär gestellt
• „Einkauf fortsetzen“-Button
• Button „Alle Ablehnen“ auf dem Cookie-Banner

Welche Buttons verwenden tertiäre Stile?

• Header-Buttons, Button-Blöcke und Formular-Block-Buttons auf Tertiär gesetzt
• Button „Cookies verwalten“ auf dem Cookie-Banner