Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Buttons gestalten

Ü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 an Buttons vornimmst, auf die meisten Buttons deiner Website aus.

Bevor Sie anfangen

Wie du die Schaltflächen deiner Website gestaltest, hängt von der Version deiner Website ab.

Siehe Buttons für die gesamte Website gestalten, um die folgenden Buttons zu bearbeiten:

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

Siehe Andere Buttons gestalten, um die folgenden Buttons zu bearbeiten:

  • Newsletter-Block-Buttons
  • Warenkorb-Symbol

Siehe Buttons für die gesamte Website gestalten, um die folgenden Buttons zu bearbeiten:

  • „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

Siehe Andere Buttons gestalten, um die folgenden Buttons zu bearbeiten:

  • Buttons für Cover-Seiten
  • Bild-Blöcke
  • Warenkorb-Symbol
  • Template-spezifische Banner- oder Navigations-Buttons

Um das Warenkorb-Symbol zu gestalten, besuchst du Anzeige des Warenkorb-Symbols. Wenn dein Warenkorb nicht angezeigt wird, lies unsere Tipps zur Fehlerbehebung.

Buttons für die gesamte Website gestalten

Wie du Buttons für die gesamte Website gestaltest, hängt von der Version deiner Website ab.

Um die Buttons deiner Website zu gestalten, öffne Website-Stil und klicke auf Buttons. In einigen Fällen wirken sich Anpassungen nicht auf alle Buttons deiner Website aus. Damit beispielsweise das Layout des Newsletter-Blocks beibehalten wird, hat die Anpassung für Padding keinen Einfluss auf Buttons von Newsletter-Blöcken.

Buttons folgen den globalen Farben und Schriftarten Ihrer Website.

So bearbeiten Sie das Erscheinungsbild der meisten Buttons auf Ihrer Website: 

  1. Wählen Sie im Seiten-Menü eine Seite aus, die Buttons verwendet.
  2. Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stil.
  3. Scrolle nach unten zu Buttons. Bei Button-Blöcken heißt der Abschnitt Button-Block (Klein), (Mittelgroß) oder (Groß).

Verwende folgende Anpassungen:

  • Button-Stil - Wähle Gefüllt ,Kontur oder Erhöht.
  • Button-Form – Wähle Quadrat ,Abgerundet oder Pille aus.
  • Button: Farbe – Ändern Sie die Hintergrundfarbe des Buttons
  • Button: Textfarbe – Ändern Sie die Farbe des Textes.
  • Button: Schriftart – Ändere die Schriftart. Die Textgröße kann für Formular-Block- und Newsletter-Block-Buttons nicht geändert werden.
Tipp: Beim Kontur-Stil wird der Text beim Mouseover automatisch entweder in Schwarz oder Weiß angezeigt, was die Button: Color erweitert.

Andere Buttons gestalten

Wie du andere Buttons auf deiner Website gestaltest, hängt von der Version deiner Website ab.

Button-Blöcke und Blöcke mit integrierten Buttons wie Newsletter-Blöcken haben zusätzliche Stil-Optionen:

  1. Klicken Sie für diese Seite auf Bearbeiten.
  2. Klicke auf den Block und dann auf das Bleistiftsymbol, um den Text und die Ausrichtung zu ändern. Du kannst auch die Größe von Button-Blöcken anpassen.

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

Den Button-Text ändern

Um Ihre eigenen Handlungsaufforderungen zu erstellen, können Sie den Standardtext für die meisten Buttons auf Ihrer Website ändern.

Formular-Block und Newsletter-Block

So bearbeitest du den „Senden“-Button in Formular- und Newsletter-Blöcken:

  1. Doppelklicke auf den Block, um den Block-Editor zu öffnen.
  2. Bearbeite im Tab Inhalt den Text im Feld Button-Text.

„Zum Warenkorb hinzufügen“-Button

So bearbeitest du den „Zum Warenkorb hinzufügen“-Button für ein Produkt:

  1. Doppelklicke auf das Produkt, um den Produkt-Editor zu öffnen.
  2. Klicke auf Benutzerdefinierter Button und aktiviere dann den Schalter Benutzerdefiniertes Button-Label.
  3. Bearbeite den Text im Feld Label.
  4. Klicken Sie auf Anwenden.

Button-Block

So bearbeitest du den Text in einem Button-Block:

  1. Klicke auf der Seite auf Bearbeiten und dann auf den Button, um den Text direkt zu bearbeiten.
  2. Alternativ kannst du den Block-Editor öffnen und das Feld Text bearbeiten.

Navigations-Buttons (nur Version 7.0)

In den Gruppen Brine und Bedford kann der Text des Kopfzeilen-Navigations-Buttons durch Aktualisieren des Navigationstitels bearbeitet werden.

Alternative Button-Farben

Button-Farben funktionieren je nach Version deiner Website unterschiedlich.

Je nach Button-Stil wird eine alternative Farbe auf Buttons angezeigt, wenn du den Mauszeiger darüber bewegst.

Um den Button-Stil festzulegen, bearbeite die Button-Stile für die gesamte Website und klicke dann auf Stil. Wähle im Drop-down-Menü Gefüllt oder Kontur aus.

  • Wenn du Gefüllt auswählst, bleibt die Hintergrundfarbe des Buttons gleich, wenn du den Mauszeiger darüber bewegst.
  • Wenn du Kontur auswählst, wird die alternative Hintergrundfarbe beim Mouseover angezeigt. Die alternative Farbe hängt von den Farbeinstellungen deiner Website ab.

Abhängig von deinem Template und der Art und Weise, wie deine Website eingerichtet ist, siehst du möglicherweise eine Alternativ- oder (Overlay)-Anpassung für deinen Button im Website-Stil-Abschnitt. Diese Optionen erscheinen für Buttons, die über Folgendes angezeigt werden:

  • Hintergrundbilder, wie z. B. Index-Abschnitt-Banner
  • Hintergrundbereiche mit vom Haupthintergrund getrennten Farben, wie z. B. Footer oder Pre-Footer.

Verwenden Sie diese Option, um die Buttons über diesen einzigartigen Hintergründen hervorzuheben. Abhängig vom Stil Ihres Buttons können Sie auch andere Alternativ- und (Overlay)-Anpassungen sehen.

War dieser Beitrag hilfreich?
42 von 408 fanden dies hilfreich