Carrossel de membros da equipe Elementor (deslizador de equipe)
Sua equipe vende o negócio tanto quanto qualquer coisa na página, mas uma grade plana de tiros na cabeça raramente cai dessa maneira O Mestre Addons Slider da equipe do elementor transforma esses perfis em um carrossel que as pessoas podem navegar: fotos, nomes, funções, biografias curtas e links sociais, deslizando em um layout que você controla Escolha uma predefinição de estilo, adicione cada membro por meio de um repetidor simples e você terá um carrossel membros da equipe acima sem escrever nenhum código.
O widget é gratuito Três de suas seis predefinições (Team Carousel, Circle Gradient e Content on Hover) estão no plugin gratuito, e Circle Animation, Social Left on Hover e Content Drawer vêm com Master Addons Pro. É mais do que uma fileira de rostos efeitos de hover, reprodução automática e estilo por elemento dão a cada perfil um pouco de caráter e mantêm as pessoas clicando em toda a equipe em vez de parar no primeiro cartão O vídeo abaixo mostra a compilação Mais abaixo você obtém as predefinições, as configurações do carrossel e um rápido how-to.
O que é um controle deslizante de equipe de elementor?
Um controle deslizante de equipe é um carrossel que mostra ao seu pessoal uma carta de cada vez em vez de empilhá-los em uma grade estática Os visitantes deslizam ou clicam através dos perfis, e cada carta carrega uma foto, um nome, um papel e geralmente links sociais Você verá isso chamado de carrossel de membros da equipe ou um controle deslizante de membro da equipe também A mesma ideia de qualquer maneira: encaixe uma grande equipe em um pequeno espaço e deixe as pessoas se moverem através dele em vez de rolar por uma parede de fotos.
Você pode chegar perto com o carrossel de núcleo da Elementor e muito estilo manual, mas então o layout do perfil, os estados de hover e o comportamento responsivo estão todos em você para construir e continuar trabalhando O widget Master Addons envia aqueles como predefinições, então a maior parte do trabalho é configuração, não design Se uma grade fixa se adequa melhor a você do que um carrossel, o guia da seção dos membros da equipe cobre isso em vez disso.
| Slider Equipe | Membro da equipe | |
|---|---|---|
| Layout | Um widget, um carrossel deslizante de muitos membros | Um widget por pessoa, colocado em uma grade |
| Predefinições | 6 (3 grátis, 3 Pro) | 11 (6 grátis, 5 Pro) |
| Melhor para | Equipes maiores, palestrantes, clientes ou linhas de depoimentos | Pequenas equipes onde todos devem estar visíveis ao mesmo tempo |
| Navegação | Setas, pontos, fração, barra de progresso, barra de rolagem, reprodução automática | Nenhum necessário |
Elementor e Elementor Pro não têm widget de membro da equipe próprio O Carrossel de Depoimentos do Pro é a correspondência mais próxima para cotações, não para perfis de funcionários.
Comece com uma predefinição de estilo (3 grátis, 3 profissionais)
Você não precisa projetar um cartão do zero Comece de uma predefinição como Team Carousel, Circle Gradient ou Content on Hover, cada uma com um visual acabado que você pode ajustar Em seguida, construa a equipe no repetidor de Conteúdo: adicione um item por membro, carregue a foto, defina a resolução da imagem e preencha o Nome, Designação e uma breve Descrição Funciona como um pequeno banco de dados visual para sua equipe, executado a partir de um painel.
- Predefinições gratuitas: Team Carousel, Circle Gradient (fundos do Círculo 01 a 03) e Conteúdo no Hover.
- Predefinições profissionais: Animação em Círculo, Esquerda Social ao Passear, Gaveta de Conteúdo, mais Círculo 04 a 07 e Animação 4.
- Gestão de repetidores: adicionar, duplicar, remover ou arrastar membros em ordem, cada um com imagem, nome, designação, descrição e links sociais.
Controles e Navegação Carrossel
Defina o carrossel para se comportar da maneira que quiser Ligue o Autoplay e defina sua velocidade, escolha quantos slides rolam de cada vez e ligue o Loop para um carrossel sem fim Em seguida, decida como as pessoas se movem através dele: setas, pontos, setas com pontos, setas com um contador de frações, uma barra de progresso ou uma barra de rolagem, com as setas dentro ou fora do controle deslizante O layout pode ser um Carrossel plano ou um Coverflow 3 D. Você também pode esconder as setas no celular, o que vale a pena fazer, já que elas tendem a aglomerar uma tela de telefone de qualquer maneira.
- Reprodução automática e loop: defina a velocidade de reprodução automática, a velocidade de animação, o loop e os slides para rolar.
- Navegação: setas, pontos, ambos, fração ou progresso, com sete posições e ícones de seta personalizados.
- Slides por coluna: 1 a 6 cartões de uma só vez, definido por dispositivo.
- Móvel: oculte as setas de navegação nos telefones para manter a visualização aberta.
Estilo Cada Elemento do Slider
Cada camada estilos por conta própria Defina o olhar geral primeiro, o plano de fundo deslizante e alinhamento de conteúdo, em seguida, vá para o detalhe: dê o Nome, Designação e Descrição sua própria cor, tipo e espaçamento O cartão membro tem fundos separados, bordas e sombra de caixa para seus estados Normal, Hover e Ativo, de modo que o cartão realmente reage como as pessoas se movem através do carrossel.
- Estilo de texto: separar tipo, cor e espaçamento para o nome, função e bio.
- Estados do cartão: estilo diferente para o cartão quando ele é Normal, Hover ou Ativo.
- Estilo de seta: cor, fundo, tamanho, borda e preenchimento para as setas de navegação, normal e pairar.
Perfis Sociais e Efeitos de Hover
Adicione o Facebook, Twitter, Instagram, LinkedIn, Dribbble, TikTok ou URL do YouTube de um membro, ou um endereço de e-mail, e os ícones aparecem em seu cartão como um conjunto de estilo Conteúdo no Hover (gratuito) e Esquerda Social no Hover (Pro) segure a biografia ou os ícones de volta até que alguém passe o cartão, então revele-os Você pode colorir os ícones e seus fundos separadamente para os estados normal e pairar, para que a revelação pareça parte do design em vez de uma reflexão tardia.
- Ligações sociais: sete redes mais e-mail por membro Os campos vazios são ignorados.
- Estilo de ícone: cor do ícone e fundo para Normal e Hover.
- Predefinições de passagem: O conteúdo no Hover é gratuito, a Esquerda Social no Hover e a Gaveta de Conteúdo precisam do Pro.
Como adicionar um controle deslizante de equipe no Elementor?
Um controle deslizante da equipe de trabalho leva alguns minutos Sem códigos de acesso, sem plugin de controle deslizante separado.
- Instale e ative Master Addons e, em seguida, edite uma página com o Elementor.
- Pesquise no painel de widgets Slider Equipe e arraste-o para a página.
- Escolha uma predefinição de estilo para definir a aparência básica.
- No repetidor de Conteúdo, clique em + Adicionar item para cada membro e preencha a foto, nome, designação, descrição e links sociais.
- Abra as configurações do carrossel para reprodução automática, loop, slides para rolar e navegação.
- Estile o texto, os cartões e as setas para combinar com sua marca e, em seguida, publique.
Uma coisa a verificar antes de chamá-lo feito: upload quadrado, fotos uniformemente cortadas Tamanhos de imagem incompatíveis são a razão usual um controle deslizante da equipe olha fora, uma vez que um tiro na cabeça alto joga toda a linha fora da linha Cada configuração é coberta no Membros da equipe Documentação do carrossel.
Não apenas para equipes: clientes e depoimentos
É marcado para equipes, mas sob o capô é um carrossel de perfil, por isso funciona como um controle deslizante de testemunho ou um carrossel de clientes Deixe cair um logotipo de cliente ou foto de cliente no campo de imagem, a pessoa ou empresa no nome, seu papel na designação e a citação na descrição As mesmas predefinições e controles são transferidos.
- Página da equipe: fotos, funções, biografias e links sociais para sua equipe.
- Slider de depoimento: foto do cliente, nome, empresa e sua cotação.
- Carrossel do cliente: logotipos com uma linha curta sobre cada projeto.
- Programação de palestrantes ou autores: fotos de cabeça com biografia e link out.
Se você quiser apenas um carrossel de imagem simples, o Carrossel de imagem do elementor é a escolha mais simples.
Perguntas frequentes sobre o elemento deslizante da equipe
Quantos membros da equipe posso adicionar ao controle deslizante?
Tantos quantos você precisar Continue clicando + Adicionar item na seção Conteúdo para adicionar perfis, e o carrossel leva qualquer número Uma equipe muito grande adiciona peso à página, no entanto, então escolha uma resolução de imagem menor e comprima as fotos dos membros quando você estiver nas dezenas.
O controle deslizante da equipe Elementor responde em dispositivos móveis e tablets?
Sim. o controle deslizante, as imagens, o texto e a navegação se adaptam, e os slides por visualização e intervalo de itens se ajustam em telas menores Para um controle mais rígido, use o modo responsivo do Elementor para definir diferentes tamanhos de fonte ou dimensões de imagem no tablet e no celular.
O widget do Team Slider é gratuito?
Sim. Team Slider está no plugin gratuito Master Addons com três predefinições: Team Carousel, Circle Gradient e Content on Hover. Circle Animation, Social Left on Hover, Content Drawer e os fundos de círculo extra precisam de Master Addons Pro. Também funciona como um testemunho ou carrossel de clientes: coloque a foto ou logotipo em Imagem, o nome em Nome e a citação em Descrição.
Como altero a velocidade de reprodução automática?
Em Configurações de carrossel, procure Velocidade de reprodução automática O valor está em milissegundos, então 5000 é cinco segundos Abaixe-o para slides mais rápidos (3000 por três segundos) ou aumente-o para desacelerá-los (7000 por sete segundos).
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
