Wix Hilfe-Center
    Start
  1. Deine Website erstellen
  2. Editor
  3. Elemente hinzufügen und anpassen
  4. Buttons
    5. Wix Editor: Das Design Deiner Buttons Anpassen

Wix Editor: Das Design Deiner Buttons Anpassen

9 Min. Lesezeit
Erstelle ansprechende Buttons, die zu deiner Website passen und deine Besucher animieren, mit der Website zu interagieren.
Klicke auf deinem Button auf das Symbol für Design , um mit der Gestaltung zu beginnen.
In diesem Artikel erfährst du mehr über folgende Themen:

Den Buttonstatus anpassen

Du kannst den Status jedes Buttons auf deiner Website separat anpassen. Auf diese Weise kannst du beeindruckende Effekte erzeugen, die deine Besucher beim Navigieren auf deiner Website sehen.
Du kannst beispielsweise eine Farbe für die normale Ansicht wählen, eine andere Farbe für die Mouseover-Ansicht und eine Farbe, wenn der Button angeklickt wird. Dadurch wird der Button hervorgehoben und deine Besucher sehen, dass sie mit ihm interagieren können.
Wichtig:
Mouseover-Effekte (Tippen) auf Symbolbuttons werden derzeit nicht auf iOS unterstützt. Das heißt, dass Besucher, die deine Website auf einem iOS-Gerät anzeigen, den Mouseover-Status nicht sehen, wenn sie auf den Button tippen.

Deinen Button gestalten

Es stehen eine Vielzahl von Anpassungsoptionen zur Verfügung. Je nach Buttontyp kannst du den Hintergrund, den Text und das Symbol anpassen. Wähle die Farben, Füllungen, Ecken, Schatten und vieles mehr.

Was möchtest du machen?

Erfahre mehr über das Anpassen anderer Arten von Buttons:

Design-Glossar

Designoptionen für Buttons

Option
Erläuterung
Verwendung
Hintergrundfüllung
Füge verschiedene Füllungen wie Farben, Bilder, Muster und Farbverläufe hinzu, um einzigartige und farbenfrohe Effekte zu deinem Button hinzuzufügen. 
  • Klicke auf das Farbfeld für jede Schicht und wähle die Füllung aus; ziehe dann den Schieberegler, um die Deckkraft der Füllschicht zu ändern.
  • Ordne die Füllschichen neu an, indem du sie in der Liste nach oben und unten ziehst. 
Ränder
Passe den Rand des Buttons an, um ihn hervorzuheben. Passe alle Seiten des Buttons zusammen oder jede Seite separat an, indem du auf das Symbol zum Sperren oder Entsperren klickst.
  • Klicke auf das Feld Breite und gib die Pixelbreite für den Buttonrand ein oder passe ihn mithilfe des Schiebereglers an.
  • Klicke auf das Aufklappmenü Design und wähle das Randdesign aus.
  • Klicke auf das Feld Füllfarbe, um die Randfarbe auszuwählen, und passe dann die Deckkraft mit dem Schieberegler an.
Ecken
Ändere die Ecken deines Buttons, um sie runder oder eckiger zu gestalten. Ändere die Größe aller Ecken zusammen oder passe jede Ecke separat an, indem du auf die Symbole zum Sperren oder Entsperren klickst.
Klicke auf das Pixelfeld einer Ecke und gib die Anzahl der Pixel ein, die angewendet werden sollen.
Schatten
Füge Schattenlagen zu deinem Button hinzu und passe die Farbe, Größe und vieles mehr an.
  • Klicke auf das Farbfeld für jede Schattenlage und passe die Farbe, den Winkel, die Art, die Größe, den Winkel und das Weichzeichnen an. Ziehe dann den Schieberegler, um die Deckkraft des Schattens zu ändern.
  • Ordne die Schattenlagen neu an, indem du die in der Liste nach oben und unten ziehst. 
Wenn du einen Upload-Button verwendest:
  • Klicke auf den Schalter, um Schatten zu aktivieren.
  • Passe den Winkel, die Entfernung, die Größe und das Weichzeichnen mit dem Schieberegler an. Verwende dann den Schieberegler und das Farbfeld, um Deckkraft und Farbe zu bearbeiten.
Layout

Ändere das Layout deines Buttons.
  • Klicke auf das Aufklappmenü Wähle aus, was du anzeigen willst und wähle, ob der Text, das Symbol oder beides angezeigt werden sollen.
  • Wähle die Ausrichtung, die Position und den Abstand des Texts und/oder Symbols (falls zutreffend).
  • Lege den Abstand um den Text und/oder das Symbol fest.

Formatierungsoptionen für Text

Option
Erläuterung
Verwendung
Text anzeigen
Du kannst Text auf deinem Button anzeigen oder ausblenden.
Klicke auf den Schalter, um Text auf deinem Button anzuzeigen oder auszublenden.
Schriftvorlage
Wähle die Vorlage für deinen Buttontext aus.
Wähle eine Schriftvorlage aus dem Aufklappmenü aus.
Schriftarten
Wähle die Schriftart für deinen Buttontext.
Klicke auf das Aufklappmenü und wähle eine Schriftart aus.
Fontgröße
Ändere die Größe des Texts auf deinem Button.
Ziehe den Schieberegler nach links oder rechts, um die Schriftgröße zu ändern, oder gib einen Wert ein.
Textformatierung
Du kannst deinen Text formatieren. 
  • Formatiere deinen Text mit den Optionen fett, kursiv, unterstrichen, durchgestrichen, Farben, Großschreibung und Textrichtung und -ausrichtung.
Zeichenabstand
Du kannst den Abstand zwischen den Textzeichen ändern.
Ziehe den Schieberegler nach links oder rechts, um den Abstand zu ändern, oder gib einen Wert ein.
Schatten
Du kannst Schatten für deinen Text erzeugen. Es sind sogar mehrere Schatten möglich.
Klicke auf Schatten hinzufügen, um einen neuen Schatten hinzuzufügen. Klicke auf das Symbol Schatten anpassen, um ihn zu gestalten.

Designoptionen für Symbole

Option
Erläuterung
Verwendung
Symbol anzeigen
Du kannst ein Symbol auf deinem Button anzeigen oder ausblenden.
Klicke auf den Schalter, um das Symbol auf deinem Button anzuzeigen oder auszublenden.
Größe
Du kannst die Größe deines Symbols ändern.
Ziehe den Schieberegler nach links oder rechts, um die Größe deines Symbols zu ändern, oder gib einen Wert ein.
Farbe
Du kannst die Farbe des Symbols ändern.
Klicke auf das Farbfeld und wähle eine Farbe aus.
Drehen
Die Drehung des Symbols anpassen
Ziehe den Griff, um die Drehung des Symbols anzupassen, oder gib die Grad in das Textfeld ein.

War das hilfreich?

|

In diesem Artikel

  • Den Buttonstatus anpassen
  • Deinen Button gestalten
  • Design-Glossar
  • Designoptionen für Buttons
  • Formatierungsoptionen für Text
  • Designoptionen für Symbole