Pop-up é um elemento que pode aumentar muito a conversão do seu site ou landing page sem atrapalhar a experiência do usuário. Com pop-ups você pode usar o conceito de “micro comprometimento” com seus visitantes ao deixar, por exemplo, seus formulários de cadastro mais escondidos e não tão aparentes em suas páginas.
Primeiro você passa a mensagem e, depois que o visitante se interessar e clicar em algum botão de conversão, você apresenta o formulário dentro de um pop-up. Ou seja, após o primeiro clique no botão de conversão, é provável que devido a esse “micro comprometimento” inicial, seu visitante continue o fluxo e insira seus dados de contato.
Além disso, você também pode usar pop-ups para chamar atenção dos visitantes para algo importante ou até mesmo tentar uma “última conversão” antes do visitante sair da sua página.
Em caso de dúvidas sobre como adicionar Pop-ups em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
Para adicionar um Pop-up em suas páginas, adicione um elemento e selecione o tipo de Pop-up que deseja inserir.
Após adicionar o Pop-Up em sua página, no topo central da tela, aparecerá uma mensagem informando que a sua página possui um Pop-up, especificando qual é o tipo de Pop-Up (barra cinza com texto verde neon). Para editar seu pop-up basta clicar no texto verde com o código ou nome do Pop-up.
Ao clicar no texto verde com o código ou nome do Pop-up, será apresentado na tela o elemento Pop-up, que você poderá:
· Fechar ao clicar no ícone em formato X
· Excluir ao clicar no ícone em formato de lixeira
· Acessar as configurações gerais ao clicar no ícone de engrenagem.
Cada tipo de Pop-up tem configurações gerais e especificas conforme veremos mais a frente nesse tutorial.
A construção de um elemento Pop-up segue os mesmos padrões de criação de uma página do RockFunnels, sendo assim terá acesso a todos os elementos que disponibilizamos para que possa inserir em um Pop-up seguindo a mesma sequência de criação:
Seção/Container > Linhas/Colunas > Elementos.
No RockFunnels disponibilizamos 3 tipos de Pop-Up que podem ser adicionados em suas páginas.
Abaixo veremos como funcionam e como configurar cada um deles ao clicar no ícone de engrenagem do elemento:
Pop-Up
Esse é o Pop-up tradicional, que para ser exibido na tela precisa ser acionado através de uma ação, como clicar em um botão, imagem ou texto.
Para configurar a ação de abrir um Pop-Up, selecione o elemento que será responsável por abrir o pop-up (Botão, Imagem ou Texto).
Em caso de dúvidas sobre como configurar elementos de botão, imagem ou texto, acesse nossos tutoriais sobre esses elementos no link abaixo:
Quando existe um Pop-up em sua página é disponibilizado em ‘configurar ação’ no botão, imagem ou texto a possibilidade de escolher a ação de Abrir Pop-Up e Selecionar Container, onde poderá selecionar o Pop-Up pelo nome definido por você ou gerado automaticamente pelo sistema.
Atenção: A ação de abrir um Pop-up ao clicar em um botão, imagem ou texto terá efeito apenas nas páginas publicadas.
Sair do Pop-up/ Pop-Up de Saída
Esse tipo de Pop-Up será aberto na página apenas se o usuário levar o cursor do mouse para fora da área da página no navegador (intenção de saída). Disparando o conteúdo que deseja compartilhar no Pop-up no caso de o usuário estar saindo da página.
Atenção: O Pop-up de saída tem ação apenas em páginas publicadas e quando a página é acessada através de computadores, não tendo ação em celulares.
Pop-Up de congelamento
Esse tipo de pop-up será disparado na página após um tempo determinado por você. Sendo assim, após o tempo configurado, o Pop-up será apresentado na tela com o conteúdo que deseja compartilhar. Esse tipo de pop-up causa uma “interrupção” na navegação e exige uma ação do visitante para que ele possa continuar navegando. Ou seja, ou ele terá que fechar o pop-up ou então efetuar a ação proposta dentro do pop-up (conversão).
Para determinar o tempo que o Pop-up de congelamento será disparado na tela, acione ícone de engrenagem > ajustes e configure o tempo conforme desejado em “Mostrar depois de”, preenchendo manualmente os campos H | M | S que representam horas, minutos e segundos (ou utilizando os ícones de seta para cima ou para baixo).
Atenção: O Pop-up de congelamento tem ação apenas nas páginas publicadas.
Os tipos de configurações que veremos abaixo, são comuns aos 3 tipos de Pop-up:
Ajustes
· Identificador do Pop-Up
Nesse campo é possível inserir um nome para identificar o seu pop-up. A identificação é importante para identificar o tipo de pop-up por um nome para que chame a ação dele em botões, imagens ou textos, por exemplo.
· Usuário pode fechar
Ao acionar a chave será disponibilizado ao usuário a possibilidade de fechar o Pop-up. Para desfazer a ação, desative a chave.
Posição
Nas configurações de posição é possível configurar o tamanho que o pop-up ocupará na tela em percentual (50 significa 50% da tela) e espaçamento interno (topo, baixo, esquerda, direita) do Pop-up, inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Atenção: Recomendamos não utilizar margens e espaçamentos negativos, pois eles podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.
Estilo
· Cor de fundo
Para inserir uma cor de fundo, clique no elemento de cor que então será habilitada a possibilidade de inserir a cor através da paleta de cores ou inserindo o código HEX da cor desejada. Também é possível configurar a cor gradiente, definindo uma orientação para a cor, ao acionar a chave. Para excluir uma cor, clique no ícone de lixeira.
· Imagem
Ao clicar na imagem abaixo do texto ‘Imagem’ terá acesso à biblioteca de imagens do RockFunnels ou poderá subir uma imagem do seu dispositivo.
· Borda | Radial | Sombra
Nas configurações de estilo é possível configurar borda e sombra no elemento. Para isso basta ativar as respectivas chaves que então será habilitada a possibilidade de inserir a cor da borda ou da sombra através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir uma cor, clique no ícone de lixeira.
Para ajustar o tamanho da borda, deslocar o efeito da sombra, esfumaçar ou editar a opacidade, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado. Para excluir uma cor, clique no ícone de lixeira.
Para configurar o radial basta ativar a respectiva chave e configurar os valores de radial manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Avançado
· Efeitos de movimento – Animação
Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.
Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
Comportamento:
- Uma vez > o efeito de animação será apresentado apenas uma vez.
- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).
Ativação:
- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso no elemento, ou seja, a imagem irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.
· CSS Classes
Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.
É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.
Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels
