Todas as cole√ß√Ķes
Construtor/Builder
Elementos
Como criar Pop-ups no RockFunnels ūüé•
Como criar Pop-ups no RockFunnels ūüé•

Saiba como inserir e configurar Pop-ups em suas p√°ginas.

Sylas avatar
Escrito por Sylas
Atualizado h√° mais de uma semana

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

Respondeu à sua pergunta?