Slider 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.
É 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.
Comece com uma predefinição de estilo pronta
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 de um clique: aplique um design completo como Team Carousel ou Circle Animation e você tem um layout para começar.
- Gestão de repetidores: adicione, remova ou arraste membros em ordem com o botão + Adicionar item.
- Perfis de membros completos: imagem, nome, designação, descrição e links sociais para cada pessoa.
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 ou ambos, sentados dentro ou fora do controle deslizante Você também pode esconder as setas no celular, o que vale a pena fazer, já que eles tendem a aglomerar uma tela do 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 ou ambos, com posicionamento personalizado.
- 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 URL do Facebook, Twitter, LinkedIn ou Instagram de um membro e os ícones aparecem em seu cartão como um conjunto de estilo Algumas predefinições, como Social Left on Hover ou Content on Hover, seguram a biografia ou os ícones até que alguém passe o cartão, depois 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.
- Integração de mídia social: adicione até quatro URLs de perfil social por membro da equipe; os ícones são exibidos automaticamente.
- Estilo de ícone: personalize a cor e o plano de fundo do ícone social para os estados normal e pairar.
- Predefinições interativas: Utilize predefinições com animações de hover integradas para revelar bios ou links sociais de forma elegante.
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 em + Adicionar item na seção Conteúdo para adicionar perfis, e o carrossel leva qualquer número Uma equipe muito grande pode arrastar o carregamento inicial da página, no entanto, então comprima as fotos dos membros e ligue o carregamento preguiçoso 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.
Posso usá-lo para depoimentos ou clientes em vez de uma equipe?
Sim. é um carrossel de perfil flexível Coloque um logotipo de cliente ou foto de cliente na imagem, o nome no título, a empresa ou papel na designação, e a citação na descrição Isso lhe dá um controle deslizante de testemunho ou um carrossel de cliente sem adicionar outro widget.
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
