Oito layouts originais de página de equipe, de grades de fotos a departamentos agrupados, com HTML e CSS editáveis e um gerador de grade para colunas, formato das fotos e espaçamento.
Uma página de equipe coloca nomes, rostos e funções no seu negócio para que os visitantes saibam com quem vão lidar. Os layouts abaixo vão de uma grade simples de fotos a departamentos agrupados e à história de um único fundador. Cada um é HTML e CSS original e editável, e o gerador de grade define colunas, formato das fotos e espaçamento para você.
Como escolher um layout pelo tamanho da equipe
Pessoas compram de pessoas, principalmente em serviços como clínicas, agências, prestadores de serviço e restaurantes. Uma página de equipe responde quem está por trás do negócio e faz o primeiro e-mail ou a primeira visita parecer menos um salto no escuro. Os exemplos aqui usam iniciais em vez de fotos, então você pode colocar as suas próprias imagens sem mudar o layout.
No mínimo, o nome, a função e uma foto de cada pessoa. Acrescente uma frase sobre o que ela faz pelos clientes e um link de contato quando ajudar. Uma introdução curta no topo explica como a equipe trabalha em conjunto.
Diga o nome da pessoa e acrescente a função se ela não estiver escrita ao lado da foto, por exemplo alt="Ana Ruiz, physiotherapist". Se o nome já estiver em uma legenda logo ao lado da imagem, um alt curto ou só o nome evita repetir texto longo.
Dê à imagem uma proporção fixa com aspect-ratio e use object-fit: cover. A foto preenche a caixa e o excesso é cortado, em vez de o rosto ficar achatado.
Pequenos negócios costumam colocar a equipe na página sobre. Quando você tem mais de umas oito pessoas, ou equipes que os clientes contatam diretamente, uma página separada mantém a página sobre focada na sua história.
Sim. Iniciais, ilustrações ou uma única foto do grupo funcionam quando as pessoas preferem não aparecer. Mantenha nomes e funções visíveis para que a página continue cumprindo o seu papel.
Iniciais coloridas ocupam o lugar das fotos. Substitua cada bloco .av por um img com a mesma classe.
Fotos redondas, nome e função centralizados. Funciona para quase qualquer equipe de quatro a doze pessoas.
Uma linha curta sobre o que cada pessoa faz pelos clientes transforma um mural de fotos em algo útil.
Para um negócio de uma ou duas pessoas, uma única foto e algumas frases sinceras pesam mais do que uma grade.
Títulos por equipe ajudam os visitantes a encontrar a pessoa certa em uma empresa maior.
Cards maiores para quem toma as decisões e uma faixa compacta para todos os demais.
Linhas com nome, função e equipe são fáceis de percorrer e de pesquisar com a busca do navegador.
Cada pessoa ganha um link de e-mail, para que os clientes cheguem ao setor certo logo na primeira vez.
Quando as pessoas preferem não ter fotos individuais, uma única imagem compartilhada e uma legenda ainda associam nomes ao negócio.
Gerador de grade de equipe
Escolha as colunas, o formato das fotos e o espaçamento. CSS inicial:
Colunas em telas largas: {n}
Formato da foto
Círculo
Arredondado
Quadrado
Espaçamento: {n}px
Prévia da grade da equipe
Copiar CSS
Comece grátis · Sem cartão de crédito