Schaltflächen-Darstellung
Die Schaltflächen-Darstellung erstellt anklickbare Schaltflächen auf deiner Website. Sie können zu anderen Seiten führen, Aktionen auslösen oder externe Links öffnen. Du kannst das Aussehen, die Farbe und das Verhalten der Schaltflächen individuell anpassen.
Voraussetzungen
- Du arbeitest im Website-Editor von weboffice
- Du hast einen Block hinzugefügt, der Schaltflächen unterstützt
Aufbau einer Schaltfläche
Link-Ziel: Jede Schaltfläche hat ein Navigationsziel, zu dem sie führt. Das kann eine andere Seite, ein Anker auf derselben Seite oder ein externer Link sein.
Text-Inhalt: Der Text, der auf der Schaltfläche angezeigt wird. Dieser sollte klar beschreiben, was passiert, wenn man klickt.
Symbol (optional): Du kannst ein Symbol vor dem Text anzeigen lassen, um die Schaltfläche visuell zu verstärken.
Styling: Farbe, Größe und Aussehen der Schaltfläche werden über die Button-Style-Einstellungen festgelegt.
Ziel-Verhalten: Die Schaltfläche kann entweder im gleichen Fenster öffnen oder ein neues Fenster/Tab öffnen.
So arbeitest du mit Schaltflächen
Text eingeben: Gib einen aussagekräftigen Text für deine Schaltfläche ein, zum Beispiel "Jetzt kaufen", "Mehr erfahren" oder "Kontakt aufnehmen".
Ziel festlegen: Trage die URL oder den Seitenpfad ein, zu dem die Schaltfläche führen soll. Für interne Seiten reicht der Pfad (z.B. "/kontakt"), für externe Seiten die vollständige URL.
Stil wählen: Wähle aus verschiedenen Schaltflächen-Stilen:
- Primäre Schaltfläche (auffällig, für Hauptaktionen)
- Sekundäre Schaltfläche (dezenter, für Nebenaktionen)
- Link-Stil (wie ein normaler Link)
- Verschiedene Farben je nach Zweck
Symbol hinzufügen: Falls gewünscht, wähle ein passendes Symbol aus der Icon-Bibliothek aus.
Neues Fenster: Aktiviere diese Option, wenn externe Links in einem neuen Tab geöffnet werden sollen.
Tipps und Hinweise
Klare Beschriftung: Verwende eindeutige Texte, die sofort klar machen, was passiert ("Newsletter abonnieren" statt nur "OK").
Konsistente Farben: Verwende ähnliche Schaltflächen-Stile für ähnliche Aktionen auf deiner gesamten Website.
Externe Links: Für externe Links wird automatisch das "noopener noreferrer" Attribut gesetzt, um die Sicherheit zu erhöhen.
Barrierefreiheit: Die Schaltflächen sind automatisch tastaturzugänglich und screenreader-freundlich.
Mobile Optimierung: Schaltflächen werden automatisch für Touch-Bedienung auf mobilen Geräten optimiert.