Studio Editor: Design-Buttons hinzufügen und anpassen
6 min
In diesem Artikel
- Einen Button hinzufügen
- Einen Button einrichten
- Einen Design-Button anpassen
Buttons sind eine tolle Möglichkeit, Besucher zum Interagieren mit einer Website zu bewegen. Im Studio Editor kannst du Buttons hinzufügen, die Text, ein Symbol oder beides anzeigen. Du hast die volle Kontrolle über das Design und Layout, um genau den Look zu erstellen, den du brauchst.
Wichtig:
Dieser Artikel bezieht sich auf das neue Button-Element im Studio Editor. Für ein Anleitung zum Hinzufügen und Bearbeiten des vorherigen Button-Elements, klicke hier.
Woher weiß ich, welchen Button ich habe?
Einen Button hinzufügen
Wähle, ob du einen Design-Button (statisch) oder einen animierten Button hinzufügen möchtest. Sie haben alle die gleichen Designoptionen, und du kannst einen Button beliebig oft von Design zu animiert und umgekehrt wechseln.
Um einen Button hinzuzufügen:
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen
. - Klicke auf Button.
- Klicke oder ziehe eine Option unter Design-Buttons / Animierte Buttons, um sie zur Seite hinzuzufügen.
Brauchst du Inspiration?
Sieh dir diese Button-Anleitungen an:
Einen Button einrichten
Richte nach dem Hinzufügen eines Buttons dessen Aktion ein und wähle aus, was angezeigt werden soll (Text, ein Symbol oder beides). Je nachdem, was der Button anzeigt, kannst du auch den Text und das Symbol festlegen.
Um einen Button einzurichten:
- Wähle den Button in deinem Editor aus.
- Klicke auf Einstellungen.
- Richte den Button mit den Optionen ein:
- Wähle aus, was angezeigt wird: Wähle eine Option aus und ändere die Einstellungen:
- Text und Symbol: Verwende das Feld Text, um zu ändern, was darauf steht, und klicke auf das Symbol für Ersetzen
, um ein anderes Symbol auszuwählen. - Nur Text: Bearbeite den Buttontext unter Text.
- Nur Symbol: Klicke auf das Symbol für Ersetzen , um ein anderes Symbol für den Button auszuwählen.
- Text und Symbol: Verwende das Feld Text, um zu ändern, was darauf steht, und klicke auf das Symbol für Ersetzen
- Links zu: Klicke auf das Feld und richte den Link im Panel ein:
- Wähle links einen Linktyp aus.
- Füge die relevanten Linkinformationen hinzu.
- Klicke auf Fertig.
- Barrierefreier Name: Beschreibe die Funktion des Buttons für Besucher, die assistierende Technologien verwenden.
- Wähle aus, was angezeigt wird: Wähle eine Option aus und ändere die Einstellungen:
Hinweis:
Wenn du unter Wähle aus, was angezeigt wird Nichts auswählst, ist der Button leer. Du kannst trotzdem einen barrierefreien Namen hinzufügen und ihn mit dem gewünschten Ziel verknüpfen.
Einen Design-Button anpassen
Design-Buttons bieten unzählige Anpassungsoptionen, damit du sie bis ins kleinste Detail gestalten kannst. Ändere den Text und das Symbol, um die gewünschte Aktion widerzuspiegeln, wähle aus, wie die beiden angeordnet werden sollen, lege einen Farbverlauf oder ein Bild als Hintergrund fest und vieles mehr.
Um einen Design-Button anzupassen:
- Wähle den entsprechenden Button aus.
- Wähle aus, was du anpassen möchtest:
Symbolanimationen hinzufügen
Den Button gestalten
.
klicken, um sie separat anzupassen. 
klicken, um sie separat anzupassen.Das Layout des Buttons anpassen
.
auswählst.