Como construir um pop-up com as interações do Divi 5 (download gratuito)

Os pop-ups são uma ótima ferramenta para capturar atenção e impulsionar o envolvimento em seu site. Se você deseja aumentar sua lista de e-mails, promover uma oferta especial ou orientar os visitantes para uma ação específica, um pop-up bem projetado pode fazer toda a diferença. Com o lançamento das interações Divi 5, a criação de pop-ups dinâmicos personalizados nunca foi tão fácil.

Neste post, levaremos você a criar um pop-up usando o recurso de interações do Divi 5. Vamos mergulhar!

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

As interações Divi 5 são um novo recurso integrado ao Visual Builder, projetado para tornar os sites mais dinâmicos e envolventes. Ele permite criar animações e respostas personalizadas com base em ações do usuário ou eventos da página, como cliques, pairar ou rolagem. Ao contrário dos designs estáticos, as interações permitem criar pop-ups, alternar, movimentos de mouse e efeitos de rolagem, todos com a interface familiar da Divi.

Inscreva -se no nosso canal do YouTube

Componentes -chave das interações divi

Toda interação no Divi 5 consiste em três componentes principais:

• Trigger: o evento que inicia a interação, como clique, mouse ou um elemento que entra ou sai da viewport.
• Efeito: a ação que ocorre quando o gatilho é ativado, como alternar a visibilidade, aplicar um estilo predefinido ou alterar um atributo.
• Alvo: o elemento específico afetado pela interação, que pode ser o mesmo elemento, outra seção, linha, coluna ou módulo na página identificada por seu rótulo de administrador.

Esses componentes funcionam juntos, permitindo criar interações complexas com uma interface simples e sem código.

Por que você deve usar interações para criar pop-ups

As interações Divi 5 oferecem várias vantagens para a construção de pop-ups:

• Você não precisa de nenhum plug-ins: ao contrário dos construtores pop-up tradicionais, as interações Divi 5 são construídas diretamente no Visual Builder, eliminando a necessidade de plugins de terceiros.
• Localizado dentro do Visual Builder: você pode criar pop-ups usando a interface, módulos e opções de estilo familiar da Divi, facilitando os usuários de qualquer nível de habilidade.
• Opções e efeitos versáteis: combine pop-ups com outras interações, como animações baseadas em rolagem ou efeitos de movimento do mouse, para criar experiências únicas e envolventes.
• Controle total: personalize gatilhos, efeitos e metas para criar pop-ups para seus objetivos específicos, tudo sem escrever código.

Guia passo a passo para construir um pop-up no Divi 5

Criar um pop-up no Divi 5 é direto, facilitando o design existente do seu site. Nesta seção, demonstraremos como é fácil criar um pop-up para corresponder a um de nossos layouts pré-fabricados, mostrar como estilizá-lo e definir as interações para exibir o pop-up com um atraso cronometrado.

1. Instale um pacote de layout

Para este tutorial, simplificaremos as coisas começando com um de nossos designs de pacote de layout e construindo um pop-up com os mesmos estilos. Para fazer isso, clique no ícone + no canto superior esquerdo do Visual Builder.

Quando a caixa de diálogo aparecer, escolha o layout pré -fabricado nas opções disponíveis.

Clique na miniatura do Pacote de Layout de Aprendizagem Online para destacar as páginas disponíveis.

Selecione o design da página de destino e clique em usar este layout para carregá -lo no Visual Builder.

A última etapa para importar o pacote de layout é escolher se deve importar predefinições. Depois de fazer uma escolha, clique no botão Importar.

2. Crie uma seção para o pop-up

Agora que o pacote de layout é importado, devemos criar uma nova seção para o nosso pop-up na parte inferior da página. Role até o final da página e adicione uma nova seção.

Clique no ícone para inserir uma nova linha. Escolha a segunda opção em colunas de deslocamento .

3. Projete o pop-up

Agora podemos começar a adicionar conteúdo ao nosso pop-up. Quando a caixa de diálogo Módulo de Inserção ou linha aparecer, clique para adicionar um módulo de cabeçalho .

