Klient CSS-Vorlagen

Erweiterte CSS-Vorlagen für Kunden für einheitliche Kundenreferenzen

Die Gestaltungsebene liegt in Ihrer Hand, sobald Bewertungen und Logos eingefügt sind. Eine CSS-Vorlage legt Kartenproportionen, Schriftgröße und Abstand zwischen Zitat und Quelle sowie die zugehörigen Breakpoint-Regeln fest. Wählen Sie einfach das passende Design für Ihre Referenz und passen Sie die wenigen Elemente an, die nicht zu Ihrer Marke passen.

Slider, Raster, Portraitkarten, Logowände

Vorgefertigte Kundenstile gibt es in verschiedenen Formaten:

1. Bewertungsraster, in denen mehrere Testimonials gleichgewichtet nebeneinander angezeigt werden;

2. Slider, die ab zwanzig Zitaten die Sichtbarkeit zugunsten des Platzes reduzieren;

3. Portraitkarten mit einem Foto und der zugehörigen Quelle unter dem Text;

4. Logowände, angepasst an Wort- und Quadratmarken mit unterschiedlichen Proportionen.

Portraits stellen hier eine entscheidende Wahl dar. Bei Fotos muss die Schriftgröße so gewählt werden, dass unter der festen Bildgröße Platz für Name und Funktion bleibt, und Zitate müssen zwangsläufig kurz sein. Ohne sie kann eine Rezension länger werden, und die Quellenangabe kann auf eine kurze Zeile darunter beschränkt werden. Schieberegler bringen ihre eigenen Anforderungen mit sich, da Bedienelemente und Positionsmarkierungen genügend Kontrast benötigen, um anklickbar zu sein.

Lange Testimonials verhalten sich auf schmalen Bildschirmen anders

Der größte Aufwand beim Styling eines Kundensets entsteht dort, wo Inhalte nicht mehr vorhersehbar sind:

1. Eine 300 Wörter lange Rezension in derselben Zeile wie eine 12 Wörter lange;

2. Anführungszeichen, die auf einem Laptop eine Karte einrahmen und auf einem Smartphone die Hälfte des Bildschirms einnehmen;

3. Ein kleines quadratisches Zeichen, das neben einer breiten Wortmarke in einem Raster verschwindet;

4. Quellenangaben, die sich vom Zitat entfernen, sobald der vertikale Abstand zunimmt.

Feste Höhen sind die Hauptursache dafür. Wenn man Karten an ihren Inhalt anpasst, Markierungen mit max-width und max-height anstatt einer gemeinsamen Breite begrenzt und den Abstand unter einem Zitat kleiner als den zwischen den Karten hält, lassen sich die meisten Probleme lösen. Nicepage unterstützt benutzerdefiniertes CSS, falls ein einzelner, hartnäckiger Abschnitt weiterhin Probleme bereitet. Genau dafür ist es gedacht: als Ausnahme innerhalb eines ansonsten geltenden Regelwerks.

Wählen Sie das Styling zuerst nach Inhaltsgröße

Betrachten Sie zuerst den Inhalt, bevor Sie sich mit dem Aussehen beschäftigen. Zwanzig kurze Empfehlungen und eine Reihe von Kundenmarkierungen benötigen ein Raster und eine Trennwand – beides wirkt übersichtlich und konsistent. Drei längere Artikel mit Zahlen hingegen brauchen breite Bereiche, in denen die Ergebnisse gut zur Geltung kommen. Teams, die beides haben, verwenden in der Regel zwei verwandte Stile auf einer Website, die durch gemeinsame Schriftart und Farbe miteinander verbunden sind. Wenn Ihre Zitate stark in der Länge variieren, testen Sie diese Variation als Erstes, denn Kundenreferenzen schaffen nur dann Vertrauen, wenn sie bewusst gestaltet sind.