Talento Plantillas CSS

Plantillas CSS para Talentos: Cuadrículas de Listados y Tarjetas de Perfil

El espaciado, las proporciones de las imágenes y los estados visuales determinan si un listado se presenta como un conjunto único de tarjetas o como un montón de perfiles inconexos. Las plantillas CSS para talentos incluyen estas reglas predefinidas, dejando los valores libres. Una cuadrícula de tres columnas con tarjetas de artistas luce convincente en una demostración, hasta que una tarjeta tiene una larga lista de créditos y la siguiente solo dos líneas.

Diseño de Tarjetas con Contenido Dispar

Ningún perfil de artista tiene el mismo peso visual, y el diseño debe lograr que el listado se perciba como un conjunto coherente. Cuatro reglas facilitan la mayor parte de este trabajo:

• Una proporción fija de imagen en el área del retrato. Los retratos verticales de estudio y las fotos más amplias ocupan el mismo espacio, y el recorte se mantiene predecible a lo largo de la página.

• Una escala tipográfica que prioriza la tarjeta. El nombre del artista se ubica en la parte superior, el rol o especialidad un nivel más abajo, y la línea de créditos aún más discreta.

• Un espaciado que se mantiene constante con la densidad. El ancho de las tarjetas, los espacios de la cuadrícula y el relleno interno mantienen una fila unida cuando un perfil es demasiado largo, y un límite de línea en la biografía evita que una tarjeta extensa ocupe todo el espacio a su alrededor.

• Estados de desplazamiento y enfoque. Una tarjeta destacada generalmente debe verse diferente de la fila en la que se encuentra.

Puntos de interrupción y excepciones locales

El número de columnas es la parte más sencilla del diseño responsivo: cuatro en una pantalla ancha, dos en una tableta y una en un teléfono. Lo que se mantiene en la parte superior en el diseño estrecho es más importante, por lo que el retrato, el nombre y la acción de contacto deben estar por encima de una larga lista de créditos, con una proporción de imagen más corta y espacios más ajustados en dispositivos móviles.

Nicepage lo soluciona con los Modos Responsivos, desde pantallas grandes hasta teléfonos verticales, y con Código CSS Personalizado que se aplica a un solo elemento, una sola página o todo el sitio. Exportar CSS Mínimo por Página mantiene la hoja de estilos publicada con las reglas que realmente usa una página.

El CSS determina cómo se ve la lista a medida que el usuario se desplaza por ella. Antes de confirmar la configuración, prueba la plantilla con la lista de créditos más larga que publiques y el recorte más amplio de tu biblioteca. Si la cuadrícula se sigue visualizando correctamente, se mantendrá a medida que la lista de créditos crezca.