Digite “Quer 15% de desconto?” no campo de título na guia Conteúdo.

Para manter os designs consistentes em toda a página, você pode usar o recurso Atributos do Divi 5 para copiar as configurações de outro módulo de cabeçalho para o nosso pop-up. Na seção diretamente acima, passe o mouse sobre o módulo de cabeçalho, clique com o botão direito do mouse e clique em Copiar Atributos .

Em seguida, passe o mouse sobre o módulo de cabeçalho que acabamos de criar, clique com o botão direito do mouse, selecione os atributos de pasta e clique em Colar atributos de design de texto . Isso colará os estilos do outro módulo de título, permitindo a consistência do projeto.

Sob o módulo de título, adicione um novo módulo de texto .

Como no módulo de título, localize o módulo de texto na seção acima, clique com o botão direito do mouse e selecione Copiar Atributos . A partir daí, clique no novo módulo de texto, toque em atributos de pasta e colar atributos de design de texto .

Você pode adicionar seu texto ao campo de texto ou usar o Divi AI para gerá -lo para você.

Em seguida, adicionaremos um módulo de operação de e-mail no módulo de texto.

A seção acima possui um módulo de inscrição em e-mail, para que você possa copiar seus atributos e colá-los no novo e-mail Opt-in que adicionamos ao nosso pop-up.

O último passo é adicionar uma imagem à coluna certa do nosso pop-up. Localize o módulo de imagem e adicione -o à 2ª coluna do nosso layout.

Carregue uma imagem e adicione -a ao módulo de imagem. A essa altura, sua seção deve parecer semelhante a isso:

4. Crie um botão de fechamento

Agora que o design do nosso pop-up está em vigor, precisamos adicionar uma nova linha acima para adicionar um ícone de botão de fechar. Isso permitirá que seus visitantes fechem o pop-up para sua conveniência. Clique no ícone Green + para adicionar uma nova linha.

Quando a caixa de diálogo Inserir linha aparecer, clique no layout da coluna única em colunas iguais para adicioná -la à seção.

Clique para adicionar um módulo de ícone à linha.

Selecione o ícone Fechar nas opções disponíveis. Ele pode ser facilmente localizado digitando "Fechar" na caixa de pesquisa acima da lista de ícones.

Mude para a guia Design e insira as seguintes configurações de design:

• Cor do ícone: #5344B9
• Tamanho do ícone: 36px
• Alinhamento: certo

A última etapa é mover a linha acima da linha de duas colunas que contém o conteúdo do nosso pop-up. Use a visualização das camadas para reorganizar as linhas para a ordem correta. Enquanto estiver lá, renomeie a seção para aparecer .

5. Ajuste as configurações da seção

Antes de criar nossas interações, precisamos garantir que o pop-up seja dimensionado adequadamente para a largura do navegador. Não queremos que seja um pop-up de largura total, então navegue até o design para fazer alguns ajustes. Expanda o menu suspenso de dimensionamento para revelar as configurações.

No campo de largura , digite 80% para a largura. Em seguida, defina a opção de alinhamento da seção para o centro .

Sob borda , defina um raio de borda de 10px.

Também adicionaremos uma sombra de caixa para que nosso pop-up se destaque sobre o restante do conteúdo. Localize o menu suspenso Shadow Shadow e expanda-o. Sob sombra da caixa , escolha predefinição 1 .

Por fim, vá para a guia Conteúdo para adicionar uma cor para o plano de fundo da nossa seção pop-up.

6. Crie a interação para exibir o pop-up

Com o design no lugar, podemos definir nossas interações. Definiremos nossa seção pop-up para exibir 5 segundos depois que um usuário aterrissar na página. Navegue até a guia avançada da seção e localize o menu suspenso interações . Clique em + Adicionar interação para iniciar.

Escolha Carregar nas opções disponíveis. Essa configuração permitirá que o pop-up apareça no carregamento da página.

