Talent CSS-Vorlagen

Talent-CSS-Vorlagen für Übersichtsraster und Profilkarten

Abstände, Bildproportionen und visuelle Zustände entscheiden darüber, ob ein Roster als zusammenhängende Kartengruppe oder als Ansammlung uneinheitlicher Profile wahrgenommen wird. Talent-CSS-Vorlagen enthalten diese Regeln bereits vordefiniert und lassen die Werte flexibel anpassbar. Ein dreispaltiges Raster aus Darstellerkarten wirkt in einer Demo überzeugend – bis eine Karte eine lange Liste von Referenzen enthält und die nächste nur zwei Zeilen.

Styling von Karten mit uneinheitlichem Inhalt

Keine zwei Talent-Profile haben denselben Umfang, und das Styling muss den Roster dennoch wie eine geschlossene Einheit wirken lassen. Vier Regeln bewältigen den Großteil dieser Aufgabe:

• Ein festes Bildseitenverhältnis im Porträtbereich. Vertikale Studioporträts und breitere Standbilder füllen so denselben Bereich, und der Bildausschnitt bleibt über die gesamte Seite hinweg vorhersehbar.
• Eine typografische Skala, die der Karte eine klare Hierarchie verleiht. Der Name des Darstellers steht ganz oben, die Rolle oder Spezialisierung eine Stufe darunter, die Zeile mit den Referenzen noch unaufdringlicher.
• Abstände, die auch bei hoher Informationsdichte funktionieren. Kartenbreiten, Rasterabstände und innere Abstände halten eine Reihe zusammen, wenn ein Profil länger ausfällt, und eine Zeilenbegrenzung bei der Biografie verhindert, dass eine textreiche Karte alle benachbarten Elemente streckt.
• Hover- und Fokus-Zustände. Eine hervorgehobene Karte muss sich in der Regel optisch von der Reihe abheben, in der sie platziert ist.

Breakpoints und lokale Ausnahmen

Die Spaltenanzahl ist der einfache Teil der responsiven Gestaltung: vier nebeneinander auf einem breiten Bildschirm, zwei auf einem Tablet, eine auf einem Smartphone. Entscheidender ist, was das schmale Layout oben behält. Porträt, Name und die Kontakt-Aktion gehören daher über eine lange Referenzliste – kombiniert mit einem kompakteren Bildverhältnis und engeren Abständen auf Mobilgeräten.

Nicepage unterstützt dies durch Responsive Modes, von großen Bildschirmen bis hin zu Smartphones im Hochformat, sowie durch Custom CSS Code, der auf ein einzelnes Element, eine einzelne Seite oder die gesamte Website angewendet werden kann. Export Minimal CSS Per Page sorgt dafür, dass das veröffentlichte Stylesheet auf genau die Regeln beschränkt bleibt, die eine Seite tatsächlich benötigt.

CSS bestimmt, wie der Roster beim Scrollen wirkt. Testen Sie eine Vorlage in ihrer dichtesten Form, bevor Sie sich festlegen: mit der längsten Referenzliste, die Sie veröffentlichen, und dem breitesten Bildausschnitt aus Ihrer Mediathek. Wenn das Raster dort noch sauber lesbar bleibt, hält es auch stand, wenn der Roster weiter wächst.