Mit dem Button-Element kannst du einen interaktiven Button auf deiner Website hinzufügen, der über einen ansprechenden Hover-Effekt verfügt. Zusätzlich leitet er deine Besucher nach einem Klick zu einem festgelegten Link-Ziel weiter.
Button zu deiner Webseite hinzufügen #
Das Button Element findest du im Website-Builder in der linken Toolbar. Ziehe einfach das Button-Symbol und platziere es an der gewünschten Stelle auf Deiner Webseite.
Button Text anpassen #
Um den Text auf einem Button zu ändern, reicht ein Doppelklick auf das Element. Nun bist du im Bearbeitungsfenster und kannst den Text des Buttons wie bei jedem anderen Element bearbeiten.
Button Design anpassen #
Um den Stil deines Buttons zu ändern, klicke auf das Element und bearbeite das Design im „normalen“ Zustand im Settings Panel. Lege hier Farben, Ränder, Transparenz, Schatten und weitere Eigenschaften fest.
Wechsle anschließend in den Zustand „Hover“. Die Änderungen, die du hier vornimmst, sind nur sichtbar, wenn der Benutzer mit der Maus über den Button fährt.
Button Einstellungen #
Um den Button zu bearbeiten, klicke auf ihn und sieh dir die verfügbaren Einstellungen in deinem Side Panel.
Click action #
Über „Click-Aktion (Link)“ kannst Du festlegen, was passieren soll, wenn ein Benutzer auf den Button klickt:
- None (default) – nichts passiert.
- Element on a subpage – website scrolled zu einem spezifischen Element auf einer Unterseite
- Subpage – öffnet eine Unterseite
- Article – öffnet einen Artikel
- Site address – öffnet eine Website unter einer spezifischen URL
- Perform interaction – zeigt oder versteckt Elemente
- More:
- Open URL address – öffnet eine Website mit einer spezifischen URL
- Call phone number – startet einen Anruf über die standardmäßige Telefon-Anwendung auf dem Endgerät
- Send e-mail – öffnet die standardmäßige Mail-Anwendung wie Mailbox (Windows 11) auf dem Computer des Benutzers oder Gmail auf dem mobilen Telefon des Benutzers und trägt automatisch die E-Mail-Adresse deiner Wahl ein.
- Open file from media library – öffnet eine Datei aus der Media Library
Button State #
Der Button State ermöglicht die Anpassung des Stils eines Buttons je nach dessen Zustand. So kannst du unterschiedliche Farben, Rahmen und sogar Texte für einen Button im normalen sowie im Hover-Zustand festlegen.
Um das Erscheinungsbild eines Buttons in einem anderen Zustand zu bearbeiten, klicke darauf und ändere im Settings Panel den Zustand von „normal“ zu „hover“.
Solltest Du das Erscheinungsbild oder den Text deines Buttons ändern wollen, wähle bitte die Option „different text on hover“.
Danach kannst du deinen Text im „Hover“-Zustand eingeben und visuell anpassen, beispielsweise durch eine Änderung des Schriftstils oder der Farbe:
