3 efeitos de flutuação de transformação perfeita que você pode aplicar às suas imagens com Divi

Procurando uma maneira legal de exibir imagens em seu próximo site Divi? Continue lendo, porque neste post, vamos lidar com 3 efeitos de foco de transformação de imagem que ajudarão a elevar a aparência geral de sua página. Você poderá seguir o processo de recriação de A a Z de três exemplos diferentes e até mesmo baixá-los para uso imediato. O objetivo principal deste tutorial é inspirá-lo a combinar as novas opções de transformação do Divi com as opções já existentes para criar um belo design da web.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado de todos os três exemplos em diferentes tamanhos de tela.

Área de Trabalho

Exemplo 1

Exemplo # 2

Exemplo # 3

Móvel

Exemplo 1

Exemplo # 2

Exemplo # 3

Baixe os efeitos Image Transform Hover GRATUITAMENTE

Inscreva-se no nosso canal no Youtube

Para colocar as mãos nos efeitos de flutuação de transformação de imagem gratuitos, primeiro você precisa baixá-los 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!

Passos Gerais

Adicionar nova seção

Espaçamento

Antes de recriar cada um dos exemplos individualmente, passaremos por algumas etapas gerais. Adicione uma nova seção regular à sua página usando os seguintes valores de margem e preenchimento:

• Margem superior: 200px
• Margem inferior: 200px
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo da coluna 2

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo à segunda coluna.

• Cor de fundo da coluna 2: #efefef

Dimensionamento

Vá para as configurações de dimensionamento a seguir e permita que a linha ocupe toda a largura da tela.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Adicione os seguintes valores de preenchimento personalizado a seguir:

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 2: 10vw
• Preenchimento inferior da coluna 2: 10vw
• Preenchimento esquerdo da coluna 2: 5vw
• Preenchimento direito da coluna 2: 5vw

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo H2

É hora de começar a adicionar os vários módulos à coluna 2, começando com um Módulo de Texto. Insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

Vá para a guia de design e modifique as configurações de texto H2.

• Fonte do título 2: Times New Roman
• Peso da fonte do cabeçalho 2: negrito
• Cor do texto do título 2: # 0f47ff
• Título 2 Tamanho do texto: 3,5vw

Adicionar Módulo Divisor à Coluna 2

Visibilidade

O próximo módulo de que precisamos na segunda coluna é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Em seguida, vá para a guia de design e altere a cor do divisor.

• Cor: # ff961e

Dimensionamento

Modifique os valores de dimensionamento também.

• Peso do divisor: 1px
• Largura: 20%
• Alinhamento do Módulo: Esquerda
• Altura: 0 px

Espaçamento

E crie algum espaço para o módulo usando os seguintes valores de margem superior e inferior:

• Margem superior: 1vw
• Margem inferior: 1vw

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Passe para o próximo módulo, que é outro Módulo de Texto. Insira algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto.

• Fonte do texto: Open Sans
• Tamanho do texto: 0,7vw (desktop), 1,7vw (tablet), 2,5vw (telefone)
• Altura da linha de texto: 1,5 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefone)
• Orientação do Texto: Justificar

Dimensionamento

Modifique também as configurações de dimensionamento.

• Largura: 61% (desktop), 80% (tablet e telefone)

Espaçamento

E adicione alguma margem superior e inferior personalizada.

• Margem superior: 2vw
• Margem inferior: 2vw

Adicione o Módulo de Texto # 3 à Coluna 3

Adicionar conteúdo

Para o próximo e último módulo, precisamos da segunda coluna, que é outro Módulo de Texto. Usaremos este módulo como um botão adicionando algum conteúdo de parágrafo.

Adicionar Link

Continue adicionando um link para o CTA.

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Times New Roman
• Cor do texto: # ff961e
• Tamanho do texto: 1,5 vw (desktop), 2,5 vw (tablet), 3,5 vw (telefone)

Dimensionamento

Altere a largura do módulo nas configurações de dimensionamento também.

• Largura: 48%

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione algum preenchimento personalizado.

• Enchimento superior: 1vw
• Preenchimento inferior: 1vw

Fronteira

Conclua o Módulo de Texto adicionando uma borda inferior com as seguintes configurações:

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 0f47ff

Clonar seção duas vezes

Depois de personalizar a seção e todos os elementos nela contidos, você pode clonar duas vezes. Usaremos cada uma das seções de nossa página para recriar os três exemplos que foram compartilhados no início deste post.

Recriar o Exemplo # 1

Adicionar Módulo de Imagem à Coluna 1

Deixe a caixa de imagem vazia

Vamos começar com o primeiro exemplo! Adicione um novo Módulo de imagem à primeira coluna e certifique-se de deixar a caixa de imagem vazia.

Cor de fundo padrão

Altere a cor de fundo do Módulo de imagem:

• Cor de fundo: # 0f47ff

Hover Background Color

Modifique a cor de fundo ao pairar.

• Cor de fundo: rgba (255,150,30,0,65)

