Klient CSS-Vorlagen

Fortgeschrittene Kunden-CSS-Vorlagen für konsistente Kundenreferenzen

Die Gestaltungsebene ist das, was Sie tatsächlich steuern, sobald Erfahrungsberichte und Logos platziert sind. Eine Kunden-CSS-Vorlage definiert Kartenproportionen, die Typografieskala und den Abstand zwischen einem Zitat und seiner Quelle sowie die dahinterliegenden Breakpoint-Regeln. Es bleibt nur noch, den vorbereiteten Look auszuwählen, der zu Ihren Referenzen passt, und die wenigen Details anzupassen, die von Ihrer Marke abweichen.

Slider, Raster, Porträtkarten, Logo-Wände

Vorbereitete Kundenstile gibt es in einigen wiedererkennbaren Formen:

1. Bewertungs-Raster, in denen mehrere Testimonials mit gleichem Gewicht nebeneinander stehen;
2. Slider, die Sichtbarkeit gegen Platz eintauschen, sobald Sie zwanzig Zitate haben;
3. Porträtkarten mit einem Porträtfoto und der Urheberangabe unter dem Text;
4. Logo-Wände, abgestimmt auf Wortmarken und quadratische Bildmarken mit sehr unterschiedlichen Proportionen.

Porträts sind hier die entscheidende Weichenstellung. Bei Fotos muss die Typografieskala unter einer festen Bildgröße Raum für Namen und Funktion lassen, und Zitate bleiben zwangsläufig kurz. Ohne Fotos kann ein Erfahrungsbericht länger ausfallen, und die Urheberangabe lässt sich auf eine einzelne, dezente Zeile darunter beschränken. Slider bringen eigene Bedienelemente mit, da Steuerelemente und Positionsanzeigen ausreichend Kontrast benötigen, um klickbar zu wirken.

Lange Testimonials verhalten sich auf schmalen Bildschirmen anders

Der Großteil der Arbeit an einem Kunden-Styling-Set fällt dort an, wo Inhalte nicht mehr vorhersehbar sind:

1. Ein 300-Wörter-Bericht steht in derselben Zeile wie ein 12-Wörter-Zitat;
2. Anführungszeichen, die eine Karte auf dem Laptop dezent einrahmen, nehmen auf dem Smartphone den halben Bildschirm ein;
3. Eine kleine quadratische Bildmarke geht neben einer breiten Wortmarke im selben Raster unter;
4. Die Urheberangabe driftet durch wachsende vertikale Abstände vom Zitat weg.

Feste Höhen sind die Hauptursache dafür. Wenn Karten sich flexibel an ihren Inhalt anpassen können, Logos über max-width und max-height statt über eine einheitliche Breite begrenzt werden und der Abstand unter einem Zitat enger bleibt als der Abstand zwischen den Karten, lässt sich das meiste davon lösen. Nicepage unterstützt benutzerdefiniertes CSS, wenn ein einzelner hartnäckiger Abschnitt dennoch aus der Reihe tanzt – und genau dafür ist es gedacht: als Ausnahme innerhalb eines Regelwerks, das ansonsten zuverlässig greift.

Wählen Sie das Styling zuerst nach dem Inhaltsumfang

Betrachten Sie das vorhandene Material, bevor Sie entscheiden, was optisch ansprechend ist. Zwanzig kurze Empfehlungen und eine Reihe von Kundenlogos verlangen nach einem Raster und einer Logo-Wand – beides dezent und konsistent. Drei lange Fallstudien mit Kennzahlen erfordern breite Bereiche, in denen Ergebnisse atmen können. Teams, die beides haben, setzen meist zwei miteinander verwandte Stile auf einer Website ein, die durch eine einheitliche Typografie und Farbgebung verbunden sind. Wenn Ihre Zitate in der Länge stark variieren, testen Sie diese Bandbreite vor allem anderen, denn Kundenreferenzen schaffen nur dann Vertrauen, wenn sie wohlüberlegt wirken.