Faq CSS-Vorlagen

Für Mobilgeräte optimierte FAQ-CSS-Vorlagen

Unter einer Software-Preistabelle mischt der FAQ-Bereich oft zweizeilige Antworten zu Upgrades mit mehrere Absätze langen Erläuterungen zu Rückerstattungen. FAQ-CSS-Vorlagen verleihen diesem Block ein einheitliches Erscheinungsbild – von jeder geschlossenen Frage bis hin zum Bereich, der sich darunter öffnet.

CSS-Stile an die Antwortlänge anpassen

Optisch reichen FAQ-Blöcke von dezent bis markant:

1. Minimale Zeilen, die durch feine Linien getrennt sind, mit lediglich der Frage und einem Icon.
2. Ein umrandetes Akkordeon, bei dem die geöffnete Frage einen leicht getönten Hintergrund erhält.
3. Separate Karten mit abgerundeten Ecken und weichem Schatten, in denen Antworten vollständig geöffnet bleiben können.

Minimale Zeilen eignen sich für einzeilige Antworten zu Tarifgrenzen. Anleitungen zur Rückerstattung lassen sich auf Karten mit Innenabstand besser lesen. Ein fetterer Schriftschnitt hebt eine Frage meist gut hervor, während überdimensionierte Titel die Antwort aus dem sichtbaren Bereich drängen. Eine zweispaltige Variante spart auf breiten Bildschirmen vertikalen Platz, quetscht eine lange Antwort jedoch in die halbe Breite.

In Nicepage können Sie über das FAQ-Element die Füllung, den Rahmen und den Eckenradius jedes Eintrags anpassen. Das Property Panel deckt zudem Schriftarten, Abstände und das Ausklapp-Icon ab. Für Antworten mit Bildern ist das Akkordeon-Element die Alternative mit vergleichbaren Einstellungen für die Reiter.

Geschlossene, mit dem Mauszeiger berührte und geöffnete Zeilen

Eine gut gestaltete FAQ-Zeile sieht in jedem dieser Zustände unterschiedlich aus:

1. Im Ruhezustand sollte eine geschlossene Frage anklickbar wirken, meist durch ein Pluszeichen oder ein Pfeilsymbol.
2. Beim Daraufzeigen markiert ein dezenter Farbwechsel die Zeile, und der Tastaturfokus erhält eine eigene, sichtbare Kontur.
3. Sobald sie geöffnet ist, sollten die Zeile und ihre Antwort unter einem gemeinsamen Hintergrund oder Rahmen als eine Einheit wahrgenommen werden.

Die Gestaltung verändert lediglich das Aussehen dieser Zustände; eine neue Icon-Farbe repariert keinen Bereich, der sich nicht ausklappen lässt. Wenn eine lange Frage umbrochen wird, halten Sie das Icon an der ersten Zeile ausgerichtet, da es sonst wie eine separate Schaltfläche wirkt. Zu enge Abstände zwischen den Zeilen können ebenfalls irreführend sein und den Eindruck erwecken, die offene Antwort gehöre zur nächsten Frage. Bei dunklen Designs kann grauer Antworttext auf der geöffneten Fläche untergehen.

Kleine Bildschirme erfordern zusätzliche Feinabstimmung

Auf einem Smartphone kann eine Frage, die auf dem Desktop in eine Zeile passt, auf drei Zeilen umbrechen. Das Icon benötigt weiterhin eigenen Raum, und jede Zeile sollte leicht anzutippen bleiben. Die responsiven Modi von Nicepage ermöglichen Anpassungen von Schriftgröße und Außenabständen für verschiedene Geräteansichten. Benutzerdefinierter CSS-Code deckt seltenere Extras ab, wie etwa eine Fokuskontur in Ihrer Markenfarbe. Bevor Sie sich für eine Vorlage entscheiden, laden Sie Ihre Abrechnungsfragen und öffnen Sie die längste Rückerstattungsantwort in der Smartphone-Breite. Wenn ein Leser die geöffnete Zeile auf einen Blick erfassen kann, ist das Design einsatzbereit.