Como transformar vários elementos para efeitos de foco abstrato em Divi
Publicados: 2019-05-18Como você já sabe, Divi tem uma tonelada de configurações de design que permitem criar efeitos de foco exclusivos para qualquer elemento Divi (seções, linhas ou módulos). Normalmente, um efeito de foco é isolado em apenas um elemento. Por exemplo, se você adicionar uma propriedade de rotação de transformação a um módulo ao passar o mouse, essa rotação será ativada ao passar o mouse sobre o módulo. No entanto, se você adicionar um efeito de foco adicional à linha que contém o módulo, isso adiciona outra camada de efeitos de foco ao passar o mouse sobre o módulo. Isso abre a porta para alguns efeitos de foco exclusivamente abstratos.
Neste tutorial, vamos explorar como transformar vários elementos para efeitos abstratos de foco usando as configurações integradas do Divi. E como usaremos as linhas de maneira um pouco diferente para este design, mostrarei como criar um layout de grade para suas linhas para que você possa exibir esses efeitos de foco em uma galeria (se desejar).
Vamos começar.
Espiada
Baixe o Transform Multiple Elements no Hover 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?
Começando
Inscreva-se no nosso canal no Youtube
Para este tutorial, você precisará do seguinte:
- O Divi Theme instalado e ativo
- Algumas imagens. Estou usando imagens de nossos layouts predefinidos acessíveis de dentro do Divi Builder
Quando estiver pronto, vá para o painel do WordPress. Em seguida, crie uma nova página (Pages> Add New), dê um título à sua página e implante o Divi Builder. Escolha a opção “Construir do zero”.
Agora sua tela em branco o aguarda!
Efeitos abstratos de foco para uma imagem
Este primeiro design combinará os efeitos de foco de transformação de inclinação na linha e o módulo de imagem para criar um efeito de leque em nossa imagem ao passar o mouse. Além de parecer legal, esse efeito também pode servir como uma interação útil da IU que permite ao usuário saber que, clicando na imagem, você verá mais imagens. Portanto, você pode usar a imagem como um link para a página da sua galeria, se desejar.
Veja como fazer.
Primeiro crie uma nova seção regular com uma linha de uma coluna.
Em seguida, adicione um módulo de imagem à linha.
Em seguida, adicione o upload de uma imagem ao módulo.
Adicionar efeitos de foco do módulo de imagem
Agora podemos adicionar alguns efeitos de flutuação de transformação à imagem que irão escalar, girar e inclinar a imagem. Para fazer isso, vá para as opções de transformação e atualize o seguinte:
Eixo X e Y da escala de transformação: 110%
Transformar e girar eixo Z: 9 graus
Transformar a inclinação dos eixos X e Y: 3deg
É isso! Bem simples. Agora precisamos personalizar a linha para adicionar outro efeito de foco que será ativado ao passar o mouse sobre os elementos.
Configurações de linha
Para que esse design funcione, a linha precisará ter o mesmo tamanho da imagem dentro dela para que a área de foco seja a mesma para ambas. Isso nos permitirá adicionar diferentes efeitos de foco para o módulo e a linha que serão ativados ao passar o mouse sobre o módulo (ou, neste caso, a imagem). Isso funciona porque passar o mouse sobre um módulo dentro de uma linha ativará os efeitos de foco da mesma forma que faria se você passasse o mouse sobre a linha. E, como temos um efeito de foco diferente no módulo, ambos os efeitos de foco serão ativados ao passar o mouse sobre o módulo. Isso nos permite usar uma combinação de efeitos abstratos de foco usando sombra de caixa, inclinação de transformação e rotação de transformação para a linha e o módulo.
Já temos nossos efeitos de foco de módulo para nossa imagem no lugar, agora precisamos ajustar o tamanho de nossa linha. Dependendo do tamanho da imagem, o módulo deve abranger toda a largura da linha, portanto, tecnicamente, não há necessidade de ajustar a largura da linha. Mas, para este exemplo, encolherei a linha para abrir espaço para nossos efeitos de foco.
Atualize as configurações de linha da seguinte forma:
Largura máxima: 400px
Como queremos que a altura de nossa linha corresponda à imagem dentro dela, precisamos nos livrar do preenchimento padrão superior e inferior:
Preenchimento personalizado: 0 px superior, 0 px inferior
Agora precisamos adicionar uma imagem de fundo à coluna da linha. Esta imagem de fundo aparecerá sempre que o efeito de foco de transformação do módulo de imagem inclinar e girar.
Imagem de fundo da coluna 1: [inserir imagem]
Continue a atualizar a linha com uma sombra de caixa ao passar o mouse da seguinte maneira:
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px (padrão), -30 px (pairar)
Posição vertical da sombra da caixa: 0 px (padrão), -15 px (pairar)
Cor da sombra: # 002f66
Esta sombra de caixa adiciona o efeito de outra imagem que aparece atrás da imagem de fundo da linha, que aparecerá quando adicionarmos nossos efeitos de flutuação de transformação que irão girar e inclinar a imagem de fundo para a visualização.
Finalmente, estamos prontos para adicionar uma propriedade de transformação skew para adicionar um efeito de foco adicional para a linha.
Transformar inclinação dos eixos X e Y: -3deg
Resultado final
Aqui está o resultado final.
E será bem dimensionado em dispositivos móveis também.
Efeitos abstratos de foco para uma frase de chamariz (exemplo 1)
Configurações de linha
Crie uma nova seção regular com uma linha de uma coluna.
Em seguida, atualize as configurações de linha da seguinte forma:
Coluna 1 Gradiente de fundo cor esquerda: rgba (34,43,58,0,71)
Coluna 1 Gradiente de fundo, cor direita: # 222b3a
Imagem de fundo: [inserir imagem]
Largura máxima: 400px
Preenchimento personalizado: 0 px superior, 0 px inferior
Estaremos circulando de volta para as configurações de linha para concluir nossos efeitos abstratos de foco em um momento, mas, por enquanto, vamos adicionar nosso módulo de chamada para ação à linha.
Configurações do módulo de frase de chamariz
Abra as configurações do Módulo de frase de chamariz e atualize o conteúdo da seguinte maneira:
Título: Viagem com pontos
Texto do botão: Clique aqui
Conteúdo: por tempo limitado
URL do link do botão: # (apenas para ativar o botão por enquanto)
Usar cor de fundo: NÃO
Em seguida, atualize a configuração do design para o texto e espaçamento do módulo.
Fonte do título: Gilda Display
Tamanho do texto do botão: 16 px
Cor do texto do botão: # ffb238
Cor de fundo do botão: rgba (0,0,0,0)
Largura da borda do botão: 0 px
Preenchimento personalizado: 20% superior, 20% inferior
Agora adicione uma borda ao módulo.
Largura da borda: 2 px
Cor da borda: # 222b3a
Isso cuida do nosso design padrão. Agora é a hora da parte divertida. Lembre-se, porque nossa linha e módulo são essencialmente do mesmo tamanho (altura e largura), a área de foco será a mesma para ambos. Em outras palavras, os efeitos de foco que adicionamos à linha e ao módulo serão ativados ao passar o mouse sobre os elementos. Isso nos permite usar uma combinação de efeitos abstratos de foco usando sombra de caixa, inclinação de transformação e rotação de transformação para a linha e o módulo.
Vamos começar com os efeitos de flutuação da linha.
Efeitos de flutuação da linha
Primeiro, podemos adicionar uma sombra de caixa ao pairar em nossa linha. Abra as configurações de linha e atualize o seguinte:
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px (padrão), 90 px (pairar)
Posição vertical da sombra da caixa: 0 px (padrão), 80 px (pairar)
Força de propagação da sombra da caixa: 0 px (padrão), -40 px (pairar)
Cor da sombra: # ffb238
Lembre-se de que a sombra da caixa também herdará as opções de transformação que adicionaremos a seguir.
Agora vamos adicionar uma propriedade de transformação de rotação e inclinação ao pairar.
Transformar, girar eixo X (pairar): 10 graus
Transformar inclinação do eixo X (pairar): -4deg
Transformar o eixo Y de inclinação (pairar): -4deg
Isso cuida dos efeitos de flutuação da linha. Agora precisamos adicionar o efeito de foco ao Módulo de Chamada para Ação que completará o design.
Efeitos de foco do módulo de frase de chamariz
Abra as configurações do módulo de call-to-action e dê a ele um efeito de pairar sobre a sombra da caixa da seguinte maneira:
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: 0 px (padrão), 30 px (pairar)
Cor da sombra: #ffffff
Por fim, adicione uma propriedade de transformação escalar, girar e inclinar ao passar o mouse da seguinte maneira:
Transformar Escala X e Eixo Y (pairar): 115%
Transformar, girar eixo Z (pairar): 9 graus
Transformar inclinação do eixo X (pairar): 3deg
Transformar o eixo Y de inclinação (pairar): 3deg
Aumentar o tamanho do módulo usando escala em foco ajudará a minimizar a chance de o usuário pairar sobre apenas o elemento da linha em vez do módulo.
Resultado final
Aqui está o resultado final do efeito de foco abstrato. Observe como os efeitos de foco de linha e de módulo são ativados ao passar o mouse para distorcer os elementos para um design abstrato.
Esta é a aparência do efeito de foco no celular. No entanto, como a maioria dos navegadores móveis requer um toque para ativar o efeito de foco, você pode desabilitar o efeito de foco no celular para evitar que o usuário tenha que tocar duas vezes se estiver usando o módulo como um link.
Efeitos abstratos de foco para uma frase de chamariz (exemplo 2)
Para iniciar o design deste próximo efeito de foco abstrato, vamos duplicar a seção que contém nosso primeiro exemplo. Agora tudo o que precisamos fazer é fazer alguns pequenos ajustes no design e efeitos de foco para um design exclusivo.
Atualizar configurações de linha
Primeiro, atualize as configurações de linha da seguinte maneira:
Transformar, girar eixo Z: -5deg
Transformar inclinação dos eixos X e Y: -4 graus
Atualizar as configurações do módulo de frase de chamariz
Agora vamos ajustar as configurações do módulo da seguinte maneira:
Primeiro, retire a fronteira ...
Largura da borda: 0 px
Em seguida, atualize a sombra da caixa da seguinte maneira:
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: 110 px
(certifique-se e desative o efeito de foco herdado do design anterior que você duplicou)
Cor da sombra: # ffb238
Agora podemos atualizar nossos efeitos de foco da propriedade de transformação. Aqui, estamos basicamente diminuindo a escala um pouco e adicionando valores negativos às nossas propriedades de transformação de rotação e inclinação anteriores para mover o elemento na direção oposta ao pairar.
Atualize as seguintes opções de transformação:
Transformar Escala X e Eixo Y (pairar): 110%
Transformar, girar eixo Z (pairar): -9deg
Transformar inclinação do eixo X (pairar): -3deg
Transformar o eixo Y enviesado (pairar): -3deg
Criação de um layout de grade para suas linhas
Como esse design requer que a linha pai envolva o módulo e tenha a mesma altura e largura, você realmente não tem a capacidade de criar um layout de coluna como faria normalmente. No entanto, você pode usar a propriedade flex para alinhar suas linhas horizontalmente em um layout de grade.
Para fazer isso, primeiro duplique a linha que contém seu módulo algumas vezes para que você tenha três linhas em uma seção.
Em seguida, adicione uma margem personalizada a cada uma das linhas:
Margem personalizada: 50px superior, 50px inferior
Em seguida, abra as configurações da seção e simplesmente adicione o seguinte CSS personalizado ao elemento principal.
display: flex; flex-wrap: wrap;
Agora você tem três colunas de linhas que responderão com o tamanho do seu navegador.
Pensamentos finais
Transformar vários elementos ao pairar fornece outro nível de criatividade que você pode explorar. Os exemplos neste tutorial pretendem mostrar o que é possível, mas sinta-se à vontade para ajustar os designs para seu próprio projeto. Como você pode esperar, você pode ficar bem maluco se quiser. Mas você também pode ser um pouco mais conservador para criar um elemento de design de interação sutil como o exemplo do módulo de imagem neste tutorial.
Estou ansioso para ouvir de você nos comentários.
Saúde!