Passe die Buttons deiner Website an deine Marke an.

Über Website-Stil kannst du das Erscheinungsbild der Buttons auf deiner Website bearbeiten. Du kannst die Farbe, die Form und den Textstil ändern. So kannst du Handlungsaufrufe (CTAs) an das optische Erscheinungsbild deiner Website anpassen. 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.

Ein Video anschauen

In dieser Anleitung werden hauptsächlich die Optionen zur Button-Gestaltung in Version 7.1 behandelt. Informationen zur Button-Gestaltung in Version 7.0 findest du unter Buttons in Version 7.0 gestalten.

Button-Form und -Schriftarten

Beim Gestalten von Buttons empfehlen wir, eine Seite mit einem Button zu öffnen, damit du die Änderungen in der Website-Vorschau sofort überprüfen kannst. So gestaltest du Buttons für die gesamte Website:

1. Öffne das Menü Website-Stile und klicke dann neben „Buttons“ auf ＞.
2. Klicke auf die Button-Art, die du gestalten möchtest: Primär, Sekundär oder Tertiär. Mehr dazu erfährst du unter Button-Arten.

Du kannst die folgenden Anpassungen für jede Art festlegen:

• Text – Die Schriftart und die Schriftart-Stile für Buttons in dieser Stufe.
• Form – Die Form und ob der Button eine Farbfüllung (Füllen) oder nur eine Kontur (Nicht füllen) haben soll.
• Kontur – Die Kontur-Stärke für die Buttons mit der Option Nicht füllen. Bei Buttons mit der Option Füllen wird durch Ändern des Kontur-Schiebereglers das Padding außerhalb des Buttons geändert.
• Horizontales Padding – Das Padding links und rechts vom Button-Text.
• Vertikales Padding – Das Padding über und unter dem Button-Text. Diese Anpassung 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 vertikales Padding hinzuzufügen.

Änderungen werden automatisch gespeichert. Um die Einstellungen einer Art auf die anderen Arten anzuwenden, klicke auf Auf alle Button-Arten anwenden. Um die Stile einer Art auf die Standardeinstellungen zurückzusetzen, klicke auf Button-Stile zurücksetzen.

Denke daran, dass du zwar allgemeine Form- und Größenstile festlegen kannst, aber alle Buttons ihre Größe und Form ändern, um sich dem Text anzupassen. Wenn du einen Button mit viel Text hast, kann dieser anders als erwartet aussehen. Um die größtmögliche Kontrolle über das Aussehen deiner Buttons zu gewährleisten, empfehlen wir, den Button-Text unter 25 Zeichen zu halten.

Button: Farben

Um sicherzustellen, dass deine Buttons zum Design deiner Website passen, folgen die Buttons den globalen Farben deiner Website.

• Lege den Button-Hintergrund und die Textfarben der Buttons im Menü Farben fest, indem du bei deinem Design auf das Bleistiftsymbol klickst.
• Jede Button-Art hat ihre eigenen Anpassungen für Hintergrund- und Textfarben in jedem Farbschema. Blöcke haben ihre eigenen Button-Farbanpassungen.
• Wenn die Buttons auf Füllen eingestellt sind, füllt die Button-Hintergrundfarbe den Button aus. Wenn Buttons auf Nicht füllen eingestellt sind, wird die Button-Hintergrundfarbe auf die Kontur und den Text angewendet und füllt den Button beim Mouseover aus.
• Wenn du die Form Unterstreichen verwendest, lege die Textfarbe des Buttons mit der Anpassung „Button: Hintergrund“ fest. Lege die Button-Hintergrundfarbe mit der Anpassung „Button: Text“ fest.
• Du kannst andere Button-Farben in anderen Abschnitten verwenden, indem du das Farbschema für Abschnitte mit Buttons änderst.

Näheres erfährst du hier: Farben ändern.

Button-Arten

Das Buttons-Menü unterteilt Button-Stile in drei Arten: Primär, Sekundär und Tertiär. Abgesehen von Header-Buttons, Button-Blöcken und „Senden-Buttons“ für Formular-Blöcke kannst du den Typ eines Buttons nicht ändern. Die meisten Buttons folgen den primären Stil-Einstellungen, aber du kannst die Stile von Button-Blöcken auf deiner gesamten Website mit sekundären und tertiären Einstellungen variieren.  

Auf diese Weise kannst du die wichtigsten Handlungsaufforderungen für deine Besucher hervorheben oder zwischen verschiedenen Arten von Links unterscheiden. Anhand der folgenden Tabelle erfährst du, welche Arten für welche Buttons gelten.

In einigen Fällen wirken sich gewisse Anpassungen nicht auf bestimmte 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.

Unter Button-Blöcke erfährst du, wie du die Art eines Button-Blocks festlegen kannst.

Buttons gestalten in Version 7.0

Wenn deine Website Version 7.0 nutzt, verwende diese Anpassungen für die gesamte Website, um das Erscheinungsbild der meisten Buttons auf deiner Website zu bearbeiten:

1. Gehe zu einer Seite, die Buttons verwendet.
2. Gehe zurück zum Website-Menü und klicke dort auf Design und dann auf Website-Stile.
3. Scrolle nach unten zu Buttons. Für Button-Blöcke heißt der Abschnitt Button-Block (klein), (mittelgroß) oder (groß).

Verwende folgende Anpassungen:

• Button-Stil – Wähle Gefüllt ,Kontur oder Erhöht. Beim Kontur-Stil wird der Text beim Mouseover automatisch entweder in Schwarz oder Weiß angezeigt, was die Button-Farbe erweitert.
• Button-Form – Wähle Quadrat ,Abgerundet oder Pille aus.
• Button: Farbe – Änderung der Hintergrundfarbe des Buttons
• Button: Textfarbe – Änderung der Farbe des Textes.
• Button: Schriftart – Ändere die Schriftart. Es ist nicht möglich, die Textgröße für Formular-Block- und Newsletter-Block-Buttons zu ändern.
• Abwechselnd oder (Overlay) – In einigen Templates kannst du abwechselnde Farben festlegen, damit Buttons auf Hintergrundbildern oder -farben auffallen.

Anpassungen für die gesamte Website wirken sich auf die folgenden Buttons aus:

• „Zum Warenkorb hinzufügen“-Buttons
• Button-Blöcke
• Spenden-Block-Buttons
• „Senden“-Buttons für Formular-Blöcke
• Newsletter-Block-Buttons
• Buttons von Mitgliederregistrierungs-Blöcken

Es gibt einige Arten von Buttons, die unterschiedliche Stil-Optionen haben:

• Warenkorb-Buttons haben in bestimmten Templates separate Optionen.
• Cover-Seiten-Buttons haben separate Button-Optionen.
• Bild-Blöcke haben separate Button-Optionen.
• Die Banner-Buttons der Bedford-Gruppe werden im Banner-Abschnitt gestaltet.
• Der Header-Navigations-Button der Bedford-Gruppe wird in der Website-Navigation gestaltet.
• Die Header-Navigations-Buttons der Brine-Gruppe werden in Header: Hauptnavigation und Header: Sekundärnavigation eingerichtet.