Compreendendo a diferença entre gatilhos, efeitos e alvos no divi 5

As novas interações do Divi 5 usam um modelo simples - gatilho, efeito, destino. Separe o que o inicia, o que acontece e o que muda, e você pode criar um movimento claro e coordenado através do seu layout. Neste post, explicaremos cada parte, mostraremos como eles se encaixam e percorrer um exemplo rápido que você pode reutilizar. Vamos lá!

O que são gatilhos, efeitos e alvos?

As interações no Divi 5 são construídas a partir de três partes móveis que funcionam juntas. Um gatilho define as coisas em movimento, um efeito decide como a resposta se parece e um alvo define qual elemento muda.

Inscreva -se no nosso canal do YouTube

Quando você configura uma interação, o Divi solicitará que você preencha as três partes:

Compreender cada função separadamente tornará mais fácil ver como eles se conectam a um sistema completo.

Gatilho é o que começa

Toda interação começa com uma ação inicial chamada gatilho. É a primeira etapa que o usuário dá, como um clique do mouse, pairando ou carregando a página que inicia a ação. Por exemplo, mover o mouse sobre um cartão de preços define a corrente em movimento.

Por si só, um gatilho não faz nada. Precisa de uma resposta.

Efeito é o que acontece

Uma vez que o gatilho dispara, o efeito segue. É aqui que você decide a reação, como inclinação, desbotamento, escala, desfoque ou qualquer mistura de movimentos. Imagine a mesma placa de preços, escalando um pouco e adicionando uma sombra mais profunda à medida que seu cursor paira sobre ela - esse é o efeito.

Finalmente, você precisa decidir onde aplicar o efeito.

Target é o que muda

O alvo é simplesmente o elemento que muda quando o gatilho dispara. Passar é uma interação comumente usada, mas afeta apenas o próprio elemento. Em outras palavras, o elemento que iniciou a interação (o gatilho) também é o elemento que muda (o destino).

Por exemplo, pairar sobre uma coluna pode criar a mesma escala de coluna, pois também é o destino.

Isso manteve tudo confinado a um único elemento. Você ainda pode configurar as coisas dessa maneira no Divi 5, mas não está mais limitado a ele.

Agora, o gatilho e o alvo podem ser diferentes, o que oferece muito mais controle. Por exemplo, quando o cursor entra em uma seção, o botão escala, mesmo que não tenha sido tocado. Nesse caso, o botão é o destino.

Como eles trabalham juntos

Agora que vimos cada parte por conta própria, o poder real ocorre quando você os conecta a uma corrente:

• Incêndios de gatilho: o visitante faz algo como clicar, mover o mouse, entrar, deixar ou carregar a página.
• Efeito define : você decide que tipo de resposta visual ou de movimento para mostrar.
• O alvo se aplica: essa mudança de terras no elemento que você escolheu.

Pense nisso como conectar um circuito. O interruptor gira, a corrente flui, a lâmpada acende.

No Divi 5, você pode conectar esse circuito da maneira que quiser. Um mouse em uma coluna pode inclinar seu botão. Uma carga de página pode desaparecer em uma imagem de herói. Um único clique pode animar vários módulos simultaneamente, fazendo a seção parecer coordenada.

É quando as interações param de parecer um pairar mais agradável e começam a trabalhar como uma linguagem de design. Você não está mais preso a um elemento reagindo a si mesmo. Você pode cadear, cambalear e espalhar respostas para conectar todo o layout.

Aprenda tudo sobre as interações do Divi 5

A fórmula em Divi 5

A beleza das interações do Divi 5 é que elas não são complementos aleatórios. Eles seguem uma fórmula clara: gatilho → efeito → alvo. Construir até interações complexas se torna simples e consistente quando você a vê como um padrão repetível.

Vamos colocar essa fórmula em prática para mostrar como eles funcionam juntos. Para este exemplo, vamos criar um formulário de contato que apareça na tela quando o usuário clicar no botão.

Para criar esse efeito, você definirá uma interação no botão que deseja usar como gatilho. Selecione estas configurações:

• Evento de gatilho: clique (decidimos que o evento será acionado quando o usuário clicar no botão)
• Ação do efeito: Mostrar elemento (o formulário de contato oculto)
• Módulo de destino: a seção (contato) é o rótulo atribuído à seção de contato.

Em seguida, defina o link âncora para abrir a seção de contato. Primeiro, abra as configurações da seção do formulário de contato e vá para a guia Avançado . Sob CSS ID & CLASSES , SET CSS ID : CONTATO.

Em seguida, vá para as configurações do botão e digite #Contact no campo URL do link do botão .

Por fim, defina o estado inicial do formulário como oculto para que ele apareça apenas quando acionado. Abra as configurações da seção do formulário de contato, vá para a guia Avançada e, sob Visibility , selecione os pontos de interrupção em que deseja escondê -la.

Agora teste. Clique no botão e a seção de contato oculta é exibida.

Esse fluxo simples (clique → Mostrar → Formulário de contato) é o mesmo padrão que você reutiliza para pop-ups, alternativas, revelações suaves sobre carga ou animações acorrentadas em uma seção. Depois de pensar em termos de gatilho, efeito e alvo, as possibilidades se abrem rapidamente.

Experimente as interações no divi 5 hoje

Você tem o padrão. Agora coloque -o para trabalhar em uma página real. Abra um layout de teste e construa um pequeno efeito de interação que você pode terminar em dez minutos. Escolha algo que você realmente usaria em um site de clientes.

Aqui estão alguns mini instruções para rolar:

• Mouse entra em uma seção, fazendo sua escala de botão sutilmente
• Clicar em um botão de "contato" revela um formulário de desaceleração escondida
• Sair do mouse em um cartão redefinir
• A carga de página desaparece em uma imagem de herói, depois a manchete um momento depois

Informe -nos nos comentários se você já usou o recurso de interações do Divi 5 e o que você pensa!