Interações para o Divi 5 (pop-ups, alternantes, efeitos do mouse e muito mais)

Hoje, estamos empolgados em lançar interações para o Divi 5, um sistema robusto para criar elementos interativos, como pop-ups e alternativas, e efeitos criativos baseados em rolagem e movimentação de mouse.

Não é um construtor pop-up; É um construtor de qualquer coisa . Crie um gatilho, atribua um efeito, escolha um alvo e dê vida às suas interações personalizadas. Você pode fazer tantas coisas incríveis com este sistema, e mal posso esperar para mostrar como funciona, então vamos entrar.

Confira o vídeo a seguir para ver o novo recurso em ação.

Construa seus próprios elementos interativos

Você notará um novo grupo de interações na guia avançada de todos os elementos. Clicar no botão Adicionar interação abrirá o editor de interação, onde você pode configurar o gatilho, o efeito e o destino de cada interação.

O gatilho inicia a interação, como ao clicar ou pairar. O efeito acontece quando a interação é acionada, como visibilidade, predefinição ou atributo, e o destino é o elemento afetado na página.

Exemplos de interação

Antes de aprofundar essas configurações, deixe -me mostrar alguns exemplos de quais interações podem alcançar.

Exemplo 1: Construindo um pop-up

No exemplo de vídeo abaixo, usei interações para criar um pop-up.

Adicionei um gatilho Enter Viewport a uma seção, que aplica o efeito de visibilidade de alternância ao meu pop-up. A seção entra na minha viewport, acionando a visibilidade do pop -up e desliza para usar as configurações de animação da Divi.

Além disso, um módulo de ícone dentro do pop-up possui uma interação baseada em cliques, que alterna a visibilidade no pop-up para fechá-lo. Você pode criar qualquer tipo de banner pop-up ou flutuante!

Exemplo 2: Construindo uma alternância

No exemplo do vídeo abaixo, usei interações para alternar tabelas de preços mensais e anuais.

Adicionei duas interações a uma linha para alternar a visibilidade de seções alternadas de preços anuais e mensais. Em seguida, adicionei mais duas interações para alternar a visibilidade de dois módulos de ícone, dando ao usuário feedback adicional sobre clique.

Exemplo 3: Fazendo a transição entre as predefinições

Um dos efeitos mais poderosos é o efeito predefinido. Como as predefinições permitem que você modifique as configurações de um elemento, não há limite para o que você pode fazer. Quando um gatilho muda a predefinição em um elemento de destino, ele pode transformá -lo de várias maneiras.

No exemplo de vídeo abaixo, configurei duas interações para adicionar e remover uma predefinição em uma linha, à medida que ele entra e sai da viewport. A predefinição de destaque altera a cor e a escala da linha e adiciona uma sombra de caixa, chamando a atenção dos usuários enquanto rolam a página!

Exemplo F: efeitos do movimento do mouse

Os efeitos baseados em movimento de mouse dos sistemas de interação são muito divertidos.

No exemplo de vídeo abaixo. Adicionei várias interações a uma seção de heróis, visando vários elementos com efeitos baseados em movimento de mouse de sensibilidades variadas.

As interações acionam o mouse Enter, aplicando efeitos de opacidade, movimento e inclinação nos elementos que mudam à medida que meu mouse se move. Também adicionei uma interação ao módulo de botão, que alterna uma predefinição para alterar o estilo do esboço quadrado.

As possibilidades são infinitas!

Eu poderia continuar com exemplos diferentes e estou animado para ver o que você cria.

Olhando para o editor de interação mais de perto, você pode ver alguns efeitos adicionais para brincar que ainda não mencionei, como alternar atributos, cookies e rolar para os elementos.

Por exemplo, você pode usar efeitos de atributo para alterar as classes CSS de um elemento, ID ou qualquer outra coisa.

A versão um das interações suporta os seguintes efeitos:

• Alterna a visibilidade - alterna um elemento entre os estados visíveis e ocultos automaticamente.
• Mostrar elemento - torna visível um elemento oculto.
• Ocultar elemento - torna um elemento visível escondido.
• Alternar predefinição - alterna uma predefinição para um elemento, com a substituição opcional das predefinições existentes.
• Adicionar predefinição - aplica uma classe de estilo predefinido a um elemento, com a substituição opcional das predefinições existentes.
• Remova predefinição - remove uma classe de estilo predefinido de um elemento.
• Atributo TOGGL - adiciona ou remove o valor de atributo HTML específico de um elemento, como uma classe CSS e ID.
• Adicionar atributo - adiciona um valor de atributo HTML específico a um elemento, se ele ainda não existir.
• Remova o atributo - remove um valor de atributo HTML específico de um elemento.
• Alterne biscoito - adicione ou remova um valor de biscoito de um cookie. Por exemplo, defina um cookie quando um pop-up parece rastrear quando um usuário tiver visto um pop-up. Em seguida, use as opções de condição da Divi para ocultar o pop -up em visitas futuras de páginas para esse usuário.
• Adicionar cookie - Adicionar um valor de biscoito e biscoito que você define ao navegador do visitante.
  Remova o cookie - Remova um cookie especificado.
• Role para o elemento - rola suavemente a página para levar o elemento de destino à vista.
• Movimento do mouse espelhado - faz com que o elemento alvo siga o movimento do mouse dentro do elemento gatilho usando vários tipos de movimento (traduzir, escala, opacidade, inclinação ou girar) com sensibilidade ajustável.

Tente divi 5 hoje

As interações para o Divi 5 estão disponíveis hoje e é um dos muitos recursos que chegam ao Divi este ano.

Você pode acompanhar à medida que avançamos no lançamento final do Divi 5 e além, com atualizações a cada duas semanas. Dependendo de suas prioridades, você pode usar o Divi 5 agora para criar novos sites ou esperar até adicionar mais recursos, o que funciona melhor para você.

Conforme descrito no cronograma de lançamento multifásico original do Divi 5, o Divi 5 Public Alpha é como "Divi 5 Lite". Está faltando alguns recursos e pode não ser adequado para sites existentes, mas está pronto para ser usado em novos sites, se você preferir a experiência do Divi 4.

Queremos que você experimente e, se você gosta, use -o; Quando todo mundo adora, vamos tornar -o oficial.

Você já tentou cores relativas?

Caso você tenha perdido, lançamos recentemente as cores relativas para o Divi 5, tornando o Divi o claro líder no gerenciamento de cores e no sistema de cores avançadas. Ele permite criar sistemas de cores baseados em variáveis ​​matematicamente bonitos com relacionamentos de cores aninhadas usando HSL. Você não quer dormir nesse recurso.

Assista a este vídeo para todos os detalhes.

Mais atualizações do Divi 5 estão a caminho

2025 é o ano do Divi 5 . O trabalho tedioso está para trás. Construímos a fundação super-rápida e agora é hora de o Divi voltar.

Se você estiver aqui para o retorno do Divi, faça um grande favor e informe -nos curtindo este vídeo e deixando um comentário. Significa muito para nós ver você torcendo dividindo, e é essencial alimentar o algoritmo e espalhar a palavra.

Não se esqueça de nos seguir no YouTube e assinar o boletim informativo Divi para que você nunca perca uma atualização. Vejo você em breve para outro anúncio do Divi 5, que eu prometo que estará ao virar da esquina.