Tudo o que você precisa saber sobre as interações divi 5

Se você deseja atrair visitantes com pop-ups dinâmicos, alternar e rolar efeitos sem um plug-in ou CSS personalizado, você adorará um dos mais recentes lançamentos de recursos alfa públicos do Divi 5. As interações no Divi 5 permitem que os usuários do DIVI criem elementos interativos envolventes dentro do Visual Builder. Nesta postagem, mergulharemos em tudo o que você precisa saber sobre as interações Divi 5, explorando seus recursos, algumas dicas e aplicativos do mundo real para ajudá-lo a se familiarizar com o recurso.

Nota importante: o Divi 5 está atualmente em alfa público e otimizado para novos sites. Não recomendamos migrar os sites Divi 4 existentes, devido ao desenvolvimento contínuo e possíveis problemas de compatibilidade com os módulos legados. Fique ligado para atualizações quando o Divi 5 se aproxima de seu lançamento completo!

Vamos lá.

O que são interações divi 5?

As interações Divi 5 são um construtor de qualquer coisa que permita criar elementos interativos para o seu site diretamente dentro do Visual Builder. Muito mais do que apenas um construtor pop-up, esse recurso permite criar uma variedade de interações personalizadas, desde pop-ups a animações acionadas por rolagem, tudo sem tocar em uma linha de código.

Inscreva -se no nosso canal do YouTube

Integrada perfeitamente na guia avançada de qualquer módulo, coluna, linha ou seção, as interações oferecem flexibilidade ilimitada para criar experiências envolventes e focadas no usuário.

Os componentes principais das interações divi 5

No coração das interações Divi 5 estão três componentes principais que trabalham juntos para dar vida a seus projetos:

Gatilho eventos

Os gatilhos são os eventos que iniciam uma interação. Os exemplos incluem ações do usuário, como clicar em um botão ou pairar sobre uma imagem, eventos baseados em rolagem, como alcançar um ponto específico em uma página ou gatilhos baseados no tempo como um atraso após uma carga de página.

Os gatilhos disponíveis incluem:

• Clique : um usuário clica em um botão, imagem ou outro elemento para iniciar uma interação.
• Mouse Enter/Exit: Um usuário paira ou deixa um elemento.
• Viewport ENTER/EXIT: Um elemento insere ou sai da área visível da tela à medida que o usuário rola.
• Carregar: Uma interação começa quando a página é carregada, com um atraso opcional.

Por exemplo, você pode acionar um pop-up 5 segundos depois que uma página carrega ou animar um elemento quando um usuário rola.

Ações de efeito

Depois que um gatilho é ativado, os efeitos determinam o que acontece. As opções incluem mostrar ou ocultar elementos, animar com desbotamentos, escalas, rotação ou aplicar transições predefinidas para um estilo consistente.

• Alterna a visibilidade: alterna um elemento entre visível e oculto.
• Mostrar/ocultar elemento: torna um elemento visível ou oculto.
• Alterne predefinição: liga ou desative uma predefinição para um elemento de design com a capacidade de substituir uma predefinição existente.
• Adicione predefinição: usado para adicionar uma classe de estilo predefinido a um elemento. Você também pode substituir as predefinições existentes.
• Remova predefinição: Use para remover um estilo predefinido de um elemento.
• Atributo TOGGL: adiciona ou remove o atributo HTML de um elemento, como uma classe CSS ou ID CSS.
• Adicionar atributo: isso adiciona um valor de atributo HTML específico, onde não existe atualmente.
• Remova o atributo: remove qualquer atributo aplicado a um elemento.
• TOGLE BOYIE: Adiciona ou remove um valor de cookie. Por exemplo, você pode definir um cookie quando um pop-up aparecer e configurá-lo para aparecer apenas uma vez usando as configurações de condição do Divi 5.
• Adicionar cookie: Adiciona um valor de cookie que você pode definir ao navegador do usuário.
• Remova o cookie: remove um cookie especificado anteriormente.
• Role para o elemento: permite que a página role sem problemas, levando o elemento de destino à vista.
• Movimento do mouse espelhado: permite definir o movimento que segue os movimentos do mouse do usuário. As opções incluem tradução, escala, opacidade, inclinação ou giro. Você também pode ajustar a sensibilidade do movimento.

Alvo um módulo

O alvo é o elemento que a interação afeta, como um módulo, linha, coluna ou seção inteira. Você pode direcionar o elemento em si ou outro elemento na página, oferecendo flexibilidade para criar interações complexas.

