Ocho diseños originales de "conoce al equipo", desde cuadrículas de fotos hasta departamentos agrupados, con HTML y CSS editables y un generador de cuadrícula para columnas, forma de la foto y espaciado.
Una página de equipo pone nombres, caras y puestos a tu negocio para que los visitantes sepan con quién van a tratar. Los diseños de abajo van desde una cuadrícula de fotos sencilla hasta departamentos agrupados y la historia de un único fundador. Cada uno es HTML y CSS original y editable, y el generador de cuadrícula define por ti las columnas, la forma de la foto y el espaciado.
Cómo elegir un diseño según el tamaño del equipo
La gente compra a personas, sobre todo en servicios como clínicas, agencias, oficios y restaurantes. Una página de equipo responde a quién está detrás del negocio y hace que el primer email o la primera visita parezcan menos un salto al vacío. Los ejemplos de aquí usan iniciales en lugar de fotos, así puedes poner tus propias imágenes sin cambiar la maquetación.
Como mínimo, el nombre, el puesto y una foto de cada persona. Añade una frase sobre lo que hace por los clientes, y un enlace de contacto donde ayude. Una breve introducción arriba explica cómo trabaja el equipo en conjunto.
Nombra a la persona y añade el puesto si no está escrito junto a la foto, por ejemplo alt="Ana Ruiz, physiotherapist". Si el nombre ya aparece en un pie justo al lado de la imagen, un alt corto o solo el nombre evita repetir texto largo.
Da a la imagen una proporción fija con aspect-ratio y usa object-fit: cover. La imagen llena su caja y lo que sobra se recorta en lugar de aplastar la cara.
Los negocios pequeños suelen meter el equipo en la página "sobre nosotros". Cuando tienes más de unas ocho personas, o equipos a los que los clientes contactan directamente, una página aparte mantiene "sobre nosotros" centrada en tu historia.
Sí. Las iniciales, las ilustraciones o una única foto de grupo funcionan cuando la gente prefiere no salir en foto. Mantén visibles los nombres y los puestos para que la página siga cumpliendo su función.
Las iniciales de colores sustituyen a las fotos. Cambia cada bloque .av por un img que use la misma clase.
Fotos redondas, nombre y puesto centrados. Funciona para casi cualquier equipo de cuatro a doce personas.
Una línea corta sobre lo que hace cada persona por los clientes convierte un muro de retratos en algo útil.
Para un negocio de una o dos personas, una sola foto y unas frases honestas pesan más que una cuadrícula.
Los encabezados por equipo ayudan a los visitantes a encontrar a la persona adecuada en una empresa más grande.
Tarjetas más grandes para quienes toman decisiones y una franja compacta para el resto.
Las filas con nombre, puesto y equipo son fáciles de recorrer y de buscar con la función de búsqueda del navegador.
Cada persona tiene un enlace de correo, así los clientes llegan al puesto adecuado a la primera.
Cuando la gente prefiere no tener retratos individuales, una foto compartida y un pie siguen poniendo nombres al negocio.
Generador de cuadrícula de equipo
Elige las columnas, la forma de la foto y la separación. CSS inicial:
Columnas en pantallas anchas: {n}
Forma de la foto
Círculo
Redondeada
Cuadrada
Separación: {n}px
Vista previa de la cuadrícula de equipo
Copiar CSS
Empieza gratis · Sin tarjeta de crédito