FAQ optisch perfekt gestalten
Hallo zusammen,
einer meiner Kunden hat mich gebeten, eine FAQs Seite in seinen Powergap Shop einzubauen. Dazu gibt es von Powergap eine tolle Lösung, die vom Nicholas erstellt wurde. Allerdings kann man seine FAQs durchaus mit ein wenig modifiziertem CSS „aufhübschen“. Zumal der Chrome Browser den Platzhalter im Suchfeld etwas undeutlich darstellt.
Code:
<style>
.faq_gruppe {margin-top:2rem; background-color:rgb(236,102,8); padding:0.6rem 1rem; text-align: center;font-size: 2rem; color: #fff;}
.faq_frage {font-size: 1.25rem; background-color:#ececec; padding:1rem; }
.faq_antwort {font-size: 1.1rem; background-color:#f6f6f6; padding:1rem; margin-bottom: 1rem;}
.faq_antwort a{color:rgb(236,102,8); font-size: 1.1rem;}
.faq_antwort a:hover{color:rgb(202,24,19)}
.faq_hr {border-bottom: 1px solid #fff;margin: 2rem;}
#faq_suche {border: 1px solid #bbb; background: #f7f7f7; padding: 1rem 0 1rem 1.5rem;width: 98%; font-size: 1.1rem !important; margin-bottom: 2rem;border-radius:0.4rem;}
#faq_suche::placeholder {color: #999; font-size: 1.1rem !important; }
@media screen and (max-width:1024px) {
#faq_suche::placeholder {color: #999; font-size: 1.3rem !important;}
#faq_suche {width: 97%; font-size: 1.3rem;margin-top: 2rem;margin-bottom:1rem;}
}
@media screen and (max-width:760px) {
#faq_suche {width: 94%; font-size: 1.2rem;margin-top: 2rem;margin-bottom:1rem;}
#faq_suche::placeholder {font-size: 1.2rem !important;}
}
</style>
<input type='text' id='faq_suche' placeholder='Tippen Sie hier Ihre Frage ein...'>
.faq_gruppe {margin-top:2rem; background-color:rgb(236,102,8); padding:0.6rem 1rem; text-align: center;font-size: 2rem; color: #fff;}
.faq_frage {font-size: 1.25rem; background-color:#ececec; padding:1rem; }
.faq_antwort {font-size: 1.1rem; background-color:#f6f6f6; padding:1rem; margin-bottom: 1rem;}
.faq_antwort a{color:rgb(236,102,8); font-size: 1.1rem;}
.faq_antwort a:hover{color:rgb(202,24,19)}
.faq_hr {border-bottom: 1px solid #fff;margin: 2rem;}
#faq_suche {border: 1px solid #bbb; background: #f7f7f7; padding: 1rem 0 1rem 1.5rem;width: 98%; font-size: 1.1rem !important; margin-bottom: 2rem;border-radius:0.4rem;}
#faq_suche::placeholder {color: #999; font-size: 1.1rem !important; }
@media screen and (max-width:1024px) {
#faq_suche::placeholder {color: #999; font-size: 1.3rem !important;}
#faq_suche {width: 97%; font-size: 1.3rem;margin-top: 2rem;margin-bottom:1rem;}
}
@media screen and (max-width:760px) {
#faq_suche {width: 94%; font-size: 1.2rem;margin-top: 2rem;margin-bottom:1rem;}
#faq_suche::placeholder {font-size: 1.2rem !important;}
}
</style>
<input type='text' id='faq_suche' placeholder='Tippen Sie hier Ihre Frage ein...'>
So hat die FAQ-Seite bei Hausschuhexperte.de ausgesehen, nachdem dieses CSS eingebaut wurde:
Allerdings hat man sich bei Hausschuhexperte.de dafür entschieden, eine Accordion-Variante für die FAQ Seite zu verwenden. Die FAQ Seite sieht nun so aus:
Der Vorteil dieser Version liegt in einer deutlich besseren Übersichtlichkeit. Die Antworten werden erst sichtbar, wenn der User die für ihn interessante Frage anklickt. Es können beliebig viele Antworten offen gelassen oder aber wieder geschlossen werden.
Für mehr Informationen könnt ihr mich jederzeit über die E-mail frasche@gmx.de oder im Internet unter www.frasche.de erreichen. Gerne auch über WhatsApp unter +66 8100 27805.
Frankie S.