Principais características das interações divi 5

As interações Divi 5 se destacam por seu conjunto de recursos amigáveis e versáteis:

• Nenhuma interface de código: configure gatilhos, efeitos e metas através de uma interface intuitiva dentro da guia avançada de qualquer elemento sem usar nenhum CSS ou JavaScript.
• Diversos tipos de interação: Crie pop-ups para captura de chumbo, alternar para perguntas frequentes, desbotados por rolagem para seções de heróis ou efeitos de mouse do tipo paralaxe para portfólios.
• Desempenho leve: construído diretamente no Divi 5, as interações eliminam a necessidade de plugins de terceiros, reduzindo o inchaço do site e melhorando os tempos de carregamento.
• Combinações dinâmicas de gatilho: combine vários gatilhos, como um evento de rolagem com um atraso de tempo, para interações sofisticadas como um pop-up que aparece depois que um usuário rola para baixo na página.
• Design responsivo: Personalize as interações desktop, tablet e móvel usando os pontos de interrupção responsivos personalizáveis do Divi 5.

Como acessar e usar interações divi 5

Criar uma interação no Divi 5 é direto, graças à sua integração no Visual Builder. Siga estas etapas simples para começar:

Comece abrindo uma página no Divi 5. Escolha um módulo, linha, coluna ou seção à qual você deseja adicionar uma interação. Por exemplo, selecione um módulo de imagem em sua página.

Navegue até a guia avançada e clique no suspensão das interações . Clique no botão + Adicionar interação a partir daí.

Queremos criar um efeito de inclinação/transformação de mouse para nossa imagem. Para fazer isso, precisaremos criar duas interações - uma para a imagem e outra para a coluna que contém a imagem. Comece dando à sua interação um nome no rótulo do administrador e digite as seguintes configurações:

• Evento de gatilho: mouse enter
• Ação de efeito: movimento do mouse espelhado
• Módulo de destino: imagem
• Atraso no tempo: 0
• Tipo de movimento: traduza
• Sensibilidade: 10

Depois que todas as configurações estiverem no lugar, clique no botão Salvar interação para continuar.

Em seguida, criaremos a interação de transformação na coluna. Clique no + Adicionar interação mais uma vez. Digite as seguintes configurações para criar a interação:

• Rótulo de administrador: coluna de inclinação
• Evento de gatilho: mouse enter
• Ação de efeito: movimento do mouse espelhado
• Módulo de destino: coluna
• Atraso no tempo: 0
• Tipo de movimento: inclinação
• Sensibilidade: 30

Depois que as configurações são inseridas, sua interação deve ficar assim:

Use o botão de visualização para visualizar sua interação.

Sua página aparecerá em uma nova guia, permitindo que você visualize e teste sua interação.

Tipos de interações que você pode criar

Aqui estão alguns exemplos práticos para mostrar a versatilidade das interações Divi 5, completas com gatilhos, efeitos e aplicativos do mundo real.

Bem -vindo pop -up para novos visitantes

Os pop-ups são ótimos para pedir aos visitantes que se inscrevam em boletins, promoções ou eventos. Com as interações Divi 5, você pode criar um pop-up de boas-vindas que aparece após a carga de uma página.

Para criar essa interação, você precisará criar uma seção para o seu pop-up e atribuir as seguintes configurações:

• Rótulo do administrador: pop -up
• Evento de gatilho: carregar
• Ação de efeito: mostrar elemento
• Módulo de destino: Seção (pop-up)-Certifique-se de nomear sua seção antes de criar a interação
• Atraso de tempo: 5 segundos

Também precisamos criar uma interação para fechar o pop-up. A maneira mais fácil é adicionar um módulo de ícone ao canto superior direito da seção pop-up e atribuir as seguintes configurações:

• Rótulo de administrador: Botão de feche
• Evento de gatilho: clique
• Ação de efeito: ocultar elemento
• Módulo de destino: seção (pop -up)
• Atraso no tempo: 0

Para controlar a colocação do seu pop -up, use as configurações de posição do Divi 5. Na guia Avançado , localize o menu suspenso de posição e defina a posição como corrigida . A partir daí, escolha o local que você gostaria que o pop-up apareça na página. Neste exemplo, temos o conjunto para o centro . Também é uma boa ideia definir o índice Z para que o pop-up apareça acima de tudo na página, como 99999 .

