Baixe um carrossel de membros da equipe de rolagem automática GRATUITO feito com os efeitos de rolagem da Divi
Publicados: 2020-05-03Ao configurar sua página sobre, você provavelmente desejará apresentar os membros de sua equipe nela também. Ao fazer isso, você permite que os visitantes se conectem com as pessoas por trás de sua empresa. Se você está procurando uma maneira de animar a seção de membros da equipe na rolagem, vai adorar este tutorial. Vamos recriar um lindo carrossel de membros da equipe de rolagem automática que se move conforme os visitantes rolam para baixo na página. Você também poderá baixar o arquivo JSON gratuitamente!
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Baixe o layout do carrossel dos membros da equipe GRATUITAMENTE
Para colocar as mãos no layout de carrossel gratuito para membros da equipe, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Vamos começar a recriar!
Adicionar nova seção
Espaçamento
Comece adicionando uma nova seção regular à página em que você está trabalhando. Abra as configurações da seção e adicione algum preenchimento personalizado em diferentes tamanhos de tela.
- Preenchimento superior: 200 px (desktop), 100 px (tablet e telefone)
- Preenchimento inferior: 200 px (desktop), 100 px (tablet e telefone)
Transbordamentos
Para garantir que nenhuma barra de rolagem horizontal apareça em nosso design, ocultaremos os excessos de seção na guia avançada.
- Excesso horizontal: oculto
- Estouro vertical: oculto
Adicionar linha # 1
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha, vá para a guia de design e modifique a largura e a largura máxima nas configurações de dimensionamento.
- Largura: 90%
- Largura máxima: 1580 px
Espaçamento
Estamos adicionando alguns preenchimentos personalizados na parte superior e inferior também.
- Enchimento superior: 100px
- Preenchimento inferior: 100px
Adicionar Módulo de Texto à Coluna
Adicionar conteúdo H2
É hora de adicionar módulos, começando com um primeiro Módulo de Texto. Insira algum conteúdo H2 de sua escolha.
Configurações de texto H2
Vá para a guia de design do módulo e altere as configurações de texto H2 da seguinte forma:
- Fonte do título 2: areia movediça
- Cabeçalho 2 Peso da fonte: Semi negrito
- Cor do texto do título 2: # 000000
- Tamanho do texto do título 2: 70 px (desktop), 50 px (tablet), 40 px (telefone)
Adicionar Módulo Divisor à Coluna
Visibilidade
Em seguida, adicione um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Linha
Faça algumas alterações nas configurações de linha a seguir.
- Cor da linha: # edf000
- Estilo de linha: Sólido
- Posição da linha: topo
Dimensionamento
E conclua as configurações do módulo, alterando as configurações de dimensionamento de acordo:
- Peso do divisor: 20px
- Largura: 11%
- Alinhamento do Módulo: Esquerda
- Altura: 20px
Adicionar linha # 2
Estrutura da Coluna
Para a próxima linha! Use a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:
- Usar largura de calha personalizada: Sim
- Largura da calha: 2
- Largura: 100%
- Largura máxima: 100%
Espaçamento
Em seguida, adicione um pouco de preenchimento esquerdo e direito apenas em tamanhos de tela menores.
- Preenchimento esquerdo: 5% (apenas tablet e telefone)
- Preenchimento direito: 5% (apenas tablet e telefone)
Configurações de coluna (5x)
Agora, nas próximas três etapas deste tutorial, faremos algumas alterações nas colunas. Aplique todas as três etapas a cada uma das colunas em sua linha.
Fundo Gradiente
Primeiro, adicione um fundo gradiente a cada coluna.
- Cor 1: rgba (255,255,255,0)
- Cor 2: rgba (0,0,0,0,84)
- Tipo de gradiente: Linear
- Posição inicial: 25%
- Posição final: 86%
- Colocar gradiente acima da imagem de fundo: Sim
Imagem de fundo
Em seguida, carregue uma imagem de plano de fundo de sua escolha. Esta imagem de fundo representa cada membro da equipe, portanto, use uma imagem diferente para cada coluna.
- Tamanho da imagem de fundo: capa
- Posição da imagem de fundo: centro
Elemento Principal
Conclua as configurações da coluna adicionando algum CSS personalizado ao elemento principal do tablet de cada coluna. Essas linhas de código CSS nos ajudarão a colocar as colunas uma abaixo da outra no tablet, ao invés de ter duas próximas uma da outra.
width: 100% !important; margin: 50px 0px 50px 0px !important;
Adicionar Módulo de Pessoa à Coluna
Adicionar conteúdo
Para compartilhar as informações do membro da equipe, usaremos um Módulo Pessoa. Adicione o primeiro Módulo de pessoa à coluna 1 e use algum conteúdo de sua escolha.
Remover imagem
Em seguida, remova a imagem. Em vez disso, estamos usando a imagem de plano de fundo da coluna.
Imagem de fundo
Em seguida, adicionaremos uma sobreposição de imagem como imagem de fundo do módulo. Você pode encontrar o que estamos usando baixando a pasta no início deste tutorial.
- Tamanho da imagem de fundo: capa
- Posição da imagem de fundo: centro
Configurações de texto do título
Vá para a guia de design do módulo e altere as configurações de texto do título da seguinte forma:
- Nível do título do título: H3
- Fonte do título: areia movediça
- Peso da fonte do título: negrito
- Cor do texto do título: #ffffff
- Tamanho do texto do título: 230%
Configurações do corpo do texto
Modifique as configurações do corpo do texto também.
- Fonte do corpo: Open Sans
- Cor do corpo do texto: #ffffff
- Altura da linha corporal: 2,2em
Configurações de posição de texto
Em seguida, faça algumas alterações nas configurações do texto de posição.
- Fonte de posição: Open Sans
- Posição da cor do texto: # edf000
Espaçamento
E conclua as configurações do módulo adicionando alguns valores de preenchimento personalizados às configurações de espaçamento.
- Enchimento superior: 70%
- Estofamento inferior: 10%
- Preenchimento esquerdo: 10%
- Preenchimento direito: 10%
Clonar Módulo Pessoa 4x
Depois de concluir o Módulo Pessoa, você pode clonar o módulo inteiro quatro vezes.
Coloque duplicatas nas colunas restantes
Coloque os módulos duplicados nas quatro colunas restantes da linha. Certifique-se de alterar o conteúdo também.
Transforme a linha em carrossel de rolagem automática
Modificar o tamanho da linha # 2
Agora, para transformar essa linha em um carrossel de membro da equipe com rolagem automática, precisaremos reabrir as configurações de linha e alterar a largura e a largura máxima nas configurações de dimensionamento.
- Largura: 180%
- Largura máxima: 220% (desktop), 100% (tablet e telefone)
Adicionar movimento horizontal da linha 2
Conclua as configurações de linha adicionando algum movimento horizontal às configurações de efeito de rolagem na guia avançada e pronto!
- Habilitar Movimento Horizontal: Sim
- Compensação inicial:
- Desktop: 2,5
- Tablet e telefone: 0
- Deslocamento médio: 0 (em 40%)
- Compensação final:
- Desktop: -25 (em 62%)
- Tablet e telefone: 0
- Gatilho de efeito de movimento: meio do elemento
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Pensamentos finais
Nesta postagem, mostramos como ser criativo com os efeitos de rolagem integrados do Divi. Mais especificamente, recriamos um belo carrossel de membros da equipe com rolagem automática. Conforme os visitantes rolam para baixo na página, uma parte diferente do carrossel é exibida. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.
Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.