Os visitantes do seu site querem saber quem está por trás da marca Um bem projetado membro da equipe Elementor seção coloca rostos para o seu negócio, constrói confiança, e faz o seu site se sentir pessoal, em vez de corporativo O problema? Elementor não envia com um widget de membro da equipe dedicado fora da caixa.
É onde Complementos Mestres para Elementor entra. Ele oferece dois widgets específicos para isso: o Membro da equipe MA widget (para layouts de grade) e o Carrossel de membros da equipe MA (para seções deslizantes da equipe).ambos são gratuitos, e ambos vêm com 11 variações de design exclusivas que você pode aplicar com um clique.
Neste guia, você aprenderá exatamente como fazer crie uma seção de membros da equipe no Elementor usando ambos os métodos, personalize o estilo e aproveite ao máximo todas as opções de design disponíveis.
Por que todo site precisa de uma seção de membro da equipe
As pessoas compram de pessoas Um estudo do Trust Barometer da Edelman descobriu que os consumidores são muito mais propensos a confiar em uma empresa quando podem ver pessoas reais por trás dela Sua página “About” ou “Team” é muitas vezes uma das páginas mais visitadas em todo o seu site.
Eis o que é bom seção de membros da equipe no Elementor faz pelo seu site:
- Constrói credibilidade Os visitantes podem ver com quem estão trabalhando antes de entrar em contato
- Cria conexões pessoais (a) Fotos e biografias curtas tornam sua marca identificável
- Aumenta conversões Os sinais como fotos da equipe reduzem a hesitação ao comprar
- Melhora a marca do empregador – seus candidatos atraem melhor emprego
- Reduz as taxas de rejeição As seções visuais de Eng por mais tempo mantêm os visitantes na página
Esteja você administrando uma pequena agência, uma empresa de SaaS ou uma empresa local, adicionar uma seção de equipe ao seu site WordPress leva 10 minutos e causa um impacto mensurável.
O que incluir na seção de membros da sua equipe
Antes de arrastar qualquer widget para a página, planeje quais informações cada cartão de equipe deve mostrar Aqui está um rápido detalhamento do que incluir e o que pular:
| Elemento | Prioridade | Por que isso importa |
|---|---|---|
| Foto | Essencial | As pessoas processam rostos mais rápido que o texto Use headshots consistentes e profissionais. |
| Nome | Essencial | Deve aparecer diretamente ao lado ou abaixo da foto para que a conexão seja instantânea. |
| Designação /Título do Trabalho | Essencial | Diz aos visitantes qual o papel que essa pessoa desempenha na equipe. |
| Breve Descrição | Recomendado | Uma biografia de 1 a 2 frases. Mantenha-o orientado para humanos e personalidade. |
| Links de mídia social | Recomendado | Permite que os visitantes se conectem no LinkedIn, Twitter ou outros canais. |
| E-mail ou telefone | Opcional | Adicione apenas se quiser contato direto (comum para equipes com vendas pesadas). |
Dica profissional: Mantenha os headshots consistentes em toda a equipe A mesma cor de fundo, corte semelhante e dimensões de imagem correspondentes (300x300 px ou 400x400 px funcionam bem) fazem com que toda a seção pareça polida.
O que você precisará antes de começar
Para seguir este tutorial, certifique-se de que você tem:
- WordPress instalado e em execução (qualquer versão recente)
- Elementor (gratuito ou Pro) isso funciona com ambos
- Complementos Mestres para Elementor (versão gratuita) Opinião (Uns) baixar de WordPress.org
- Fotos dos membros da equipe prontas para upload (fotos na cabeça, proporção quadrada recomendada)
Assim que os Master Addons estiverem instalados e ativados, você encontrará o Membro da equipe MA e Carrossel de membros da equipe MA widgets dentro do editor Elementor na guia “MASTER ADDONS”.
Como criar uma seção de grade de membros da equipe do elementor
O layout da grade é perfeito quando você deseja exibir sua equipe em um formato limpo e estruturado com várias colunas Veja como configurá-lo passo a passo:
Passo 1: Insira uma nova seção
Abra qualquer página no editor Elementor Clique no ícone “+” para adicionar uma nova seção Escolha a estrutura de colunas de sua preferência Para uma seção de equipe, um layout de 3 colunas ou 4 colunas funciona melhor.
Passo 2: Adicione uma seção interna
Se precisar de mais controle sobre espaçamento e layout, arraste um Seção Interna widget dentro de sua seção principal Isso lhe dá colunas aninhadas onde cada cartão de membro da equipe se senta de forma independente.
Crie quantas colunas você precisar para o tamanho da sua equipe Três colunas por linha é a escolha mais comum para exibições de desktop.
Passo 3: Arraste o widget do membro da equipe MA
No painel Elementor à esquerda, role para baixo até o ADDONS MESTRES tab (ou apenas procure por “MA Team Member” na barra de pesquisa).Arraste o Membro da equipe MA widget em uma de suas colunas.
Você verá imediatamente um cartão de membro da equipe padrão aparecer com uma imagem de espaço reservado, nome, designação e ícones sociais.
Passo 4: Repita para cada membro da equipe
Duplique o widget ou arraste um novo Membro da equipe MA widget em cada coluna restante Cada widget representa um membro da equipe, para que você tenha controle total sobre as cartas individuais.
Dica profissional: Clique com o botão direito do mouse no widget e selecione “Duplicate” para copiá-lo com todo o seu estilo intacto Em seguida, basta trocar a foto e o texto para cada novo membro da equipe.
Personalizando o conteúdo do widget do membro da equipe do elementor
Clique em qualquer Membro da equipe MA widget para abrir suas configurações. O Guia Conteúdo é onde você adiciona todos os dados pessoais de cada membro da equipe.
Detalhes do membro da equipe
A guia Conteúdo no widget membro da equipe Elementor dá-lhe campos para:
- Imagem 'Upload de uma foto de headshot ou de equipa' Pode também definir o tamanho da imagem e escolher uma proporção personalizada.
- Nome 0 nome completo do membro da equipa Isto é renderizado como uma tag de cabeçalho, por isso escolha uma tag HTML apropriada (H3 ou H4 é típico para cartões de equipa).
- Designação (título, função ou posição (por exemplo, “Lead Designer” ou “Co-Founder & CEO”).
- Descrição 1-2 frases curtas para obter a aparência mais limpa.
Perfis de mídia social
Abaixo dos principais detalhes, você encontrará a seção de mídia social Adicione links aos perfis de cada membro da equipe O widget suporta todas as principais plataformas, incluindo
- Twitter /X
- GitHub
- URLs personalizados com ícones personalizados
Os links sociais aparecem como pequenos ícones abaixo das informações do membro da equipe. Eles abrem em uma nova guia por padrão, para que os visitantes não saiam da sua página.
Guia de estilo: variações e predefinições de design
É aqui que o Membro da equipe MA widget realmente se destaca das soluções básicas do Elementor. Em vez de construir designs de cartões de equipe do zero, você obtém 11 variações únicas de design e 5 predefinições de estilo para escolher.
Design Variações
Clique no Guia Estilo, então abra o Estilos Gerais painel. Você encontrará um dropdown rotulado como “Design Variation.” Escolha qualquer uma das 11 opções, e o widget reestrutura instantaneamente o layout do cartão Algumas variações empilham a imagem acima do texto Outras usam layouts lado a lado Algumas adicionam efeitos de sobreposição no hover.
A melhor parte: alternar entre variações não apaga seu conteúdo Seu nome, foto, bio, e links sociais todos permanecem intactos Você pode tentar cada variação e se estabelecer no que corresponde ao design do seu site.
5 Predefinições de Estilo
Dentro do painel Estilos Gerais, você também encontrará 5 Predefinições de Estilo. Estas são combinações de cores e layout pré-configuradas que oferecem uma aparência polida com um único clique.
Controles de estilo manual
Para controle criativo total, a guia Estilo também permite personalizar:
- Cor de fundo 0 fundo sólido, gradiente, ou transparente para cada cartão
- Alinhamento Conteúdo & A esquerda, centro, ou direita alinham todo o texto e ícones
- Tipografia 0 controle completo sobre a família de fontes, tamanho, altura da linha e espaçamento entre letras para o nome, designação e descrição separadamente
- Texto Cores Ân cores diferentes para nome, designação, e texto de descrição
- Cores do ícone social & gize cores de ícones para ambos os estados normais e hover
- Espaçamento e preenchimento & tune o espaço entre os elementos dentro do cartão
- Raio Fronteiriço e Fronteiriço 0 cartão bordas ou em volta dos cantos do cartão
- Sombra Caixa – efeitos de sombra sutis para profundidade
Para um passo a passo completo de cada opção de estilo, marque o documentação dos membros da equipe MA.
Como Criar um Carrossel de Membros de Equipe no Elementor
Ter uma equipe maior? a Carrossel de membros da equipe MA o Widget permite adicionar membros ilimitados da equipe em uma única seção deslizante É um ajuste melhor quando você tem mais de 6 membros da equipe e não quer preencher uma página inteira com uma grade.
Eis como o carrossel de membros da equipe em Elementor obras:
Passo 1: Arraste o widget do carrossel dos membros da equipe MA
Ao contrário do método de grade, você faz não precisa de uma seção interna ou várias colunas Basta adicionar uma nova seção com uma única coluna, depois procurar por “MA Team Members Carousel” e arrastá-lo para dentro.
Passo 2: Adicione os membros da sua equipe
Dentro do widget, você verá um campo repetidor Cada item no repetidor representa um membro da equipe Clique em “Adicionar Item” para criar novas cartas Para cada carta, preencha:
- Foto
- Nome
- Designação
- Descrição
- Links de mídia social
Você pode adicionar quantos membros da equipe quiser Não há limite O carrossel lida com 5 membros ou 50 membros com igual facilidade.
Passo 3: Defina a Tag do Título
Defina a tag de cabeçalho HTML para os nomes dos membros da sua equipe (H2, H3, H4, etc).Para a maioria das páginas, H3 ou H4 é a escolha certa, pois o título da seção acima geralmente é um H2.
Configurações do carrossel: navegação, colunas e reprodução automática
O widget carrossel vem com um painel de configurações dedicado para controlar como o controle deslizante se comporta Aqui está o que você pode configurar:
Colunas e Itens a Rolar
Defina quantos membros da equipe aparecem na tela de uma só vez Você pode mostrar 2, 3, 4 ou mais colunas dependendo da largura do layout A configuração “Items to Scroll” controla quantas cartas se movem quando um visitante clica na seta de navegação.
| Tamanho da tela | Colunas Recomendadas | Itens a Rolar |
|---|---|---|
| Área de trabalho (1200px+) | 3-4 colunas | 1-2 |
| Comprimido (768px-1199px) | 2-3 colunas | 1 |
| Móvel (abaixo de 768px) | 1 coluna | 1 |
Estilo de navegação
Você obtém dois tipos de navegação:
- Setas 0 Botões de seta para a direita e para a direita nos lados do carrossel O melhor para o ambiente de trabalho onde as interacções de pairar são comuns.
- Pontos 1 Indicadores de pontos pequenos abaixo do carrossel que mostram slides totais e posição atual Funciona bem tanto no desktop quanto no celular.
Você pode ativar um, ambos ou nenhum. Se você ativar a reprodução automática, alguns usuários podem nem precisar de navegação manual.
Reprodução automática
Alternar reprodução automática e definir uma duração em milissegundos Um valor de 3000-5000 ms (3-5 segundos) dá aos visitantes tempo suficiente para ler cada cartão antes do controle deslizante se move Você também pode ativar pausa-em-hover para que o controle deslizante pára quando alguém paira sobre um cartão.
Opções de estilo carrossel
Assim como o widget de grade, o carrossel vem com 5 predefinições de estilo e controle manual completo sobre:
- Preenchimento de itens (espaço entre cada cartão de equipe)
- Tipografia para nome, designação e descrição
- Cores para cada elemento de texto
- Configurações de fundo e borda por cartão
- Estilo e cores de seta/ponto de navegação
Para a referência de configurações completas, consulte o Membros da equipe Documentação do carrossel.
Dicas para uma seção de equipe melhor
Depois de construir centenas de seções de equipe, aqui estão os pequenos detalhes que separam uma boa página de equipe de uma ótima:
- Use fotos reais, não imagens de estoque. Os visitantes podem dizer a diferença Os headshots autênticos criam mais confiança do que as fotos de estoque polidas jamais construirão.
- Mantenha as descrições curtas e consistentes. Se uma pessoa tem uma bio de 3 frases e outra tem um parágrafo completo, isso cria desequilíbrio visual Aponte para o mesmo comprimento em todos os cartões.
- Corresponder exatamente às dimensões da imagem. Carregue todos os headshots na mesma resolução (por exemplo, 400x400 px) Tamanhos incompatíveis quebram o alinhamento da grade.
- Inclua apenas perfis sociais ativos. Um link morto do LinkedIn é pior do que nenhum link. Fique nas plataformas que sua equipe realmente usa.
- Teste no celular. As seções do carrossel precisam especialmente de testes móveis Certifique-se de que os cartões sejam legíveis e que os pontos de navegação sejam fáceis de tocar.
- Use o carrossel para mais de 6 membros. Se você tiver 3-4 membros da equipe, uma grade parece mais limpa Salve o carrossel para equipes maiores, onde a rolagem se torna necessária.
Carrossel de membros da equipe MA vs membros da equipe MA: qual você deve usar?
| Característica | Membro da equipe MA (grade) | Carrossel de membros da equipe MA |
|---|---|---|
| Melhor para | Equipes pequenas (2-6 membros) | Equipes maiores (mais de 6 membros) |
| Layout | Colunas estáticas (você controla a grade) | Carrossel deslizante com navegação automática/manual |
| Configuração | Um widget por membro da equipe nas seções internas | Widget único com campo repetidor |
| Design Variações | 11 variações | 5 predefinições de estilo |
| Navegação | Nenhum necessário (todos visíveis) | Setas, pontos, reprodução automática |
| Espaço página | Leva mais espaço vertical | Compacto, economiza espaço |
| Controle individual de cartão | Completo (cada widget é independente) | Estilo unificado em todas as cartas |
Para a maioria dos sites de pequenas empresas, a abordagem de grade com 3-4 membros da equipe é o ponto ideal Se sua equipe crescer além de 6 pessoas, mude para o carrossel para manter a página limpa.
Quer explorar a lista completa de widgets disponíveis? confira o biblioteca completa de widgets Master Addons com mais de 80 widgets e extensões.
Perguntas frequentes
Elementor tem um widget integrado para membros da equipe?
No. Elementor (gratuito ou Pro) não inclui um widget dedicado de membro da equipe Você precisa de um complemento de terceiros como Adições Mestres para obter um propósito construído widget membro da equipe Elementor com predefinições de design, links sociais e opções de carrossel.
O widget MA Team Member é gratuito?
Sim. Tanto os widgets MA Team Member quanto MA Team Members Carousel estão disponíveis na versão gratuita do Master Addons for Elementor Você pode baixe-o do WordPress.org sem nenhum custo Algumas variações avançadas de design podem exigir a versão Pro.
Quantos membros da equipe posso adicionar ao carrossel?
Não há limite O Carrossel de Membros da Equipe MA usa um campo repetidor, para que você possa adicionar quantos membros da equipe precisar de sua página O widget lida com 5 ou 50 cartas sem problemas de desempenho Basta definir as colunas visíveis e deixar o controle deslizante lidar com o resto.
Posso usar designs diferentes para membros diferentes da equipe?
Com o layout da grade (widget de membro da equipe MA), sim, Uma vez que cada membro da equipe é um widget separado, você pode aplicar uma variação de design diferente a cada cartão No carrossel, todos os cartões compartilham a mesma predefinição de design para consistência visual.
Qual tamanho de imagem devo usar para fotos de membros da equipe?
Imagens quadradas entre 300x300 px e 500x500 px funcionam melhor Mantenha todas as fotos com as mesmas dimensões para um alinhamento consistente O formato JPEG ou WebP com 80% de qualidade oferece boa qualidade visual sem tamanhos de arquivo grandes que retardam sua página.
Leitura Relacionada
Embrulhando
Criando a seção de membros da equipe no Elementor não requer código personalizado ou complementos caros para o construtor de páginas Com os dois widgets da equipe da Master Addons, você pode passar de uma seção em branco para uma página da equipe totalmente estilizada em menos de 10 minutos.
Para equipes pequenas, use o Membro da equipe MA widget em um layout de grade Para equipes maiores, mude para o Carrossel de membros da equipe MA para um controle deslizante que economiza espaço Ambas as opções oferecem predefinições de design, integração de mídia social e tipografia completa e controles de cores.
Comece com Master Addons e construa uma seção de equipe na qual seus visitantes realmente confiarão.