O último passo é definir a visibilidade do pop-up para ocultar em todos os dispositivos. Para fazer isso, navegue até a guia avançada , role para o menu suspenso de visibilidade e alterne todas as opções para ocultar a seção pop-up em todos os dispositivos.

Alternar a visibilidade de um elemento

As alternativas são perfeitas para criar seções de conteúdo dobrável, como perguntas frequentes, menus de acordeão, tabelas de preços ou serviços. Eles permitem que os usuários expandam ou colapssem conteúdo com um clique, mantendo sua página limpa e interativa. Por exemplo, você pode revelar uma lista completa de serviços que só é visível quando um botão é clicado.

Para criar esse efeito, você definirá uma interação no botão que deseja definir como o gatilho da sua seção. Digite as seguintes configurações para a interação:

• Rótulo de administrador: Mostrar serviços
• Evento de gatilho: clique
• Ação de efeito: mostrar elemento
• Módulo de destino: Seção (Serviços de Revenção)
• Atraso no tempo: 0

Em seguida, defina o link âncora para abrir a seção. Abra as configurações do botão e insira #Services no campo URL do link do botão da guia Conteúdo.

Clique na seção Recursos abaixo do botão e navegue até a guia Avançado. Defina a âncora adicionando serviços ao campo CSS ID no menu CSS ID & Classes.

Enquanto estiver na guia Avançado, você também precisará definir a visibilidade da seção para ocultar, como fizemos com o nosso pop-up.

Efeitos de movimento do mouse

As interações Divi 5 permitem criar efeitos de movimento dinâmico do mouse quando um usuário paira sobre um elemento de design. Por exemplo, você pode combinar interações para criar um efeito de inclinação em um título e na coluna pai.

Você precisará criar uma interação para o cabeçalho primeiro para realizar essa interação. Digite as seguintes configurações na guia avançada da imagem:

• Rótulo de administrador: cabeçalho animado
• Evento de gatilho: mouse enter
• Ação de efeito: movimento do mouse espelhado
• Módulo de destino: texto
• Atraso no tempo: 0
• Tipo de movimento: inclinação
• Sensibilidade: 30

Quando as configurações são inseridas, elas devem se parecer com a captura de tela abaixo.

Em seguida, defina uma interação na coluna que contém o título usando as seguintes configurações:

• Rótulo de administrador: Tilt de coluna
• Evento de gatilho: mouse enter
• Ação de efeito: movimento do mouse espelhado
• Módulo de destino: coluna
• Atraso no tempo: 0
• Tipo de movimento: inclinação
• Sensibilidade: 50

Uma vez concluído, suas configurações devem se parecer com a captura de tela abaixo.

Interações baseadas em predefinição

Você pode usar as interações Divi 5 juntamente com as predefinições para criar efeitos com os gatilhos MouseOver ou Viewport Enter/Exit. Por exemplo, se você quiser mostrar uma seção em sua página alterando a cor do plano de fundo ou adicionando um estilo de sombra de borda, você pode usar interações para fazê -lo. No exemplo abaixo, a cor do plano de fundo, a largura e a borda muda quando um usuário paira sobre a seção.

Para criar esse efeito, você primeiro precisará criar uma predefinição para mostrar a seção antes e depois do MouseOver. Neste exemplo, criamos dois - um com um fundo amarelo sólido e outro com vários efeitos e um fundo verde.

Depois que suas predefinições forem criadas, você pode usar interações para alternar as alterações no mouse. Comece criando a primeira interação com as seguintes configurações:

• Rótulo de administrador: fundo amarelo
• Evento de gatilho: mouse enter
• Ação de efeito: alternar predefinição
• Módulo de destino: Seção (Preço)
• Atraso de tempo: 1 segundo
• Predefinição: fundo amarelo

Em seguida, crie uma segunda interação para o mouse-over, inserindo as seguintes configurações:

• Rótulo de administrador: fundo verde
• Evento de gatilho: saída do mouse
• Ação de efeito: alternar predefinição
• Módulo de destino: Seção (Preço)
• Atraso no tempo: 0
• Predefinido: predefinição verde

Benefícios do uso de interações divi 5

As interações Divi 5 oferecem uma abordagem poderosa e simplificada para a criação de sites, oferecendo uma variedade de vantagens que o tornam um recurso de destaque para os usuários do DIVI. Aqui está uma olhada mais profunda por que esse recurso é uma adição tão útil ao Divi 5:

