Wix Hilfe-Center
    Start
  1. Deine Website erstellen
  2. Editor X
  3. Elemente im Editor X hinzufügen
    4. Editor X: Buttons hinzufügen und anpassen

Editor X: Buttons hinzufügen und anpassen

9 Min. Lesezeit
Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren
Buttons sind eine großartige Möglichkeit, Besucher zu ermutigen, die gewünschten Aktionen auszuführen. Im Editor X kannst du bei Bedarf Buttons hinzufügen, die Text, ein Symbol oder beides anzeigen. Du hast die volle Kontrolle über das Design und Layout, damit du genau das Aussehen gestalten kannst, das du benötigst.

In diesem Artikel erfährst du, wie du deine Buttons optimal nutzen kannst:

Einen Button hinzufügen

Wenn du einen neuen Button hinzufügst, kannst du ein Design aus zwei Kategorien auswählen:
  • Standard-Buttons: Diese Buttons zeigen nur Text an und haben ein eher „minimalistisches“ Aussehen.
  • Design-Buttons: Diese Buttons können sowohl Text als auch Symbole anzeigen und bieten erweiterte Anpassungsoptionen (z. B. Bildhintergründe, Farbverläufe und mehr).

Um einen Button hinzuzufügen:

  1. Klicke oben links im Editor X auf Hinzufügen .
  2. Klicke auf Button.
  3. Scrolle durch die Designs und ziehe einen Standard-Button oder einen Design-Button auf deine Seite.
Du suchst nach neuen Ideen?
Sieh dir diese Anleitungen zum Thema Buttons an:

Standard-Buttons anpassen

Nachdem du einen Standard-Button zu deiner Website hinzugefügt hast, kannst du dessen Text ändern und auswählen, wohin er verlinkt. Sobald das eingerichtet ist, kannst du mit der Anpassung des Designs beginnen — wähle eine andere Füllfarbe, füge einen Schatten hinzu und passe andere Einstellungen wie Abstand und Textformatierung an.
Klicke unten, um zu erfahren, wie du Standard-Buttons anpasst:

Design-Buttons anpassen

Design-Buttons bieten unzählige Anpassungsoptionen, damit du sie bis ins letzte Detail gestalten kannst. Ändere den Text und das Symbol entsprechend der gewünschten Aktion, wähle, wie die beiden angeordnet werden sollen, lege einen Farbverlauf oder ein Bild als Hintergrund fest und vieles mehr.
Klicke unten, um zu erfahren, wie du Design-Buttons anpassen kannst:

Design-Glossar

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. Du kannst alle Seiten des Buttons zusammen oder jede Seite einzeln anpassen, 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ür Füllfarbe und wähle die Randfarbe aus und passe mit dem Schieberegler die Deckkraft 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 das Schloss-Symbol klickst.
Klicke auf das Pixelfeld in einer Ecke und gib die gewünschte Pixelanzahl ein.
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 zum Aktivieren auf den Schalter.
  • 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
Den Text auf deinem Button anzeigen oder ausblenden
Klicke auf den Schalter, um Text auf deinem Button anzuzeigen oder auszublenden.
Design
Eine Vorlage für deinen Buttontext auswählen
Wähle eine Schriftvorlage aus dem Aufklappmenü aus.
Schriftarten
Eine Schriftart für deinen Buttontext auswählen
Klicke auf das Aufklappmenü und wähle eine Schriftart aus.
Schriftgröße
Die Größe des Buttontexts ändern
Ziehe den Schieberegler nach links oder rechts, um die Schrift zu vergrößern oder verkleinern, oder gib einen Wert ein.
Textformatierung
Formatierungen auf deinen Text anwenden
  • Formatiere deinen Text mit den Optionen fett, kursiv, unterstrichen, durchgestrichen, Farben, Großschreibung und Textrichtung und -ausrichtung.
Zeichenabstand
Den Abstand zwischen den Textzeichen ändern
Ziehe den Schieberegler nach links oder rechts, um den Abstand zu ändern, oder gib einen Wert ein.
Schatten
Einen 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 für Schatten anpassen, um ihn zu gestalten.

Design-Optionen für Symbole

Option
Erläuterung
Verwendung
Symbol anzeigen
Ein Symbol auf deinem Button anzeigen oder ausblenden
Klicke auf den Schalter, um das Symbol auf deinem Button anzuzeigen oder auszublenden.
Größe
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
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 Gradzahl in das Textfeld ein.

War das hilfreich?

|

In diesem Artikel

  • Einen Button hinzufügen
  • Standard-Buttons anpassen
  • Design-Buttons anpassen
  • Design-Glossar
  • Formatierungsoptionen für Text
  • Design-Optionen für Symbole