Com o ElementsKit, você pode apresentar o seu site aos membros da sua equipe com um carrossel deslizante elegante. Usando o widget Elementor Team Carousel Slider, você pode mostrar cartões de membros da equipe com fotos, nomes, designações, descrições, vincular perfis sociais e muito mais.

Leia esta documentação para aprender como usar o widget Elementor Team Carousel Slider do ElementsKit.

Plug-ins necessários: #

• Elemento: Baixar plug-in.
• ElementsKit Lite: Baixar plug-in.
• ElementosKit Pro: Obtenha o plug-in.

Etapa 1: ativar o widget deslizante do carrossel da equipe #

Primeiramente, você precisa habilitar o widget no painel do WordPress. Para ativar o widget Team Carousel Slider:

1. Navegar para ElementsKit > Widgets.
2. Encontre o Controle deslizante da equipe da lista e habilitar o widget.
3. Clique no SALVAR ALTERAÇÕES.

Etapa 2: arraste e solte o widget #

Depois disso, arraste e solte o widget ElementsKit Team Carousel Slider no editor Elementor.

Etapa 3: configurar o widget de carrossel da equipe Elementor #

A guia Conteúdo permite definir o conteúdo dos membros da equipe e as configurações do controle deslizante do carrossel da equipe.

3.1 Conteúdo da equipe #

O widget deslizante da equipe possui os seguintes recursos:

1. Estilo: O widget vem com 12 estilos diferentes, incluindo padrão, sobreposição, foco social, sobreposição com detalhes e assim por diante. 

Observação: Estilos diferentes vêm com opções e configurações individuais. As opções são discutidas na parte posterior desta documentação.

2. Ativar pop-up: Os detalhes do membro da equipe aparecerão em um pop-up quando você clicar no nome.
3. Exibir perfis sociais: Para vincular o perfil de mídia social aos detalhes do membro da equipe.
4. Descrição da tela: Para mostrar uma breve descrição do membro da equipe.
5. Botão de exibição: Para adicionar um botão que pode vincular ao perfil ou portfólio do membro.

Detalhes dos membros da equipe #

Você pode adicionar membros da equipe ao controle deslizante clicando no botão ADICIONAR ITEM botão e exclua um membro existente com o ✖ botão. Além disso, pode copiar os detalhes do membro da equipe.

No Conteúdo do Membro:

1. Escolha a imagem do membro: Adicione a foto do membro da equipe.
2. Nome do membro: Insira o nome do membro da equipe.
3. Posição do membro: Mencione a designação do membro da equipe.
4. Sobre o membro: Adicione uma breve descrição do membro da equipe.

Conteúdo do botão:

1. Ícone: Decida se deseja mostrar o ícone do botão e escolha um ícone.
2. Posição do ícone: Defina a posição do ícone antes ou depois do texto.
3. Texto: Insira um texto de botão.
4. URL do link: Adicione um URL para vincular o botão a uma página.

Conteúdo pop-up:

No conteúdo pop-up, você pode adicionar o Número de telefone e E-mail do membro da equipe.

No Conteúdo Social:

Você pode vincular até 5 contas de mídia social. Para cada perfil social, você pode adicionar um URL do perfile usar individual Ícones para cada mídia social.

3.2 Configurações do controle deslizante #

As seguintes opções estão disponíveis nas configurações do controle deslizante do widget Elementor Team Carousel:

1. Espaçamento: Ajuste o espaço entre cada slide.
2. Slides para mostrar: Defina o número de slides a serem exibidos em uma única viewport.
3. Slides para rolar: Decida quantos slides rolar de cada vez.
4. Reprodução automática: Ative a reprodução automática para rolar os slides automaticamente.
5. Velocidade: Quando a reprodução automática estiver ativada, defina a velocidade de rolagem em milissegundos (ms).
6. Pausa ao passar o mouse: A reprodução automática será pausada quando o usuário passar o mouse sobre o controle deslizante.

7. Mostrar seta: Para ativar a navegação por seta para o controle deslizante.
8. Mostrar seta ao passar o mouse: As setas só ficam visíveis quando pairadas.
9. Tipo de seta: Escolha o tipo de seta entre as opções fornecidas - Seta, Texto e Texto com Seta.
10. Ícone de seta para a esquerda: Você pode escolher um ícone para a seta esquerda na biblioteca de ícones.
11. Ícone de seta para a direita: Você pode escolher um ícone para a seta esquerda na biblioteca de ícones.
12. Mostrar pontos: Para ativar a navegação por pontos para o controle deslizante.

• Velocidade e Pausar o foco as opções só aparecem quando a reprodução automática está ativada.
• Mostrar Arros ao passar o mouse, Tipo de seta, Ícone de seta para a esquerda, e Ícone de seta para a direita as opções só aparecem quando “Mostrar seta" está ativado.

Etapa 4: personalizar estilos de widget de carrossel da equipe Elementor #

Você pode personalizar todos os aspectos do controle deslizante do carrossel da equipe e criar um estilo que corresponda à sua marca.

4.1 Conteúdo #

Para personalizar a área de conteúdo do controle deslizante:

• Escolha o Tipo de plano de fundo e Cor de fundo para o estado “Normal” e estado “Hover”.
• Selecione uma Animação flutuante das opções dadas.
• Colocou o Alinhamento para o conteúdo à esquerda, à direita ou ao centro.
• Ajusta a Preenchimento, Preenchimento de conteúdo, e Raio da Fronteira para a área de conteúdo.

4.2 Imagem #

Para personalizar os estilos de imagem no controle deslizante do carrossel da equipe Elementor,

