Como criar tutoriais móveis com o módulo Slider da Divi (download grátis!)

Os controles deslizantes sempre foram muito populares em web design. Uma de suas maiores vantagens é o fato de os visitantes poderem percorrê-los em dispositivos móveis. Hoje em dia, deslizar é o novo clique, então nem é preciso dizer que incluir controles deslizantes pode ajudar a melhorar a experiência do usuário móvel que os visitantes têm em seu site. Ao construir um site com Divi, você pode adicionar facilmente o Módulo Slider a qualquer linha ou seção em que estiver trabalhando. E com um pouco de criatividade e experimentação, você pode obter designs web impressionantes.

Uma das coisas que você pode fazer é criar um passo a passo móvel com o Módulo Slider. Você pode adicionar quantos slides quiser e o passo a passo ficará igualmente bom no desktop e no tablet, embora tenha sido inicialmente projetado para dispositivos móveis. Neste post, vamos recriar um exemplo impressionante do zero e oferecer a seção para download no final dele.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado que recriaremos em diferentes tamanhos de tela.

Estático

GIF

Vamos começar a recriar!

Como criar tutoriais móveis com o módulo Slider da Divi

Inscreva-se no nosso canal no Youtube

Adicionar nova seção

Espaçamento

Vamos começar a criar! Adicione uma nova página ou abra uma existente e adicione uma nova seção regular a ela. Abra as configurações da seção e adicione alguns valores de preenchimento personalizados que correspondem aos diferentes tamanhos de tela.

• Preenchimento superior: 4vw (desktop), 5vw (tablet), 3vw (telefone)
• Preenchimento inferior: 4vw (desktop), 5vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 30vw (desktop), 18vw (tablet), 3vw (telefone)
• Preenchimento direito: 30vw (desktop), 18vw (tablet), 3vw (telefone)

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Fundo Gradiente

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente radial.

• Cor 1: # f9f9f9
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente: radial
• Direção Radial: Topo
• Posição inicial: 40%
• Posição final: 40%

Dimensionamento

Continue indo para as configurações de dimensionamento da linha e remova todo o espaço entre as colunas.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Também estamos adicionando algum preenchimento inferior à linha.

• Preenchimento inferior: 30 px

Fronteira

Em seguida, adicione '20px' a cada um dos cantos nas configurações de borda.

Sombra da caixa

Por último, mas não menos importante, adicione uma sombra de caixa sutil à linha para criar alguma profundidade na página.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0,07)

Adicionar Módulo Slider

Mudar a cor do fundo

Assim que terminar de modificar as configurações de linha, você pode prosseguir e adicionar um Módulo Slider. Abra as configurações do módulo e modifique a cor de fundo. Todas as alterações feitas na guia de design serão aplicadas automaticamente a todos os slides que você adicionar posteriormente.

• Cor de fundo: rgba (255,255,255,0)

Configurações de texto

Em seguida, vá para a guia de design e altere as configurações de texto.

• Orientação do Texto: Centro
• Cor da sombra: rgba (0,0,0,0)

Configurações do corpo do texto

Modifique as configurações do corpo do texto a seguir.

• Fonte do corpo: Padrão (Open Sans)
• Tamanho do corpo do texto: 0,6vw (desktop), 1,5vw (tablet), 2,4vw (telefone)
• Altura da linha corporal: 2.2em (desktop), 2.3em (tablet), 2.4em (telefone)

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior também.

• Preenchimento superior: 2vw
• Preenchimento inferior: 2vw

CSS personalizado de botão

Também precisaremos adicionar alguns valores de preenchimento e margem personalizados ao botão do Módulo Slider em particular. Como esse elemento é combinado com diferentes elementos em cada slide, você terá que adicionar o preenchimento e a margem manualmente usando o código CSS na guia avançada.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Remover controles deslizantes ativos

Quando terminar de modificar todas as configurações gerais de slides, você pode prosseguir e remover os slides ativos que já estão lá. Em vez de usar esses, vamos criar um do zero na próxima parte do post. Isso nos ajudará a modificar e personalizar tudo com mais rapidez.

Personalize o primeiro slide

Personalize o conteúdo na caixa de conteúdo

Adicione um novo slide ao Módulo Slider e comece a personalizar o conteúdo na caixa de conteúdo. Nas telas de impressão abaixo, você notará que estamos adicionando a imagem à caixa de conteúdo em vez de às configurações da imagem. Isso nos permitirá colocar a imagem acima do conteúdo escrito. Você pode encontrar as ilustrações que usamos acessando o post do Graphic Illustrator Layout Pack e baixando as imagens no final dele. Também estamos adicionando e estilizando um título H3 na caixa de conteúdo em vez do campo de título para que apareça exatamente onde queremos.

Botão de link

Continue indo para as configurações de link e adicione um link para o botão que redirecionará os visitantes para uma página mais detalhada sobre o slide em questão.

Fundo Gradiente

Em seguida, adicione um fundo gradiente usando as seguintes configurações:

• Cor 1: #aaacff
• Cor 2: rgba (255,255,255,0)
• Tipo de gradiente: radial
• Direção Radial: Topo
• Posição inicial: 30%
• Posição final: 30%

Navegação

Modifique as configurações de texto a seguir.

• Cor personalizada das setas: # f4f4f4
• Dot Nav Custom Color: # 000000

Configurações de texto

E mude a cor do texto nas configurações de texto do slide.

• Cor do Texto: Escuro

Botão

Por último, mas não menos importante, modifique o botão para torná-lo exatamente do jeito que você deseja.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0.8vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: #aaacff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 10 px

Clone Slide quantas vezes forem necessárias

Depois de criar e personalizar o primeiro slide, você pode clonar o slide quantas vezes quiser. Você precisará fazer algumas modificações manuais em cada uma das duplicatas.

Alterar conteúdo na caixa de conteúdo

A primeira coisa que você precisa alterar é o conteúdo da caixa de conteúdo. Isso inclui a imagem / ilustração que está sendo usada. Você pode encontrar as duas ilustrações que foram usadas neste tutorial indo para o post do Graphic Illustrator Layout Pack e baixando as imagens no final dele.

Alterar Link

Altere o link do botão também.

Modificar fundo gradiente

Você também pode personalizar a paleta de cores de cada slide duplicado, alterando a primeira cor do gradiente.

• Cor 1: #ffccaa

Alterar a cor de fundo do botão

Use essa mesma cor para alterar a cor de fundo do botão. Repita essas etapas para cada uma das duplicatas que você criar e pronto!

• Cor de fundo do botão: #ffccaa

Baixe a seção Mobile Walkthrough GRATUITAMENTE

Para colocar suas mãos na seção de orientação móvel gratuita, 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.

Baixe os arquivos

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.

DOWNLOAD

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!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado que recriaremos em diferentes tamanhos de tela.

Estático

GIF

Pensamentos finais

Neste post, mostramos como usar o Módulo Slider do Divi para criar um lindo tutorial móvel. Embora tenha sido inicialmente projetado para tamanhos de tela de dispositivos móveis, parece tão bom em tablets e desktops. Você pode usar essa abordagem para criar todos os tipos de seções de slides em seu site e interagir perfeitamente com seus visitantes. Esperamos que este tutorial inspire você a ser criativo com o Módulo Slider da Divi. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!