Quando a caixa de diálogo Editar interação aparecer, insira as seguintes configurações e clique em Salvar :

• Rótulo de administrador: interação pop-up
• Evento de gatilho: carregar
• Ação de efeito: mostrar elemento
• Módulo de destino: Seção (pop-up)
• Atraso de tempo: 5 segundos

Em seguida, precisamos adicionar uma interação para o botão Fechar. Selecione o módulo de ícone na primeira linha da nossa seção pop-up. Navegue até a guia Avançado, clique em + Adicionar interação e insira as seguintes configurações e salve:

• Rótulo de administrador: Fechar pop-up
• Evento de gatilho: clique
• Ação de efeito: alternar a visibilidade
• Módulo de destino: Seção (pop-up)
• Atraso no tempo: 0

7. Teste e refine seu pop-up com pontos de interrupção responsivos personalizáveis do Divi 5

Antes de prosseguir para a última etapa, é uma boa ideia usar pontos de interrupção responsivos personalizáveis do Divi 5 para garantir que seu pop-up pareça bom em todos os tamanhos de tela. No Divi 5, agora existem 7 pontos de interrupção para escolher.

Por padrão, apenas três estão ativados. Ter 7 permite que você teste seu pop-up em mais pontos de interrupção, garantindo uma experiência contínua do usuário com qualquer tamanho de tela. Para permitir todos os 7, clique no menu Ellipsis no meio superior da barra de administração. A partir daí, ative todos os pontos de interrupção, atribuindo -os.

O novo sistema de layout do Flexbox da Divi 5 permite que você faça alterações facilmente para garantir que seu pop-up pareça ótimo em qualquer dispositivo. Por exemplo, você pode usar o campo de estrutura de alterações do Divi 5 para alterar o número de colunas exibidas em dispositivos menores. Esta opção empilhará o conteúdo no celular com um clique.

8. Defina as opções de exibição

Para que o seu pop-up seja exibido corretamente, precisamos ajustar a visibilidade, o posicionamento e o índice z da seção pop-up. Isso permitirá que seu pop-up seja exibido onde você deseja, mantenha-o oculto até a hora de exibir e garantir que ele apareça acima do restante do conteúdo da página.

Navegue até a guia avançada para a seção pop-up. Localize o menu suspenso de visibilidade . Clique para desativar a seção em todas as visualizações (telefone, tablet e desktop).

Em seguida, clique no menu suspenso Posição. Defina a posição para corrigir e escolha uma origem deslocada. Por fim, adicione um índice Z de 99999 para garantir que os exibos pop-up acima do restante do conteúdo da página.

Depois que todas as configurações estiverem no lugar, salve a página e visualize -a em outra guia. O pop-up deve ser exibido em 5 segundos após o carregamento da página. Você também deve ser capaz de fechar o pop-up usando a interação estreita que criamos.

Opções avançadas de personalização pop-up

As interações Divi 5 permitem levar o seu pop-up para o próximo nível com recursos avançados, como condições de exibição, combinação de efeitos ou até mesmo usando o Divi AI para gerar pop-ups. Vejamos algumas maneiras pelas quais você pode tornar seus pop-ups mais avançados sem precisar de CSS ou trechos de JavaScript personalizados.

Exibir condições

Você pode usar as opções de condição da Divi para mostrar o pop-up com base no comportamento do usuário, como as funções do usuário. Por exemplo, você pode mostrar o pop-up apenas para os usuários conectados para incentivar as inscrições.

Você também pode permitir que as condições exibam o pop-up com base nas visitas de página. Por exemplo, você deve desativar o pop-up se um usuário específico já tiver visitado a página. Você também pode configurá -lo para exibir apenas se um usuário não tiver visitado a página. Isso pode ser útil para visitantes que encontram seu site através de uma página diferente e clique na página inicial a seguir.

Combine efeitos