1. Colocou o Tamanho da imagem mostrar.
2. Ajusta a Altura e largura da imagem.
3. Definir um Sombra da caixa para a imagem exibida.
4. Defina uma Box Shadow para a imagem no pop-up.
5. Ajustar Raio da Fronteira, Preenchimento, e Margem para a imagem do membro da equipe.
6. Mudar o Tipo de plano de fundo e Cor de fundo.

4.3 Nome #

Você pode alterar os estilos dos nomes dos membros da equipe.

1. Colocou o Tipografia do nome.
2. Escolher Cores para o estado “Normal” e “Hover”.
3. Ajusta a Margem superior e margem inferior para nome do membro.

4.4 Designação #

Você pode alterar os estilos de designação dos membros da equipe.

1. Colocou o Tipografia da designação.
2. Escolher Cores para o estado “Normal” e “Hover”.
3. Ajusta a Margem Inferior.

4.5 Descrição #

Você pode personalizar os estilos das descrições dos membros da equipe.

1. Colocou o Tipografia da descrição.
2. Escolher Cores para o estado “Normal” e “Hover”.
3. Ajusta a Margem em torno da descrição.

4.6 Botão #

Para personalizar os estilos dos botões,

1. Colocou o Tipografia do texto do botão.
2. Escolha o botão Cor do texto.
3. Selecione Tipo de plano de fundo e Cor de fundo.
4. Escolha o Tipo de borda para o botão.
5. Colocou o Raio da borda, preenchimento, e Margem para o botão.

Você pode definir cores de texto, cores de fundo e cores de borda individuais para o estado “Normal” e “Passar o mouse”.

4.7 Ícone do botão #

Se você usar um ícone de botão, poderá personalizar seus estilos,

1. Escolha o Cor para ícone de botão.
2. Selecione uma Cor do mouse para o ícone do botão.
3. Ajuste o ícone Tamanho.
4. Definir Margem ao redor do ícone do botão.

4.8 Perfil Socialé #

Você pode personalizar os ícones do perfil social com o widget de carrossel da equipe Elementor,

1. Mudar o Alinhamento dos ícones sociais.
2. Você pode selecionar o Mostrar layout dos ícones de perfil social a partir das opções fornecidas: Bloco embutido e Bloquear.
3. Ajuste o geral Tamanho do ícone.
4. Habilite o Usar Altura Largura recurso para ajustar largura, altura e altura da linha individualmente.
5. Você pode escolher o ícone Cor, Cor de fundo, e Tipo de borda.
6. Colocou o Raio da Fronteira, Preenchimento, e Margem para ícones de perfis sociais.

4.9 Controles Modais #

Quando você ativa o pop-up, esta opção de controles modais fica disponível. Os seguintes controles modais estão disponíveis com o widget,

Sobreposição:

1. Escolha a sobreposição Tipo de plano de fundo.
2. Com base no tipo de plano de fundo, escolha o plano de fundo Cor para sobreposição.

Modal:

1. Escolha o modal Tipo de plano de fundo.
2. Com base no tipo de plano de fundo, escolha o plano de fundo Cor para o modal.

Nome:

1. Escolha uma cor para membro Nome.
2. Colocou o Tipografia para texto de nome.
3. Ajusta a Margem inferior para o nome.

Designação:

1. Escolha uma cor para os membros Designação.
2. Colocou o Tipografia para o texto de designação.
3. Ajusta a Margem inferior para a designação.

Descrição:

1. Escolha uma cor para Descrição do membro da equipe.
2. Colocou o Tipografia para o texto de descrição.
3. Ajusta a Margem inferior para a descrição.

Telefone e E-mail:

1. Colocou o Tipografia para o texto de telefone e e-mail.
2. Escolha um texto Cor para telefone e e-mail.
3. Adicione um Cor do mouse para telefone e e-mail.

4.10 Ícone Fechar #

Para o Popup, você pode personalizar o ícone Fechar.

1. Selecione uma Fechar ícone da biblioteca de ícones Elementor.
2. Colocou o Fechar alinhamento de ícones para a direita ou para a esquerda.
3. Você pode escolher Cor do ícone, Cor de fundo do ícone, e Tipo de borda.
4. Além disso, defina o Raio da Fronteira e Preenchimento para o ícone fechar.

4.11 Setas #

Se você ativar a navegação por seta, poderá personalizar seus estilos.

1. Ajusta a Tamanho das setas no carrossel.
2. Você pode definir o Posição da seta. A posição da seta para a esquerda e a posição da seta para a direita podem ser ajustadas individualmente.

3. Selecione um Cor da seta.
4. Escolha uma seta Cor de fundo.
5. Selecione os Tipo de borda para as flechas.
6. Colocou o Raio da Fronteira para as flechas.
7. Ajusta a Preenchimento.

4.12 Pontos #

Se os pontos estiverem ativados, você poderá personalizar os estilos dos pontos.

1. Ajusta a Espaço entre os pontos.
2. Ajuste os pontos Espaçamento de cima para baixo.
3. Você pode alterar o Opacidade dos pontos.
4. Colocou o Largura dos pontos.
5. Colocou o Altura dos pontos.
6. Adicione um Raio da Fronteira para os pontos.
7. Selecione uma Tipo de plano de fundo e cor de fundo.

Ativo:

Você pode personalizar o ponto ativo separadamente.

1. Escolher Tipo de plano de fundo e Cor para o ponto ativo.
2. Selecione um ponto ativo Cor.
3. Ajustar Escala (tamanho) dos pontos ativos.
4. Ajusta a Largura dos pontos ativos.
5. Ajusta a Altura dos pontos ativos.
6. Selecione os Tipo de borda.

Finalmente, o carrossel da equipe está pronto para exibição. O widget Elementor Team Carousel Slider vem com ElementKits Pro. Obtenha o plugin para criar sites sofisticados com recursos avançados como Elementor Team Carousel Slider e muito mais.