Grundeinstellungen

Text

Kernpunkt:
Hier legen Sie den sichtbaren Knopf-Text fest. Der Text bestimmt, ob Nutzer die nächste Aktion sofort verstehen.

Auswirkung:
Schon kleine Formulierungsänderungen beeinflussen Verständnis und Klickrate.

Praxis-Tipp:
Kurz und konkret formulieren (ca. 2-5 Wörter) und möglichst ein Verb verwenden, z. B. „Jetzt starten" oder „Mehr erfahren".

Einstellungen

• Text: Sichtbarer Knopf-Text. Standardwert: BUTTON STYLE.

Ein anderer Text für Hover ist möglich (in Verbindung mit Text-Animation). Der Hover-Text wird im Panel Textanimation gesetzt.

Tag

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kernpunkt:
Definiert den ausgegebenen HTML-Tag und seine Attribute.

Auswirkung:
Diese Entscheidung beeinflusst Semantik, SEO, Accessibility und Tracking.

Praxis-Tipp:
Für Navigation Link (<a>), für Aktionen im Formular oder via JavaScript Knopf (<button>).

Einstellungen

• HTML-Tag: Link (<a>) oder Knopf (<button>). Standard: Link.

Für interne Seitennavigation ist Link in der Regel die richtige Wahl, weil Crawler <a>-Links folgen. Für reine Aktionen ohne Navigation ist Knopf semantisch korrekt.

Bei Auswahl von Link

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

• Link URL: Ziel-URL des Links.
• Link Target: Gleiches Tab (_self) oder neues Tab (_blank).
• rel Attribute: Zusätze wie noopener, noreferrer, nofollow.
• Link Title: Zusätzliche Beschreibung für Semantik und Accessibility.

Bei target="_blank" wird rel="noopener" automatisch ergänzt (Sicherheitsmaßnahme). Wenn externe Links kein SEO-Signal vererben sollen, setzen Sie zusätzlich nofollow.

Bei Auswahl von Knopf

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

• Knopf Type: button / submit / reset.

submit sendet ein Formular ab. Für nicht-formularbasierte Aktionen ist button empfohlen. reset leert Eingaben und sollte nur gezielt eingesetzt werden.

Accessibility-Verhalten:
Wenn die Link-URL leer ist oder # verwendet wird, wird automatisch role="button" gesetzt, damit Screenreader das Element korrekt als Knopf ausgeben.

Hover-Text-Fallback:
Wenn kein separater Hover-Text gesetzt ist, wird der normale Text auch im Hover-Zustand verwendet.

Gemeinsame Optionen

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

• aria-label: Zusätzliche Screenreader-Beschriftung.
• Tracking ID: Kennung für GTM/Analytics-Ereignisse.
• Knopf Location: Verwaltungslabel für Platzierung/A-B-Tests.
• ID: Eindeutige Element-ID für CSS/JS.

Tracking ID und Knopf Location werden als data-*-Attribute ausgegeben. ID muss pro Seite eindeutig sein; doppelte IDs führen häufig zu CSS-/JS-Konflikten.