FAQ - hier finden Sie Antworten auf häufig gestellte Fragen
FAQ-Pseudo-Accordion - vor allem für die sparsamen Nutzer der Go-Version gedacht.
>> Ganz nach unten scrollen, um die Anleitung für Nutzer von WebSite X5 zu sehen
FAQ für ABC
Links ist der Text verlinkt und rechts das Dreieck.
Hinweis: Dies ist ein Pseudo-Accordion-FAQ, es klappt nicht auf, sondern scrollt beim Klick auf das Dreieck nach unten!
▼ Frage 2: Sed diam nonumy eirmod tempor invidunt ut labore erat?
▼ Frage 3: Diam nonumy eirmod tempor invidunt ut labore et dolore magna?
▼ Frage 4: Lorem ipsum dolor sit amet, consetetur sadipscing elitr?
▼ Frage 5: Lorem ipsum dolor sit amet, consetetur sadipscing elitr?
▼ Frage 6: Lorem ipsum dolor sit amet, consetetur sadipscing elitr?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
❌ Antwort auf Frage 2: Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
❌ Antwort zu Frage 4: Lorem ipsum dolor sit amet, consetetur sadipscing elitr?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
❌ Antwort zu Frage 5: Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
❌ Antwort zu Frage 6: Diam nonumy eirmod tempor invidunt ut labore et dolore magna?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Anleitung
Nachbau des kostenpflichtigen Objekts "Accordeon FAQ & Text" mit einfachen Mitteln wie Text-Objekten, Ankern und Ankerlinks.
Auf den üblichen Auf- und Zuklapp-Effekt habe ich hier verzichtet. Dafür könnte man einen der vielen kostenlosen HTML- und CSS-Codes (evtl. mit Javascript) aus dem Internet in einem HTML-Objekt verwenden. Vielleicht teste ich diese Variante mal später und erstelle dazu auch eine Testseite mit Anleitung.
1) Im Raster bei "4 Seiten" gibt es ganz oben ein Text-Objekt mit Informationen, das zugleich als Abstand zu den folgenden Fragen dient, damit die ersten Fragen nicht von der aufklappenden StickyBar verdeckt werden, wenn man von den Antworten unten wieder zu den Fragen oben zurückspringt.2)a) Erstmal nur ein Text-Objekt mit einer Frage erstellen und an den Accordeon-Stil anzupassen, dazu das Text-Objekt markieren, oben auf "Stil" klicken und Rahmenfarbe- und -dicke, abgerundeten Ecken, Hintergrundfarbe festlegen.
b) Dann dieses Text-Objekt markieren und mit der Tastenkombination Strg+C kopieren, nun nacheinander die Raster darunter markieren und mit der Tastenkombination Strg+V das kopierte Text-Objekt (mit den allen Einstellungen unter "Stil") einfügen.c) Jetzt die kopierten Text-Objekte mit den richtigen Fragen füllen.
3) Um im Raster die Text-Objekte mit Fragen von den Text-Objekten mit Antworten besser auseinander zu halten, kann das Objekt "Simple Seperator" dazwischen gesetzt werden, siehe
Raster-Schema:[ 1 Text-Objekt mit Infos und als Abstandshalter für die StickyBar ][ Mehrere Text-Objekte mit den Fragen ][ 1 Objekt "Simple Seperator" nur als optische Trennung im Raster ][ Mehrere Text-Objekte mit den Antworten ]
4) Jetzt die Text-Objekte für die Antworten in entsprechender Anzahl ins Raster setzen, dabei die Frage nochmals hinzufügen, da es keinen Aufklapp-Effekt gibt und die Besucher immer wissen sollten, um welche Frage es bei der Antwort geht.
Anmerkung: Später können weitere Text-Objekte sowohl mit Fragen und als auch mit Antworten jederzeit hinzugefügt werden.
5) Bei den Text-Objekten mit den Fragen werden die entsprechenden Anker gesetzt, dazu die Objekte nacheinander markieren, oben auf "Anker" klicken und einen Ankernamen vergeben, z.B:antwort-1antwort-2antwort-3... usw6) Im Text-Objekt am Anfang mit den Informationen den Anker "anfang" erstellen, dazu das Text-Objekt markieren, oben auf "Anker" klicken und den Ankernamen "anfang" eintragen.7) Nun bei den Text-Objekten mit den Fragen einen Linktext (z.B. "Antwort anzeigen") unterhalb oder ein Dreieck-Symbol ▼ (kann hier kopiert werden) vor der Frage einfügen und zum Anker der entsprechenden Antwort verlinken, siehe8) In den Text-Objekten mit den Antworten jeweils unten den Linktext, z.B. "Zurück zu den Fragen" oder oben links das Symbol ❌ (hier kopieren) einfügen und zum Anker "anfang" verlinken, siehe dazu den Screenshot bei 7), da das Arbeitsprinzip das Gleiche ist.9) Zum Schluss noch in der Vorschau Tests durchführen, dabei auch mit den verschiedenen Gerätesymbole testen, um evtl. Fehler zu finden.Zusätzliche Informationen:
Die Text-Objekte mit den Fragen können die gesamte Rasterbreite einnehmen ohne auch nur die Hälfte wie auf meiner Testseite.Wenn ein Bild neben den Fragen platziert, dann können sich die Objekte mit den Fragen in der Höhe vergrößern und es entsteht viel Leerraum. In diesem Fall ein Bild im starken Querformat verwenden, damit sich der Leerraum verringert.Um den Abstand der Text-Objekte mit den Fragen untereinander zu verringern, bei allen Text-Objekten nacheinander oben auf "Ränder" klicken und bei "Außenrand" die Zahlen oben und unten von "10" auf z.B. "2" verkleinern.Da hier Text-Objekte verwendet werden, können auch alle Funktionen des Text-Objektes genutzt werden, z.B.:
+ Mehrere Bilder einfügen+ Links mit individuellen Farben versehenUnter den Text-Objekten der jeweiligen Antworten können ergänzende Objekte (z.B. Audio und Video, Galerien usw.) hinzugefügt werden.+ Texte formatieren in Größe, Schriftart, Farbe usw.+ Aufzählungen und EinrückungenAnmerkung: Das Aussehen des Testseite und dieser Anleitung können sich im Laufe der Zeit auch ändern, wenn neue Ideen umgesetzt werden.



