Como atualizar progressivamente as etapas de um processo com os efeitos de rolagem do Divi
Publicados: 2020-03-01As empresas costumam educar seus visitantes sobre seus serviços, oferecendo uma ilustração útil das etapas de seu processo. Por exemplo, uma agência de web design pode mostrar seu processo de desenvolvimento web, ou uma padaria pode apresentar suas etapas para a criação do cupcake perfeito.
Com Divi, podemos levar as “etapas de um processo” a um nível totalmente diferente usando os efeitos de rolagem integrados. Neste tutorial, mostraremos uma maneira simples de atualizar progressivamente as etapas de um processo à medida que o usuário rola a página para baixo. Isso dará ao design um belo impulso interativo que enfatiza criativamente a mensagem pretendida.
Espiada
Baixe o 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?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Como atualizar progressivamente as etapas de um processo com os efeitos de rolagem do Divi
Para criar nosso layout para mostrar as etapas de um processo de rolagem, devemos começar adicionando uma nova linha.
Criando a linha de quatro colunas
Para começar, adicione uma linha de quatro colunas à seção.
Antes de começarmos a adicionar módulos / conteúdo às colunas, abra as configurações da linha e atualize o seguinte:
- Largura da calha: 2
- Largura máxima: 80%
Bastante simples até agora. Agora vamos começar a adicionar algum conteúdo.
Adicionando conteúdo (etapas) a cada coluna
Uma vez que este design apresenta um efeito de rolagem que mostra as etapas de um processo, cada uma de nossas colunas conterá uma das etapas. A coluna 1 conterá conteúdo para ilustrar a etapa 1. A coluna 2 conterá conteúdo para a etapa 2. E assim por diante.
Adicionar Módulo de Texto à Coluna 1
Adicione um novo módulo de texto à coluna 1.
Conteúdo e design do módulo de texto
Em seguida, atualize o conteúdo do texto da seguinte forma:
Abra a guia de design e atualize as seguintes configurações:
- Fonte do texto: Lato
- Peso da fonte do texto: negrito
- Cor do texto do texto: # fc6d71
- Fonte do título 2: Oswald
- Peso da fonte do cabeçalho 2: leve
- Tamanho do texto do título 2: 32px
- Cabeçalho 2 espaçamento entre letras: 1px
- Altura da linha do título 2: 1,3em
- Margem: 0px inferior
- Preenchimento: 10% superior, 10% inferior
- Largura da borda: 1px
- Cor da borda: rgba (166,166,166,0,16)
Adicionar Módulo de Imagem à Coluna 1
Depois que o módulo de texto estiver no lugar, adicione um módulo de imagem abaixo do módulo de texto na coluna 1.
Em seguida, atualize a margem da imagem da seguinte forma:
Copiar e colar o conteúdo da coluna 1
Para acelerar o processo de design, podemos usar a seleção múltipla para selecionar os dois módulos na coluna 1 e colá-los em cada uma das quatro colunas restantes.
Atualizar conteúdo para módulos duplicados
Depois que os módulos duplicados estiverem no lugar, volte e atualize o conteúdo do texto e as imagens para refletir cada uma das quatro etapas do processo.
Uma vez feito isso, seu design deve ser parecido com isto.
Adicionando efeitos de rolagem a cada coluna
Agora estamos prontos para adicionar os efeitos de rolagem para piscar cada etapa do processo conforme o usuário rola a página para baixo. Em vez de adicionar efeitos de rolagem a cada um dos módulos, adicionaremos o efeito de rolagem a cada coluna para que o efeito seja aplicado a todos os módulos no conteúdo.
Para criar o efeito de rolagem intermitente, usaremos o efeito de rolagem Fading In e Out para cada coluna. A ideia é começar o efeito começando com 0% de opacidade, continuar com 100% de opacidade e depois voltar para 0%.
Efeitos de rolagem da coluna 1
Nas configurações de linha, abra as configurações da coluna 1 e adicione o seguinte efeito de rolagem:
Na guia de opções Fading In e Out:
- Habilitar Fading In e Out: SIM
- Opacidade inicial: 0% (na janela de visualização de 20%)
- Opacidade média: 100% (na janela de visualização 25% -45%)
- Opacidade final: 0% (na janela de visualização de 50%)
Efeitos de rolagem da coluna 2
Abra as configurações da coluna 2 e adicione o seguinte efeito de rolagem:
Na guia de opções Fading In e Out:
- Habilitar Fading In e Out: SIM
- Opacidade inicial: 0% (na janela de visualização de 35%)
- Opacidade média: 100% (na janela de visualização 40% -60%)
- Opacidade final: 0% (na janela de visualização de 65%)
Efeitos de rolagem da coluna 3
Efeitos de rolagem da coluna 4
Adicionando um Título
Como toque final, podemos adicionar um título ao nosso layout. Para fazer isso, adicione uma nova linha de uma coluna abaixo da linha atual.
Em seguida, adicione um módulo de texto à linha com o seguinte conteúdo:
Na guia de design, atualize o seguinte:
- Alinhamento de Texto: Lato
- Peso da fonte do cabeçalho 2: leve
- Estilo da fonte do título 2: TT
- Cor do texto do título 2: # fc6d71
- Tamanho do texto do título 2: 70 px (desktop), 40 px (tablet), 24 px (telefone)
- Cabeçalho 2 espaçamento entre letras: 0,5em
Resultado final
Para ver o resultado em uma página ao vivo, você precisará adicionar algum espaço adicional acima e abaixo da seção para ver o efeito de rolagem do início ao fim. Uma maneira fácil de fazer isso é adicionar as margens superior e inferior à seção.
Aqui está o resultado.
Pensamentos finais
A ilustração das etapas de um processo não precisa se limitar a uma imagem estática ou gráfico. Com o efeito de rolagem do Divi, você pode dar vida à ilustração piscando progressivamente cada etapa à medida que o usuário rola a página para baixo. E, como o efeito de rolagem é adicionado a cada coluna, você pode facilmente alterar os módulos / conteúdo de cada coluna sem interromper a funcionalidade. Esperançosamente, esta será uma técnica útil para adicionar à sua caixa de ferramentas de design.
Estou ansioso para ouvir de você nos comentários.
Saúde!