Talent Modèles CSS

Modèles CSS pour talents dédiés aux grilles d'artistes et cartes de profil

L'espacement, les proportions des images et les états visuels déterminent si un catalogue se lit comme un ensemble cohérent de cartes ou comme une accumulation de profils dépareillés. Les modèles CSS pour talents intègrent déjà ces règles, tout en laissant les valeurs entièrement configurables. Une grille à trois colonnes de cartes d'artistes semble convaincante dans une démo, jusqu'à ce qu'une carte affiche une longue liste de crédits alors que la suivante n'en comporte que deux lignes.

Styliser des cartes au contenu inégal

Aucun profil de talent n'a le même volume d'informations, et le style doit néanmoins faire en sorte que le catalogue forme un tout cohérent. Quatre règles assurent l'essentiel de ce travail :

• Une proportion d'image fixe pour la zone de portrait. Les portraits verticaux de studio et les plans plus larges occupent alors le même emplacement, garantissant un recadrage prévisible tout au long de la page.
• Une échelle typographique qui hiérarchise la carte. Le nom de l'artiste figure en haut, le rôle ou la spécialité juste en dessous, et la ligne des crédits reste encore plus discrète.
• Des espacements qui résistent à la densité. La largeur des cartes, les gouttières de la grille et les marges internes maintiennent la cohérence d'une rangée lorsqu'un profil est long, tandis qu'une limite de lignes sur la biographie évite qu'une carte trop bavarde n'étire tous les éléments adjacents.
• Des états au survol et au focus. Une carte mise en avant doit généralement se distinguer de la rangée dans laquelle elle se trouve.

Points de rupture et exceptions locales

Le nombre de colonnes est la partie la plus simple du travail responsive : quatre de front sur un grand écran, deux sur une tablette, une sur un téléphone. Ce que la mise en page étroite conserve en haut est bien plus important : le portrait, le nom et l'action de contact doivent précéder une longue liste de crédits, avec un ratio d'image plus court et des espacements resserrés sur mobile.

Nicepage prend cela en charge grâce aux Responsive Modes, des grands écrans jusqu'aux téléphones en affichage vertical, ainsi qu'avec le Custom CSS Code qui s'applique à un élément individuel, à une page spécifique ou à l'ensemble du site. L'option Export Minimal CSS Per Page permet de limiter la feuille de style publiée aux seules règles réellement utilisées par une page.

Le CSS détermine l'aspect visuel du catalogue à mesure que l'utilisateur fait défiler la page. Testez un modèle dans sa configuration la plus dense avant d'arrêter votre choix, avec la liste de crédits la plus longue possible et le recadrage le plus large de votre photothèque. Si la grille reste parfaitement lisible dans ces conditions, elle tiendra la distance à mesure que votre catalogue s'étoffera.