Ein Akkordeon mit Fragen und Antworten gestalten
Mit einem Akkordeon präsentierst du Fragen und Antworten platzsparend auf deiner Website. Besucherinnen und Besucher klappen einzelne Antworten auf, um die Information zu lesen, die sie interessiert. Das ist besonders für FAQ-Seiten oder Produktinformationen geeignet.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen.
So gehst du vor
Öffne den Bereich Allgemein (falls nicht bereits offen).
Trage unter Kleine Überschrift einen kurzen Text ein – das ist eine optionale Zeile über der Hauptüberschrift, die oft ein Thema ankündigt oder hervorhebt.
Trage unter Überschrift deine Hauptüberschrift ein. Du kannst hier auch Markdown-Formatierung nutzen, um Text hervorzuheben.
Trage unter Einleitung einen erklärenden Text ein, der über dem Akkordeon erscheint – zum Beispiel erklärst du dort, worum es auf dieser Sektion geht.
Aktiviere Erste Karte immer öffnen, wenn bereits beim Laden der Seite die erste Frage-Antwort-Karte aufgeklappt sein soll. Das hilft Besucherinnen und Besuchern, sofort die Struktur zu verstehen.
Öffne den Bereich Aktionen.
Klicke auf Karte hinzufügen, um die erste Frage-Antwort-Karte zu erstellen.
Wähle ein Symbol aus – klicke dazu auf das Symbolfeld links. Das Symbol erscheint neben der Frage im ausklappbaren Bereich der Website.
Trage unter Titel die Frage ein. Markdown-Formatierung ist möglich.
Trage unter Text die Antwort ein, die sichtbar wird, wenn die Karte aufgeklappt ist. Du kannst auch hier Markdown nutzen oder mehrzeiligen Text eingeben.
Wähle unter Animation einen Effekt aus, wenn die Antwort mit einer sanften Bewegung aufgehen soll – zum Beispiel „Fade" oder „SlideDown". Soll keine Animation ablaufen, lasse das Feld auf „Keine Animation".
Klicke erneut Karte hinzufügen, um eine zweite Frage-Antwort-Karte zu erstellen, und wiederhole die Schritte 8–11 für alle weiteren Fragen.
Ordne deine Karten in die gewünschte Reihenfolge – rechts oben neben jeder Karte findest du diese Schaltflächen:
- Nach oben verschieben (Pfeil nach oben): Die Karte rutscht eine Position weiter oben
- Nach unten verschieben (Pfeil nach unten): Die Karte rutscht eine Position weiter unten
- Kopieren: Die komplette Karte wird verdoppelt und direkt darunter eingefügt – praktisch, wenn zwei Fragen sehr ähnlich sind
- Entfernen (Papierkorb): Die Karte wird gelöscht
Klicke oben rechts auf Speichern, um alle Änderungen zu übernehmen.
Aufbau des Fensters
Das Fenster hat zwei Hauptbereiche:
Allgemein: Hier gibst du Kopftext und Einstellungen ein, die für das gesamte Akkordeon gelten. Die Kleine Überschrift ist optional; die Überschrift und Einleitung bilden den Rahmen über den Fragen.
Aktionen: In diesem Bereich verwaltest du die einzelnen Frage-Antwort-Karten. Jede Karte zeigt ihren Titel und hat rechts oben Schaltflächen zum Verschieben, Kopieren oder Löschen. Innerhalb jeder Karte wählst du ein Symbol und trägst die Frage, die Antwort und eine Animation ein.
Was danach passiert
Das Akkordeon wird auf deiner Website sichtbar. Besucherinnen und Besucher können jede Frage-Antwort-Karte einzeln aufklappen, um die Antwort zu lesen. Nur eine Karte ist gleichzeitig offen – öffnet man eine neue, schließt sich die vorherige automatisch.
Wenn du später noch Fragen hinzufügen oder ändern möchtest, öffnest du das Akkordeon erneut und fügst weitere Karten hinzu oder bearbeitest bestehende. Willst du das Akkordeon von Grund auf neu gestalten, löschst du alle Karten und beginnst neu.
Tipps und Hinweise
Reihenfolge überlegen: Sortiere deine Fragen so, dass die wichtigsten oder häufigsten oben stehen – das zieht die meiste Aufmerksamkeit.
Konsistente Symbole: Nutze für ein stimmiges Aussehen durchgehend Symbole, die thematisch passen – zum Beispiel nur Fragezeichen oder nur Glühbirnen.
Kurze Fragen formulieren: Fragen im Titel sollten prägnant sein; die Antwort kommt dann in den Text-Bereich.
Animation mit Bedacht: Eine Animation macht das Aufklappen eleganter, aber mehrere unterschiedliche Animationen innerhalb eines Akkordeons wirken unruhig – nutze lieber eine einheitliche Animation für alle Karten.