Você pode aprimorar seu pop-up com animações baseadas em rolagem ou efeitos de movimento do mouse. Estes podem ser adicionados como interações adicionais selecionando gatilhos e efeitos adicionais. As interações podem ser combinadas e não há limite para o número que você pode criar. Por exemplo, você pode aplicar facilmente uma interação na imagem em nosso pop-up usando efeitos de movimento do mouse.

Integração Divi AI

Acelere o processo de design usando o Divi AI para gerar um layout. Você pode instruir o Divi AI a criar seções específicas, incluindo uma que você pode converter em um pop-up. No exemplo abaixo, pedimos à Divi Ai que criasse um layout para um treinador de negócios, completo com uma seção CTA que podemos transformar em um pop-up.

Melhores práticas para pop-ups eficazes

Para garantir que seu pop-up melhore a experiência do usuário e impulsione os resultados, considere estas melhores práticas:

1. Mantenha-o fácil de usar

Evite pop-ups intrusivos usando atrasos cronometrados, entre 5 e 10 segundos, em vez de gatilhos imediatos. Isso dá aos usuários tempo para se envolver com seu conteúdo antes de serem solicitados. O lançamento de um pop-up muito cedo pode ser perturbador, fazendo com que os usuários fechem o pop-up e potencialmente perdem uma promoção, inscrição no boletim ou outra ação importante que você deseja que eles tomem.

Defina um atraso cronometrado no seu pop-up para evitar a perda de envolvimento do usuário.

Além disso, sempre inclua um botão de fechamento claro e facilmente identificável para que os usuários possam descartar o pop-up e manter uma experiência de navegação positiva.

2. Otimize para o desempenho

A otimização de desempenho é fundamental para pop-ups eficazes. Para manter os tempos de carregamento rápido, minimize animações pesadas ou imagens grandes e não otimizadas. Opte por imagens compactadas e limite os efeitos complexos para garantir uma experiência rápida e perfeita, especialmente para usuários em conexões mais lentas ou dispositivos móveis. Essa abordagem melhora a satisfação do usuário e suporta melhores taxas de engajamento e conversão.

3. Design pop-ups com padrões de acessibilidade em mente

A acessibilidade é outra consideração importante para tornar seu pop-up inclusivo para todos os usuários. Sempre adicione o texto ALT descritivo às imagens para ajudar os leitores de tela, garantir alto contraste entre texto e plano de fundo para obter legibilidade e use tamanhos de fontes de 16px ou maior para acomodar usuários com deficiências visuais.

Essas práticas ajudam a garantir que seu pop-up seja acessível a um público diversificado, alinhando-se aos padrões de acessibilidade da Web.

4. Teste em todos os tamanhos de tela

Por fim, teste minuciosamente seu pop-up em todos os tamanhos de tela para garantir uma experiência consistente em todos os dispositivos. Aproveite os pontos de interrupção responsivos personalizáveis do Divi 5 para garantir que seu pop-up pareça ótimo e funcione como pretendido em desktops, tablets e smartphones.

Preste muita atenção ao botão Fechar para garantir que ele funcione como deveria e que o texto seja legível em telas menores. Além disso, verifique o espaçamento, o dimensionamento e o layout conforme necessário para fornecer uma aparência profissional e polida.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

Crie pop-ups com interações divi 5

O recurso de interações do Divi 5 facilita a criação de um pop-up, permitindo que você crie projetos personalizados e envolventes diretamente no Visual Builder. A combinação de gatilhos, efeitos e metas permite criar pop-ups que capturam atenção e conduzem conversões enquanto combinam perfeitamente com o design do seu site. Explore outros recursos, como grupos de módulos e linhas aninhadas para criar layouts pop-up ainda mais dinâmicos.

Você está pronto para experimentar o Divi 5? Faça o download do mais recente Divi 5 Public Alpha, experimente interações e compartilhe seus pensamentos na seção de comentários abaixo. Compartilhe suas criações conosco em nossos canais de mídia social e visite nosso blog para obter mais tutoriais usando os recursos inovadores do Divi 5. Estamos ansiosos para ver o que você cria!