1. Não são necessários plugins

Como as interações Divi 5 são integradas ao núcleo da Divi, elimina a necessidade de plugins de terceiros criar pop-ups e outras interações. Essa abordagem nativa reduz o número de scripts em execução no seu site, levando a tempos de carregamento mais rápidos e métricas de desempenho aprimoradas.

Por exemplo, em vez de confiar em um plug-in pop-up, o Divi 5 interações lida com tudo dentro do Visual Builder, garantindo uma base de código mais enxuta e uma experiência mais suave do usuário. Isso também significa menos atualizações para gerenciar e reduzir os riscos de conflitos de plug -in, tornando seu site mais confiável.

2. É fácil de usar

As interações Divi 5 são projetadas intuitivamente, exigindo apenas alguns cliques para criar interações. Os iniciantes podem entender rapidamente o básico, e os desenvolvedores profissionais podem mergulhar em combinações complexas sem escrever uma única linha de código.

As configurações de interações são organizadas perfeitamente dentro da guia avançada de qualquer elemento, com rótulos claros e dicas de ferramentas que o guiando durante todo o processo. Por exemplo, a configuração de um pop-up requer alguns cliques para selecionar um gatilho e efeito, facilitando o uso.

3. Liberdade de personalizar

A flexibilidade das interações Divi 5 e suas vastas configurações - gatilhos, efeitos e metas - permitem criar experiências únicas para os visitantes do seu site. Você pode misturar vários gatilhos, como combinar uma viewport baseada em rolagem, digite um atraso de tempo, para criar interações sofisticadas, como um banner promocional que desaparece depois que um usuário rola na metade da página.

A capacidade de direcionar qualquer módulo, linha, coluna ou seção significa que você pode aplicar efeitos com precisão quando necessário, seja animando um único botão ou transformando uma seção inteira de herói.

4. Engajamento aprimorado do usuário

Os elementos interativos aumentam o envolvimento do usuário, tornando os sites mais imersivos e responsivos. As interações Divi 5 ajudam a manter os visitantes em seu site, incentivando a interação, como clicar em alternar para revelar preços alternativos ou desencadear pop-ups para captura de chumbo. Por exemplo, um site de restaurante poderia usar uma animação acionada por rolagem para revelar uma seção de menu.

Dicas práticas para começar

Para aproveitar ao máximo as interações Divi 5, aborde -a estrategicamente para garantir resultados ideais. Aqui estão algumas dicas para guiá -lo pelo processo:

• Comece simples: comece com interações diretas, como pop-ups ou alternar para se familiarizar com o recurso antes de enfrentar efeitos avançados, como movimento de mouse ou animações de vários gatilho.
• Use o campo do rótulo do administrador: rotular suas interações e elementos é crucial, especialmente em páginas complexas com várias seções. Adicionar um nome ao campo da etiqueta do administrador na guia Conteúdo de cada módulo permite manter as coisas organizadas e reconhecer facilmente o elemento de destino certo.
• Use Predelect: o sistema predefinido da Divi 5 é ótimo para economizar tempo e manter a consistência nas interações. As predefinições permitem definir estilos reutilizáveis, como uma animação de desbotamento ou transição colorida, e aplique-os a vários elementos.
• Teste minuciosamente: sempre visualize suas interações usando o recurso de pré -visualização do Divi 5 para obter problemas antes da publicação. Você também pode usar os pontos de interrupção responsivos personalizáveis do Divi 5 para testar como as interações se comportam em todos os dispositivos.

Eleve seu site com interações divi 5

As interações Divi 5 são o recurso perfeito para criar elementos interativos envolventes e sem código para aumentar a experiência do usuário do seu site. A partir de pop-ups que capturam as animações acionadas por rolagem que dão vida a seus designs, esse recurso permite que qualquer pessoa crie sites dinâmicos e profissionais sem tocar em uma linha de código. Sua integração leve e opções de gatilho diversas o tornam uma ferramenta essencial para o design da web moderna.

Pronto para começar? Faça o download do mais recente Divi 5 Alpha e mergulhe em interações para criar pop-ups, conteúdo alternado, efeitos de rolagem e muito mais. Uma nota rápida: o Divi 5 está pronto para novos sites, mas ainda não recomendamos usá -lo em sites existentes.

Comente abaixo ou entre em contato com nossos canais de mídia social para compartilhar suas criações conosco. Adoraríamos vê -los!