Schaltfläche (Call-to-Action)
Die Schaltfläche ist ein wichtiges Element, um Besucher zu gezielten Aktionen zu führen. Sie kann auf jede beliebige Seite oder jeden Bereich deiner Website verlinken und ist in verschiedenen Designs verfügbar.
Voraussetzungen
- Keine besonderen Voraussetzungen
- Funktioniert auf allen Seiten und in allen Bereichen
Aufbau der Schaltfläche
Die Schaltfläche besteht aus wenigen, aber wichtigen Elementen:
Schaltflächen-Text:
- Der Text, der auf der Schaltfläche angezeigt wird
- Sollte eine klare Handlungsaufforderung enthalten
- Beispiele: "Jetzt kontaktieren", "Angebot anfordern", "Mehr erfahren"
Link-Ziel:
- Die URL oder Seite, zu der die Schaltfläche führt
- Kann interne Seiten oder externe Links sein
- Unterstützt auch E-Mail-Links (mailto:) und Telefon-Links ()
Design-Stil:
- Verschiedene vordefinierte Designs verfügbar
- Passt sich automatisch an dein Website-Theme an
- Konsistente Darstellung mit anderen Website-Elementen
So richtest du die Schaltfläche ein
Block hinzufügen:
- Klicke auf "Block hinzufügen" in deinem Editor
- Wähle "Schaltfläche" aus der Kategorie "Text"
- Der Block wird an der gewünschten Stelle eingefügt
Grundeinstellungen:
- Schaltflächen-Text eingeben: Schreibe eine aussagekräftige Handlungsaufforderung
- Link-Ziel festlegen: Gib die URL ein, zu der verlinkt werden soll
- Design wählen: Wähle aus den verfügbaren Schaltflächen-Stilen
- Position bestimmen: Entscheide, ob die Schaltfläche zentriert werden soll
Link-Optionen:
Interne Links:
- Verlinke zu anderen Seiten deiner Website
- Beispiel: "/kontakt", "/angebot", "/ueber-uns"
- Relative URLs sind meist ausreichend
Externe Links:
- Verlinke zu anderen Websites
- Beispiel: "https://www.beispiel.de"
- Vollständige URL mit https:// verwenden
Spezielle Links:
- E-Mail: "mailto:info@deinefirma.de"
- Telefon: "tel:+43123456789"
- WhatsApp: "https://wa.me/43123456789"
Design-Optionen:
Je nach verfügbaren Stilen kannst du wählen zwischen:
- Primär: Hauptfarbe deiner Website, auffällig
- Sekundär: Dezentere Farbe, weniger dominant
- Outline: Nur Rahmen, transparenter Hintergrund
- Text: Wie ein Link, aber als Schaltfläche formatiert
Positionierung
Zentrierte Darstellung:
- Schaltfläche wird in der Mitte des verfügbaren Platzes angezeigt
- Ideal für Call-to-Action-Bereiche
- Zieht die Aufmerksamkeit auf sich
Linksbündige Darstellung:
- Schaltfläche wird am linken Rand ausgerichtet
- Fügt sich natürlich in den Textfluss ein
- Weniger dominant, aber immer noch gut sichtbar
Verwendungsszenarien
Kontakt-Aufforderungen:
- Text: "Jetzt Beratung anfordern"
- Link: "/kontakt" oder "mailto:beratung@firma.de"
- Primäres Design für maximale Aufmerksamkeit
Produktinformationen:
- Text: "Mehr über unsere Leistungen"
- Link: "/leistungen" oder "/produkte"
- Sekundäres Design, um nicht zu dominant zu wirken
Downloads:
- Text: "Katalog herunterladen"
- Link: "/downloads/katalog.pdf"
- Outline-Design für dezente Darstellung
Externe Verlinkungen:
- Text: "Bewertungen auf Google lesen"
- Link: "https://maps.google.com/..."
- Öffnet in neuem Tab (automatisch bei externen Links)
Barrierefreiheit
Die Schaltfläche ist vollständig barrierefrei:
- Tastatur-Navigation: Mit Tab-Taste ansteuerbar
- Screenreader: Korrekte Beschriftung und Rolle
- Kontraste: Ausreichende Farbkontraste für gute Lesbarkeit
- Touch-Optimierung: Ausreichend große Zielfläche auf mobilen Geräten
Best Practices für Schaltflächen-Texte
Handlungsaufforderung verwenden:
- ✅ "Jetzt kontaktieren", "Angebot anfordern", "Mehr erfahren"
- ❌ "Hier", "Klicken", "Link"
Kurz und prägnant:
- ✅ "Beratung buchen" (2 Wörter)
- ❌ "Vereinbaren Sie jetzt einen Termin für eine kostenlose Beratung" (10 Wörter)
Nutzen kommunizieren:
- ✅ "Kostenloses Angebot erhalten"
- ❌ "Formular absenden"
Dringlichkeit erzeugen:
- ✅ "Jetzt 20% sparen", "Heute noch anmelden"
- ❌ "Irgendwann mal anfragen"
Tipps für optimale Platzierung
Sichtbare Bereiche:
- Platziere wichtige Schaltflächen "above the fold" (ohne Scrollen sichtbar)
- Am Ende von Textabschnitten
- In der Nähe von überzeugenden Argumenten
Logische Reihenfolge:
- Primäre Aktion (z.B. "Kaufen") prominenter als sekundäre (z.B. "Mehr Info")
- Nicht zu viele Schaltflächen auf einer Seite
- Klare Hierarchie der Wichtigkeit
Mobile Optimierung:
- Ausreichend große Zielflächen (mindestens 44px)
- Genügend Abstand zu anderen anklickbaren Elementen
- Thumb-freundliche Positionierung
Tipps und Hinweise
- Verwende aussagekräftige, handlungsorientierte Texte
- Teste verschiedene Formulierungen und messe die Klickrate
- Achte auf Konsistenz im Design mit anderen Website-Elementen
- Externe Links öffnen automatisch in einem neuen Tab
- Die Schaltfläche passt sich automatisch an dein Website-Theme an
- Übertreibe es nicht - zu viele Schaltflächen verwirren Besucher