Usando as animações da Divi para desdobrar o conteúdo com imagens deslizantes
Publicados: 2017-10-12Bem-vindo à parte 2 desta série de 5 partes que ensinará como usar as novas opções de animação do Divi para criar seções de página incríveis. Vou guiá-lo através de como construir as diferentes seções de nossa página de demonstração ao vivo, a fim de mostrar as técnicas para adicionar animações ao seu site. Os recursos de animação são realmente divertidos e fáceis de usar. E com o Visual Builder, você pode ver sua criação ganhar vida em cada estágio do caminho. Junte-se a mim enquanto exploramos o poder das animações Divi.
Na parte 1 de nossa série, criamos as duas primeiras seções da página de demonstração de animação. O design e a animação do cabeçalho na primeira seção mostraram uma maneira única de animar os elementos de um módulo de texto dentro de uma seção padrão de tela inteira. Ao construir a segunda seção, descobrimos uma maneira de incorporar animações sutis e harmoniosas a linhas de conteúdo que poderiam ser facilmente usadas para apresentar conteúdo em uma página de destino de maneira envolvente.
Hoje continuamos nossa jornada para criar layouts de seção que usem animação de maneira eficaz (e criativa) ao rolar a página. Estaremos construindo a terceira e a quarta seções de nossa página de demonstração ao vivo, mostrando o poder dos recursos de animação do Divi. Ambas as seções têm layouts que podem ser facilmente adotados para seus próprios projetos para mostrar produtos ou serviços.
Vamos começar.
Aqui está uma prévia do que estaremos construindo na postagem de hoje
Seção 3
Seção 4
Preparando os Elementos de Design
Prepare suas imagens
Para a terceira seção, você precisará de duas imagens. O primeiro deve ter cerca de 880 × 600 e o segundo, cerca de 790 × 880. Esses tamanhos de imagem não precisam ser exatos. Estou apenas incluindo essas dimensões para dar uma ideia.
Ao construir a quarta seção, você também terá duas imagens em torno de 600 × 400.
Use o Visual Builder
Não há necessidade de código avançado aqui. Usaremos apenas o Visual Builder para projetar as próximas duas seções de nossa página que criamos na parte 1 desta série. Como sua página já está configurada, você está pronto para começar.
Usando as animações da Divi para desdobrar o conteúdo com imagens deslizantes
Inscreva-se no nosso canal no Youtube
Seção de construção 3 da demonstração
A Seção 3 é um ótimo exemplo de como projetar e animar o Módulo de Chamada para Ação com uma imagem que o acompanha.
Vamos mergulhar.
Usando o Visual Builder, adicione uma seção regular com uma linha de duas colunas. Na coluna da esquerda, adicione um módulo de imagem.
Atualize as configurações de imagem da seguinte forma:
Na guia Conteúdo ...
URL da imagem: [insira sua imagem 880 × 600]
Na guia Design ...
Forçar largura total: SIM
Estilo de animação: slide
Direção da animação: esquerda
Intensidade de animação: 20%
Opacidade inicial da animação: 100%
Salvar configurações
Adicionar Módulo Divisor
Na coluna certa, vamos mostrar nosso conteúdo usando o módulo divisor e o módulo Call to Action. O módulo divisor será usado para adicionar uma linha divisória curta acima do texto.
Adicione um módulo divisor à coluna da direita.
Em seguida, atualize as configurações da seguinte forma:
Na guia Conteúdo ...
Mostrar divisor: SIM
Na guia Design ...
Cor: # e4ca77
Peso do divisor: 4px
Largura: 80px (você deve digitar este valor, pois o padrão é porcentagem)
Alinhamento do Módulo: padrão (esquerda)
Margem personalizada: 60px superior, 0px inferior
Estilo de animação: Dobra
Direção da animação: direita
Duração da animação: 1200 ms
Atraso de animação: 50ms
Intensidade de animação: 70%
Opacidade inicial da animação: 0%
Salvar configurações
Adicionar um módulo de apelo à ação
No Módulo divisor, adicione um Módulo de frase de chamariz com as seguintes configurações:
Na guia Conteúdo ...
Título: “A Visão Perfeita”
Texto do botão: “Saiba mais”
Conteúdo: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, eficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, eficitur nisi. ”
Ligação: #
Usar cor de fundo: NÃO
Na guia Design ...
Cor do Texto: Escuro
Orientação do Texto: Esquerda
Fonte do cabeçalho: Lato, maiúscula (TT)
Tamanho da fonte do cabeçalho: 38px
Cor do texto do cabeçalho: # 0c0c0c
Espaçamento entre letras do cabeçalho: 0.2em
Altura da linha de cabeçalho: 1,4em
Fonte do corpo: Lato
Tamanho da fonte do corpo: 18 px
Cor do corpo do texto: # 9e9e9e
Altura da linha corporal: 1,8em
Use estilos personalizados para botão: SIM
Tamanho do texto do botão: 15px
Cor do texto do botão: # 000000
Cor de fundo do botão: rgba (225,225,225,0)
Largura da borda do botão: 0 px
Espaçamento entre letras dos botões: 2 px
Fonte do botão: Lato, Negrito (B), Maiúscula (TT)
Ícone do botão: seta para a direita
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
Espaçamento entre letras do botão ao passar o mouse: 0 px
Estilo de animação: Dobra
Direção da animação: direita
Duração da animação: 1200 ms
Atraso de animação: 50ms
Intensidade de animação: 70%
Opacidade inicial da animação: 0%
Salvar configurações
Agora clique para editar as configurações de linha e atualizar o seguinte:
Na guia Design ...
Usar largura personalizada: SIM
Largura personalizada: 1366 px
Na guia Avançado ...
Adicione o seguinte CSS personalizado à caixa Elemento principal da coluna 1:
z-index: 999;
Salvar configurações
Duplique sua linha e atualize-a
É isso para a primeira linha. Para economizar tempo ao criar a segunda linha, duplique a linha que acabou de criar.
Edite as configurações de linha duplicada da seguinte maneira:
Na guia Avançado ...
Retire o CSS personalizado no elemento principal da coluna 1 e adicione-o à caixa Elemento principal da coluna 2:
z-index: 999;
Como nossa imagem ficará na coluna da direita, precisamos que essa coluna fique no topo da animação do texto à esquerda.
Salvar configurações
Atualizar o módulo de imagem e o módulo de frase de chamariz na segunda linha
Em seguida, arraste o módulo de imagem para a coluna direita e arraste o módulo divisor e o módulo de call to action para a coluna esquerda.
Esta seção terá uma estrutura de coluna ligeiramente diferente. Clique no ícone Alterar Linha de Estrutura de Coluna (próximo ao ícone de linha duplicada) e selecione um layout de coluna de dois terços e um terço.
Agora tudo o que precisamos fazer é revisitar cada um dos módulos dentro da linha e fazer algumas alterações.
Primeiro, atualize as configurações do Módulo divisor da seguinte forma:
Na guia Design ...
Alinhamento do Módulo: Direito
Direção da animação: esquerda
Salvar configurações
Em seguida, atualize as configurações do módulo de call-to-action da seguinte forma:
Título: “Fala por si mesmo”
Orientação do texto: direita
Alinhamento do Texto do Cabeçalho: Direito
Largura: 700 px (digite)
Direção da animação: esquerda
Salvar configurações
Em seguida, atualize o Módulo de imagem na coluna da direita com sua nova imagem 790 × 880.
É isso para a seção 3!
Confira seu resultado.
Seção de construção 4 da demonstração
A seção 4 leva o design do Módulo de imagem a outro nível com alguns truques CSS avançados. E, empilhar módulos de texto para dobrá-los em uma dobradiça combina bem com a entrega. Vamos mergulhar.
Usando o Visual Builder, adicione uma seção regular com uma linha de duas colunas (metade da metade). Antes de adicionarmos nosso primeiro módulo, vamos adicionar uma cor de fundo à nossa seção. Clique para editar as configurações da seção.
Na guia de conteúdo, selecione a guia de cor de fundo e digite a cor # 262938.
Salvar configurações
Adicione o Módulo do Primeiro Texto
Na coluna da esquerda, adicione um Módulo de Texto e atualize as Configurações de Texto da seguinte maneira:
Na guia Conteúdo ...
Insira o seguinte html na guia de texto da caixa de conteúdo:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
Na guia Design ...
Cor do Texto: Claro
Fonte do cabeçalho: Playfair Display, Negrito (B)
Tamanho da fonte do cabeçalho: 38px
Altura da linha de cabeçalho: 1,3em
Margem personalizada: 20px inferior
Animação: Dobra
Direção da animação: para cima
Adicione o segundo módulo de texto
Em seguida, adicione outro módulo de texto diretamente sob o módulo de texto atual. Em seguida, atualize as configurações da seguinte forma:
Na guia Conteúdo ...
Conteúdo: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, eficitur nisl. Sed nec purus tempus, sagittis mi id, eficitur nisl. ”
Na guia Design ...
Cor do Texto: Claro
Tamanho da fonte do texto: 18px
Cor do texto do texto: rgba (255,255,255,0,66)
Altura da linha de texto: 1,9em
Margem personalizada: 40px inferior
Estilo de animação: Dobra
Direção da animação: baixo
Atraso de animação: 150ms
Salvar configurações
Adicionar o Módulo de Botão
Adicione um módulo de botão no último módulo de texto e atualize as configurações da seguinte forma:
Texto do botão: Saiba mais
URL do botão: #
Use estilos personalizados para botão: SIM
Tamanho do texto do botão: 15px
Cor do texto do botão: # 01254c
Cor de fundo do botão: #ffffff
Raio da borda do botão: 0 px
Fonte do botão: negrito (B), maiúsculo (TT)
Preenchimento personalizado: 10px superior, 30px direito, 10px inferior, 30px esquerdo
Estilo de animação: slide
Direção da animação: baixo
Duração da animação: 1600ms
Atraso de animação: 150ms
Intensidade de animação: 20%
Salvar configurações
Adicionar Módulo de Imagem à Coluna Direita
É isso para essa coluna. Agora precisamos adicionar um Módulo de imagem à coluna da direita. Em seguida, atualize as configurações da seguinte forma:
Na guia Conteúdo ...
URL da imagem: [insira sua imagem 600 × 400]
Na guia Design ...
Forçar largura total: SIM
Estilo de animação: slide
Direção da animação: direita
Atraso de animação: 800ms
Intensidade de animação: 20%
Salvar configurações
Atualizar configurações de linha
Agora clique para editar as configurações de linha e atualizar o seguinte:
Na guia Design ...
Usar largura personalizada: SIM
Largura personalizada: 1366 px
Preenchimento personalizado: 27px superior, 0px direito, 170px inferior, 0px esquerdo
Coluna 1 Preenchimento personalizado: 6% superior
Na guia Avançado ...
Adicione o seguinte CSS personalizado à caixa Elemento principal da coluna 1:
z-index: 999;
Este css adiciona garante que o texto permaneça no topo da imagem durante a animação.
Em seguida, adicione o seguinte CSS personalizado à caixa Elemento principal da coluna 2:
transform: scale(1.3); transform-origin: top right;
Este css adiciona um design inteligente para dimensionar (aumentar) o tamanho de tudo na coluna 2 (a imagem). A propriedade de origem da transformação informa a coluna para dimensionar a partir do canto superior direito da linha. Isso cria uma ligeira sobreposição do texto à esquerda e da imagem.
Salvar configurações
Duplique e atualize sua linha
Agora, assim como fizemos na seção 3, vamos duplicar a linha. Depois de duplicar a linha, arraste os 2 módulos de texto e o módulo de botão da coluna da esquerda para a direita. E arraste o módulo de imagem da coluna direita para a esquerda. Agora tudo o que precisamos fazer é fazer algumas pequenas atualizações em nossa linha duplicada e em seu conteúdo.
Primeiro, vamos atualizar as configurações de linha com o seguinte:
Na guia Design ...
Preenchimento personalizado: 40px superior, 0px direito, 40px inferior, 0px esquerdo
Preenchimento personalizado da coluna 1: [restaurar para o padrão; apagar 6% superior]
Preenchimento personalizado da coluna 2: 6% superior
Na guia Avançado ...
Apague o CSS personalizado da caixa de elemento principal da coluna 1 e da caixa de elemento principal da coluna 2. Isso foi transportado da duplicação e não precisamos mais dele.
Atualizar Módulo de Imagem
Em seguida, atualize o Módulo de imagem (agora na coluna à esquerda) com o seguinte:
Na guia Conteúdo ...
URL da imagem: [insira sua nova imagem 600 × 400]
Na guia Design ...
Direção da animação: esquerda
Na guia Avançado ...
Se você estava pensando que esta imagem já estava desfocada. pense de novo! Tudo o que você precisa fazer para adicionar esse efeito de desfoque é adicionar a seguinte linha de CSS personalizado à caixa Elemento principal:
filter: blur(5px) opacity(.6);
Além do efeito de desfoque, este css também torna a imagem semitransparente com uma opacidade de 60%.
Salvar configurações
Atualizar Módulo de Texto na Coluna da Direita
Movendo-se para a coluna direita, atualize o conteúdo superior do Módulo de texto com um cabeçalho h1 mais curto:
<h1>Consectetur adipiscing elit</h1>
Salvar configurações
E voila! Concluímos a seção 4. Vamos verificar nosso resultado final.
Bônus: Baixe essas seções para facilitar a importação
Como um bônus, empacotamos as seções construídas no tutorial de hoje em um download gratuito que você pode obter usando o formulário de inscrição por e-mail abaixo. Basta inserir seu e-mail e o botão de download aparecerá. Não se preocupe em “assinar novamente” se você já faz parte do nosso Divi Newsletter. Reinserir seu e-mail não resultará em mais e-mails ou duplicatas. Ele simplesmente revelará o download.
Aproveitar!
Baixe o Pacote de Layout
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 usar esses downloads, comece localizando o arquivo compactado denominado Animation_Effects_Part_2.zip em nossa pasta de downloads. Descompacte-o para revelar as seguintes importações.
Efeitos de animação, parte 2 (seção 1) .json
Efeitos de animação, parte 2 (seção 2) .json
Navegue em seu Admin do WordPress para Divi> Biblioteca Divi> Importar e Exportar. Quando o modal de portabilidade for exibido, clique na guia de importação e no botão denominado escolher arquivo.
Selecione o arquivo json de sua preferência e clique em “Import Divi Builder Layouts”. Assim que a importação for concluída, navegue até a postagem ou página à qual deseja adicionar uma das seções acima.
Ative o construtor visual. Navegue até a parte da página à qual deseja adicionar uma das seções acima. Ao clicar no ícone adicionar nova seção, será apresentada a opção “Adicionar da biblioteca”. Escolha esta opção e selecione o layout desejado.
Empacotando
Além de me deixar com fome de carboidratos, esta seção mostra maneiras criativas de exibir e animar imagens. Além disso, os módulos de texto dobrando-se em uma dobradiça com o slide de botão atrasado ainda induz o usuário a clicar no CTA.
Chegando
Na parte 3 desta série, mostrarei uma bela maneira de projetar e animar módulos de blurb. Este layout de seção pode ser usado para uma variedade de propósitos. Eu posso ver isso como uma forma de mostrar o processo de seu serviço ou uma lista de seus serviços ou produtos.
Ansioso por isso.
Não se esqueça de entrar em contato nos comentários abaixo!