Como adicionar um pop-up acionado por rolagem aos seus posts no Divi
Publicados: 2020-01-03Adicionar um pop-up acionado por rolagem às postagens do seu blog parece uma coisa muito inteligente. Você pode tê-los visto antes ao ler outros blogs. À medida que o usuário rola para um determinado ponto da postagem (geralmente o final), uma caixa contendo uma frase de chamariz aparece repentinamente. Todo o propósito de um pop-up acionado por rolagem é apresentar uma frase de chamariz direcionada aos visitantes no momento exato em que você deseja que eles a vejam na página. Resumindo, é uma ótima ferramenta para aumentar as conversões ou obter leads qualificados. Por causa disso, muitos plug-ins de aumento de conversão (como o nosso próprio Bloom ou o Optin Monster) permitem que você faça exatamente a mesma coisa.
Neste tutorial, mostraremos como adicionar um pop-up acionado por rolagem às postagens do seu blog no Divi do zero, sem um plug-in. Para fazer isso, usaremos o Divi Theme Builder para criar um pop-up que apresenta uma postagem relacionada por categoria e também um pop-up que inclui uma opção de e-mail. O acionamento da rolagem será realizado usando um pequeno trecho de jQuery.
Vamos começar!
Espiada
Aqui está uma rápida olhada nos pop-ups acionados por rolagem que iremos criar.
Criaremos um pop-up para revelar uma postagem relacionada (por categoria), conforme visto abaixo.
E também mostraremos como adicionar uma opção de e-mail ao pop-up, como visto aqui.
Baixe GRATUITAMENTE o modelo de postagem da Divi Popup Scroll Triggered
Para colocar suas mãos no modelo de postagem deste tutorial, você primeiro precisará baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e adicione um dos arquivos json no Divi Theme Builder usando a opção Theme Builder Portability.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará instalar e ativar o Divi Theme. Certifique-se de que possui a versão mais recente do Divi.
Você precisará baixar o Fourth Theme Builder Pack, pois usaremos o modelo de postagem predefinido desse pacote para este tutorial.
Você também precisará de pelo menos algumas postagens de blog criadas para fins de teste para que o modelo de postagem mostre os resultados.
Depois disso, você está pronto para ir.
Criação de um pop-up acionado por rolagem no final de suas postagens de blog Divi
Importando o Modelo de Postagem de Blog do Quarto Pacote de Construtor de Tema
No painel do WordPress, navegue até Divi> Theme Builder. No construtor de tema, selecione o ícone de portabilidade na parte superior direita da página. No pop-up de portabilidade, selecione a guia de importação, escolha o arquivo theme-builder-pack-4-post-template.json e clique no botão de importação. (Este arquivo de importação estará dentro da pasta Fourth Theme Builder Pack)
Você também pode selecionar a opção de importar o cabeçalho global e o rodapé como layouts estáticos.
Após a importação do modelo, clique no ícone para editar a área personalizada do corpo.
Isso o levará ao editor de layout do modelo de corpo, onde adicionaremos os pop-ups acionados por rolagem.
Projetando o pop-up acionado por rolagem com uma postagem relacionada por categoria
O pop-up será contido por uma linha Divi. Portanto, assim que colocarmos a funcionalidade pop-up no lugar, você pode preencher essa linha com qualquer módulo para criar qualquer conteúdo que desejar. Para este primeiro exemplo, criaremos um pop-up com uma postagem relacionada por categoria. Dessa forma, quando um visitante rolar para o final da postagem, ele receberá uma postagem relacionada sugerida em um pop-up.
Veja como fazer.
Adicionar linha de uma coluna
Primeiro, adicione uma linha de uma coluna logo abaixo da linha que contém o módulo de conteúdo da postagem no layout do modelo de postagem.
Configurações de linha
Antes de adicionar um módulo, atualize as configurações de linha da seguinte maneira:
- Cor de fundo: #ffffff
- Largura da calha: 1
- Largura: 300 px (desktop), 200 px (telefone)
- Preenchimento: 20px superior, 0px inferior
- Sombra da caixa: veja a imagem
Adicionar Módulo de Texto
Depois que as configurações de linha forem personalizadas, adicione um módulo de texto à linha. Esta será a área de título de nosso pop-up de postagem relacionada.
Contente
Atualize o conteúdo do corpo com o texto “Postagem Relacionada”.
Projeto
Em seguida, atualize as configurações de design da seguinte forma:
- Fonte do Texto: Heebo
- Estilo da fonte do texto: TT
- Cor do texto do texto: # f94857
- Alinhamento de texto: centro
Adicionar Módulo de Blog
No módulo de texto, adicione um módulo de blog.
Contente
Uma vez que queremos destacar apenas uma postagem relacionada, vamos limitar a contagem de postagens a uma e incluir a “categoria atual” para que a postagem exibida no pop-up compartilhe a mesma categoria da postagem real exibida no modelo.
Atualize o seguinte:
- Post Count: 1
- Categorias incluídas: categoria atual
Elementos
No grupo de opções de elementos, certifique-se de selecionar para mostrar apenas a imagem em destaque. Esconda tudo o mais.
Projeto
Na guia de design, atualize o seguinte:
- Fonte do título: Heebo
- Peso da fonte do título: Ultra negrito
- Tamanho do texto do título: 16px
- Altura da linha de título: 1,4em
- Preenchimento: 5% superior, 5% esquerdo, 5% direito
Configurações avançadas de linha
Classe CSS, CSS personalizado e índice Z
Na guia avançada, precisamos dar à nossa linha uma classe CSS, um pouco de CSS customizado, e atualizar o índice z para que o pop-up fique acima do outro conteúdo na página.
Esta etapa irá ocultar a linha da visualização ao usar o construtor visual no front end. Portanto, pode ser melhor implantar a visualização wireframe antes de atualizar essas opções.
Uma vez no modo de visualização de wireframe, abra as configurações de linha novamente e adicione a seguinte classe CSS:
- Classe CSS: post-row
Em seguida, adicione o seguinte css personalizado ao elemento principal:
position: fixed; bottom: 0%; right: -300px;
E atualize o Z Index:
- Índice Z: 999
Adicionar divisores como pontos de gatilho de rolagem
Neste ponto, nosso pop-up está pronto para funcionar. Agora precisamos decidir onde adicionar nossos pontos de gatilho de rolagem no modelo de postagem, de modo que, assim que o usuário rolar para esses pontos, o pop-up seja mostrado ou oculto. Os pontos de gatilho de rolagem serão determinados por um elemento com uma classe CSS. Como queremos que o ponto de gatilho de rolagem fique na parte inferior da postagem, podemos usar um divisor com uma classe CSS como nosso elemento de ponto de gatilho de rolagem.
Adicionar Scroll Trigger Point # 1
Para adicionar nosso primeiro ponto de gatilho de rolagem, vamos adicionar um módulo divisor diretamente sob o módulo de conteúdo de postagem.
Em seguida, adicione a seguinte classe CSS:
- Classe CSS: pós-waypoint
Essa foi fácil.
Adicionar Scroll Trigger Point # 2
Agora, para adicionar o segundo ponto de disparo (aquele que ocultará o pop-up mais abaixo na página), copie o módulo divisor recém-criado.
Em seguida, cole-o em um local mais abaixo no modelo de postagem onde você deseja que o pop-up seja fechado (ou oculto). Para este exemplo, estou adicionando logo abaixo do módulo de blog de postagens relacionadas e logo acima da seção de comentários do modelo de postagem.
Adicionar código personalizado com módulo de código
Tudo o que resta fazer para que esse pop-up acionado por rolagem funcione é um pequeno código.
Vá em frente e adicione um módulo de código ao modelo de postagem.
Em seguida, cole o seguinte código na caixa de código:
<style>
.post-row {
transition: all .4s;
}
.post-row.show-post {
right: 0px;
}
</style>
<script>
jQuery(document).ready(function($) {
$('.post-waypoint').waypoint(function() {
$('.post-row').toggleClass('show-post');
}, {offset: '97%'});
});
</script>
Resultado
Para ver o resultado, visite uma das postagens do seu blog e role a página para baixo. Você deverá ver o pop-up da postagem relacionada quando chegar ao final do conteúdo da postagem. Continue rolando para vê-lo oculto logo após a seção de postagens relacionadas da postagem.
Adicionar um Email Optin ao Scroll Triggered Pop-Up
O pop-up da postagem relacionada é legal, mas talvez você queira que um e-mail opte por aparecer. Isso é fácil de fazer. Na verdade, podemos até usar o optin de e-mail já projetado no layout de rodapé predefinido neste modelo.
Salvar rodapé e-mail Optin to Divi Library
Salve seu layout e saia para o construtor de tema. Em seguida, clique para editar o layout do modelo de rodapé personalizado.
Encontre o módulo optin de email e salve-o na biblioteca divi.
Adicionar ativação de e-mail salvo à linha pop-up
Agora volte para o layout do modelo de corpo personalizado e adicione o e-mail salvo optin na mesma linha que você está usando como pop-up. Lembre-se de que qualquer coisa dentro dessa linha será exibida como conteúdo pop-up.
Como você não está usando o módulo de texto e blog, pode desabilitá-los para que não sejam vistos no front end.
Configurações de ativação de e-mail
Assim que a opção de e-mail estiver em vigor e os outros módulos forem desativados, atualize as configurações de opção de e-mail da seguinte forma:
- Título: “Gostou deste artigo?”
- Corpo: “Junte-se ao nosso boletim informativo!”
Em seguida, adicione o seguinte preenchimento:
- Preenchimento: 5% inferior, 20px direito
Resultado
Agora verifique o resultado em uma postagem ao vivo.
Pensamentos finais
Pop-ups acionados por rolagem definitivamente podem ser um recurso valioso para o seu blog. Eles fornecem uma maneira discreta de capitalizar em leads qualificados. Use um pop-up de postagem relacionado para mantê-los engajados em seu site ou use um email optin para ajudar a aumentar sua lista. E com o Divi, você pode adicionar praticamente qualquer outro conteúdo que imaginar. E você pode decidir exatamente quando deseja que o visitante veja esses pop-ups, o que é muito poderoso. Espero que seja útil para o seu próprio blog ou próximo projeto.
Estou ansioso para ouvir de você nos comentários abaixo.
Saúde!