Como acionar efeitos de flutuação para um módulo, coluna e linha simultaneamente
Publicados: 2019-08-11Uma das melhores coisas sobre a construção de um site com Divi é que cada bloco de construção vem com opções de design. Cada módulo, coluna, linha e seção contém configurações de design para o estado padrão e de foco. Isso abre a porta para acionar vários efeitos de foco ao combinar esses elementos.
Neste tutorial, vou mostrar como acionar simultaneamente efeitos de foco para um módulo, coluna e linha. O truque é garantir que todos os elementos compartilhem o mesmo tamanho e espaço em foco. Mas depois de ter os elementos no lugar, você pode ser extremamente criativo com seus efeitos e designs de foco.
Vamos começar.
Espiada
Aqui está um exemplo rápido de como desencadear efeitos de flutuação de diferentes elementos Divi simultaneamente.
Baixe o Exemplo de Design GRATUITAMENTE
Para colocar suas mãos no design 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.
Inscreva-se no nosso canal no Youtube
Vamos para o tutorial, vamos?
Noções básicas sobre como acionar estados de pairar em vários elementos Divi simultaneamente.
Cada elemento em Divi (seção, linha ou módulo) tem seu próprio espaço flutuante, que é basicamente do tamanho do próprio elemento.
Cada um desses elementos possui opções de foco integradas que são ativadas ao passar o mouse sobre esse elemento ou qualquer um dos elementos filho que ele contém.
Assim, por exemplo, se você adicionou opções de foco a uma seção, essas opções de foco se tornarão ativas sempre que você passar o mouse sobre a seção.
Em seguida, se você passar o mouse sobre o espaço de foco da linha dentro da seção, ativará as opções de foco da linha e da seção. Isso ocorre porque a linha é um elemento filho da seção.
Sempre que você passa o mouse sobre uma coluna, ativa o estado de foco da coluna, da linha e da seção.
E, por último, sempre que você passa o mouse sobre um módulo, aciona estados de foco para o módulo e todos os seus elementos pai (coluna, linha e seção).
Por padrão, cada um desses elementos terá espaçamento (preenchimento) que cria lacunas no espaço de foco que permite ao usuário a capacidade de pairar sobre cada elemento seletivamente. Mas, se você remover o espaçamento entre cada elemento, poderá acionar os estados de foco para todos os elementos simultaneamente.
Isso abre a porta para muitas combinações de efeitos de foco que podem acontecer simultaneamente à medida que você combina as opções de foco para cada elemento e as ativa em um espaço de foco compartilhado.
Um exemplo de combinação de efeitos de flutuação
Aqui está um exemplo de como isso funciona com Divi.
No exemplo abaixo, temos uma linha com uma imagem de fundo. Ao pairar, temos uma sombra de caixa atrasada que aparece como uma espécie de elemento de design de borda.
Dentro da linha, temos uma coluna que foi preenchida com uma sombra de caixa preta. Ao passar o mouse, a sombra da caixa da coluna diminui gradualmente para revelar a imagem de fundo da linha.
Dentro da coluna, temos um módulo de sinopse que tem um fundo azul. Ao passar o mouse, o fundo azul é alterado para uma cor azul semitransparente para que você possa ver a imagem de fundo.
Como há espaçamento entre cada elemento, podemos ver o efeito de foco específico de cada elemento conforme pairamos sobre cada espaço individual.
Mas, se retirarmos o espaçamento e atribuirmos à linha uma largura personalizada, todos os elementos compartilharão o mesmo espaço flutuante. Ou, em outras palavras, o módulo ocupa todo o espaço da coluna e da linha. Portanto, quando passamos o mouse sobre o módulo, os efeitos do mouse sobre o módulo, a coluna e a linha são ativados simultaneamente.
Os atrasos de transição funcionam bem com esta configuração
Tenha em mente que, no exemplo acima, há atrasos de transição nos efeitos de flutuação de linha e coluna que realmente destacam bem a funcionalidade desse conceito. Se estivéssemos tentando adicionar uma combinação semelhante de efeitos de foco apenas ao módulo, não poderíamos aproveitar a aplicação de diferentes atrasos e durações de transição para cada efeito de foco individualmente.
Recriando o exemplo de design em Divi
Para lhe dar algumas instruções sobre como isso funciona no mundo real de Divi, vamos recriar o exemplo descrito acima.
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Adicionando a Seção e Linha
A primeira coisa que você precisa fazer é criar uma seção regular com uma linha de uma coluna.
Atualizar configurações de linha e coluna
Em seguida, abra as configurações de linha e dê a ela uma imagem de plano de fundo.
Em seguida, precisamos remover o preenchimento padrão para que não haja lacuna no espaço de foco entre a linha e a coluna.
- Preenchimento: 0 px superior, 0 px inferior
Em seguida, adicione a seguinte sombra de caixa à linha ao pairar.
- Sombra da caixa: veja a imagem
- Força do desfoque de sombra da caixa: 0 px
- Força de propagação da sombra da caixa: 0 px (desktop), 10 px (pairar)
- Cor da sombra: # 063c68
Em seguida, atualize as opções de transição com uma duração e um atraso da seguinte forma:
- Duração da transição: 500ms
- Atraso de transição: 700ms
Agora abra as configurações da coluna e atualize o seguinte:
- Sombra da caixa: veja a imagem
- Força do desfoque de sombra da caixa: 0 px
- Força de propagação da sombra da caixa: 200 px (desktop), 0 px (pairar)
- Cor da sombra: # 000000
- Duração da transição: 500ms
- Atraso de transição: 200ms
Adicione o Módulo Blurb
Agora adicione um módulo blurb à linha.
Em seguida, atualize a sinopse da seguinte maneira:
- Imagem: [inserir imagem resumida]
- Cor de fundo: # 0c71c3
- Cor de fundo (pairar): rgba (12.113.195,0,35)
- Alinhamento de texto: centro
- Cor do Texto: Claro
- Preenchimento: 20px superior, 20px inferior, 20px à esquerda, 20px à direita
Resultado final
Confira o resultado final.
Reflexões finais e dicas
Entender como acionar estados de flutuação para vários elementos Divi simultaneamente abre algumas possibilidades de design empolgantes. O exemplo nesta postagem destaca apenas algumas das muitas combinações de efeitos de foco que são possíveis quando você combina os estados de foco de um módulo, coluna e linha. Além disso, nós nem mesmo exploramos as possibilidades que vêm com a combinação das opções de foco de seção, o que daria a você ainda mais opções de foco. Conforme você explora esses efeitos de foco por conta própria, aqui estão algumas dicas e ideias para ajudá-lo ao longo do caminho.
- Use Box Shadow em vez de Borders - as bordas, na verdade, adicionam espaço adicional a um elemento, portanto, isso pode causar lacunas indesejadas. As sombras de caixa adicionam um elemento de design que não adiciona espaço real.
- Explorar efeitos de flutuação de transição de plano de fundo - cada elemento Divi tem opções de foco de fundo que podem ser combinadas para criar camadas de efeitos de foco criativos.
- Use Transform Hover Options - Transform hover options pode adicionar um elemento criativo, como dimensionamento e rotação de elementos ao passar o mouse. No entanto, pode ser um desafio girar vários elementos ao pairar, pois isso causará saltos.
- Aproveite as vantagens das opções de transição - Adicionar durações e atrasos de transição diferentes no estado de foco de cada elemento pode criar animações de foco exclusivas.
Espero que este tutorial inspire você a explorar algumas combinações incríveis de efeitos de foco no Divi.
Estou ansioso para ouvir de você nos comentários.
Saúde!