Imagem de fundo

Em vez de enviar uma imagem, adicionaremos uma ao plano de fundo, acompanhada das seguintes configurações:

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: luz suave

Espaçamento

Passe para as configurações de espaçamento do módulo e adicione alguns valores de preenchimento personalizados:

• Mostrar espaço abaixo da imagem: Não
• Acolchoamento superior: 22vw
• Preenchimento inferior: 22vw

Rotação de tradução padrão

Também giraremos a imagem ao pairar. Certifique-se de que a imagem apareça em seu estado original antes de pairar, adicionando '0deg' à opção certa.

• Direita: 0deg

Hover Translate Rotate

Altere este valor ao passar o mouse:

• Direita: 180 graus

Transições

Para criar um efeito imediato, removeremos a duração da transição:

• Duração da transição: 0ms

Recriar o Exemplo # 2

Adicionar Módulo de Imagem à Coluna 1

Deixe a caixa de imagem vazia

Passemos ao segundo exemplo! Novamente, certifique-se de deixar a caixa de imagem vazia.

Cor de fundo padrão

Vá para as configurações de fundo e adicione a seguinte cor de fundo (completamente transparente):

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

Hover Background Color

Modifique esta cor ao pairar:

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

Imagem de fundo

Estamos, novamente, usando uma imagem de plano de fundo em vez de enviar uma para o próprio módulo. Combine a imagem de fundo com as seguintes configurações:

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição
• Mistura de imagem de fundo: luz suave

Espaçamento

Em seguida, vá para as configurações de espaçamento e modifique o preenchimento superior e inferior:

• Mostrar espaço abaixo da imagem: Não
• Preenchimento superior: 22vw
• Preenchimento inferior: 22vw

Escala de transformação padrão

Certifique-se de que os valores da escala de transformação padrão permaneçam '100%'.

• Certo: 100%
• Inferior: 100%

Escala de Transformação Hover

E altere esses valores ao passar o mouse para criar um efeito de escala.

• Certo: 120%
• Inferior: 120%

Tradução de transformação padrão

Por padrão, estamos mantendo '0px' para a opção inferior nas configurações de conversão de transformação.

• Inferior: 0px

Hover Transform Translate

Modifique esse valor ao passar o mouse para reposicionar o elemento.

• Inferior: 9vw

Transições

Também estamos criando uma transição um pouco mais rápida, alterando a duração da transição na guia avançada:

• Duração da transição: 200ms

Recriar o Exemplo # 3

Alterar Estrutura da Coluna

Vamos para o próximo e último exemplo! Comece modificando a estrutura da coluna da linha.

Adicionar Módulo de Imagem à Coluna 1

Carregar imagem 1: 1

Em seguida, adicione um Módulo de imagem à primeira coluna. Em contraste com os primeiros dois exemplos, vamos carregar uma imagem com uma proporção de 1: 1 (mesma largura e altura).

Dimensionamento

Vá para a guia de design e force a imagem para ter largura total nas configurações de dimensionamento.

• Forçar largura total: Sim

Espaçamento

Remova o espaço abaixo da imagem nas configurações de espaçamento a seguir.

• Mostrar espaço abaixo da imagem: Não

Borda Padrão

Em seguida, vá para as configurações de borda e adicione '500vw' a cada um dos cantos. Estamos garantindo que esse valor seja alto o suficiente para cobrir todos os tamanhos de tela.

Hover Border

Remova os cantos arredondados que você adicionou ao pairar.

Filtros padrão

Em seguida, vá para as configurações de filtros e certifique-se de que estes valores padrão sejam adicionados:

• Saturação: 100%
• Brilho: 46%
• Opacidade: 3%

Filtros Hover

Habilite a opção de foco em cada uma das configurações modificadas e use os seguintes valores:

• Saturação: 300%
• Brilho: 46%
• Opacidade: 100%

Escala de transformação padrão

Em seguida, vá para as opções de transformação e modifique as opções de escala de transformação padrão:

• Certo: 68%
• Abaixo: 68%

Escala de Transformação Hover

Altere esses valores ao passar o mouse.

• Certo: 130%
• Inferior: 130%

Tradução de transformação padrão

Passe para os valores de conversão de transformação e certifique-se de que os valores de conversão de transformação padrão permanecem os mesmos:

• Certo: 0px
• Inferior: 0px

Hover Transform Translate

Modifique os valores ao pairar.

• Certo: 1vw
• Inferior: 8vw

Transições

Por último, mas não menos importante, aumente a duração da transição na guia avançada para criar uma transição suave e pronto!

• Duração da transição: 600ms

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Exemplo 1

Exemplo # 2

Exemplo # 3

Móvel

Exemplo 1

Exemplo # 2

Exemplo # 3

Pensamentos finais

Neste post, mostramos como ser criativo com o Módulo de Imagem e as opções de foco e transformação do Divi. Os efeitos que recriamos são apenas algumas das muitas belas possibilidades que existem. Se você tiver dúvidas ou sugestões, deixe 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.