Como criar pop-ups de canto de conteúdo bloqueado com Divi

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.

Esta semana, como parte de nossa iniciativa de design Divi em andamento, mostraremos como criar pop-ups de canto de conteúdo bloqueado com Divi e o Resort Layout Pack. O conceito de um formulário optin de conteúdo bloqueado é simples. As pessoas precisam inserir seu endereço de e-mail e, assim que o fizerem, o conteúdo oculto será revelado. Você pode usar esse conteúdo oculto para compartilhar um código de desconto, por exemplo. Para fazer tudo isso acontecer, vamos usar o plugin Bloom e adicionar o shortcode do formulário optin de conteúdo bloqueado a um Módulo de Texto que estilizaremos como um pop-up. O Módulo de Texto também incluirá uma animação com um atraso de animação para fazer o Módulo de Texto aparecer como se fosse um pop-up.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Instale o plug-in Bloom

Baixar Bloom

A primeira coisa que você precisa fazer é baixar o plugin Bloom. Se você já é um membro do Elegant Themes, pode encontrar o plugin na área de membros. Lá, você poderá baixar o arquivo compactado. Se você ainda não for um membro Elegant Themes, primeiro será necessário adquirir uma assinatura.

Carregar e instalar o Bloom

Depois de baixar o Bloom, você pode ir em frente e enviá-lo para o seu site WordPress acessando Plug - ins> Adicionar novo e clicando em 'Carregar plug-in' no topo da página.

Em seguida, carregue o arquivo compactado e clique em 'Instalar agora'.

Não se esqueça de ativar o plugin depois de carregado também.

Configurar formulário Bloom Optin

Adicionar novo formulário de conteúdo bloqueado

Agora podemos começar a criar o formulário de conteúdo bloqueado que iremos, mais tarde neste post, usar em nosso design Divi! Vá para o seu WordPress Dashboard> Bloom> Formulários de optin e crie um novo formulário de optin.

Continue selecionando o tipo de opção 'Conteúdo bloqueado' e prossiga para as configurações de configuração.

Configurações de configuração

Assim que estiver nas configurações, você precisará dar um nome ao seu novo formulário de adesão. Você também precisará selecionar um provedor de e-mail de sua escolha e inserir os detalhes de autenticação.

Configurações de design

A próxima etapa é projetar o formulário. Posteriormente na postagem, usaremos o shortcode do formulário de optin em um Módulo de Texto que estilizaremos, então não precisamos de muitas configurações sendo aplicadas ao formulário de optin em si. Certifique-se de deixar as caixas de título e conteúdo da mensagem de aceitação vazias. Altere também a orientação da imagem.

• Orientação da imagem: sem imagem

Role a página para baixo e faça algumas alterações adicionais no estilo optin e na configuração do formulário.

• Cor de fundo: #ffffff
• Orientação do formulário: formulário na parte inferior

Também estamos mudando as configurações de estilo do formulário.

• Orientação do campo do formulário: campos do formulário empilhados
• Cor de fundo do formulário: # f4f4f4
• Cor do botão: #ffffff
• Cor do texto do botão: escuro
• Escolha o estilo de borda do formulário: segunda opção

Crie Design com Divi

Adicionar nova linha

Estrutura da Coluna

Agora podemos mudar para o Divi Builder! Vá em frente e crie uma nova página usando a página inicial do Resort Layout Pack. Assim que o layout for carregado, continue adicionando uma nova linha no topo da segunda seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e faça algumas alterações nas configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Vá para as configurações de espaçamento a seguir e adicione '0px' ao preenchimento superior e inferior da linha. Isso limitará o espaço que está sendo ocupado pela nova linha que adicionamos.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar Módulo de Texto

Adicionar conteúdo H3

O único módulo de que precisamos para criar o pop-up de canto de conteúdo bloqueado é um Módulo de Texto. Adicione um título H3 de sua escolha à caixa de conteúdo.

Adicionar código abreviado de formulário de optin de conteúdo bloqueado

Em seguida, volte para o plugin Bloom e copie o shortcode do formulário optin que você criou na parte anterior deste tutorial.

Adicione qualquer conteúdo que você deseja que apareça depois que as pessoas preencherem o formulário de inscrição. No exemplo abaixo, você pode notar que estamos compartilhando um código de cupom, mas você pode compartilhar qualquer tipo de informação que desejar.

Cor de fundo

Vá para as configurações de fundo do módulo a seguir e adicione uma cor de fundo completamente branca.

• Cor de fundo: #ffffff

Configurações de texto

Vá para a guia de design e altere as configurações de texto a seguir.

• Fonte do texto: Open Sans
• Cor do texto: # 0f87ff
• Tamanho do texto: 15px

Configurações de texto H3

Altere a fonte que está sendo usada para sua cópia H3 também.

• Fonte do Título 3: Visor Gilda

Espaçamento

E para dar uma forma ao módulo, vamos adicionar alguns valores de margem e preenchimento personalizados. Também estamos modificando todos esses valores para fazer com que o design corresponda ao tamanho de tela que seus visitantes estão usando.

• Margem superior: -17vw
• Margem esquerda: 65vw (desktop), 37vw (tablet), 3vw (telefone)
• Margem direita: 0px
• Preenchimento superior: 5vw (desktop), 11vw (tablet), 13vw (telefone)
• Preenchimento inferior: 5vw, 11vw (tablet), 13vw (telefone)
• Preenchimento esquerdo: 6vw (desktop), 11vw (tablet), 16vw (telefone)
• Preenchimento direito: 6vw (desktop), 11vw (tablet), 16vw (telefone)

Fronteira

Continue indo para as configurações de borda do Módulo de Texto e adicione '500vw' a cada um dos cantos, exceto para o canto inferior direito.

Sombra da caixa

Adicione uma sombra de caixa ao lado para fazer o Módulo de texto se destacar.

• Força do desfoque de sombra da caixa: 150 px
• Cor da sombra: rgba (0,0,0,0.3)

Animação

Por último, também estamos adicionando uma animação que vai da direita para a esquerda para criar o efeito pop-up.

• Repetição de animação: uma vez
• Direção da animação: esquerda
• Duração da animação: 500ms
• Atraso de animação: 1000 ms
• Intensidade de animação: 16%

Clone Row

Depois de criar o primeiro pop-up de canto de conteúdo bloqueado, você pode prosseguir e clonar a linha inteira.

Coloque a linha duplicada aqui:

Remover o acolchoamento inferior da seção

Remova o preenchimento inferior da seção em que você colocou a linha.

• Preenchimento inferior: 0 px

Alterar as configurações de espaçamento do módulo de texto

Em seguida, abra as configurações do Módulo de texto e altere os valores de margem personalizados.

• Margem esquerda: 0vw
• Margem direita: 65vw (desktop), 37vw (tablet), 3vw (telefone)

Alterar Módulo de Texto Cantos Arredondados

Certifique-se de alterar os cantos arredondados também. Estamos usando '500vw' para cada um dos cantos, exceto para o canto inferior esquerdo.

Alterar as configurações de animação do módulo de texto

Por último, mas não menos importante, mude a direção da animação para a direita e pronto!

• Direção da animação: direita

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela!

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como criar pop-ups de canto de conteúdo bloqueado com Divi, o plugin Bloom e o Resort Layout Pack. Você pode usar essa técnica para convencer as pessoas a fazerem parte da sua lista de e-mail, oferecendo um código de cupom que aparece assim que elas preenchem o formulário. Este tutorial é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!