Como usar vários controles deslizantes para mostrar serviços com animação automática
Publicados: 2019-07-26A maioria das empresas precisará apresentar serviços em seu site aos visitantes. E uma maneira de mostrar os serviços acima da dobra é usar um controle deslizante. Isso permite que você destaque cada serviço um por um, mas a desvantagem é que o usuário terá que navegar para frente e para trás para encontrar o serviço de que precisa. Uma melhor experiência do usuário pode ser manter esses serviços visíveis para o usuário o tempo todo.
Neste tutorial, vou mostrar como mostrar serviços usando um controle deslizante e, ao mesmo tempo, manter cada conteúdo de serviço visível para o usuário o tempo todo. Para fazer isso, usaremos vários controles deslizantes e animação automática para que cada serviço seja destacado um a um com um design de slide específico. E faremos isso usando as opções de design integradas do Divi.
Vamos começar.
Espiada
Aqui está uma rápida olhada no design usando vários controles deslizantes para mostrar os serviços um por um.
Baixe o Showcase Services com Multiple Sliders Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, 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!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
Inscreva-se no nosso canal no Youtube
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Criando os serviços de demonstração com design de vários controles deslizantes na Divi
Crie a seção e a linha 1
Para começar, crie uma seção regular com uma linha de uma coluna.
Então, antes de adicionar qualquer módulo, abra as configurações da seção e adicione uma imagem de fundo escuro (ou cor de fundo).
Em seguida, abra as configurações de linha e atualize o seguinte:
Largura máxima: 80%
Adicione o texto do cabeçalho com um módulo de texto
Para adicionar o texto do cabeçalho ao design, vamos usar um módulo de texto. Vá em frente e adicione um módulo de texto à linha.
Em seguida, atualize o conteúdo do corpo do módulo de texto com o seguinte HTML:
<h1>How can we help?</h1>
Em seguida, atualize as configurações de design da seguinte forma:
Fonte do cabeçalho: Montserrat
Cor do texto do título: #ffffff
Tamanho do texto do título: 6vw
Preenchimento: 5% superior, 5% inferior
Adicione a segunda linha
Em seguida, adicione outra linha com um layout de três colunas.
Em seguida, atualize as configurações de linha com uma largura máxima de 80%.
Largura máxima: 80%
Adicionar um controle deslizante à coluna 1
Agora estamos prontos para começar a adicionar nossos controles deslizantes a cada uma das colunas. Comece adicionando um módulo deslizante à coluna 1.
Exclua o segundo slide padrão para que apenas um slide permaneça.
Em seguida, atualize o seguinte:
Mostrar setas: NÃO
Mostrar controles: NÃO
Cor de fundo: rgba (0,0,0,0)
Alinhamento de Texto: Esquerda
Fonte do título: Montserrat
Peso da fonte do título: Semi negrito
Cor de fundo do botão: # 38b3cb
Largura da borda do botão: 0 px
Em seguida, defina as opções de animação automática da seguinte forma:
Animação Automática: ON
Velocidade de animação automática: 3000
Continuar slide automático ao passar o mouse: LIGADO
Por padrão, Divi adicionará uma animação de esmaecimento sutil entre os slides. Queremos desativar isso para que não haja mudanças perceptíveis entre os slides. Para fazer isso, adicione o seguinte CSS personalizado à descrição do slide:
animation: none !important;
Isso cuida das configurações do controle deslizante. Agora precisamos atualizar nossos slides individuais.
Criação de slides para o controle deslizante 1
Usaremos três controles deslizantes com um controle deslizante em cada uma das três colunas. E para obter o tempo dos slides para destacar cada serviço, um por um, precisamos ter três slides para cada controle deslizante. Em seguida, podemos escolher um dos slides a serem projetados para apresentar ou destacar o serviço.
Vamos começar criando os três slides para o Slider 1.
Abra as configurações de cada slide. Em seguida, ajuste o conteúdo do corpo do texto para conter apenas uma frase curta.
Agora salve as configurações de slides individuais e duplique o slide 2 vezes para que você tenha um total de três slides. Lembre-se, para este projeto, você precisa ter o mesmo número de slides que os controles deslizantes / colunas.
Copiando e colando o controle deslizante em cada coluna restante
Com nossos três slides colocados no controle deslizante 1, podemos copiar o módulo do controle deslizante e colá-lo nas colunas 2 e 3.
Agora você deve ter o mesmo controle deslizante em cada coluna. E cada controle deslizante tem três slides idênticos que são configurados para fazer a transição automática a cada 3000ms. E como desabilitamos a animação de fade, você não pode ver as transições entre os slides. No entanto, se alterarmos o design de um dos slides, poderemos ver a diferença quando o controle deslizante for para aquele slide. Isso nos permite alterar o design de um slide em cada controle deslizante, a fim de mostrar (ou destacar) o serviço com animação automática.
Atualizando cada controle deslizante com um slide de demonstração
Para fazer isso, vamos alterar o design do primeiro slide no controle deslizante 1, o segundo slide no controle deslizante 2 e o terceiro slide no controle deslizante 3. Isso irá destacar cada serviço automaticamente (a cada 3000ms) começando da coluna esquerda e terminando com a terceira coluna à direita. Em seguida, ele continuará a repetir esta animação automática.
Atualizar Slider 1 Showcase Slide
Comece abrindo as configurações do controle deslizante 1 e, em seguida, abrindo as configurações do primeiro slide individual.
Para destacar o serviço, vamos atualizar o slide com uma cor de fundo (que corresponda ao botão) e uma imagem de fundo que é mesclada com a cor de fundo usando o modo de mesclagem de multiplicação.
Para fazer isso, adicione a atualização a seguir:
Cor de fundo: # 00b2ca
Imagem de fundo: [carregar imagem de sua escolha]
Mistura de imagem de fundo: multiplique
Em seguida, atualize o estilo do botão para este slide da seguinte maneira:
Cor do texto do botão: # 00b2ca
Cor de fundo do botão: #ffffff
Salvar configurações.
Agora, com o novo design adicionado ao primeiro slide, você verá o primeiro slide destacar o serviço sempre que o controle deslizante chegar ao primeiro slide.
Atualizar Slider 2 Showcase Slide
Para o Slider 2, queremos que o segundo slide seja nosso slide de demonstração para que apareça imediatamente após o slide de demonstração no controle deslizante 1.
Abra as configurações do módulo do controle deslizante para o controle deslizante na coluna 2 e altere a cor de fundo do botão.
Cor de fundo do botão: # 1d4e89
Em seguida, abra as configurações de slides individuais para o segundo slide e atualize o seguinte:
Cor de fundo: # 1d4e89
Imagem de fundo: [upload de imagem de escolha]
Mistura de imagem de fundo: luz suave (ou multiplique para um efeito mais escuro)
Em seguida, atualize o estilo do botão para o slide.
Cor do texto do botão: # 1d4e89
Cor de fundo do botão: #ffffff
Atualizar Slider 3 Showcase Slide
Para o Slider 3 (na coluna 3), precisaremos atualizar o terceiro slide como nosso slide de apresentação para que apareça imediatamente após o segundo slide de apresentação do controle deslizante.
Primeiro, altere a cor do botão do controle deslizante 3 da seguinte maneira:
Cor de fundo do botão: # ef476f
Em seguida, abra as configurações do terceiro slide e atualize o seguinte:
Cor de fundo: # ef476f
Imagem de fundo [inserir imagem de escolha]
Mistura de imagem de fundo: multiplique
Em seguida, atualize o estilo do botão para o slide da seguinte maneira:
Cor do texto do botão: # ef476f
Cor de fundo do botão: #ffffff
Resultado final
Vamos conferir o resultado final.
E aqui está como o design se acumula no tablet e no telefone.
Pensamentos finais
Apresentar serviços usando vários controles deslizantes com animação automática parece um pouco complicado. Mas na verdade é muito fácil depois que você entende o conceito.
Uma vez que cada controle deslizante representa um serviço, você deseja manter o conteúdo igual e certificar-se de que o URL do botão é o mesmo para cada slide.
Existem também muitas outras maneiras de usar essa configuração. Por exemplo, você pode definir a duração da animação automática para velocidades diferentes para que os serviços sejam destacados esporadicamente. E você pode até adicionar serviços diferentes dentro de cada slide dos controles deslizantes para que mais serviços apareçam.
Eu pessoalmente gosto da configuração atual porque mostra a progressão e pode ser usada para mostrar aos visitantes um processo. Mas eu adoraria ouvir seus pensamentos e idéias.
Estou ansioso para ouvir de você nos comentários.
Saúde!